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

¿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!

Suscríbete a nuestro canal de Youtube

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.

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.

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.

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

Agregue un color diferente para el fondo adhesivo.

• Color de fondo adhesivo: #ffffff

Agregar un módulo de menú de ancho completo

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

Abra la configuración del módulo y elimine el 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.

Establezca la alineación del texto a la derecha.

• Alineación de texto: Derecha

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

• Altura máxima del logotipo: 50 px

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;

Finalmente, coloque el relleno superior e inferior.

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

Ahora elimine la sección del menú original.

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.

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

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.

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione 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.

Resultado final

Ahora echemos un vistazo a nuestro diseño final.

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!