Cómo crear un diseño de menú de restaurante pegajoso con Divi

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga el diseño GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

1. Crear estructura de elementos

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: rgba(255,252,244,0.6)

Imagen de fondo

Cargue una imagen de fondo de patrón a continuación. Puede encontrar el que hemos usado en la carpeta comprimida que puede descargar al comienzo de esta publicación.

• Tamaño de la imagen de fondo: Tamaño real
• Posición de la imagen de fondo: centro superior
• Imagen de fondo Repetir: Repetir X (horizontal)

Espaciado

Modifique la configuración de espaciado a continuación.

• Relleno superior: 150px
• Relleno inferior: 150px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho:
  
  • Computadora de escritorio y tableta: 80%
  • Teléfono: 95%
• Ancho máximo: 1580px
• Alineación de filas: Centro

Agregue el módulo de texto n.º 1 a la columna 1

Agregar contenido H3

Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue contenido H3 de su elección.

Configuración de texto H3

Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:

• Encabezado 3 Fuente: Karla
• Encabezado 3 Peso de fuente: Negrita
• Título 3 Tamaño del texto:
  
  • Escritorio y tableta: 45px
  • Teléfono: 35px
• Encabezado 3 Espaciado entre letras: -2px
• Encabezado 3 Altura de línea: 1,2 em

Espaciado

Agregue algunos valores de relleno superior e inferior a continuación.

• Relleno superior: 25px
• Relleno inferior: 25px

Agregue el Módulo de Texto #2 a la Columna 1

Agregar contenido

Luego, agregue otro módulo de texto justo debajo del anterior con algún contenido de su elección.

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Crimson Pro
• Color del texto: #3a3a3a
• Tamaño del texto: 32px

Espaciado

Complete la configuración del módulo cambiando la configuración de espaciado en consecuencia:

• Margen superior: 20px
• Margen inferior: 50px
• Relleno izquierdo: 5%
• Relleno derecho: 5%

Agregar módulo de imagen a la columna 1

Cargar imagen

El último módulo que necesitamos en la columna 1 es un módulo de imagen. Añade una imagen de tu elección.

Dimensionamiento

Agregue un ancho máximo a la configuración de tamaño.

• Ancho máximo: 250px

Espaciado

Y complete la configuración del módulo aplicando los siguientes valores de relleno de respuesta a la configuración de espaciado:

• Margen inferior:
  
  • Tableta: 80px
  • Teléfono: 50px
• Relleno izquierdo: 5%
• Relleno derecho: 5%

Agregue el módulo Blurb a la columna 2

Agregar contenido

En la columna 2. Agregue un módulo de Blurb con algún contenido de su elección.

Color de fondo

Use un color de fondo blanco a continuación.

• Color de fondo: #ffffff

Configuración del texto del título

Pase a la pestaña de diseño del módulo y cambie la configuración del texto del título en consecuencia:

• Fuente del título: Karla
• Peso de la fuente del título: Negrita
• Color del texto del título: #3a3a3a
• Tamaño del texto del título:
  
  • Escritorio: 40px
  • Tableta: 35px
  • Teléfono: 30px
• Espaciado entre letras del título: -2px
• Altura de la línea del título: 1,2 em

Configuración del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

• Fuente del cuerpo: Karla
• Color del cuerpo del texto: #3a3a3a
• Tamaño del cuerpo del texto:
  
  • Escritorio: 18px
  • Tableta: 25px
  • Teléfono: 20px
• Espaciado entre letras del cuerpo: -0.5px
• Altura de la línea del cuerpo: 2em

Dimensionamiento

Luego, modifique la configuración de tamaño de la siguiente manera:

• Ancho de contenido: 100%

Espaciado

A continuación, vaya a la configuración de espaciado y cambie los valores en consecuencia:

• Margen inferior: 30px
• Relleno superior: 40px
• Relleno inferior: 40px
• Relleno izquierdo: 8%
• Relleno derecho:
  
  • Escritorio: 25%
  • Tableta y teléfono: 8%

Borde

Luego, aplicaremos la siguiente configuración de borde:

• Ancho del borde izquierdo: 3px
• Color del borde izquierdo: #000000

Sombra de la caja

También estamos usando una sombra de caja.

• Fuerza de desenfoque de sombra de cuadro: 20px
• Color de sombra: rgba(0,0,0,0.05)

CSS del título de Blurb

Y completaremos la configuración del módulo agregando la siguiente línea de código CSS al cuadro CSS del título de la propaganda en la pestaña avanzada:

Clone el módulo Blurb tantas veces como sea necesario

Una vez que haya completado el primer módulo de Blurb, puede clonarlo tantas veces como necesite.

Cambiar todo el contenido duplicado

Asegúrese de cambiar todo el contenido duplicado.

2. Aplicar efectos pegajosos

Abra el módulo de texto n. ° 1 en la columna 1

Ahora que todos los elementos están en su lugar, podemos centrarnos en el efecto pegajoso. Para hacerlo, abriremos el primer módulo de texto en la columna 1.

Hacer módulo pegajoso

Pase a la pestaña avanzada y aplique la siguiente configuración adhesiva:

• Posición pegajosa: Stick to Top
• Límite fijo inferior: Fila
• Desplazamiento de elementos adhesivos circundantes: Sí
• Estilos predeterminados y fijos de transición: Sí

Estilos pegajosos para el módulo

Color de fondo

Ahora que nuestro módulo se ha vuelto fijo, podemos aplicarle estilos fijos. Primero, agregue un color de fondo adhesivo negro.

• Color de fondo adhesivo: #000000

Color de texto

Luego, cambie el color del texto adhesivo H3 a blanco.

• Título fijo 3 Color del texto: #ffffff

Espaciado

Y complete los estilos adhesivos agregando los siguientes valores de relleno adhesivo receptivo:

• Relleno izquierdo pegajoso: 5%
• Relleno adhesivo derecho: 5 %

3. Clonar toda la fila para reutilizarla

Una vez que haya completado los pasos fijos, puede reutilizar toda la fila tantas veces como desee.

Cambiar todo el contenido duplicado

¡Asegúrate de cambiar todo el contenido duplicado y listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con el sitio web de su próximo restaurante. Más específicamente, le mostramos cómo crear un menú de restaurante fijo que le permita exhibir todos los elementos diferentes de una manera interactiva. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.