Cómo crear un mosaico de navegación con el módulo deslizante Divi

El antes y el después de hoy: los módulos Divi Slider como mosaico de navegación

El control deslizante no viene con ninguna imagen predeterminada almacenada en el interior, por lo que agregué imágenes a algunas de las diapositivas con anticipación, pero no toqué ninguna configuración ni agregué ningún CSS. Como puede ver, no se ve muy uniforme, ciertamente la legibilidad es muy mala con el estilo de botón predeterminado sobre un fondo blanco.

Pero con algunos cambios de configuración y algo de CSS usado dentro de los módulos del creador de páginas, esto es lo que terminaremos al final.

Lo que hace que este diseño sea único es que no solo usamos controles deslizantes para imágenes, que es para lo que esperamos que se usen, sino que también los usamos como enlaces de menú. Por esta razón, este diseño es ideal con la navegación normal de Divi desactivada, o mejor aún, usando una plantilla de página en blanco. También agregaremos un poco de código para asegurarnos de que ocupe toda la ventana gráfica para que tenga la sensación de una página de destino.

Cómo crear un mosaico de navegación con el módulo deslizante Divi

Suscríbete a nuestro canal de Youtube

El concepto y la inspiración

Este concepto se basa en un diseño de control deslizante que hice para un tema infantil de Divi centrado en la fotografía. Había usado varios controles deslizantes en un diseño de cuadrícula con el deslizamiento automático activado a diferentes velocidades. Esto simplemente llevó ese concepto un poco más allá al agregar más controles deslizantes para que actúen como enlaces de navegación reales. En lugar de usar una cuadrícula uniforme donde todas las alturas eran iguales para cada control deslizante como mi idea original, aquí pensé que sería más apropiado un estilo más de mampostería.

Preparación de los elementos de diseño

Reuní mis imágenes con anticipación y elegí los títulos de menú que me gustaría usar. Es mejor optimizar sus imágenes de antemano, y también reducir su tamaño cerca del tamaño que realmente aparecerán en la interfaz cuando sea posible.

Hay muchas maneras de optimizar las imágenes, puede usar software como Photoshop , puede tener un complemento de optimización de imágenes en su sitio como Imagify o EWWW , o puede usar una herramienta en línea como TinyPNG (que también tiene un complemento disponible si lo prefiere). optimizar al cargar).

Hay muchos lugares en línea para comprar fotos de archivo y encontrar fotos gratis, tiendo a ceñirme a pexels.com y ahí es donde encontré todas las imágenes que se usan en esta publicación.

Para seguir mi tutorial a continuación, necesitará imágenes en los siguientes tamaños :

• Imagen de fondo de la sección : 1920 px por 1280 px
• Imágenes deslizantes horizontales : 900 px por 600 px
• Imágenes del control deslizante de retrato inferior : 600 px por 800 px

Implementando el Diseño con Divi

Usaré el generador de back-end clásico porque es con lo que me siento más cómodo, pero todo lo que hacemos ciertamente se puede lograr y editar con el nuevo Visual Builder de front-end, como puede ver en el video de arriba.

Ajustes de sección

Entonces, vamos a comenzar creando una nueva página y seleccionando la plantilla en blanco en el cuadro meta de atributos de la página.

Este diseño requiere solo una sección y vamos a usar una sección especial. Personalmente, no aprovecho lo suficiente las secciones especializadas de Divi, así que estaba muy feliz de poder usarlas aquí.

Querrá elegir el diseño en el medio que permite opciones de ¼ – ½ – ¼ y ¼ – ¼ – ¼ – ¼.

Cuando se cargue el nuevo diseño, elimine el diseño estándar predeterminado para que su nuevo diseño especial sea el único.

A continuación, agreguemos la imagen de fondo de la sección principal haciendo clic en el ícono de la hamburguesa en la esquina superior izquierda de nuestra sección de especialidades.

Luego, vaya a la pestaña Configuración de diseño avanzada y configure lo siguiente:

Finalmente, vaya a la Configuración de CSS personalizada de la Configuración del módulo de sección y agregue el siguiente código debajo del elemento principal :

Esto garantiza que, incluso en pantallas grandes, la imagen de fondo ocupe toda la ventana gráfica.

Adición de módulos

A continuación agregaremos nuestros módulos. Estoy usando una combinación de controles deslizantes, texto, seguimiento de redes sociales y divisores. Explicaré el texto y las redes sociales en un momento

Aquí está el desglose:

En la columna de la izquierda, coloque un módulo divisor en la parte superior y luego dos módulos deslizantes (que se duplicarán como botones de navegación).

En la columna central, coloque un módulo deslizante en la parte superior (que será para fotos), seguido de un módulo de texto y luego un módulo de seguimiento social. En la fila de abajo, coloque un módulo deslizante en cada uno. Usaremos el control deslizante izquierdo para las imágenes y el control deslizante derecho como botón de navegación.

Finalmente, en nuestra columna de la derecha, coloque un módulo divisor en la parte superior, seguido de dos módulos deslizantes. El módulo deslizante superior será un botón de navegación y el módulo deslizante inferior será para imágenes.

Los divisores están ahí para iniciar una apariencia de mampostería donde la rejilla está escalonada. El divisor de la izquierda le doy una altura de 40px . El divisor derecho le doy una altura de 80px puramente por asimetría. No se cambia nada más en la configuración del divisor.

Configuración de los controles deslizantes de navegación

A continuación, comenzaré con la configuración de los controles deslizantes de navegación o los controles deslizantes que se utilizarán como enlaces de menú. Este control deslizante se repetirá para los demás controles deslizantes de navegación. Las siguientes configuraciones son para el módulo deslizante en sí, no para las diapositivas individuales dentro de él.

Para la configuración general, establezca lo siguiente:

• ocultar flechas
• mostrar controles: sí
• animación automática: activada
• velocidad de animación establecida en 6000
• continuar deslizamiento automático al pasar el mouse: encendido
• eliminar la sombra interior: sí

Para la Configuración avanzada de diseño, una imagen es mejor, pero donde se ven los grises, el color que estoy usando es #666666 y los tamaños de fuente del encabezado son Escritorio: 40 / Tableta y móvil: 30

Para la configuración personalizada de CSS, los siguientes bits de código van en sus respectivos cuadros de CSS:

Elemento principal : lo que está haciendo es agregar un borde transparente alrededor de este elemento. Esto es para que la imagen de fondo de la sección principal pueda «asomarse» entre los controles deslizantes. Mi primera inclinación fue usar el margen, pero esto funcionó mejor para este tutorial. También prefiero usar rgba en lugar de la palabra «transparente», pero eso es una preferencia personal. Estoy usando 4px aquí, pero si desea una brecha más amplia, ciertamente puede aumentar ese número un poco. Recuerde que todos los módulos tendrán este borde de 4 px aplicado, por lo que el espacio es realmente de 8 px.

Descripción de la diapositiva : aquí estoy cambiando el nombre de la animación (efecto de transición) a «Crecer» en lugar del valor predeterminado «FadeBottom». En realidad, hay bastantes opciones para la transición y usaré una en cada publicación de esta mini serie. Al final de este tutorial, incluiré una lista de las opciones de animación de Elegant Themes. También estoy alineando el texto en todo el módulo a la izquierda, pero tenemos que usar !important para anular el CSS de Divi (solo use !important donde sea absolutamente necesario).

Botón deslizante : quité el borde del botón en la configuración avanzada antes, así que ahora tengo que quitar el relleno izquierdo para que no haya un espacio extraño que normalmente es el búfer entre el texto y el contorno.

Controladores de diapositivas : para los casos en los que se utilizan varias diapositivas para la navegación (como cuando muestro las diferentes páginas de la Galería), se mueven los controladores de puntos hacia la derecha y también se eliminan los molestos números de controlador que pueden aparecer.

Para las diapositivas internas, debe agregar el título, el texto del botón y la URL, y cualquier texto de descripción, y también deberá establecer el color de fondo en rgba(255,255,255,0.7) .

Ahora puede duplicar y volver a colocar los controles deslizantes de navegación en los lugares apropiados del diseño y llenarlos con sus diapositivas. Solo recomiendo tener un control deslizante de navegación que en realidad tenga varias diapositivas, como lo he hecho con las páginas de la Galería. No queremos que el usuario tenga que hacer demasiados clics o, de lo contrario, puede que se vaya.

Configuración de los deslizadores de fotos

A continuación, comenzaré con la configuración de los controles deslizantes de fotos. Este control deslizante se repetirá para los otros controles deslizantes de fotos y, como antes, esta configuración es para el módulo deslizante en sí, no para las diapositivas individuales dentro de él.

Para la configuración general, establezca lo siguiente:

• ocultar flechas
• mostrar controles: no
• animación automática: activada
• velocidad de animación establecida en 9000
• continuar deslizamiento automático al pasar el mouse: encendido
• eliminar la sombra interior: sí

Para la configuración avanzada de diseño , establezca lo siguiente:

• relleno superior: 150px
• relleno inferior: 200px

Para la configuración personalizada de CSS, los siguientes bits de código van en sus respectivos cuadros de CSS:

Elemento principal : agregar ese borde transparente como antes.

Ahora puede duplicar y colocar sus controles deslizantes en los lugares apropiados en todo el diseño y llenarlos con sus diapositivas. Para las diapositivas internas, solo necesita agregar las imágenes de fondo . También para mis controles deslizantes de fotos, los configuré a diferentes velocidades para variar. Uno está en 8000, otro en 9000 y otro en 11000 . Realmente no importa cuáles están configurados en qué, recomiendo no configurarlos para que se apaguen demasiado rápido porque podría resultar molesto para el usuario. Si no se sientan a través de cada diapositiva antes de hacer clic, está bien, así que no se preocupe por pensar que necesitan ir rápido.

Configuración de los módulos de seguimiento de texto y redes sociales

¿Por qué están incluidos?, te preguntarás. Dado que se utilizará como página de destino, tiene sentido incluir este tipo de información. Esta es la única vez en esta miniserie que el diseño incluye otros módulos junto con el control deslizante.

Escriba su texto como lo haría normalmente, luego establezca estas configuraciones para la Configuración de diseño avanzada :

Configure su seguimiento en las redes sociales como lo haría normalmente y luego agregue estas configuraciones:

CSS personalizado : centra los íconos sociales.

Terminando con la configuración de la fila central

Solo necesitamos terminar asegurándonos de establecer la configuración general correcta para ambas filas amarillas en el medio de la sección :

El resultado final

Si has seguido desde el principio, ahora deberías tener un diseño nuevo y elegante usando los controles deslizantes versátiles de Divi. Siéntase libre de mezclar las cosas para obtener su propia versión única; ahora que sabes cómo se hace.

Mañana: Cómo agregar una descarga de PDF de WordPress con un clic usando Divi

Esta publicación concluye nuestra serie de 5 formas interesantes de diseñar el módulo deslizante de Divi . Mañana publicaremos un tutorial único de Divi que le muestra cómo agregar descargas de PDF a sus sitios Divi para que sus visitantes las descarguen.

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!