Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso , le mostraremos cómo agregar un mega menú a su página de recetas utilizando el paquete de diseño de recetas de alimentos gratuito de Divi . Este menú incluirá las categorías de tus recetas y se mostrará en un mega menú para facilitar la búsqueda a tus visitantes. En lugar de usar el diseño de receta para las páginas, lo estamos usando para las publicaciones. Esto te permite asignar categorías a cada una de tus recetas y la gente también tendrá la posibilidad de interactuar contigo en la sección de comentarios. Antes de sumergirnos en el caso de uso, echemos un vistazo rápido a lo que crearemos en este caso de uso desde una perspectiva visual.
Lo que necesitas saber
- Hay múltiples formas de abordar los menús, la que estamos aplicando le dará la libertad de agregar las recetas que desee y excluir otras.
- Estamos creando publicaciones de recetas con el diseño de recetas en lugar de páginas (permite a las personas buscar por categoría e interactuar en la sección de comentarios)
- Las publicaciones de recetas destacadas deben agregarse manualmente a su menú (lo que significa que deberá mantener este menú actualizado, dependiendo de la frecuencia con la que publique nuevas recetas)
- No agregue todas sus recetas a este menú, ya que abrumará a sus visitantes, siempre pueden ir a una página de categoría para ver todas las recetas.
Si ha incluido la página de recetas en su menú principal, vaya a su menú principal y elimínela. Como se mencionó anteriormente, vamos a utilizar el diseño de recetas para publicaciones en lugar de páginas.
Parte 2: crear categorías
Paso 1: Ir a Categorías
Ahora, antes de crear cualquier publicación, primero creemos las categorías de publicación. Para hacerlo, ve a Panel de WordPress > Publicaciones > Categorías .
Paso 2: agregue sus categorías principales
Las primeras categorías que deberá agregar son las categorías principales. En este ejemplo, por ejemplo, hemos usado el desayuno y el almuerzo como categorías principales. Agregue el título de la categoría y asegúrese de que la opción Categoría principal esté establecida en ‘ninguna’.
Paso 3: agregue sus subcategorías y asígnelas a categorías principales
Dependiendo de sus categorías principales, puede agregar tantas subcategorías como desee. Solo asegúrese de que cada vez que agregue una subcategoría, le asigne la categoría principal correcta.
Parte 3: crear publicaciones a partir del diseño de recetas
Paso 1: Agregar nueva publicación
Ahora que tenemos nuestras categorías, es hora de crear las publicaciones de recetas. Le mostraremos cómo crear una publicación desde cero y, luego, puede reutilizar el diseño que guardaremos para crear otras publicaciones de recetas también.
Paso 2: Dale a la publicación un título, una imagen destacada y una (sub)categoría
Después de agregar una publicación, póngale un título, cargue una imagen destacada y elija la categoría principal y la subcategoría que coincidan con la publicación de la receta.
Paso 3: modificar la configuración de la publicación Divi
Para asegurarnos de que el diseño de la receta se muestre de la manera que queremos, vamos a utilizar la siguiente configuración de publicación de Divi:
- Diseño de página: ancho completo (esto eliminará la barra lateral de su publicación)
- Título de la publicación: Ocultar (vamos a agregar el título de la publicación dentro del Visual Builder)
Paso 4: cambie a Visual Builder
Ahora, cambie al Visual Builder donde modificaremos la apariencia.
Paso 5: Cargue el diseño de la receta
Lo primero que deberá hacer dentro de Visual Builder es cargar el diseño de la receta. Haga clic en el círculo en la parte inferior de su página, vaya al ícono más y desplácese hacia abajo en la pestaña de diseños prefabricados hasta que encuentre el paquete de diseño de recetas de alimentos. Una vez allí, elija el diseño de la receta y haga clic en ‘Usar este diseño’.
Paso 6: eliminar la sección de héroe
La sección principal de este diseño no incluye un título de publicación. Sin embargo, queremos que aparezca automáticamente en nuestra página. Es por eso que vamos a eliminar esta sección de héroe y crear una nueva en su lugar.
Paso 7: Agregar sección de ancho completo
En lugar de usar una sección estándar, use una sección de ancho completo.
Paso 8: agregue la imagen destacada como imagen de fondo de la sección
Una vez que haya agregado la sección de ancho completo, use su imagen destacada como fondo junto con las siguientes configuraciones:
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: Multiplicar (esto ayudará a combinar la imagen de fondo y el color de fondo que agregaremos en el siguiente paso)
Paso 9: Agregar superposición de color de fondo
Puede decidir qué tan oscura desea que su imagen (y el texto sea legible) eligiendo un color gris. El que hemos usado es ‘#595959’.
Paso 10: Agregar relleno personalizado a la sección de ancho completo
También queremos crear un relleno extra para esta sección de ancho completo. Vaya a la pestaña Diseño de su sección y agregue los siguientes valores a la subcategoría Espaciado:
- Relleno superior: 85px
- Relleno inferior: 140px
Paso 11: agregue el módulo de título de publicación de ancho completo a la sección de ancho completo
Ahora que hemos modificado la sección de ancho completo según nuestras necesidades, podemos agregar el Módulo de título de publicación de ancho completo a esta sección. Esto hará que el título de tu publicación y todos sus elementos aparezcan automáticamente.
Paso 12: cambiar la configuración de texto
Por supuesto, queremos que este módulo de título de publicación de ancho completo coincida con el resto de nuestro sitio web. Es por eso que comenzaremos aplicando la siguiente configuración a la subcategoría Texto:
- Color del texto: Claro
- Orientación del texto: Centro
Paso 13: cambiar la configuración del texto del título
Luego, abra la subcategoría Texto del título y aplique la siguiente configuración:
- Fuente del título: Cormorant Garamond
- Peso de la fuente del título: Regular
- Tamaño del texto del título: 53px
Paso 14: cambiar la configuración de metatexto
También vamos a hacer algunas modificaciones pequeñas a la subcategoría Metatexto:
- Fuente Meta: Cormorant Garamond
- Peso de fuente Meta: Regular
- Tamaño del metatexto: 18px
Paso 15: Guardar el diseño en la biblioteca Divi
¡Hemos terminado de modificar el diseño de la receta! Por supuesto, deberá modificar el resto del contenido de acuerdo con su receta, pero puede reutilizar este diseño en lugar de comenzar desde cero. Para poder reutilizar este diseño, haga clic en el ícono circular en la parte inferior de su página y agregue el diseño a su biblioteca dándole un nombre de diseño que coincida.
Una vez que agregue todas las publicaciones que necesita a su sitio web, puede comenzar a crear su menú personalizado que aparecerá en la página de recetas. Comience yendo a sus menús, creando un nuevo menú y dándole un nombre a su menú.
Paso 2: agregar categorías principales
Abra la pestaña Categorías a continuación y agregue sus categorías principales a este nuevo menú que ha creado.
Después de eso, también puede agregar sus subcategorías. Asegúrese de que estos sean los primeros elementos del submenú secundario de las categorías principales arrastrando cada uno justo debajo de la categoría principal.
Ahora, puede agregar las publicaciones de recetas de su elección a cada uno de los elementos del submenú. Tú mismo determinas qué publicación aparece en tu menú. Eso significa que deberá actualizar este menú con frecuencia si desea que aparezcan recetas nuevas o destacadas.
Paso 5: habilite las clases CSS
A continuación, necesitaremos agregar la clase CSS del mega menú. Pero antes de hacer eso, primero necesitaremos habilitar las clases CSS en los elementos del menú. Haga clic en ‘Opción de pantalla’ y habilite las clases de CSS.
Una vez hecho esto, puede agregar la clase ‘mega-menú’ a cada una de sus categorías principales.
¡Hemos terminado de crear el menú! Lo único que queda por hacer aquí es guardar el menú.
Paso 1: Abra la página de recetas con Visual Builder
Hemos creado las publicaciones y el menú, lo único que queda por hacer es agregar este menú a nuestra página de recetas. Para hacer eso, comience habilitando Visual Builder en la página de recetas.
Paso 2: Agregar sección de ancho completo
Luego, agregue una sección de ancho completo justo debajo de la sección principal de esta página.
La razón por la que usamos una sección de ancho completo es que nos permite agregar un menú de elección directamente en nuestra página. El módulo que usaremos para agregar este menú se llama Menú de ancho completo.
Una vez que haya agregado el Menú de ancho completo a su sección de ancho completo, seleccione el menú que creó en la parte anterior de este tutorial.
Paso 5: Agregar color de fondo
Luego, abre la subcategoría Fondo y dale a tu módulo el color de fondo ‘#ffb8ad’.
Paso 6: Configuración de enlaces
A continuación, pase a la pestaña Diseño de este Módulo de menú de ancho completo y aplique la siguiente configuración a la subcategoría Enlace:
- Color del enlace activo: #FFFFFF
- Color del texto del menú desplegable: #FFFFFF
- Color del texto del menú móvil: #FFFFFF
- Orientación del texto: Centro
Desplácese hacia abajo en la pestaña Diseño, abra la subcategoría Menú desplegable y aplique los siguientes cambios:
- Color de fondo del menú desplegable: #ff7864
- Color de la línea del menú desplegable: #ffffff
- Color de fondo del menú móvil: #ff7864
También necesitaremos cambiar la configuración de texto de este menú yendo a la subcategoría Texto del menú y aplicando los siguientes cambios (que coinciden con todo el paquete de diseño):
- Fuente del menú: Cormorant Garamond
- Peso de la fuente del menú: Negrita
- Tamaño del texto del menú: 18px
- Color del texto del menú: #FFFFFF
Paso 9: agregue CSS personalizado a las opciones del tema
Lo último que tendremos que hacer es agregar un código CSS personalizado para lograr exactamente el mismo resultado que en el ejemplo. Para hacer eso, vaya a su Panel de WordPress> Divi> Opciones de tema> Desplácese hacia abajo hasta que encuentre ‘CSS personalizado’ y agregue las siguientes líneas de código CSS :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
.fullwidth-menu-nav li.mega-menu>ul>li>a:first-child { border-bottom: 1px solid #FFFFFF; font-size: 20px; margin-top: 15px; text-transform: uppercase; padding-bottom: 20px;}.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu .nav li ul { border-radius: 5px; padding-top: 10px; text-align: center;} |
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo crear un mega menú personalizado para sus recetas y categorías y agregarlo a la página de recetas del paquete de diseño de recetas de alimentos gratuito . Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!