El uso de conmutadores en su página web es una excelente manera de organizar su contenido de una manera clara 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 en el que 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 los conmutadores Divi . ¡En lugar de usar un complemento de menú de restaurante de WordPress , construiremos todo nosotros mismos usando las herramientas de diseño integradas de Divi! Incluso le mostraré cómo optimizar su alternar para dispositivos móviles e incrustar galerías de imágenes Divi dentro de su contenido de alternar para mostrar fotos impresionantes de platos específicos.
Empecemos.
Aquí hay un adelanto del antes y el después del diseño del menú del restaurante que construiremos.
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 pantalla predeterminada de la Galería de WordPress con una pantalla de la Galería Divi. Entonces, cada vez que cree una galería de WordPress y la incruste en su página, la galería se mostrará como una galería usando el Módulo de 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 de su tema (opcional)
Dado que insertaremos una galería Divi en un módulo de alternancia, el color del ícono que se muestra cuando pasas el mouse sobre una imagen en la galería heredará automáticamente el color de énfasis que hayas establecido para el tema Divi. Puede configurar el color de acento del tema desde su Panel de WordPress navegando a Divi> Personalizador de tema> 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 ícono de alternar más grande cuando se usa el módulo Divi Toggle. Puede cambiar el tamaño predeterminado del Módulo de alternancia navegando a Divi > Personalizador de módulos. Luego seleccione el Módulo de alternar de la lista y actualice el tamaño del icono de la siguiente manera:
Alternar tamaño del icono: 32
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».
En la ventana emergente Cargar 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 el diseño se haya cargado en la página, publique su página. Luego haga clic en el botón «Construir en Front End». y luego publica tu página. Luego haga clic para construir en la parte delantera.
Una vez hecho esto, ¡está listo para comenzar a diseñar el menú!
Con Divi Builder activo en la parte frontal, 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 utilizado 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.
|
01
|
<h5>$8.00</h5> |
Luego comience a actualizar la configuración de alternancia de la siguiente manera:
- Color del icono: #a06d51
- Color de texto de alternancia abierta: #333333
- Color de texto de palanca cerrada: #333333
- Alternar cerrado Color de fondo: #ffffff
- Fuente del título: Patua One
- Peso de la fuente del título: Negrita
- Estilo de fuente del título: TT
- Espaciado entre letras del título: 1px
- Altura de la línea del título: 4em
- Relleno personalizado: 0px arriba, 0px abajo
Para aumentar el área en la que se puede hacer clic en el título de alternancia, se aumenta la altura de la línea del título y se elimina el relleno superior e inferior.
Ahora agreguemos un borde izquierdo a nuestra palanca.
- Ancho del borde izquierdo: 5px
- Color del borde izquierdo: #a06d51
Adición de una galería de imágenes al módulo de alternar
Como se mencionó anteriormente, cuando habilita la opción Galería Divi en las Opciones de tema Divi , una Galería de WordPress incrustada tomará 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 alternar para mostrar algunas imágenes de un elemento del menú de un restaurante en particular. Para hacer esto, abra la configuración de alternar y haga clic en el botón Agregar medios sobre el cuadro de contenido.
En la ventana emergente Biblioteca multimedia, seleccione la pestaña Crear galería a la izquierda. Luego seleccione las imágenes que desea usar 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 shortcode de galería dentro del contenido del módulo de alternancia. Si desea que la galería se muestre después del texto del cuerpo actual, asegúrese de colocar el código abreviado después del contenido.
Ajuste del 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 menús 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 sigue siendo de tres columnas en todos los anchos de navegador y dispositivos. 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. Por lo tanto, las imágenes más pequeñas aún pueden funcionar. Pero, si desea cambiar la cantidad de columnas, siempre puede agregar un pequeño fragmento de CSS. Para este ejemplo, voy a cambiar la galería para mostrar las imágenes en dos columnas. Para hacer esto, primero abra la configuración de alternar 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:
|
01
02
03
04
05
06
|
.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, vaya a Divi > Personalizador de módulos. Luego haga clic en el Módulo de galería y cambie el color de superposición flotante 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 increíbles menús de restaurantes. 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 alterna). La única limitación es personalizar la cantidad de columnas que desea mostrar en su galería incrustada. Sin embargo, puede agregar un pequeño fragmento de CSS personalizado para ponerlo en el camino correcto.
Espero escuchar de usted en los comentarios.
¡Salud!