Crear una Página Web para un restaurante con Divi

Crear una web para un restaurante con Divi

Tiempo estimado de lectura: 13 minutos

 

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:

 

Crear una Página Web para un restaurante con Divi

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:

Crear otra web para un restaurante con Divi

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.

¿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.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *