ElegantThemes

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

¿Sabías que más del 50% del tráfico de Internet proviene de dispositivos móviles? Esto significa que la versión móvil de su sitio web es muy importante e incluso puede ser la forma principal en que las personas visitan sus páginas. Asegurarse de que su sitio web sea receptivo y compatible con dispositivos móviles es un paso importante en el diseño de su sitio web. En este tutorial, le mostraremos cómo agregar un logotipo receptivo a un módulo de menú de ancho completo utilizando las opciones de respuesta integradas de Divi. Esto le permitirá agregar logotipos más grandes o más complejos que aparecerán en pantallas más grandes y logotipos más pequeños o más simples que aparecerán en pantallas más pequeñas.

¡Vamos a sumergirnos!

Vistazo

Aquí hay una vista previa de lo que estaremos diseñando. La versión de escritorio del sitio tendrá un logotipo extendido con texto adicional, mientras que la versión móvil del logotipo solo tendrá el marcado básico del logotipo.

Logotipo receptivo Menú de ancho completo Móvil

¿Por qué necesita un logotipo receptivo?

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

En primer lugar, ¿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 tamaños más pequeños. Las fuentes pequeñas y la tipografía adicional en logotipos sensibles también son difíciles de leer en pantallas pequeñas. Al implementar un logotipo receptivo en su sitio web que se adapte al tamaño de la pantalla del usuario, puede asegurarse de que la identidad de su marca se muestre claramente pase lo que pase.Para ver algunos excelentes ejemplos de logotipos receptivos, consulte este sitio!

Artículo Recomendado:  Descargue una plantilla GRATUITA de encabezado y pie de página para el paquete de diseño de ONG de Divi

Qué necesitas para empezar

Primero, instala y activa el tema Divi y asegúrate de tener la última versión de Divi en tu 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 web y otra para la vista móvil. Finalmente, descargue las plantillas de encabezado y pie de página para el paquete de diseño de escuela secundaria de Divi.

¡Ahora puedes empezar!

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

Importar diseños de encabezado y pie de página

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

Diseño de importación de menú de ancho completo del logotipo de respuesta de Divi

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

1654421562 417 Como agregar un logotipo receptivo al modulo de menu de

Crear un módulo de menú de ancho completo

Agregar sección de ancho completo

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

El menú de ancho completo del logotipo de respuesta de Divi agrega una sección de ancho completo

En la configuración de la sección Ancho completo, navegue hasta Avanzado, luego Efectos de desplazamiento.

  • Posición pegajosa: adhiérase a la parte superior

1654421562 109 Como agregar un logotipo receptivo al modulo de menu de

A continuación, agregue un color de fondo.

  • Color de fondo: #f5f0eb

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

Agregue diferentes colores al fondo adhesivo.

  • Color de fondo fijo: #ffffff

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

Agregar 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.

El menú de ancho completo del logotipo de respuesta de Divi elimina el fondo

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

Una vez copiado, haga clic en los tres puntos del módulo de menú de ancho completo y seleccione Pegar estilo de texto de menú.

1654421562 435 Como agregar un logotipo receptivo al modulo de menu de

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

1654421562 115 Como agregar un logotipo receptivo al modulo de menu de

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

Divi Responsive Logo Menú Ancho Completo Copiar Pegar Estilo Icono

Establecer la alineación del texto a la izquierda.

  • Alineación de texto: Izquierda

Alineación del texto del menú de ancho completo del logotipo adaptable de Divi

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

  • Altura máxima del logotipo: 50 px

Logotipo adaptable de Divi, ancho completo, logotipo de menú, altura máxima

Agregue el siguiente CSS a la sección de enlaces 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.

  • Margen superior: 10px
  • relleno inferior: 10px

Menú de ancho completo del logotipo de respuesta de Divi Agregar relleno

Ahora elimine la sección del menú original.

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

Agregar logotipo receptivo

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

En General, abra 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 la opción receptiva, luego reemplace el logotipo del dispositivo móvil con su logotipo receptivo.

Divi Responsive Logo Menú de ancho completo Cargar Responsive Logo

Crear nuevas páginas con diseños prefabricados

Para ver un menú de ancho completo con un logotipo receptivo, creemos una nueva página usando los diseños prefabricados 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, asígnele un nombre y seleccione la opción Usar Divi Builder. Dado que importamos el diseño de encabezado y pie de página como encabezado y pie de página global, utilice el diseño predeterminado para esta página.

Página de creación de menú de ancho completo con logotipo adaptable de Divi

En este ejemplo, usaremos un diseño prefabricado de la biblioteca Divi, así que elija Examinar diseño.

Diseño de navegación del menú de ancho completo del logotipo adaptable de Divi

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

1654421562 152 Como agregar un logotipo receptivo al modulo de menu de

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 respuesta de Divi

resultado final

Ahora veamos 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á legible, independientemente del tamaño de la pantalla. Si está interesado en obtener más información sobre las opciones de respuesta de Divi, consulte este tutorial sobre recomendaciones de respuesta. ¿Cómo implementaste el diseño responsivo en tu sitio web? ¡Nos encantaría escuchar tus pensamientos en los comentarios!

La publicación Cómo agregar un logotipo receptivo a su módulo de menú de ancho completo en Divi apareció primero en The Elegant Themes Blog.

Artículo Recomendado:  Más de 40 marcas más famosas y conocidas que utilizan WordPress

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *