Cómo utilizar el exclusivo paquete de diseño de panadería Cyber ​​Monday para crear una página de ubicaciones para su negocio

¡Este año, conseguir una oferta de Cyber ​​Monday significa conseguir un montón de cosas gratis también! Además de disfrutar de un descuento del 25%, todos los que compren una nueva Membresía de Elegant Themes o actualicen su cuenta existente (o que ya tengan una Membresía de por vida) también recibirán 6 paquetes de diseño gratuitos y exclusivos que SOLO están disponibles para descargar durante nuestra oferta de Cyber ​​Monday.

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Una mirada al interior del exclusivo paquete de diseño de panadería Cyber ​​Monday

Uno de los paquetes de diseño exclusivos que le ofrecemos como miembros vitalicios y nuevos clientes de Cyber ​​Monday es este para panaderías. Consta de 5 sabrosas páginas que harán irresistible cualquier sitio web de panadería.

Diseño de página de destino

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Diseño de página de recetas

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Diseño de página de menú

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Acerca del diseño de la página

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Diseño de página de contacto

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Obtenga el paquete exclusivo de diseño de panadería Cyber ​​Monday

Antes de entrar en este caso de uso, deberá tener en sus manos el paquete exclusivo de diseño de panadería Cyber ​​Monday, que puede obtener al convertirse en un nuevo miembro de Elegant Themes, actualizar su cuenta existente o si ya es miembro de por vida con nosotros. Si ya es miembro vitalicio, puede iniciar sesión en nuestra área de miembros y descargar todos nuestros paquetes de diseño exclusivos aquí. Todos los demás deberán usar el botón a continuación para comprar o actualizar antes de poder seguir el resto de nuestro tutorial.

¡Descargue el diseño exclusivo antes de que desaparezca!

¿Ya es miembro vitalicio? Puede descargar el paquete ahora mismo, ¡no es necesario participar en nuestra oferta de Cyber ​​Monday!

Cómo utilizar el exclusivo paquete de diseño de panadería Cyber ​​Monday para crear una página de ubicaciones para su negocio

Para el resto de esta publicación, asumiremos que ha aprovechado nuestra oferta de Cyber ​​Monday o que ya es miembro vitalicio y tiene acceso al paquete de diseño de panadería.

Una vez que haya descargado el nuevo paquete de diseño de panadería de nuestra área de miembros, puede ver el video a continuación para ver lo fácil que es configurarlo. También le recomendamos que siga este tutorial para preparar su sitio para una mayor personalización.

Ahora entremos en el caso de uso en sí.

Al crear un sitio web para una empresa con más de una ubicación, es importante pensar en la mejor manera de comunicar esa información a los visitantes. Necesitan saber qué ubicación está más cercana a ellos y cualquier información importante específica de esa ubicación. Y crear una página de ubicaciones para el sitio web es un gran comienzo.

En este caso de uso, le mostraré lo increíblemente fácil que es crear una página de ubicaciones profesionales para su negocio utilizando el paquete de diseño de panadería.

Usando el marco del diseño de la página de contacto de la panadería, le mostraré cómo agregar pines adicionales a su módulo de mapa para reflejar todas las ubicaciones de su negocio junto con secciones bien organizadas y diseñadas para mostrar información importante para cada ubicación. Debido a que podemos usar los elementos de diseño que ya proporciona el diseño, este proceso es refrescante y divertido (al menos para mí).

Empecemos.

Comience por usar el diseño de contacto para crear su página de ubicaciones

El diseño de la página de contacto de panadería es perfecto para usar como base para nuestra nueva página de ubicaciones. Tiene un módulo de mapa en la parte superior que usaremos para mostrar cada una de las ubicaciones de nuestra empresa. Además, tiene algunos otros elementos como módulos de texto que ya están diseñados y que podemos reorganizar y modificar según sea necesario.

Crear nueva página

Primero, necesitará crear una nueva página y darle un título (algo así como “Nuestras ubicaciones”) y hacer clic para usar divi Builder y luego el constructor visual.

Cargar diseño de página de contacto de panadería

En este punto, ya debería tener los diseños de página cargados en su Biblioteca Divi. Haga clic para abrir el menú púrpura en la parte inferior de la página y seleccione el botón "Agregar desde la biblioteca" con el icono más. Seleccione la carga de la pestaña de la biblioteca y luego seleccione el diseño de contacto de panadería de la lista. El diseño se cargará inmediatamente en la página.

Publicar.

Agregar secciones para su información de ubicación específica

Realmente no tenemos mucho contenido en la página de contacto para usar para crear contenido adicional para nuestras ubicaciones específicas. Entonces, vayamos a la página de aterrizaje de la panadería y seleccione la fila de la segunda sección de la página y guárdela en la biblioteca.

Ahora vuelve a la página de ubicaciones. Duplique la sección en la parte inferior de la página que contiene el formulario de contacto (no elimine esto, lo necesitaremos más adelante). En la sección directamente debajo del mapa, elimine toda la fila de la sección y agregue la fila que guardó de su biblioteca.

A continuación, cambie el diseño de la columna de la fila a un diseño de dos tercios un tercio.

Busque el módulo de texto con el contenido de la dirección en la columna derecha de la sección inferior. Arrástrelo debajo del módulo de imagen en la columna derecha de la fila en la sección de arriba.

Luego actualice el Contenido en los módulos de texto en la columna de la izquierda para representar la ubicación específica de su empresa. Para mi ejemplo, agregaré lo siguiente:

Sede principal
Nueva York

Ahora actualice el módulo de imagen en la columna de la derecha para incluir una imagen de la ubicación de su empresa.

Esto servirá como una buena sección para cada uno de sus anuncios de ubicación específicos.

Ahora todo lo que necesita hacer es duplicar esta sección para agregar ubicaciones adicionales.

Duplique esta sección dos veces para tener un total de 3 secciones de ubicación. Luego, cambie el color de fondo de la sección de ubicación central a blanco para ayudar a dividir mejor las secciones.

Luego, actualice las secciones duplicadas con contenido específico de la ubicación. Para este ejemplo, además de mi ubicación en Nueva York, también crearé una sección para San Francisco y Houston.

Diseñar la sección de pie de página del formulario de contacto

Recuerda esa sección que guardamos en la parte inferior que contiene nuestro formulario de contacto. Esto servirá como una excelente sección de pie de página para nuestra página de ubicación. Todo lo que tenemos que hacer es modificarlo un poco.

Primero, eliminemos los módulos restantes en la columna de la derecha. Luego actualice el diseño de la columna de la fila a un diseño de una columna. Ahora todo lo que debería ver es el formulario de contacto en una fila de una columna.

A continuación, haga clic para editar la configuración de la fila y actualizar lo siguiente:

En la pestaña de contenido ...

color de fondo: #ffffff

En la pestaña Diseño…

relleno personalizado: 5% arriba, 5% derecha, 5% abajo, 5% izquierda

Sombra de cuadro: [seleccionar sombra de cuadro]

Ahora agreguemos una imagen de fondo para nuestra sección. Vaya a la configuración de la sección y seleccione una de las imágenes de fondo incluidas en el diseño.

¡Excelente! Ahora pasemos al módulo de mapas.

Agregue su clave API de Google

En este punto, deberá asegurarse de crear su clave API de Google y luego agregarla a las Opciones de tema.

Actualizar el módulo de mapa con nuevos pines de ubicación

En este punto, la mayor parte de nuestra página se ha completado. Todo lo que queda son las actualizaciones del módulo de mapas en la parte superior de la página. Necesitamos agregar las nuevas ubicaciones de los pines para las tres secciones que creamos en las secciones de la página (Ciudad de Nueva York, San Francisco y Houston).

Haga clic para editar el módulo de mapas y actualizar la configuración de la siguiente manera:

Borre el pin que se muestra en el módulo para comenzar de nuevo. Luego agregue un nuevo pin y actualice la configuración de la siguiente manera:

Título: Panadería de la ciudad de Nueva York
Contenido: Más información
Dirección del pin del mapa: Ciudad de Nueva York

Haga clic en el botón Buscar.

Luego agregue un nuevo pin y actualice la configuración de la siguiente manera:

Título: San Francisco Bakery
Contenido: más información
Dirección del pin del mapa: San Francisco

Haga clic en el botón Buscar.

Luego agregue un nuevo pin y actualice la configuración de la siguiente manera:

Título: Houston Bakery
Contenido: más información
Dirección del pin del mapa: Houston, TX

Haga clic en el botón Buscar.

Puede dejar la dirección del centro de mapas como Nueva York. Pero ajuste la visualización del mapa para alejar lo suficiente como para poder ver todas las ubicaciones cuando el visitante vea el mapa por primera vez.

Agregar enlaces de anclaje a los cuadros de contenido de los pines

Como característica adicional, puede mejorar la experiencia del usuario agregando un enlace de anclaje dentro del contenido del pin que aparece al hacer clic en el pin. Este enlace de anclaje llevará al usuario por la página a la sección específica de la página que muestra la información de esa ubicación.

Abra la configuración del módulo de mapa y luego edite la configuración del primer pin. Resalte el texto en el cuadro de contenido que dice "Más información" y luego haga clic en el icono de enlace para convertirlo en un enlace. Para la URL, ingrese "#newyork" y haga clic en Aceptar.

Haga lo mismo con el pin de San Francisco (use la URL “#sanfran”) y el pin de Houston (use la URL “#houston”).

Ahora todo lo que necesita hacer es agregar una ID de CSS personalizada a cada una de sus secciones que corresponderá a las URL de enlace que acaba de crear en los pines.

Para la sección "Ciudad de Nueva York", actualice la configuración de la sección en la pestaña Avanzado con el ID de CSS "newyork" y guarde su configuración.

Ahora, cuando el usuario haga clic en el enlace "más información" (con la URL #newyork) en el pin de Nueva York, la página pasará a esa sección.

Haga lo mismo para la sección de San Francisco (use el ID de CSS "sanfran") y la sección de Houston (use el ID de CSS "houston")

Eso es todo. ¡Has terminado!