Toda peluquería necesita un sitio web atractivo. Y con el poder de Divi detrás de usted (y esos maravillosos paquetes de diseño de Divi gratuitos) puede crear fácilmente un sitio web que cualquier barbero estaría orgulloso de tener.
Hoy, les mostraré cómo crear un sitio web para una barbería usando Divi. Comenzaré con el paquete Coffee Shop Layout. Estoy haciendo esto por algunas razones:
1. El diseño ofrece un excelente esquema de colores que se adapta a una barbería.
2. Los diseños de página son consistentes con lo que necesitaría un sitio web de peluquería.
Por ejemplo, la mayoría de las peluquerías ofrecen productos, por lo que la página de la tienda es una buena inclusión. Y el diseño del menú se puede convertir fácilmente en una página de servicios para enumerar todos los diferentes tipos de servicios de corte de cabello que se ofrecen. Y me gusta la idea de convertir esa página de guía de preparación en una página de proceso que lo guíe a través de la experiencia de corte de cabello «perfecto».
Lo que necesitas para este Tutorial
- Tema Divi instalado y activado.
- Paquete de diseño de cafetería importado a su biblioteca Divi. Puede elegir cualquier diseño que desee realmente, pero por el bien de este tutorial, me voy con el diseño de la cafetería para que tengamos un ejemplo de trabajo. Estoy seguro de que pronto habrá un diseño de barbería que hará las cosas aún más fáciles .
- Imágenes: usaré fotos de Shutterstock y algunas imágenes tomadas de otros paquetes de diseño. Al crear su propio sitio de barbería, asegúrese de elegir fotos de alta calidad con las dimensiones correctas para la columna que lo albergará (es decir, las imágenes de fondo deben tener al menos 1920 × 1080). También puede consultar esta guía definitiva para usar imágenes con Divi . Si está buscando una solución gratuita para imágenes de stock, visite unsplash.com.
Determine lo que necesita un sitio web de barbería
Para construir un sitio web efectivo para una barbería, al menos debe incluir lo siguiente (dependiendo de la barbería, obviamente):
- Información de contacto (incluido un formulario de contacto, horario de atención, dirección y número de teléfono)
- Programación de citas en línea o al menos información sobre cómo programar una cita.
- Precios
- Testimonios
- información del personal
- Información sobre la empresa y la historia
- Tienda en línea o Productos ofrecidos
- Excelentes fotos (tomas de antes y después, imágenes de la ubicación/edificio de la empresa, tomas de empleados en acción y fotos generales de increíbles cortes de cabello de alta calidad).
Con esta lista general como guía, podemos comenzar a personalizar nuestros diseños para incluir estos elementos y organizarlos de manera efectiva.
Crear páginas con nuevos diseños
Para este sitio de Barber Shop, voy a construir 4 páginas usando diseños de página del Paquete de diseño de cafetería. Aquí está la lista de páginas con el diseño que estoy usando para cada una.
- Página de inicio – cafetería de aterrizaje
- Página de contacto – contacto de cafetería
- Reservar página de cita – blog de cafetería
- Página de la tienda – cafetería
En este punto, deberá crear sus 4 páginas e importar el diseño correspondiente para cada una.
Ahora deberá crear un menú principal que sirva como navegación para su nuevo sitio. Asegúrate de agregar tus 4 páginas al menú.
Establece tu paleta de colores predeterminada
Vaya a Divi > Opciones de tema y agregue los siguientes colores en su paleta de colores predeterminada:
#1d2528
#3d3a35
#dca47d
Aunque realmente quiero usar esto mucho para el tutorial, me lo agradecerá más tarde cada vez que realice más personalizaciones en su propio sitio de peluquería, especialmente cuando tenga que crear contenido nuevo que no se encuentre en los diseños.
Agregue su color de acento global
Ve a Divi > Personalizador de temas > Configuración general > Configuración de diseño. Luego cambie el color de acento global a lo siguiente:
#dca47d
Este color se aplicará a más de 20 ubicaciones a lo largo de su tema (algunos lugares es posible que nunca los vea), pero dado que este es el color de acento del tema del diseño que estamos usando, es perfecto ya que agregar este color para actualizar el predeterminado color para enlaces e iconos (al menos).
Publique la configuración del personalizador de su tema y actualice su página para que los cambios surtan efecto.
Actualizar la configuración de tipografía en el personalizador de temas
Aunque su diseño tendrá una configuración de tipografía personalizada a nivel de módulo, es importante que averigüe cuáles son las fuentes de su diseño para poder incluirlas en su configuración de tipografía predeterminada dentro del personalizador de temas. Esto es necesario para hacer coincidir la fuente utilizada en su tema Divi (fuera de sus nuevos diseños) con las combinaciones de fuentes utilizadas en sus diseños. Esto también asegurará que cualquier texto adicional que agregue al crear nuevos módulos coincida con el sitio.
Ve a Divi > Personalizador de temas > Configuración general > Tipografía y actualiza lo siguiente:
Tamaño del texto del cuerpo: 18 px
Altura de la línea del cuerpo: 1,8 em
Tamaño de fuente del encabezado: 42 px;
Espaciado de encabezado: 2px
Altura de la línea del encabezado: 1,5 em
Estilo de fuente del encabezado: TT
Fuente del encabezado: Oswald
Fuente del cuerpo: Nunito
Color del texto del encabezado: #333333
En este punto, puede seguir adelante y asegurarse de que su barra de menú principal esté diseñada adecuadamente. Hay muchas formas diferentes de personalizar el menú de manera que coincida con este diseño, pero por ahora todo lo que voy a hacer es actualizar el tamaño de mi texto.
Desde el Personalizador de temas, vaya a Encabezado y navegación > Barra de menú principal y actualice lo siguiente:
Tamaño del texto: 18px
Estilo de fuente: Negrita (B), Mayúsculas (TT)
También debe notar que el texto del cuerpo predeterminado se ha agregado como fuente para el texto del menú. Además, el color del enlace activo, el color de la línea del menú desplegable y el icono del menú de hamburguesas en el móvil han heredado automáticamente el color de acento global.
Eso lo hace para la configuración inicial de su sitio web.
Si necesita un recordatorio sobre cómo configurar su diseño, consulte estos pasos .
Elegir un programador de citas en línea para su sitio de barbería
Según mi investigación en el momento de esta publicación, estoy un poco abrumado por la cantidad de opciones que existen, desde complementos gratuitos de WordPress hasta costosas empresas de SaaS .
La buena noticia es que muchos de ellos parecen funcionar bien (al menos los que he probado). Entonces, si el dinero es un problema, comience a probar algunos de esos complementos gratuitos de WordPress y avance hasta que tenga la funcionalidad y el diseño que desea en un servicio de reservas en línea para su sitio web.
Una opción gratuita para consultar sería el complemento de WordPress Easy Appointments , que parece estar dirigido a citas tipo barbería y tiene extensiones para integrar calendarios personales y pasarelas de pago.
Calendly también tiene una opción gratuita, pero deberá actualizar para desbloquear ciertas funciones, como múltiples tipos de eventos y pago en línea. Lo que me encanta de Calendly es la interfaz de usuario clara y sencilla. Es fácil de usar y definitivamente puedo ver que funciona bien para una barbería.
Vcita es una excelente solución todo en uno para su negocio que se extiende más allá del ámbito de la programación y básicamente manejará cualquier cosa que le presente (como la integración con Quickbooks). Aquí hay un desglose más detallado de Vcita .
AcuityScheduler es probablemente uno de mis favoritos debido a todas las potentes funciones de programación, pero debo admitir que hay una pequeña curva de aprendizaje.
Squareup es un software conveniente que tiene la capacidad de reservar citas y aceptar pagos, todo en un solo sistema. Mi peluquero en realidad usa este sistema y debo admitir que funciona bien (al menos desde la perspectiva del cliente). Y puede usar ese lector de banda magnética que puede conectarse a su ipad, lo que le brinda un proceso de pago fácil dentro de su tienda física.
Si está comprometido a ofrecer capacidades de reserva en línea en su sitio web de Barbershop, mi consejo sería elegir uno que sea extremadamente confiable y fácil de usar. Y si encuentra el perfecto para su negocio, el costo realmente no debería importar en ese momento. Tener un sistema de reserva automatizado que funcione para su negocio vale mucho más que lo que pagará mensualmente por cualquiera de los principales complementos de reserva de WordPress .
Optimización de la página de inicio
Para la página de inicio, definitivamente quiero tener un encabezado atractivo con una imagen de fondo atractiva. Esto establece el tono para el resto del sitio. Fuera de la caja, la página de destino tiene un encabezado atractivo. Así que solo necesito actualizar la imagen y el contenido para que se ajuste a una peluquería.
Convertí la sección debajo del encabezado en una sección que muestra los servicios y precios ofrecidos, junto con un CTA para reservar una cita.
Me deshice del video en la sección Nuestra historia y lo mantuve simple con un breve bloque de texto. Copié y pegué un botón de la sección de «servicios» anterior en caso de que quiera vincular a una página separada acerca de.
También personalicé algunas secciones de funciones para promocionar la tienda en línea y la atmósfera de la tienda.
Quería mostrar una sección de «Nuestro equipo» en la página de inicio, así que seguí adelante y tomé eso del diseño Acerca de Coffee Shop. Para hacer esto, en realidad agregué la cafetería sobre el diseño a mi página de inicio y eliminé todas las secciones además de la que quería. Aquí está cómo hacerlo.
Abra su menú de configuración en Visual Builder y seleccione Cargar desde biblioteca y luego la pestaña Agregar desde biblioteca. Anule la selección de la opción para reemplazar el contenido existente (esto agregará el nuevo diseño al final de su diseño actual como contenido adicional). A continuación, seleccione el diseño Acerca de la cafetería de la lista.
Ahora todo lo que necesita hacer es eliminar todo lo que no desea del contenido de la página acerca de importado debajo del contenido de su página de inicio (en este caso, todo menos la sección de nuestro equipo). Luego corte y pegue (o arrastre) la sección de nuestro equipo justo encima de la sección de contenido del pie de página.
Mantuve el diseño de la información de contacto del pie de página que creo que funciona bien en todas las páginas. Lo único que cambié fue la imagen de fondo de la sección.
Aquí está la página de inicio después de mis cambios:
Optimización de la página de la tienda
El diseño de Coffee Shop Shop ya tiene el módulo de tienda listo para implementar productos destacados en su página. Todo lo que necesita hacer es agregar nuevos productos a su tienda WooCommerce. Luego vuelva a cargar y observe cómo aparecen en su página.
Bastante simple.
Por supuesto, deberá agregar una nueva imagen de fondo a su sección de encabezado y pie de página.
Y no olvide seleccionar esta página como su página de tienda predeterminada desde WooCommerce. Para hacerlo, ve a WooCommerce > Configuración > Productos (pestaña) > Mostrar y selecciona esta página en el menú desplegable junto a «Página de la tienda».
Aquí está nuestro diseño final de la página de la tienda:
Optimización de la página de contacto
Además de actualizar esas imágenes de fondo y colores, agregué un CTA para reservar una cita en línea. También puede optar por incluir un formulario de reserva incrustado aquí si no desea una página separada para Reservar cita.
Además, el mapa necesita una API de Google para funcionar, así que no olvides encargarte de eso en tus Opciones de tema. También deberá integrar la lista de correo electrónico de su proveedor de servicios de correo electrónico en su formulario de suscripción de correo electrónico.
Creación de su página de reserva de citas
En lugar de que los botones Reservar cita redirijan a un sitio web de terceros, continúe e incruste su formulario en una página de su sitio web. Esta es una excelente manera de mantener la experiencia del usuario y el diseño consistentes en todo momento. La mayoría (si no todas) las soluciones de programación de citas ofrecen un código de inserción.
Este es un ejemplo de un formulario de programación de citas creado con AcuityScheduler I incrustado en un módulo de código. Todo lo que hice fue eliminar, actualizar las imágenes de fondo en el encabezado y el pie de página, eliminar el módulo de blog, agregar un módulo de código en lugar del módulo de blog y luego agregar el código abreviado proporcionado por AcuityScheduling.
Aquí está el resultado.
Pensamientos finales
Crear un nuevo sitio web para una barbería es mucho menos abrumador cuando sabes lo que necesitas y tienes el poder de Divi (y Divi Layouts ) a tu disposición. Mi propósito para este tutorial fue darle algunos consejos sobre lo que hace un buen diseño de barbería y luego algunas pautas generales sobre cómo configurar correctamente su nuevo diseño para impulsar el proceso de diseño. Podría haber entrado en más detalles sobre los pasos exactos y la configuración utilizada al realizar las personalizaciones en las 4 páginas, pero dado que muchos de ustedes elegirán un diseño diferente para su barbería, pensé que un enfoque más conceptual sería más adecuado para esta publicación.
Siéntete libre de compartir tus propios sitios Divi Barbershop con nosotros. Todos nos beneficiaríamos de la inspiración.
Espero escuchar de usted en los comentarios.
¡Salud!