Una página de mapa de sitio HTML puede ser útil para los usuarios que buscan navegar su sitio Divi desde una vista panorámica. Básicamente, un mapa del sitio HTML (como su nombre lo indica) 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 todo su sitio. Se puede crear una página HTML Sitemap manualmente, pero es útil 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 utilizando 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.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

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:

  1. El tema Divi .
  2. Contenido de WordPress. Para generar contenido HTML de la página del mapa del sitio, necesitará tener páginas, publicaciones, categorías, productos, etc. en su sitio.
  3. El complemento WP Sitemap Page . 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 XML y HTML Sitemaps

Si eres nuevo en mapas de sitio, existen básicamente dos tipos: XML y HTML. Los mapas de sitio XML se generan específicamente para proporcionar a los motores de búsqueda un mapa detallado de su sitio. En su mayor parte, los mapas de sitio XML existen estrictamente para los motores de búsqueda como Google para facilitarles el rastreo de su sitio, lo que ayudará a aumentar su clasificación. Como tal, los sitios XML no son para el usuario. Aquí es donde entran los mapas de sitio HTML. Los mapas de sitio HTML son HTML real incorporado (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 mapas del sitio (como cómo crear un mapa del sitio XML en WordPress), consulte nuestra publicación sobre cómo crear un mapa del sitio para su sitio de WordPress .

Configurar el complemento

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

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.

divi html sitemap page

Para abrir la Configuración del complemento de la página WP Sitemap, navegue a Configuración> Página WP Sitemap. Allí verá la configuración disponible. Para este tutorial, vamos a dejar solo las opciones en la pestaña de configuración, pero puede verlas más adelante.

divi html sitemap page

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

divi html sitemap page

Crear la página HTML Sitemap en Divi

Una vez que se han configurado los complementos, estamos listos para comenzar a diseñar el diseño de la página de Sitemap 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».

divi html sitemap page

Agregar el diseño prefabricado a la página

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

divi html sitemap page

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.

divi html sitemap page

Eliminar elementos innecesarios

Como solo vamos a utilizar la sección superior de este diseño prefabricado, una vez que el diseño se cargue 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.

divi html sitemap page

Agregar fila # 1 para mostrar páginas

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

divi html sitemap page

Agregar módulo de texto a páginas de visualización

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

divi html sitemap page

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

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

divi html sitemap page

Configuración de diseño de texto

Aunque la mayor parte del contenido de texto es generado por un código corto, aún podemos diseñar esos elementos utilizando la configuración de diseño Divi incorporada. Vaya a la pestaña de diseño y actualice lo siguiente:

  • Fuente de texto: Montserrat
  • Peso de fuente de texto: negrita

divi html sitemap page

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

  • Color del texto del enlace: # 333333

divi html sitemap page

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 desordenados. Es por eso que podemos agregar este color de texto de lista desordenada y solo se aplicará a las pequeñas viñetas cuadradas.

divi html sitemap page

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

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

divi html sitemap page

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

divi html sitemap page

Finalmente, agregue una Clase CSS personalizada al módulo para que podamos enfocarla más adelante con algo de CSS personalizado para dividir el contenido en columnas.

  • Clase CSS: lista de columnas

divi html sitemap page

Configuración de fila

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

  • Margen: 5vw inferior

divi html sitemap page

  • Box Shadow: ver captura de pantalla
  • Posición horizontal de la sombra de la caja: -5vw
  • Posición vertical de la sombra de la caja: 0px
  • Color de sombra: # c5e0dc

divi html sitemap page

Agregar fila # 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 HTML del mapa del sitio para nuestras publicaciones de blog. Para crear la segunda fila, duplique la fila que acabamos de crear que contiene nuestras páginas.

divi html sitemap page

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

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

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

divi html sitemap page

Este shortcode mostrará dinámicamente las categorías de publicación.

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 publicación y actualice el contenido con lo siguiente:

01
<h2>Posts by Category</h2>

divi html sitemap page

Duplique el módulo de texto y actualice el contenido con shortcode para enumerar las 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.

divi html sitemap page

Luego actualice el contenido del nuevo módulo de texto duplicado con un nuevo shortcode como sigue:

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

divi html sitemap page

Actualice el diseño de contenido de shortcode con Divi

Debido a que este shortcode tiene una lista anidada, necesitaremos optimizarlo 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

divi html sitemap page

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

divi html sitemap page

Luego reemplace la clase CSS con lo siguiente:

  • Clase CSS: columnas flexibles

divi html sitemap page

Agregar fila # 3 para productos

En esta tercera y última fila, vamos a agregar contenido de página de mapa de sitio HTML que muestra categorías de productos y todos los productos.

Fila duplicada # 1

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

divi html sitemap page

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:

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

divi html sitemap page

Este shortcode mostrará las categorías de productos.

Módulo de texto duplicado para mostrar productos

Luego, duplique el módulo de texto que acaba de crear.

divi html sitemap page

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

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

divi html sitemap page

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

Actualizar color de sombra de cuadro de fila

Para dar una pequeña separación entre las secciones, podemos cambiar la sombra del cuadro para 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

divi html sitemap page

Actualizar encabezado de página

Antes de que nos 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.

divi html sitemap page

Resultado hasta ahora

Aquí está el resultado hasta ahora.

divi html sitemap page

Este diseño de una columna se ve realmente genial, así que siéntete libre de llamarlo un día y seguir adelante. Pero si desea aumentar el diseño con varias columnas, consulte a continuación.

Agregar múltiples 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).

divi html sitemap page

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
<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>

divi html sitemap page

Este fragmento de CSS solo se aplica a una tableta grande y superior. El código se dirige a los módulos de texto con las clases CSS que les agregamos anteriormente. Para el módulo de texto con la clase «columnas flexibles», el código corto que genera las publicaciones por categoría se divide en columnas de 300 píxeles 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 código corto en tres columnas.

Resultado final

¡Mira el resultado final!

divi html sitemap page

divi html sitemap page

Otras formas de agregar contenido de Sitemap

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

Use 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 WordPress en Apariencia> Widgets. Siéntase libre de aprovechar aquellos que usan el módulo de 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 buena para las páginas del mapa del sitio.

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

divi html sitemap page

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

divi html sitemap page

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

divi html sitemap page

Código corto de producto

Para los productos de WooCommerce, podemos usar el código corto de productos 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 desee. Incluso puede usar el código corto dentro de un Módulo Divi para aprovechar las configuraciones integradas.

divi html sitemap page

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!