¿Le gustaría agregar un logotipo receptivo a su módulo de menú de ancho completo de Divi para que se adapte a la vista en movil?
¿Sabías que más del 50% de tráfico ¿Internet viene de los dispositivos móviles? Esto 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.
Asegúrese de que su Sitio web sea responsivo 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.
¡Empecemos!
vista
Aquí hay una vista previa de lo que estaremos diseñando. 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 básica del logotipo.
Lo que necesitas para empezar
Todo primero, instala y activa el tema Divi y asegúrese 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 y otra para la vista móvil. Finalmente, descarga la plantilla. Plantillas 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 encabezado de ancho completo en Divi
Crear el módulo de encabezado de ancho completo
Lea también: Divi: cómo mostrar el módulo de encabezado de ancho completo en pantalla completa
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 encabezado de ancho completo.
Primero, agregue una sección de ancho completo (Ancho total) al encabezado global bajo el menú existente.
En la configuración de la sección de ancho completo, navegue hasta TecnologíaY luego Efectos de desplazamiento.
- Posición pegajosa: Stick to Top
A continuación, agregue el color de fondo.
- Fondo: #f5f0eb
Agregue un color diferente para el fondo en el estado pegajoso.
- Fondo (adhesivo): #ffffff
Agregar un módulo de encabezado de ancho completo
Ahora agreguemos el módulo Encabezado 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 Copiar estilos para copiar algunas de las configuraciones personalizadas.
Ver también: Divi: cómo cambiar el degradado de un fondo al pasar el mouse
Abra la configuración del menú de inicio, luego haga clic derecho en Texto del menú y seleccione Copiar estilos de texto de menú.
Una vez copiado, haga clic en los tres puntos del módulo Encabezado de ancho completo, luego seleccione Estilos de texto de menú anteriores.
Ahora repetiremos los mismos pasos con la configuración del menú desplegable.
Repita una vez más para los iconos.
Establecer la alineación del texto a la derecha.
- Alineación de texto: derecha
Establezca la altura máxima del logotipo debajo DiseñoEntonces Guía de Tallas.
- 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, ajuste el acolchado superior e inferior.
- Acolchado superior: 10px
- Acolchado inferior: 10px
Ahora elimine la sección del menú original.
Agregar logotipo receptivo
Ahora agregaremos el logotipo receptivo. Afortunadamente, Divi lo hace fácil con opciones de respuesta integradas.
Sous Contenido, abra la configuración del logotipo y cargue la versión de escritorio de su logotipo.
Seleccione el ícono del modo móvil para usar las opciones receptivas, luego reemplace el logotipo móvil con su logotipo receptivo.
Crear una nueva página con un diseño predefinido
Para ver el menú de ancho completo con el logotipo receptivo en acción, creemos una nueva página con un diseño predefinido de la biblioteca Divi.
Para este diseño, usaremos la página de inicio de la escuela secundaria del Paquete de diseño de 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 Utilice 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.
Buscar y seleccionar el diseño Página de inicio de la escuela secundaria.
seleccionar Usar este diseño para agregar el diseño a su página.
Resultado final
Ahora echemos un vistazo a nuestro diseño final.
Descarga DIVI ahora!!!
Conclusión
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, independientemente del tamaño de la pantalla.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
