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

Si construye un sitio web de restaurantes, hay altas posibilidades de querer incluir un menú de restaurantes allí. Ahora, si está buscando una forma creativa de hacerlo en la división, le gustará este tutorial. Hoy, le mostraremos cómo usar las divisiones incrustadas de la Divic para crear un menú de restaurantes pegajosos. ¡El diseño que creamos divide los elementos en su menú por categorías y permite a los visitantes ver qué categoría es! Podrá descargar el archivo JSON de forma gratuita. Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! 1. Crear la estructura del elemento Agregue un nuevo color de fondo Abra la configuración de la sección y cambie el color de fondo.
Color de fondo: RGBA (255.252.244.0.6)
Imagen del sótano Carga una imagen de fondo de impresión a continuación. Puede encontrar el que usé en el archivo zip que puede descargar al comienzo de esta publicación.

El tamaño de la imagen de fondo: el tamaño real
Posición de la imagen de fondo: el centro superior
Repita la imagen de fondo: Repita x (horizontal)
Extienda y luego cambie la configuración de espaciado.

Revestimiento superior: 150 PX
Revestimiento inferior: 150 px
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho:
Escritorio y tableta: 80%
Teléfono: 95%
Ancho máximo: 1580 PX
Alineación de filas: centro
Agregue el módulo de texto no. 1 en 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 el contenido H3 a su elección.

Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H3 en consecuencia:

3 Fuentes de fuentes: Karla
Título 3 Fuente de peso: Bold
Rúbrica 3 Dimensión de texto:
Escritorio y tableta: 45 PX
Teléfono: 35 PX
Rúbrica 3 Espaciación de litros: -2 PX
Rúbrica 3 altura de línea: 1.2EmSparation Agregue algunos valores de llenado hacia arriba y hacia abajo.
Revestimiento superior: 25 px

Finamiento inferior: 25 PX
Agregue el módulo de texto no. 2 En la columna 1 Agregar contenido y luego, agregue otro módulo de texto justo debajo del anterior, con un contenido de su elección.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:

Texto de fuente: Crimson Pro

Color de texto: # 3a3a3a
Tamaño del texto: 32 PX
Espacio Complete la configuración del módulo cambiando la configuración de espaciado en consecuencia:
Margen superior: 20 PX

Margen inferior: 50 PX
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Agregue el módulo de imagen a la columna 1 Cargue la imagen El último módulo que necesitamos en la columna 1 es un módulo de imagen. Agregue una imagen de su elección.
Dimensión Agregue un ancho máximo a la configuración del tamaño.

Ancho máximo: 250 PX

Espaciado y complete la configuración del módulo aplicando los siguientes valores de llenado receptivo a la configuración de espaciado:

Margen inferior:

Tableta: 80 PX
Teléfono: 50 PX
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Agregue los módulos de la propaganda a la columna 2 Agregue el contenido a la columna 2. Agregue un módulo Blur con un contenido de su elección.
El color de fondo usa un color de fondo blanco.

Color de fondo: #ffffff

Configuración de texto de título Cambiar a la pestaña Diseño del módulo y modificar la configuración del texto del título según:
Título de la fuente: Karla

Título Fuente de peso: Bold
Color de texto del título: # 3a3a3a
Título del texto Tamaño:
Escritorio: 40 PX
Tableta: 35 PX
Teléfono: 30 PX
Cartas de espacio Título: -2px
Altura de la línea de título: 1.2em
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.
Font Corp: Karla

El color del texto del cuerpo: # 3A3A3 Adimensión del texto del cuerpo:
Escritorio: 18 PX
Tableta: 25 PX
Teléfono: 20 PX
Espacio de letras del cuerpo: -0.5 PX
La altura de la línea del cuerpo: 2em
Dimensión Entonces, cambie la configuración de tamaño de la siguiente manera:
Ancho de contenido: 100%
Espacio luego acceda a la configuración de espaciado y cambie los valores en consecuencia:

Margen inferior: 30 px
Revestimiento superior: 40 px

Revestimiento inferior: 40 px
ENLIZACIÓN IZQUIERDA: 8%
Junta derecha:
Escritorio: 25%
Tableta y teléfono: 8%
Borde, luego aplicaremos la siguiente configuración del borde:
Ancho del borde izquierdo: 3 PX
Color del borde izquierdo: # 000000

Box Shadow Usamos un tono de caja.
Poder de poco claro de la sombra de la caja: 20 px
Shadow Color: RGBA (0.0,0,05.05)

Título de la propaganda CSS y completaremos la configuración del módulo agregando la siguiente línea de código CSS a la casilla de título CSS Blurb: Margen-Bottom: 20px;
Clone el módulo de propaganda siempre que sea necesario después de que haya completado el primer módulo de propaganda, puede clonarlo con la frecuencia que necesite.
Cambie todo el contenido duplicado Asegúrese de cambiar todo el contenido duplicado.

2. Aplicar efectos adhesivos Abra el módulo de texto no. 1 En la columna 1 ahora, que todos los elementos están en su lugar, podemos centrarnos en el efecto pegajoso. Para esto, abriremos el primer módulo de texto en la columna 1.

Haga el módulo Sticky cambia a la pestaña avanzada y aplique la siguiente configuración adhesiva:

Posición pegajosa: adhiérase a la parte superior

Pequeño límite inferior: fila

Sticky Elements Offset circundante: sí
Transición predeterminada y estilos adhesivos: sí
Los estilos de palo para el color de fondo ahora que nuestro módulo se ha transformado pegajoso, podemos aplicar estilos pegajosos. Primero, agregue un color negro de fondo negro. Fondo pegajoso: # 000000
El color del texto entonces, cambie el color del texto pegajoso H3 a blanco.
Color de texto Sticky Heading 3: #ffffff

Espaciado y llenado estilos adhesivos agregando los siguientes valores receptivos de llenado adhesivo:
Stick Levante a la izquierda: 5%

Fin de la derecha de palo: 5%
3. Clonar toda la fila para su reutilización Después de haber recorrido escalones pegajosos, puede reutilizar toda la fila tantas veces como desee.

Cambie todo el contenido duplicado Asegúrese de cambiar todo el contenido duplicado, etc.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, te mostré cómo ser creativo con el próximo sitio de restaurantes. Específicamente, le mostré cómo crear un menú de restaurantes pegajoso, que le permite presentar todos los diferentes elementos de una manera interactiva. ¡Podrías descargar el archivo JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.