Cómo crear una página de mapa de sitio HTML dinámico en Divi

Una página de mapa de sitio HTML puede ser útil para los usuarios que buscan navegar en su sitio Divi desde una vista panorámica. Básicamente, un mapa del sitio HTML (como sugiere el nombre) es un mapa de su sitio en HTML. La página del mapa del sitio generalmente contiene una lista organizada de enlaces a todo el contenido relevante en su sitio. Una página HTML del mapa del sitio se puede crear manualmente, pero ayuda si puede generar el contenido de la página del mapa del sitio dinámicamente para que no tenga que preocuparse por las actualizaciones constantes.

En este tutorial, le mostraremos cómo crear un diseño de página de mapa de sitio HTML dinámico en Divi usando una combinación de Divi Design y el complemento WP Sitemap Page. La configuración es extremadamente fácil y el resultado es sorprendentemente efectivo.

Empecemos.

Vistazo

Descargue el diseño de página del mapa del sitio HTML GRATIS

Para poner sus manos en el diseño de la página del mapa del sitio de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Suscríbete a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.

NOTA: Este diseño se basa en los códigos abreviados utilizados con el complemento WP Sitemap Page. Si no tiene el complemento activo en su sitio, no verá el contenido dentro de los módulos.

Lo que necesitas para este tutorial

Para este tutorial, necesitará lo siguiente:

El tema Divi .
Contenido de WordPress. Para generar contenido de página de mapa de sitio HTML, necesitará tener páginas, publicaciones, categorías, productos, etc. en su sitio.
El complemento de la página del mapa del sitio de WP . Se puede acceder a esto desde el panel de control de WordPress, que le mostraremos cómo hacerlo a continuación.

Vayamos al tutorial, ¿de acuerdo?

Diferencia entre mapas de sitio XML y HTML

Si eres nuevo en los sitemaps, existen básicamente dos tipos: XML y HTML. Los mapas de sitio XML se generan específicamente para brindar a los motores de búsqueda un mapa detallado de su sitio. En su mayor parte, los mapas de sitio XML existen estrictamente para motores de búsqueda como Google para facilitarles el rastreo de su sitio, lo que ayudará a mejorar su clasificación. Como tal, los sitios XML no son para el usuario. Aquí es donde entran en juego los mapas de sitio HTML . Los mapas de sitio HTML están integrados en HTML real (y PHP, ya que estamos usando Divi y WordPress) en una página de mapa de sitio real en su sitio web. La idea es generar una lista organizada de todo el contenido relevante del sitio web (publicaciones, páginas, productos, categorías, etc.) para el usuario en un lugar conveniente. Básicamente, una página de mapa de sitio HTML es como un mega menú para todo su sitio.

Para obtener más información sobre los mapas de sitio (por ejemplo, cómo crear un mapa de sitio XML en WordPress), consulte nuestra publicación sobre cómo crear un mapa de sitio para su sitio de WordPress .

Configuración del complemento

Para este tutorial, vamos a utilizar un complemento de WordPress GRATUITO pero efectivo llamado WP Sitemap Page que nos permitirá mostrar el contenido del mapa del sitio de forma dinámica dentro de un módulo Divi mediante el uso de códigos abreviados.

Para descargar el complemento, vaya a su Panel de WordPress y navegue a complementos> Agregar nuevo. Luego busque el complemento de la página del mapa del sitio wp usando la barra de búsqueda y luego instale y active el complemento.

Para abrir la configuración del complemento de la página del mapa del sitio de WP, vaya a Configuración > Página del mapa del sitio de WP. Allí verás los ajustes disponibles. Para este tutorial, vamos a dejar solo las opciones en la pestaña de configuración, pero siéntase libre de verlas más adelante.

Haga clic en la pestaña Cómo usar para ver todos los ejemplos de shortcode disponibles que podemos usar para mostrar el contenido de la página de nuestro mapa del sitio. Los resaltados son los que usaremos.

Creación de la página del mapa del sitio HTML en Divi

Una vez que se hayan configurado los complementos, estamos listos para comenzar a diseñar el diseño de la página del mapa del sitio en Divi.

Crear una nueva página

Para comenzar, cree una nueva página, asígnele el título «Mapa del sitio», luego haga clic en «Usar Divi Builder».

Agregar el diseño prefabricado a la página

Será recibido con tres opciones sobre cómo desea construir su página. Seleccione «Elegir un diseño prefabricado».

Luego busque y encuentre el paquete de diseño de revista y haga clic para usar el diseño de página de categorías.

Eliminación de elementos innecesarios

Dado que solo usaremos la sección superior de este diseño prefabricado, una vez que el diseño esté cargado en la página, elimine todas las secciones debajo de la primera sección.

Luego agregue una nueva sección regular debajo de la sección superior.

Adición de fila n.° 1 para mostrar páginas

Para nuestra primera fila, agregaremos el contenido de la página del mapa del sitio HTML que mostrará todas las páginas del sitio. Comencemos agregando una fila de una columna.

Adición de un módulo de texto a las páginas de visualización

Dentro de la fila, agregue un nuevo módulo de texto.

Luego pegue lo siguiente dentro del cuadro de contenido debajo de la pestaña de texto:

<h2>Pages</h2>
 
[wp_sitemap_page only="page" display_title="false"]

Configuración de diseño de texto

Aunque la mayor parte del contenido de texto se genera mediante un código abreviado, aún podemos diseñar esos elementos utilizando la configuración de diseño integrada de Divi. Vaya a la pestaña de diseño y actualice lo siguiente:

Fuente del texto: Montserrat
Peso de fuente de texto: Negrita

Luego seleccione la pestaña de configuración del enlace y actualice lo siguiente:

Color del texto del enlace: #333333

A continuación, seleccione la pestaña de configuración de la lista desordenada y actualice lo siguiente:

Color de texto de lista desordenada: #c5e0dc
Tipo de estilo de lista desordenada: Cuadrado
Posición de estilo de lista desordenada: interior
Sangría de elemento de lista desordenada: 5vw

NOTA: Cualquier estilo de enlace anulará los estilos de lista desordenada. Es por eso que podemos agregar este color de texto de lista desordenada y solo se aplicará a las pequeñas viñetas cuadradas.

Actualice el estilo Título 2 de la siguiente manera:

Título 2 Fuente: Montserrat
Encabezado 2 Peso de fuente: Negrita
Título 2 Tamaño del texto: 3vw (escritorio), 38px (tableta)

Luego actualice el espaciado con un margen negativo izquierdo para tirar del módulo un poco hacia la izquierda. Esto agregará un bonito diseño superpuesto con nuestro encabezado y nuestra sombra de caja.

Finalmente, agregue una clase CSS personalizada al módulo para que podamos orientarlo más adelante con algún CSS personalizado para dividir el contenido en columnas.

Clase CSS: lista de columnas

Configuración de fila

Ahora actualice la configuración de la fila de la siguiente manera:

Margen: 5vw inferior

Sombra de caja: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -5vw
Posición vertical de la sombra del cuadro: 0px
Color de sombra: #c5e0dc

Agregar fila n. ° 2 para mostrar publicaciones y categorías

Fila duplicada para crear una nueva

En nuestra segunda fila, vamos a mostrar el contenido de la página del mapa del sitio HTML para nuestras publicaciones de blog. Para crear la segunda fila, duplique la fila que acabamos de crear que contiene nuestras páginas.

Actualizar módulo de texto con shortcode para mostrar categorías

Luego abra la configuración para el módulo de texto en la fila duplicada y reemplace el contenido con lo siguiente:

<h2>Categories</h2>
 
[wp_sitemap_page only="category" display_title="false"]

Este shortcode mostrará dinámicamente las categorías de publicaciones.

Módulo de texto duplicado para mostrar títulos separados para publicaciones por categoría

Para mostrar las publicaciones por categoría, duplique el módulo de texto que contiene las categorías de publicaciones y actualice el contenido con lo siguiente:

<h2>Posts by Category</h2>

Duplique el módulo de texto y actualice el contenido con Shortcode para enumerar publicaciones por categoría

Vamos a poner el título en un módulo de texto separado del shortcode por razones de diseño.

Duplique el módulo de texto que acaba de duplicar una vez más.

Luego actualice el contenido del nuevo módulo de texto duplicado con un nuevo código corto de la siguiente manera:

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

Actualice el diseño de contenido de código corto con Divi

Debido a que este shortcode tiene una lista anidada, necesitaremos optimizarlo de manera un poco diferente. Haga clic en la pestaña de diseño y actualice lo siguiente:

Posición de estilo de lista desordenada: exterior
Sangría de elemento de lista desordenada: 0px

Margen: 0px a la izquierda
Acolchado: 3.2vw izquierda

Luego reemplace la Clase CSS con lo siguiente:

Clase CSS: columnas flexibles

Agregando la Fila #3 para Productos

En esta tercera y última fila, agregaremos el contenido de la página del mapa del sitio HTML que muestra las categorías de productos y todos los productos.

Fila duplicada #1

Para comenzar, dupliquemos la fila superior (la que muestra las páginas).

Actualizar la configuración del módulo de texto para mostrar las categorías de productos

Luego actualice la configuración de texto del duplicado con el siguiente contenido:

<h2>Product Categories</h2>
 
[wp_sitemap_page only="product_cat" display_title="false"]

Este shortcode mostrará las categorías de productos.

Módulo de texto duplicado para mostrar productos

A continuación, duplique el módulo de texto que acaba de crear.

Luego actualice la configuración de texto duplicado con el siguiente contenido:

<h2>Products</h2>
 
[wp_sitemap_page only="product" display_title="false"]

Este shortcode mostrará todos los productos en todo el sitio.

Actualizar color de sombra de cuadro de fila

Para dar un poco de separación entre las secciones, podemos cambiar la sombra del cuadro por la fila que contiene nuestras categorías de productos y productos. Para hacer esto, actualice la configuración de la fila de la siguiente manera:

Color de sombra: #ffc077

Actualizar encabezado de página

Antes de que lo olvidemos, salte a la sección superior y actualice los dos módulos de texto con el texto «Mapa del sitio». Esto le dará un título preciso para nuestra página de mapa del sitio.

resultado hasta ahora

Aquí está el resultado hasta ahora.

Este diseño de una columna se ve muy bien tal como está, así que siéntase libre de terminarlo y seguir adelante. Pero si desea mejorar el diseño con varias columnas, consulte a continuación.

Agregar varias columnas al contenido de la página del mapa del sitio con CSS personalizado

En este momento, el diseño predeterminado mostrará el contenido de la página del mapa del sitio en una sola columna. Si desea dividir esto en varias columnas en el escritorio y la tableta, puede agregar CSS personalizado a un módulo de código en Divi.

Primero, agregue el módulo de código en la parte inferior de la página (no importa dónde).

Luego pegue el siguiente código CSS en el cuadro de código:

<style>
@media all and (min-width: 767px) {
   
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
   
}
</style>

Este fragmento de CSS solo se aplica a una tableta grande y superior. El código apunta a los módulos de texto con las clases CSS que les agregamos anteriormente. Para el módulo de texto con la clase «flex-columns», el código abreviado que genera las publicaciones por categoría se divide en columnas de 300 px de ancho. Los módulos de texto con la clase «lista de columnas» dividirán el contenido de la página del mapa del sitio de shortcode en tres columnas.

Resultado final

¡Mira el resultado final!

Otras formas de agregar contenido del mapa del sitio

También podemos agregar contenido del mapa del sitio a la página del mapa del sitio usando widgets de WordPress , módulos Divi y códigos cortos de WooCommerce.

Usar widgets de WordPress

WordPress tiene algunos widgets estándar que mostrarán cosas como páginas, categorías y productos. Se pueden encontrar en el panel de control de WordPress en Apariencia > Widgets. Siéntase libre de aprovechar aquellos que usan el módulo de la barra lateral de Divi si necesita agregar algo a la página del mapa del sitio.

Utilice el módulo Divi Blog

El módulo de blog de Divi viene con configuraciones integradas para mostrar publicaciones, páginas, proyectos y productos. Y si adopta un enfoque minimalista para el diseño, puede obtener una lista personalizable bastante interesante para las páginas del mapa del sitio.

Por ejemplo, podemos agregar un nuevo módulo de blog y seleccionar productos como el tipo de publicación y darle un recuento de publicaciones lo suficientemente grande como para que ahora muestre todos los productos en nuestro sitio.

Luego podemos ocultar todos los elementos excepto el enlace/título del producto.

También podemos hacer lo mismo para las páginas. Simplemente seleccione páginas para el tipo de publicación.

Código abreviado del producto

Para los productos de WooCommerce, podemos usar el código abreviado del producto de WooCommerce para generar listas de productos o listas de categorías de productos. El shortcode del producto es muy robusto y versátil para mostrar los productos como quieras. Incluso puede usar el código abreviado dentro de un Módulo Divi para aprovechar las configuraciones integradas.

Pensamientos finales

El uso del complemento WP Sitemap Page combinado con el poder de Divi es una buena solución simplificada para generar una página de mapa de sitio HTML dinámica para su sitio web. Y puede agregar fácilmente más contenido dinámico a la página de su mapa del sitio usando cualquier combinación de módulos Divi y códigos cortos de WooCommerce también. Siéntase libre de experimentar y encontrar el diseño adecuado que se adapte a sus necesidades.

Espero escuchar de usted en los comentarios.

¡Salud!