Cómo agregar un logotipo receptivo a su módulo de menú de ancho completo en Divi

[ad_1]

¿Sabías que más del 50 por ciento del tráfico de Internet proviene de dispositivos móviles? Eso significa que la versión móvil de su sitio web es extremadamente importante e incluso puede ser la forma principal en que alguien visitará su página. Asegurarse de que su sitio web sea receptivo y compatible con dispositivos móviles es un paso esencial en el diseño de un sitio web. En este tutorial, le mostraremos cómo agregar un logotipo receptivo a su módulo de menú de ancho completo utilizando las opciones de respuesta integradas de Divi. Esto le permitirá agregar un logotipo más grande o más complejo que aparecerá en pantallas más grandes y un logotipo más pequeño o más simple que aparecerá en pantallas más pequeñas.

¡Vamos a sumergirnos!

Vistazo

Aquí hay una vista previa de lo que diseñaremos. La versión de escritorio del sitio web tendrá un logotipo ampliado con texto adicional, y la versión móvil del logotipo solo tendrá la marca del logotipo básico.

Logotipo receptivo Menú de ancho completo Móvil

Por qué necesita un logotipo receptivo

Antes de comenzar el tutorial, repasemos por qué podría necesitar un logotipo receptivo en su sitio web.

Primero, ¿qué es un logotipo receptivo? Un logotipo receptivo es una variación de su logotipo que puede ser más pequeño, más simple, abreviado o reorganizado para que sea más visible y legible en tamaños más pequeños. Si su logotipo tiene demasiados elementos detallados, es posible que no se vean bien en un tamaño más pequeño. Los tamaños de fuente pequeños y la tipografía adicional en un logotipo receptivo también pueden ser difíciles de leer en una pantalla pequeña. Al implementar un logotipo receptivo en su sitio web adaptado al tamaño de la pantalla del usuario, puede asegurarse de que la identidad de su marca esté claramente representada, pase lo que pase. Para ver algunos excelentes ejemplos de logotipos receptivos, ¡eche un vistazo a este sitio web!

Lo que necesitas para empezar

Primero, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web. A continuación, asegúrese de tener al menos dos versiones de su logotipo: una para la vista de escritorio de su sitio y otra para la vista móvil. Finalmente, descargue la plantilla de encabezado y pie de página para el paquete de diseño de escuela secundaria de Divi.

Ahora, ¡estás listo para comenzar!

Cómo agregar un logotipo receptivo a su módulo de menú de ancho completo en Divi

Importar el diseño de encabezado y pie de página

Navegue hasta Theme Builder desde el menú Divi en la barra lateral. Importe el diseño de encabezado y pie de página de la escuela secundaria seleccionando el icono de portabilidad. Seleccione la pestaña Importar y elija el archivo de diseño. Luego seleccione Importar plantillas de Divi Theme Builder.

Diseño de importación de menú de ancho completo con logotipo Divi Responsive

Editaremos el encabezado y agregaremos nuestro logotipo receptivo en el generador de temas. Haga clic en el icono del lápiz para editar el encabezado.

Crear el módulo de menú de ancho completo

Agregar una sección de ancho completo

Dado que el menú original está construido con un módulo de menú estándar, necesitaremos modificar el diseño para agregar un módulo de menú de ancho completo. Primero, agregue una sección de ancho completo al encabezado global debajo del menú existente.

Divi Responsive Logo Menú de ancho completo Agregar sección de ancho completo

En la configuración de la sección de ancho completo, vaya a Avanzado, luego a Efectos de desplazamiento.

  • Posición pegajosa: Stick to Top

A continuación, agregue el color de fondo.

  • Color de fondo: #f5f0eb

Fondo de la sección del menú de ancho completo del logotipo de respuesta de Divi

Agregue un color diferente para el fondo adhesivo.

  • Color de fondo adhesivo: #ffffff

Fondo adhesivo del menú de ancho completo del logotipo de respuesta de Divi

Agregar un módulo de menú de ancho completo

Ahora agreguemos el módulo de menú de ancho completo.

Divi Responsive Logo Menú de ancho completo Agregar módulo de menú

Abra la configuración del módulo y elimine el fondo.

Divi Responsive Logo Menú de ancho completo Eliminar fondo

Para replicar fácilmente el aspecto del menú original, podemos usar la función de copiar estilos para copiar algunas de las configuraciones personalizadas. Abra la configuración del menú original, luego haga clic derecho en Estilos de texto de menú y seleccione Copiar estilos de texto de menú.

Una vez copiado, haga clic en los tres puntos para el módulo de menú de ancho completo, luego seleccione Pegar estilos de texto de menú.

Ahora repetiremos los mismos pasos con la configuración del menú desplegable. Abra la configuración del menú original, luego haga clic con el botón derecho en Estilos de menú desplegable y seleccione Copiar estilos de menú desplegable. Haga clic en los tres puntos para el módulo de menú de ancho completo, luego seleccione Pegar estilos de menú desplegable.

Repita una vez más para los estilos de iconos. Abra la configuración del menú original, luego haga clic con el botón derecho en Estilos de iconos y seleccione Copiar estilos de iconos. Haga clic en los tres puntos para el módulo de menú de ancho completo, luego seleccione Pegar estilos de iconos.

Divi Responsive Logo Menú Ancho Completo Copiar Pegar Icono Estilos

Establezca la alineación del texto a la izquierda.

Alineación de texto de menú de ancho completo con logotipo Divi Responsive

Establezca la altura máxima del logotipo en Diseño, luego Espaciado.

Logotipo Divi Responsive Ancho completo Logotipo de menú Altura máxima

Agregue el siguiente CSS a la sección Enlace de menú en CSS personalizado.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Divi Responsive Logo Menú de ancho completo CSS personalizado

Finalmente, coloque el relleno superior e inferior.

  • Acolchado superior: 10px
  • Acolchado inferior: 10px

Divi Responsive Logo Menú de ancho completo Agregar relleno

Ahora elimine la sección del menú original.

Sección de eliminación de menú de ancho completo del logotipo de Divi Responsive

Agregar un logotipo receptivo

Ahora agregaremos el logotipo receptivo. Afortunadamente, Divi lo hace fácil con las opciones de respuesta integradas.

En General, abra la configuración del logotipo y cargue la versión de escritorio de su logotipo.

Divi Responsive Logo Menú de ancho completo Agregar logotipo

Seleccione el ícono del teléfono para usar las opciones receptivas, luego reemplace el logotipo móvil con su logotipo receptivo.

Divi Responsive Logo Menú de ancho completo Cargar Responsive Logo

Crear una nueva página con un diseño prefabricado

Para ver el menú de ancho completo con el logotipo receptivo en acción, creemos una nueva página con un diseño prefabricado de la biblioteca Divi. Para este diseño, usaremos la página de inicio de la escuela secundaria del paquete de diseño de la escuela secundaria para que coincida con el encabezado y el pie de página.

Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder. Dado que importamos el diseño de encabezado y pie de página como encabezado y pie de página global, use el diseño predeterminado para esta página.

Divi Responsive Logo Menú de ancho completo Crear página

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.

Divi Responsive Logo Menú de ancho completo Examinar diseños

Busque y seleccione el diseño de la página de inicio de la escuela secundaria.

Seleccione Usar este diseño para agregar el diseño a su página.

Diseño de uso del menú de ancho completo del logotipo de Divi Responsive

Resultado final

Ahora echemos un vistazo a nuestro diseño final.

Divi Responsive Logo Menú de ancho completo Diseño final

Logotipo receptivo Menú de ancho completo Móvil

Pensamientos finales

Tener un sitio web compatible con dispositivos móviles y receptivo es más importante que nunca. Y gracias a las opciones de respuesta integradas de Divi, ¡construir uno es más fácil que nunca! Con un logotipo receptivo, la identidad de su marca siempre será clara, sin importar el tamaño de la pantalla. Si está interesado en obtener más información sobre las opciones receptivas de Divi, consulte este tutorial sobre contenido testimonial receptivo. ¿Cómo ha implementado diseños receptivos en su sitio web? ¡Nos encantaría escuchar tus pensamientos en los comentarios!



[ad_2]

Source link