Cómo crear una página dinámica de mapa del sitio HTML en div en Div

Una página de mapa del sitio HTML puede ser útil para los usuarios que desean navegar a su sitio de la Divica 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 de mapa del sitio generalmente contiene una lista organizada por enlaces a todo el contenido relevante en su sitio. Una página de mapa del sitio HTML se puede crear manualmente, pero ayuda si puede generar dinámicamente el contenido de la página de mapa del sitio para que no se preocupe por constante actualizaciones. En este tutorial, le mostraremos cómo crear un aspecto dinámico de la página de mapa del sitio HTML en Divic utilizando una combinación de Divic de Diseño y el complemento de la página WP Sitemap. La configuración es extremadamente fácil, y el resultado es sorprendentemente efectivo.
Vamos a empezar. Tirar del ojo


Descargue el aspecto de la página HTML Sitemap de forma gratuita para poner su mano en el aspecto de la página Sitemap En este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. Nota: Este aspecto se basa en códigos cortos utilizados con el complemento de página Sitemap WP. Si no tiene el complemento activo en su sitio, no verá el contenido en los módulos. ¿Qué necesita para este tutorial para este tutorial? Necesitará lo siguiente:
El tema de Div.
Contenido de WordPress. Para generar contenido de página, Sitemap HTML, deberá tener páginas, publicaciones, categorías, productos, etc. En tu sitio
Página de mapa del sitio WP del complemento. Se puede acceder a esto desde el tablero de WordPress, que le mostraremos cómo hacer a continuación.
Pasemos al tutorial, ¿no?
La diferencia entre XML y HTML Sitemaps Si eres nuevo en Sitemaps, hay prácticamente dos tipos de XML y HTML. Los Sitemaps XML se generan especialmente para proporcionar a los motores de búsqueda un mapa detallado de su sitio. La mayoría de los Sitemaps XML existen estrictamente para los motores de búsqueda de Google, para facilitar los rastreadores de sus sitios web, lo que lo ayudará a mejorar su clasificación. Como tal, los sitios XML no son para el usuario. Los sitios web de HTML intervienen aquí. HTML Sitemaps son HTML construidos (y PHP, porque usamos Div y WordPress) en una página de mapa del sitio real en su sitio web. La idea es generar una lista organizada de todo el contenido relevante del sitio (publicaciones, páginas, productos, categorías, etc.) para el usuario en un lugar conveniente. Básicamente, una página de mapa del sitio HTML es como un mega menú para todo el sitio. Para obtener más información sobre Sitemaps (como su WordPress. Configuración del complemento para este tutorial, utilizaremos un complemento de página WP Sitemap gratuito, pero eficientemente llamado WP, que nos permitirá mostrar dinámicamente el contenido del Sitemap en un modo de división mediante el uso de códigos cortos. Para descargar el complemento, vaya al tablero de WordPress y explore los complementos> Agregar un nuevo. Luego, busque el complemento de la página WP de mapa del sitio usando la barra de búsqueda y luego instale y active el complemento.
Para abrir la configuración del complemento para la página WP Sitemap, explore la configuración> Página WP Sitemap. Allí verá la configuración disponible. Para este tutorial, dejaremos solo las opciones en la pestaña Configuración, pero no dude en verlas más tarde. Haga clic en la pestaña como se usa para ver todos los ejemplos de códigos cortos que podemos usar para mostrar nuestro mapa del sitio de contenido de la página. Los resaltados son los que usaremos.
Creación de la página HTML SiteMap en la división Una vez que se han configurado los complementos, estamos listos para comenzar a diseñar el sitio de la página Sitemap.

Creando una nueva página para comenzar, crear una nueva página, darle el título “Sitemap”, luego haga clic en “Usar Div Builder”.

Agregar el aspecto prefabricado a la página La recibirá con tres opciones para la forma en que desea construir su página. Seleccione “Elija un aspecto prefabricado”.

Luego busque y busque el paquete de apariencia de la revista y haga clic para usar la apariencia de la página.
Eliminar elementos innecesarios porque solo usaremos la sección superior de este aspecto prefabricado, después de cargar la apariencia en la página, elimine todas las secciones en la primera sección.

Luego agregue una nueva sección habitual en la sección superior.

Agregando la fila # 1 para mostrar páginas para nuestra primera fila, agregaremos contenido de la página HTML Sitemap que mostrará todas las páginas en el sitio. Comencemos agregando una fila con una columna.

Agregar 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 en el cuadro de contenido en la pestaña de texto:

páginas

[Wp_sitemap_page solo = “página” display_title = “false”] Configuración de diseño de texto incluso si la mayor parte del contenido de texto es generado por un código corto, aún podemos diseñar esos elementos utilizando el div. Cambie a la pestaña de diseño y actualice lo siguiente:

Texto de fuente: Montserrat

El peso de la fuente de texto: en negrita
Luego seleccione la pestaña Configuración del enlace y actualice lo siguiente:

Color de texto de enlace: # 333333
Luego seleccione la pestaña Configuración de la lista desordenada y actualice lo siguiente:
Color de texto de la lista Unordinada: # C5E0DC

Tipo de estilo de lista desordenado: cuadrado
La posición del estilo de la lista no ordinaria: dentro

Artículo de la lista desordenada: 5VW
Nota: Cualquier estilos de enlaces sobrescribirá los estilos de lista desordenados. Por lo tanto, podemos agregar este color del texto de la lista desordenada y solo se aplicaremos a pequeñas balas cuadradas.
Actualice el estilo del Título 2 de la siguiente manera:
2 Sección de fuentes: Montserrat
Título 2 Fuente de peso: Bold
2 Tamaño de texto: 3VW (escritorio), 38 PX (tableta)

Luego actualice el espacio con un borde negativo izquierdo para tirar del módulo a la izquierda. Esto agregará un hermoso diseño superpuesto con nuestro título y nuestro tono de caja.
Finalmente, agregue una clase CSS personalizada a la forma de poder dirigirlo más tarde con algunos CSS personalizados 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:

Marja: 5VW Down


Box Shadow: Ver captura de pantalla
Posición horizontal de la sombra de la caja: -5VW

Box Shadow Posición vertical: 0px
Shadow Color: # C5E0DC

Agregando la fila 2 para mostrar publicaciones y categorías duplicadas para crear una nueva en segundo lugar, mostraremos el contenido de la página HTML Sitemap para nuestras publicaciones de blog. Para crear la segunda fila, copie el giro que acabamos de crear conteniendo nuestras páginas. Módulo de texto de texto para mostrar las categorías y luego abra la configuración del módulo de texto en la fila duplicada y reemplace el contenido con las siguientes categorías
[Wp_sitemap_page solo = “categoría” display_itle = “false”] Este código corto mostrará dinámicamente las publicaciones. Duplicate el módulo de texto para mostrar el título de publicación de categoría separada para mostrar las categorías, copiar el módulo de texto que contiene las categorías de publicaciones y actualizar el contenido con las siguientes:

Publicaciones por categoría

Duplique el módulo de texto y actualice el contenido con el código corto para enumerar las publicaciones de acuerdo con la categoría, pondremos el título en un módulo de texto separado que el código corto por razones de diseño. Duplicar el módulo de texto que acabas de duplicar nuevamente.

Luego actualice el contenido del nuevo módulo de texto duplicado con un nuevo código corto de la siguiente manera: [wp_sitemap_page solo = “post” display_category_wording = “false” display_itle = “false”]
Actualice el diseño del contenido de código corto con DIV porque este código corto tiene una lista vestida, tendremos que optimizarlo de manera un poco diferente. Haga clic en la pestaña Diseño y actualice lo siguiente:
La posición del estilo de la lista no ordinaria: en el exterior

Allado del elemento de lista desordenado: 0 PX

Marja: Izquierda 0 PX

Forro: 3.2vw restante

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 la página HTML Sitemap que muestra las categorías de productos y todos los productos. Duplicar la fila 1 para comenzar, duplique la fila superior (la que muestra las páginas).
Actualice la configuración del módulo de texto para mostrar categorías de productos y luego actualice la configuración de texto duplicada con el siguiente contenido:

Categas de productos

[Wp_sitemap_page solo = “product_cat” display_itle = “false”] Este código corto mostrará las categorías de productos. Duplique el módulo de texto para mostrar los productos y luego, copie el módulo de texto que acaba de crear.

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

Productos

[Wp_sitemap_page solo = “producto” display_itle = “falso”]
Este código corto mostrará todos los productos a nivel de sitio. Actualice el color de las sombras de la caja de filas para hacer una pequeña separación entre las secciones, podemos cambiar la sombra de la caja para la fila que contiene nuestras categorías y productos. Para esto, actualice la configuración de la fila de la siguiente manera:

Shadow Color: # FFC077
Actualice el título de la página antes de olvidar, omita la sección superior y actualice los dos módulos de texto con el texto, “Sitemap”. Esto proporcionará un título preciso para nuestra página de mapa del sitio.

El resultado hasta ahora es el resultado hasta ahora.

Este diseño con una columna se ve muy bien como es, así que no dude en llamarlo un día y correr con él. Pero si desea mejorar el aspecto con varias columnas, consulte a continuación. Agregando varias columnas al contenido del mapa del sitio del sitio con CSS personalizado en este momento, el aspecto predeterminado mostrará el contenido de la página Sitemap 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 el DIV. Primero, agregue el módulo de código desde la parte inferior de la página (sin importar dónde). Luego pegue el siguiente código CSS en el cuadro de código:
@Media all y (min-width: 767px) {

.flex-columns .WSP-Posts List {
Pantalla: Flex;

Flex-Wrap: envoltura;

}

.flex-columns .WSP-Posts-List> Li> ul {

Ancho: 300px;
Relleno: 2% 10% 10% 5%;
}
.Column-List .WSP-Container {
Conteo de columna: 3;
}
}

Este fragmento CSS solo se aplica a una tableta grande y grande. El código se dirige a los módulos de texto con las clases CSS que agregamos anteriormente. Para el módulo de texto con la clase “columnas flexibles”, el código corto que genera las publicaciones por categorías se divide en columnas con un ancho de 300 px. Los módulos de texto con la clase “Lista de columnas” dividirán el contenido de la página Sitemap con código corto en tres columnas. ¡Resultado final verifique el resultado final!
Otras formas de agregar contenido de mapa del sitio también pueden agregar contenido de mapa del sitio en la página de mapa del sitio utilizando widgets de WordPress, rígidos y códigos cortos de WooCommerce. Use WordPress Widgets WordPress tiene algunos widgets estándar que mostrarán cosas como páginas, categorías y productos. Estos se pueden encontrar en el tablero de WordPress en términos de> widgets. Siéntase libre de aprovechar aquellos que usan el módulo de barra lateral divina si tiene que agregar algo a la página del mapa del sitio. Use el módulo de blog Divi El módulo de blog Div viene con configuraciones Built -in para mostrar publicaciones, páginas, proyectos y productos. Y si adopta un enfoque de diseño minimalista, puede obtener una lista personalizable bastante interesante para las páginas de mapa del sitio. Por ejemplo, podemos agregar un nuevo módulo de blog y seleccionar productos como un tipo de publicación y podemos ofrecerles un número lo suficientemente grande como para mostrar todos los productos en nuestro sitio. Luego podemos ocultar todos los elementos, excepto el enlace / Titulo del producto.
Podemos hacer lo mismo para las páginas. Simplemente seleccione páginas para el tipo de publicación.
Producto de código corto para productos de WooCommerce, podemos usar el producto de producto breve WooCommerce para generar productos o listas de categorías de productos. El código de producto corto es muy robusto y versátil para mostrar los productos de todos modos. Incluso puede usar el código corto en un modo de división para aprovechar la configuración incorporada.