Cómo incrustar las galerías Divi en conmutadores para crear un menú de restaurante personalizado

El uso de conmutadores en su página web es una excelente manera de organizar su contenido de una manera limpia y concisa. Esto puede ayudar a mejorar la experiencia del usuario al reducir el desplazamiento y darle al usuario más control sobre lo que quiere ver en su página. El menú de un restaurante en línea es un buen ejemplo de cómo los conmutadores pueden funcionar bien. Un usuario puede encontrar fácilmente el elemento del menú que le gusta y hacer clic en el elemento para obtener más información.

En este tutorial, le mostraré cómo crear algunos conmutadores intuitivos y compatibles con dispositivos móviles para el menú de su restaurante utilizando conmutadores Divi. Incluso le mostraré cómo optimizar su alternancia para dispositivos móviles e incrustar galerías de imágenes Divi dentro de su contenido de alternancia para mostrar fotos impresionantes de platos específicos.

Empecemos.

El antes y el después

Aquí hay un adelanto del antes y el después del diseño del menú del restaurante que estaremos construyendo.

Antes

Después

Empezando

Reemplazo de la pantalla de la galería de WordPress con la pantalla de la galería Divi

Divi le permite reemplazar la visualización predeterminada de la Galería de WordPress con una visualización de la Galería Divi. Por lo tanto, cada vez que crea una galería de WordPress y la incrusta en su página, la galería se muestra como una galería utilizando el Módulo Galería Divi. Esto le permite agregar galerías de imágenes Divi a cualquier módulo en Divi Builder (más sobre esto más adelante). Para implementar este cambio, vaya a Divi> Opciones de tema. En la pestaña General, haga clic para habilitar la opción Galería Divi.

Configuración del color de acento del tema (opcional)

Dado que insertaremos una galería Divi en un módulo de alternancia, el color del icono que se muestra cuando pasa el cursor sobre una imagen en la galería heredará automáticamente el color de acento que ha establecido para el tema Divi. Puede configurar el color de acento del tema desde su Tablero de WordPress navegando a Divi> Personalizador de temas> Configuración general> Configuración de diseño. En Configuración de diseño, actualice el color de acceso al tema a lo siguiente:

Color de acento del tema: # a06d51

Este es el color que coincidirá con el diseño del menú de panadería que usaremos para este tutorial.

Actualización del tamaño del icono de alternancia predeterminado en el personalizador de módulos (opcional)

Para este diseño, pensé que sería útil mostrar un icono de alternancia más grande al usar el módulo Divi Toggle. Puede cambiar el tamaño predeterminado del módulo de alternancia navegando a Divi> Personalizador de módulo. Luego, seleccione el módulo de alternancia de la lista y actualice el tamaño del icono de la siguiente manera:

Cambiar el tamaño del icono: 32

Configuración de su nueva página con el diseño de página del menú de panadería

Para empezar, deberá crear una nueva página, darle un título a su página e implementar Divi Builder. Seleccione la opción "Elegir un diseño prefabricado".

Desde la ventana emergente de carga desde la biblioteca, elija el Paquete de diseño de panadería y luego haga clic para usar el Diseño de página del menú de panadería.

Una vez que se haya cargado el diseño en la página, publique su página. Luego haga clic en el botón "Construir en Front End". y luego publique su página. Luego haga clic para construir en la parte frontal.

Una vez hecho esto, ¡está listo para comenzar a diseñar el menú!

Implementación del diseño personalizado del menú del restaurante con Divi Toggles y galerías de imágenes

Diseño de un elemento de menú Alternar

Con Divi Builder activo en la interfaz, agregue un módulo Toggle debajo del módulo de texto con el subtítulo que dice "Sweet Tooth".

Por ahora, puede dejar el contenido simulado predeterminado que se usa para el título y el contenido del cuerpo. Sin embargo, deberá agregar un precio para el elemento del menú dentro del contenido del cuerpo de la pestaña. Haga clic en la pestaña Texto (en lugar de Visual) y agregue el siguiente html debajo del texto predeterminado actual.

<h5>$8.00</h5>

Luego comience a actualizar la configuración de alternancia de la siguiente manera:

• Color del icono: # a06d51
• Abrir alternar color de texto: # 333333
• Color de texto de alternancia cerrada: # 333333
• Color de fondo de alternancia cerrada: #ffffff

• Fuente del título: Patua One
• Peso de la fuente del título: negrita
• Estilo de fuente del título: TT
• Espaciado de letras de título: 1px
• Altura de la línea de título: 4em
• Relleno personalizado: 0px arriba, 0px abajo

Para aumentar el área en la que se puede hacer clic del título de alternancia, se aumenta la altura de la línea del título y se quita el relleno superior e inferior.

Ahora agreguemos un borde izquierdo a nuestro conmutador.

• Ancho del borde izquierdo: 5px
• Color del borde izquierdo: # a06d51

Agregar una galería de imágenes al módulo de alternancia

Como se mencionó anteriormente, cuando habilita la opción Galería Divi en las Opciones del tema Divi, una inserción de la Galería de WordPress adoptará el estilo de una Galería Divi. Esto le permite incrustar una galería de imágenes de estilo Divi en cualquier módulo. Para este ejemplo, queremos agregar algunas imágenes dentro del módulo de alternancia para mostrar algunas imágenes de un elemento del menú de un restaurante en particular. Para hacer esto, abra la configuración de alternancia y haga clic en el botón Agregar medios encima del cuadro de contenido.

En la ventana emergente de la Biblioteca de medios, seleccione la pestaña Crear galería a la izquierda. Luego, seleccione las imágenes que desea utilizar para la galería y haga clic en "Crear una nueva galería".

En la sección Editar galería de la ventana emergente, ignore la configuración de la galería porque los estilos de la Galería Divi anularán esta configuración de la Galería de WordPress. Luego haga clic en el botón Insertar galería.

Esto coloca un código corto de la galería dentro del contenido del módulo de alternancia. Si desea que la galería se muestre después del texto actual del cuerpo, asegúrese de colocar el código corto después del contenido.

Ajustar el relleno de filas para teléfonos inteligentes

El contenido se ajustará bastante con el espaciado actual del diseño prefabricado. Necesitamos actualizar la configuración de la fila para crear más espacio en el teléfono inteligente. Para hacer esto, abra la configuración de la fila que contiene los conmutadores del menú de su restaurante y actualice lo siguiente:

• Relleno personalizado (teléfono): 0px a la izquierda, 0px a la derecha

Duplique el conmutador según sea necesario

Para agregar más elementos de menú, simplemente duplique el módulo Alternar y actualice el contenido con nuevas galerías de texto e imágenes según sea necesario. Después de eso, puede eliminar los elementos del menú originales que venían con el diseño prefabricado.

Resultado final

Ahora veamos el resultado final del diseño.

Cambiar el número de columnas en la galería

De forma predeterminada, la galería tiene un diseño que permanece en tres columnas en todos los dispositivos y anchos de navegador. Sin embargo, con el efecto de caja de luz, los usuarios podrán ver una versión más grande al hacer clic en el elemento de la galería. Entonces, las imágenes más pequeñas aún pueden funcionar. Pero, si desea cambiar el número de columnas, siempre puede agregar un pequeño fragmento de CSS. Para este ejemplo, voy a cambiar la galería para mostrar imágenes en dos columnas. Para hacer esto, primero abra la configuración de alternancia y agregue una clase CSS personalizada de la siguiente manera:

Clase CSS: dos col-gal

Luego abra la configuración de la página y agregue el siguiente CSS personalizado:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Cambiar el color de superposición de la Galería de imágenes en el Personalizador de módulos

Si desea cambiar el color de la superposición de desplazamiento del elemento de la galería sin tener que usar CSS personalizado, puede cambiar la configuración predeterminada para el Módulo de la galería en el Personalizador de módulos. Para hacer esto, navegue a Divi> Modulo Personalizador. Luego haga clic en el Módulo de galería y cambie el color de la superposición de desplazamiento a lo que desee.

Pensamientos finales

Con suerte, este tutorial genera algo de inspiración sobre cómo usar el módulo Divi Toggle para crear algunos menús de restaurantes increíbles. Como beneficio adicional, es posible que haya aprendido un nuevo truco para incrustar algunas galerías Divi en cualquier módulo que desee (no solo alternar). La única limitación es personalizar el número de columnas que desea mostrar en la galería incrustada. Sin embargo, puede agregar un pequeño fragmento de CSS personalizado para ponerlo en el camino correcto.

Espero tener noticias tuyas en los comentarios.

¡Salud!