Coffee House: Un Layout gratuito para Cafés y Coffee Shops

Tiempo estimado de lectura: 15 minutos

 

Coffe House, el Layout gratuito para Cafés y Coffee Shops

Coffee House es, como su nombre lo sugiere, el Layout gratuito para Cafés y Coffee Shops que puedes crear con Divi. Lo han hecho lo más versátil posible, así que si te gusta la estética estoy seguro de que puedes encontrar muchos usos para el diseño en su conjunto o sus secciones individuales.

Descargando, Instalando y Configurando el Paquete de Diseño de la Cafetería

Layout gratuito para Cafés y Coffee Shops

Para usar el Layout gratuito Coffee House en tu propio sitio web Divi, primero tendrás que descargarlo desde aquí.
A continuación, busca el archivo Coffee-house-divi-layout-by-olga-summerhayes.zip en tu carpeta de descargas y descomprímelo. Luego, navega con tu administrador de WordPress a Divi> Divi Library y haz clic en el botón «Importar y exportar» en la parte superior de la página.
Cuando aparezca la ventanita para importarlo, vete a la pestaña de importación. Haz clic en el botón «elegir archivo» y selecciona el archivo Coffee-House-Layout-for-Divi.json. A continuación, haz clic en el botón azul «Importar diseño de Divi Builder» y espera a que finalice la importación.

Cargar el diseño importado en una página

Una vez finalizada la importación, tendráa la posibilidad de cargar tu nuevo diseño de cafetería en cualquier página generada por el constructor, si lo vas a Cargar desde la biblioteca> Agregar desde la biblioteca.

Configuración del paquete de diseño de la cafetería

Para que el diseño se vea como la demo, tendrás que cuidar algunas cosas:
Navegación:
Para esta demo se utilizó el complemento Divi Header Extention de Elegant Themes. Sube la extensión a tu sitio web.
Después de instalar Divi Header Extension encontrarás un nuevo elemento de menú en tu navegación de WordPress llamado Divi 100.

Configurar Divi Header Extension

Abre Divi 100 y selecciona lo siguiente:
Selecciona Tipo: 1
Selecciona el estilo: 5
(Puedes elegir el otro estilo si lo prefieres).
Selecciona Color predeterminado: #ffffff
Selecciona Active Color: # d7bc99
Haz clic en «Guardar cambios».
Ir a Divi> Personalizador de temas> Encabezado y navegación> Formato de encabezado
Para Estilo de encabezado, elije «Pantalla completa».
Vete a Divi> Personalizador de temas> Encabezado y navegación> Ajustes de encabezado y encabezado de pantalla completa.

Más opciones de configuración

Comprueba las siguientes opciones:
Asegúrate de que «Mostrar barra superior» no está seleccionado.
Tamaño del menú: 32
Espaciado de letras: 1
Fuente: PT Sans
Estilo de fuente: selecciona «B» para negrita y «TT» para mayúsculas
Color del fondo: rgba (45,46,65,0.93)
Color del enlace del menú: #ffffff
Active Link Color: # d7bc99
Haz clic en «Guardar y publicar».

Customizer Navigation Settings for Coffee House layout

Ajustes en el logotipo

Para asegurarse de que el logotipo no se contraiga después de desplazarse:
Ir a Divi> Personalizador de temas> Encabezado y navegación> Barra de menús primarios.
Selecciona «Hacer ancho completo»
Altura del menú: 66
Ajusta el tamaño de la insignia para adaptarse a tu logotipo.

Customize Primary Menu settings Coffee House layout

Cambia a Divi> Personalizador de temas> Encabezado y navegación> Ajustes de navegación fijos. Asegúrate de que la Altura fija del menú es la misma que la Altura del menú principal.
Altura fija del menú: 66
Botones «flotantes»:

Configurar los botones

Para esta disposición, los botones han sido diseñados para parecer que están flotando y creado la ilusión de los botones que se empujan adentro. Esto se hace agregando efecto de sombra de cuadro y cambiando los valores de sombra de cuadro en el desplazamiento.
Para obtener el efecto flotante / presionando, debes agregar el código css a continuación.
Abrir Divi> Opciones de tema> desplázate a CSS personalizada> agrega el código que se muestra a continuación:

a.et_pb_button, a.et_pb_promo_button.et_pb_button, .et_pb_contact_submit.et_pb_button {
box-shadow: 0 8px 20px 1px rgba(0,0,0,0.3);
}
a.et_pb_promo_button.et_pb_button:hover, a.et_pb_button:hover, .et_pb_contact_submit.et_pb_button:hover {
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1)
}

Haz clic en «Guardar cambios». Ahora comprueba tu página, todos sus botones deben «flotar».

Centra el botón «Enviar» del formulario de contacto

La última cosa que vamos a hacer es agregar es el código css para centrar el botón «Enviar» del formulario de contacto.
Abrir Divi> Opciones de tema> CSS personalizado> agrega el siguiente código:

.et_contact_bottom_container {
float: none;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}

Haz clic en «Guardar cambios». Eso es todo.

Ya tenemos terminado el Layout gratuito para Cafés y Coffee Shops con Divi

El diseño de la cafetería se puede utilizar para crear un sitio web simple para un lugar de café local. Al igual que con la mayoría de los diseños, puedes duplicar y volver a utilizar las secciones y módulos para expandir tu sitio en un sitio web de varias páginas.
Este diseño tiene algunas secciones que serán de utilidad para los clientes de la cafetería: La sección «Lo que elaboramos» enumera el café disponible y podría ampliarse o convertirse en la sección «menú».

La sección «El origen de nuestros granos de café» cuenta una historia del café que se vende en la cafetería y de dónde proviene. La información de esta sección se puede ampliar en otras páginas, donde puedes tener más detalles sobre el café o información sobre el negocio mismo.

Otras secciones importantes son: «Testimonios», «Contacto» y el «Mapa» para ayudar a nuevos clientes a localizar el negocio.

Si has seguido los pasos así es como quedaría el Layout gratuito para Cafés y Coffee Shops realizado con Divi.

Layout gratuito para Cafés y Coffee Shops

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