En esta ocasión vamos a ver cómo hacer una página web para un restaurante con Divi
En este artículo veremos lo fácil y sencillo que es crear una página web para un restaurante con Divi. Para quien no sepa qué es Divi, diremos que es un tema (y también un Visual Page Builder Plugin) desarrollado por Elegant Themes que está muy de moda actualmente. Puedes ver más información aquí.
Antes de meternos en materia, vamos a ver el resultado final que va a tener la web una vez esté finalizada:
Ahora vamos a ver cómo podemos crear una Página Web para un restaurante con Divi
Lógicamente, para poder hacer esta web necesitas tener instalado previamente el Tema Divi, si no lo tienes, puedes comprarlo aquí o descargarlo desde la sección de recursos.
Para poder construir correctamente la web y poder seguir los pasos del artículo, además del Tema Divi, necesitas descargar un layout que nos servirá de base.
Descarga el Layout desde aquí.
Importar el Layout en Divi
Tenemos que descargar e importar en Divi el contenido de este Layout para poder trabajar a partir de él. Para ello, lo descomprimimos y en el Escritorio de WordPress vamos a Divi –> Biblioteca de Divi –> Importar y exportar:
En esta pantalla anterior pulsamos el botón Elija un archivo o arrastramos el fichero descomprimido del Layout sobre el botón.
Hacemos clic en Importar diseños de divi builder y esperamos a que se importe correctamente.
Con esto ya tenemos importado en nuestro Divi un Layout con toda la información de la web demo de la página del restaurante.
Crear la Página base que contendrá el Layout
Ahora creamos una página nueva y añadimos el Layout que acabamos de importar desde el botón Cargar de biblioteca que tenemos en el constructor Divi:
Se abrirá una pantalla y tenemos que hacer clic en Añadir desde biblioteca y en la fila del Layout Diner Layout for Divi hacemos clic en el botón Cargar:
Ahora ya tendremos en nuestra página todas las secciones, bloques y el reto de información de la plantilla:
Hacemos clic en Publicar y prácticamente ya tenemos la página creada.
Configurar el menú de navegación de la página
Ahora tenemos que configurar el menú de la página. Esta plantilla utiliza un efecto Parallax, con lo que al hacer clic en cualquier entrada del menú,la pantalla baja hasta la sección concreta que hayamos elegido mostrar.
Para crear el menú vamos a Apariencia –> Menús y creamos un menú nuevo (puedes darle el nombre que quieras, yo en este caso lo he llamado Inicio).
Para añadir los enlaces de cada sección a la que queremos ir al hacer clic, vamos a hacerlo de esta forma. Hacemos clic en Enlaces personalizados y escribimos el nombre de cada sección a la que queremos bajar automáticamente, pero precedido de una almohadilla (#):
El nombre predeterminado de cada sección es:
- Chef= #chef
- Reservas= #reservation
- Opiniones= #reviews
- Contacto= #contact
Debemos asegurarnos de marcar la opción Menú principal para que el menú aparezca en su lugar.
Añadir los estilos personalizados al Layout
Para tener nuestra página igual que en la demo tenemos que añadir unos estilos CSS a Divi. Para ello tenemos que ir al menú Divi –> Opciones del tema y en la pestaña General, nos desplazamos hacia abajo del todo,y en el apartado CSS personalizado añadimos este código:
#main-header, #main-header.et-fixed-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
Ahora sólo tenemos que hacer que la página que hemos creado sea la página de inicio de nuestra web. Para ello vamos a Ajustes –> Lectura –> Página frontal muestra –> Página de inicio y en el desplegable elegimos Web Restaurante o el nombre que le hayamos dado a la página:
Por último, lo más importante
Si has llegado hasta aquí ya tienes la página como en la demo pero ahora llega el punto más importante: cambiar el contenido de prueba por el nuestro.
Para ello tan sólo tenemos que editar la página y buscar entre los módulos y secciones el contenido que queremos cambiar. Al principio será un poquito difícil si nunca has trabajado con Divi, pero una vez que te hagas con ello verás lo fácil que es crear una página web para un restaurante con Divi.
Tengo un RETO para ti
Si has sido capaz de instalar y configurar esta plantilla de un restaurante para Divi, te reto a que intentes hacer lo mismo con esta otra plantilla:
Ten en cuenta que de este reto sólo te beneficias tú, así que… ¡ánimo y a por ella!.
Te dejo los archivos (la Plantilla y el Código CSS) que necesitarás para hacer esta web.
Si no has sido capaz de hacer funcionar esta segunda web de restaurante para Divi, échale un vistazo al tutorial que he preparado para esta plantilla.
Recuerda
Puedes descargarte Divi (tema original con licencia GPL) de forma totalmente gratuita desde el apartado Recursos de esta web.
[whatsapp]
¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte. Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.
