Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo agregar un mapa interactivo al diseño del blog del paquete de diseño de blog de viajes de Divi . Este mapa interactivo contendrá todos los continentes y al hacer clic, los visitantes serán redirigidos a la página de categoría de ese continente específico.
Antes de sumergirnos en este tutorial de caso de uso, echemos un vistazo rápido al diseño que puede esperar una vez que termine todos los pasos.
Parte 1: Descargue e instale el complemento gratuito de mapas HTML 5
Paso 1: Descarga el complemento
Comencemos descargando la versión gratuita del complemento HTML5 Maps. Este es solo uno de los muchos complementos de mapas interactivos en el mercado. Descargue HTML5 Maps yendo a la siguiente página y haciendo clic en el botón de descarga.
Paso 2: cárguelo en su sitio web de WordPress y actívelo
Una vez que lo haya descargado, continúe y cárguelo en sus complementos. Asegúrate de activar el complemento también.
Parte 2: crear categorías de publicaciones y asignar publicaciones de viajes a las categorías
Paso 1: Ir a Categorías de publicaciones
En la siguiente parte de esta publicación, crearemos un mapa mundial con todos los continentes. Al hacer clic en uno de estos continentes, los visitantes serán redirigidos a la página de categoría del continente en el que hicieron clic. Allí podrán ver todas las publicaciones de blog que hayas creado que sean relevantes para ese continente. Pero primero, necesitaremos crear las categorías y sus páginas al mismo tiempo. Para hacer eso, comience yendo a Publicaciones > Categorías .
Paso 2: crea una categoría para cada continente
Ahora, cree una categoría para cada uno de los continentes relevantes como puede ver en la pantalla de impresión a continuación.
Paso 3: asigna publicaciones a categorías relevantes
Deberá asignar cada uno de sus puestos existentes y futuros a uno de los continentes. Esto, por supuesto, dependerá del contenido de la publicación de tu blog. Una publicación de blog también se puede asignar a varios continentes si el contenido de su publicación de blog lo permite.
Parte 2: Crear mapa mundial
Paso 1: Ir a Mapas HTML
¡Ahora, pasaremos a la parte divertida! Crearemos un mapa interactivo yendo a nuestro complemento HTML5 Maps > Maps .
Paso 2: Agregar un nuevo mapa
Hay mapas gratuitos y mapas premium disponibles. El mapa del mundo que contiene los continentes es gratuito, así que ese es el que elegiremos. El mapa mundial que muestra los países es parte del complemento premium. Asigne un nombre a su mapa, seleccione el mapa correcto y haga clic en ‘Agregar un nuevo mapa’.
Paso 3: Vaya a Configuración del mapa
Ya hemos creado el mapa. Tendremos que hacerle algunas modificaciones para que coincida con nuestro paquete de diseño. Vaya a la configuración del mapa del mapa que ha creado.
Paso 4: modificar la configuración general
Aunque puede optar por hacer que el mapa responda, vamos a usar este mapa solo en el escritorio. Navegar en un dispositivo móvil difiere de navegar en una computadora de escritorio y, personalmente, no creo que agregar un mapa a la versión móvil sea la mejor manera de hacerlo. El mapa se reduciría debido al tamaño de la pantalla, lo que haría bastante difícil hacer clic en un continente. En la configuración general, aplique los siguientes cambios:
- Color de los bordes: #ff6b5b
- Sensible: Deshabilitado
- Ancho del mapa: 1200
- Altura del mapa: 600
Paso 5: modificar la configuración detallada para cada continente
En la pestaña Configuración detallada, modificas cada uno de los continentes individualmente. Aquí es donde deberá agregar la URL a la que desea que se redirija a los usuarios. La URL de cada continente deberá coincidir con el slug de su categoría y se verá así:
- yourwebsite.com/category/continent
Abra cada uno de los continentes individualmente y aplíqueles la siguiente configuración:
- Qué hacer cuando se hace clic en el área: Abrir una URL
- Url: yourwebsite.com/category/continent (cambiar al continente correspondiente)
- Color del área: #FF6B5B
- Color de desplazamiento del área: #d64c3d
Paso 6: copia el código abreviado
Guarda todos los cambios que hiciste y copia el shortcode del mapa que creaste:
Parte 3: agregar un mapa mundial a la página del blog
Paso 1: vaya a la página del blog y active Visual Builder
En la última parte de esta publicación de blog de caso de uso, agregaremos el mapa a nuestra página de blog. También puede colocar el mapa en otras páginas, pero dado que abrirá páginas de categorías, tiene más sentido colocarlo en la página del blog. Comience yendo a la página de su blog y habilitando Visual Builder.
Paso 2: agregue una nueva sección debajo de la sección Hero
Luego, agrega una nueva sección justo debajo de tu sección principal.
Paso 3: quitar el relleno inferior de la sección
Para reducir parte del espacio entre esta sección y la siguiente, eliminaremos todo el relleno inferior predeterminado de esta sección agregando ‘0px’.
Paso 4: Ocultar sección en tableta y teléfono
Como se mencionó anteriormente, solo haremos que este mapa aparezca en el escritorio por razones de UX. Vaya a la configuración de Visibilidad de su sección y deshabilite toda la sección en el teléfono y la tableta.
Paso 5: agregue una fila de una columna
Una vez que haya terminado con la configuración de su sección, continúe y agregue una fila con una columna.
Paso 6: Agregar módulo de texto con código abreviado
El único módulo que necesitaremos agregar es un módulo de texto que contiene el código abreviado que generamos en la parte anterior de esta publicación.
Paso 7: Guardar página y salir de Visual Builder
¡Eso es todo! Lo único que queda por hacer es guardar su página y salir de Visual Builder. ¡Tu mapa interactivo está listo para ser utilizado!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado que hemos logrado.
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo agregar un mapa interactivo al paquete de diseño de blog de viajes de Divi . Para ello, hemos utilizado un mapamundi con todos los continentes. Al hacer clic en uno de los continentes, los visitantes serán redirigidos a la página de categoría de ese continente en particular. Si tiene alguna pregunta, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!