Hay un tipo de negocio local que necesita desesperadamente sitios web sencillos e informativos: los restaurantes. Cuando se trata del restaurante promedio, los visitantes del sitio web generalmente solo quieren algunos datos: ubicación, horario y menú. Si se ofrecen pedidos o reservas, también el número de teléfono. Si puede proporcionar esas cosas en un formato atractivo, ¡lo ha hecho! Ha satisfecho las necesidades del 99,9% de las personas que buscan su negocio en línea.
Quería crear un recurso gratuito que cualquier propietario de un restaurante que usara Divi pudiera usar para poner en funcionamiento un sitio web atractivo de una sola página de manera rápida y sencilla. Así que creé Diner, un paquete de diseño Divi gratuito que proporciona todas las secciones de información esencial que necesita un restaurante local. ¡Disfrutar!
Este diseño es simple y no tiene mucho CSS personalizado, sin embargo, lo que sí tiene en abundancia son márgenes negativos. La mayor parte de la personalización se realizó mediante el uso de controles integrados de margen, relleno y medianil de Divi. Para obtener más información sobre el margen negativo y cómo usarlo, consulte esta publicación de Tom Ewer .
El diseño tiene 6 secciones: encabezado principal, información general, menú, reserva, reseñas y detalles de contacto. Puede expandir el diseño clonando filas o secciones.
Descargar el paquete de diseño de restaurante
Para usar el diseño Diner Diner gratuito en su propio sitio web Divi, 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 obtendrás aún más bondad de Divi. Además de poder descargar el paquete de diseño de DiviStar, también le enviaremos el paquete de diseño de la página de destino de Divi definitivo y le proporcionaremos una fuente continua de nuevos (y gratuitos) recursos, consejos, trucos y noticias de Divi.
Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se suscribirá dos veces.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
A continuación, busque el archivo Diner-layout-by-olga-summerhayes.zip en su carpeta de descargas y descomprímalo. Luego, navegue en su administrador de WordPress a Biblioteca Divi»>Divi > Biblioteca Divi y haga clic en el botón «Importar y exportar» en la parte superior de la página.
Cuando aparezca el modal de portabilidad, vaya a la pestaña de importación. Haga clic en el botón «elegir archivo» y seleccione el archivo Diner-Layout-for-Divi.json. Luego haga clic en el botón azul «Importar diseño de Divi Builder» y espere a que se complete la importación.
Una vez que la importación haya finalizado, podrá cargar su nuevo diseño de restaurante en cualquier página potenciada por el constructor yendo a Cargar desde biblioteca > Agregar desde biblioteca.
Configuración del paquete de distribución del restaurante
Para que la navegación se vea exactamente como la demostración, siga los pasos a continuación.
El primer paso es hacer que la navegación funcione. Ve a Apariencia > Menús y abre tu menú Principal (o crea uno si es un sitio nuevo).
Primero agregue la página que contiene el diseño a la navegación.
El siguiente paso es agregar enlaces personalizados para permitir la navegación a diferentes secciones de la página. En el diseño ya asigné una identificación única a todas las secciones.
Chef sección ID=“chef”
Sección menú ID=”menú”
Sección con reserva ID=”reserva”
Sección opiniones ID=”opiniones”
Detalles de contacto sección ID=”contacto”.
En el lado izquierdo de la página, abra Enlaces personalizados> en el campo «URL» agregue #sectionID, en el «Texto del enlace» agregue el texto para su menú. > Haga clic en «Agregar al menú».
Por ejemplo, para agregar el enlace a la sección Chef, agregue lo siguiente:
URL: #chef
Texto del enlace: chef
Haga clic en «Agregar al menú»
Deberá repetirlo para las 5 secciones.
Agregar CSS personalizado en las opciones del tema Divi
Ahora necesitamos eliminar el cuadro de sombra en la navegación.
Vaya a Divi > Opciones de tema > desplácese hacia abajo hasta la sección CSS personalizado y agregue este código:
|
01
02
03
04
05
|
#main-header, #main-header.et-fixed-header {-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;} |
Haga clic en el botón «Guardar cambios».
Configuración del personalizador
Ve a Divi > Personalizador de temas > Encabezado y navegación > Formato de encabezado. Para Estilo de encabezado, elija «Logotipo en línea centrado», deje otras opciones sin marcar.
Ve a Divi > Personalizador de temas > Encabezado y navegación > Barra de menú principal. Marque las siguientes opciones: «Hacer ancho completo» y «Ocultar imagen de logotipo».
Altura del menú: 52
Altura máxima del logotipo: 54 (predeterminado)
Tamaño del texto: 19
Espaciado entre letras: 1
Fuente: Josefin Slab
Color del texto: rgba(0,0,0,0.6)
Color de enlace activo: #2b3035
Color de fondo: #ffffff
Menú desplegable color: #ffffff
Color de la línea del menú desplegable: #08cac4
Color del texto del menú desplegable: rgba(0,0,0,0.6)
Cambie a Divi > Personalizador de temas > Encabezado y navegación > Configuración de navegación fija:
Los ajustes que tenemos que cambiar:
Marque la opción «Ocultar imagen del logotipo»
Altura del menú fijo: 52
Tamaño del texto: 19
Color de fondo del menú principal: #ffffff
Color del enlace del menú principal: rgba(0,0,0,0.6)
Color del enlace del menú principal activo: #282a2d
Cuando todo esté listo, haga clic en el botón «Guardar y publicar» en la parte superior. Su navegación debe parecerse a la demostración.
El paquete de diseño Diner de Olga Summerhayes
El diseño de Diner es perfecto para cualquiera que busque crear un sitio web simple para un restaurante local. Incluso puede duplicar y reutilizar las diversas secciones y módulos en este diseño de página única para expandir su sitio en varias páginas que mantienen la misma estética de diseño.
Diner: un diseño Divi para restaurantes
¿Alguna solicitud de diseño?
Si está interesado en expandir su Biblioteca Divi con aún más paquetes de diseño Divi gratuitos (¡¿y quién no?!), ¡Déjenos un comentario a continuación con su solicitud para el próximo! Tenemos una buena lista activa y planeamos mantener estos obsequios como un elemento básico habitual del blog.
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!