Cómo implementar Loop Grid en WordPress con Elementor + HappyAddons

Diseñar sitios web atractivos y muy funcionales es fundamental para atraer visitantes, aumentar la participación e impulsar las conversiones. Para simplificar este proceso, sitios web como Elementor y sus complementos, estas herramientas de diseño web siguen introduciendo funciones y módulos innovadores.

Rejilla de bucle(Circular Grid) es el nuevo componente introducido recientemente por Elementor y su equipo de plugins, que nos permite mostrar el contenido de las páginas web en una cuadrícula ordenada y elegante.

¿Qué es Loop Grid en Elementor?

Loop Grid es un widget de Elementor con muchas funciones que permite crear diseños dinámicos para mostrar distintos contenidos en un sitio web, que pueden modificarse en cualquier momento. Este tipo de componente es muy útil a la hora de mostrar entradas de blog, mercancías y carteras.

Tiene la ventaja de la actualización automática de contenidos. Cuando publiques nuevos artículos o productos, se mostrarán directamente en la página sin tener que hacerlo manualmente. Además, puedes personalizar las plantillas para adaptarlas al estilo de tu marca.

Vaya al paso de operación.

Preparación de la red de bucles

Para utilizar este componente, es necesario instalar primero el siguiente plug-in:

• Elementor
• HappyAddons
• HappyAddons Pro

Cuando estés listo, sigue los pasos que se indican a continuación para empezar.

Paso 01: Arrastrar y soltar la cuadrícula de bucle en la página

Abra la página que desea editar en la ventana Elementor Buscar en el editor Cuadrícula Happy LoopArrástrelo y suéltelo en la zona deseada.

Paso 02: Crear plantilla de cuadrícula de bucle

Después de añadir un componente, se le pedirá que seleccione una plantilla. Si ya existe una plantilla, puede seleccionarla directamente; si no, haga clic en "Crear plantilla".

El sistema saltará a una nueva página. En la pestaña "Plantilla de bucle", haga clic en "Añadir nueva plantilla".

Asigne un nombre a la plantilla (por ejemplo, Plantilla de bucle uno) y haga clic en "Crear plantilla".

El sistema abrirá un nuevo lienzo y podrás empezar a arrastrar y soltar componentes para construir el diseño de la plantilla.

Paso 03: Diseño de la plantilla de cuadrícula de bucle

Para mostrar una entrada de blog, por ejemplo, puede añadir los siguientes componentes en orden:

Publicar imagen destacada

Se utiliza para mostrar miniaturas de artículos.

Información postal

Se recomienda mostrar el autor, la fecha de publicación, etc. debajo de la imagen. Los elementos de información no deseados pueden eliminarse o puede añadirse nuevo contenido mediante "Añadir elemento". El color, el grosor y la alineación pueden ajustarse en las opciones de estilo.

Título del puesto

Arrastrar y soltar debajo del componente de información del artículo. La configuración del contenido puede modificarse en HTML Etiquetas, tamaño de fuente y alineación, ajuste del color de fuente y tipografía en los ajustes de estilo.

Extracto del puesto

Se coloca debajo del título para mostrar un resumen. El color y el tipo de letra pueden ajustarse en la configuración de estilo.

Paso 04: Adaptar el diseño de la plantilla para dispositivos móviles

Para que se muestre correctamente cuando se accede desde diferentes dispositivos, puede hacer clic en el botón "Modo de respuesta" en la parte inferior del editor para ver los modos de escritorio, tableta y móvil.

Ajuste el tamaño y la posición de los elementos en cada modo según sea necesario para adaptarse a las distintas pantallas.

Plantillas de publicación

Una vez diseñada la plantilla, haga clic en el botón "Publicar" para guardarla.

Paso 05: Volver a la página principal para seleccionar una plantilla

De vuelta en la página principal, haz clic en el bloque Loop Grid y selecciona la plantilla que acabas de crear en Layout Settings.

Introduzca un nombre de plantilla y, cuando se seleccione, la plantilla se cargará en tiempo real, mostrando el contenido del artículo publicado.

Puede realizar más ajustes.

Paso 06: Configurar los ajustes de la cuadrícula de bucle

Ajustable en los ajustes de diseño:

• Columnas por fila
• Número de contenidos mostrados por página
• ¿Es la altura uniforme?

En este ejemplo, 3 artículos por página, 3 columnas.

Configurar las condiciones de consulta (Consulta)

Vaya a la pestaña "Consulta" y seleccione el tipo de contenido que desea mostrar, como artículos, páginas oofertas.

Utilice "Incluir por" para filtrar el contenido por autor, etiqueta o categoría. El sistema mostrará el contenido relevante en función de la selección.

Paso 07: Configuración de la paginación

Vaya a la configuración de "Paginación y cargar más" y seleccione el estilo de paginación, por ejemplo, número + página anterior/siguiente.

Una vez completados los ajustes, los botones de paginación aparecerán debajo de la cuadrícula.

Paso 08: Ajustes de estilo

En la pestaña "Estilo", puedes configurar:

• Espaciado entre filas y columnas

• Márgenes, fondos, sombras, bordes para cada elemento

• Colores, fuentes y márgenes de los botones de paginación

Paso 09: Ajustar de nuevo los detalles de la plantilla

Si necesitas hacer cambios en la plantilla, puedes acceder a ella en segundo plano:

HappyAddons > Creador de temas > Plantilla Loop

Haga clic en "Utilizar Elementor Editar" para abrir la plantilla y, por ejemplo, modificar el estilo del botón "Seguir leyendo". Haga clic en "Actualizar" después de modificar.

Paso 10: Vista previa y publicación

Haga clic en "Guardar borrador" en la página principal y, a continuación, actualice la página para ver el efecto de la plantilla.

Por último, haga clic en el botón Publicar para publicar todo el diseño de la cuadrícula de bucle.

Se recomienda volver a comprobar la visualización en teléfonos móviles y tabletas para garantizar la compatibilidad con cada dispositivo.

Escenarios comunes de aplicación de Loop Grid

A continuación se indican algunas situaciones en las que resulta adecuado utilizar la cuadrícula de bucle:

1. Diseño de entradas de blog

Artículos de exposiciónleyendaLos resúmenes, las imágenes, la información sobre el autor, etc., se presentan de forma clara y ordenada.

2. Bloques de exposición de productos básicos

Se utiliza en sitios web de comercio electrónico para mostrar imágenes de productos, precios y descripciones para facilitar la navegación y las compras.

3. Presentación de la cartera

Muestra trabajos de diseño, casos, artículos y otros contenidos para mejorar la imagen profesional.

4. Calendario de actos

La visualización gráfica del nombre del evento, la fecha, el lugar, etc. permite a los visitantes acceder rápidamente a la información.

5. Presentación de la clasificación de servicios

La cuadrícula muestra nombres de servicios, descripciones e imágenes para transmitir la información de forma concisa e intuitiva.

resúmenes

Ahora tiene Loop Grid en pleno funcionamiento. Este componente es fácil de usar y potente, lo que le permite construir bloques de contenido ricos y flexibles en sus páginas web, mejorando la presentación visual y el rendimiento de la página.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres