Elementor Loop Grid Tutorial : HappyAddons Dynamic Grid User Guide

La conception de sites web attrayants et hautement fonctionnels est essentielle pour attirer les visiteurs, stimuler l'engagement et favoriser les conversions. Pour simplifier ce processus, des sites web tels que Elementor et ses compléments, ces outils de conception de sites web continuent d'introduire des fonctionnalités et des modules innovants.

Grille de boucles(Circular Grid) est le nouveau composant récemment introduit par Elementor et son équipe de plugins, qui nous permet d'afficher le contenu des pages web dans une grille soignée et élégante.

Qu'est-ce que la grille Loop Grid dans Elementor ?

Loop Grid est un widget Elementor riche en fonctionnalités qui permet de créer des mises en page dynamiques pour l'affichage de divers contenus sur un site Web, qui peuvent être modifiées à tout moment. Ce type de composant est très utile pour afficher des articles de blog, des marchandises et des portfolios.

Il présente l'avantage d'une mise à jour automatique du contenu. Lorsque vous publiez de nouveaux articles ou produits, ils s'affichent directement sur la page sans qu'il soit nécessaire de le faire manuellement. Vous pouvez également personnaliser les modèles pour qu'ils correspondent au style de votre marque.

Passez à l'étape de l'opération.

Préparation à la grille de boucles

Pour utiliser ce composant, le plug-in suivant doit être installé au préalable :

Elementor
HappyAddons
HappyAddons Pro

Lorsque vous êtes prêt, suivez les étapes ci-dessous pour commencer.

Étape 01 : Glisser-déposer la grille de boucles sur la page

Ouvrez la page à modifier dans la fenêtre Elementor Recherche dans l'éditeur Grille Happy Loop, faites-le glisser et déposez-le dans la zone souhaitée.

Étape 02 : Création d'un modèle de grille de boucles

Après avoir ajouté un composant, vous serez invité à sélectionner un modèle. Si un modèle existe déjà, vous pouvez le sélectionner directement ; sinon, cliquez sur "Créer un modèle".

Le système passe à une nouvelle page, sous l'onglet "Loop Template" (modèle de boucle), cliquez sur "Add New Template" (ajouter un nouveau modèle).

Nommez le modèle (par exemple Loop Template One) et cliquez sur "Create Template".

Le système ouvre un nouveau canevas et vous pouvez commencer à glisser et à déposer des composants pour construire la présentation du modèle.

Étape 03 : Conception du modèle de grille de boucles

Pour afficher un article de blog, par exemple, vous pouvez ajouter les composants suivants dans l'ordre :

Post Featured Image

Permet d'afficher les vignettes des articles.

Informations sur les postes

Il est recommandé d'afficher l'auteur, la date de publication, etc. sous l'image. Les éléments d'information non désirés peuvent être supprimés ou un nouveau contenu peut être ajouté via "Ajouter un élément". La couleur, l'épaisseur et l'alignement peuvent être ajustés dans les options de style.

Titre du poste

Glisser-déposer sous le composant d'information sur l'article. Les paramètres du contenu peuvent être modifiés dans la section HTML Étiquettes, taille et alignement des polices, ajustement de la couleur des polices et de la typographie dans les paramètres de style.

Extrait de poste

Placé sous le titre pour afficher un résumé. La couleur et la police peuvent être ajustées dans les paramètres de style.

Étape 04 : Adaptation de la présentation du modèle pour les appareils mobiles

Pour que le site s'affiche correctement sur différents appareils, vous pouvez cliquer sur le bouton "Responsive Mode" en bas de l'éditeur pour afficher les modes ordinateur de bureau, tablette et mobile.

Ajustez la taille et la position des éléments dans chaque mode pour qu'ils s'adaptent aux différents écrans.

Modèles de publication

Une fois le modèle conçu, cliquez sur le bouton "Publier" pour l'enregistrer.

Étape 05 : Retourner à la page principale pour sélectionner un modèle

De retour sur la page principale, cliquez sur le bloc Grille en boucle et sélectionnez le modèle que vous venez de créer dans les paramètres de mise en page.

Saisissez un nom de modèle et, une fois sélectionné, le modèle se chargera en temps réel, affichant le contenu de l'article publié.

Vous pouvez y apporter d'autres ajustements.

Étape 06 : Configuration des paramètres de la grille de boucles

Réglable dans les paramètres de mise en page :

Colonnes par ligne
Nombre de contenus affichés par page
La hauteur est-elle uniforme ?

Dans cet exemple, 3 articles par page, 3 colonnes.

Configurer les conditions de la requête (Query)

Allez dans l'onglet "Enquête" et sélectionnez le type de contenu à afficher, par exemple des articles, des pages ou desoffres.

Utilisez "Inclure par" pour filtrer le contenu par auteur, étiquette ou catégorie. Le système affichera le contenu pertinent en fonction de la sélection.

Étape 07 : Paramètres de pagination

Allez dans les paramètres "Pagination et charger plus" et sélectionnez le style de pagination, par exemple numéro + page précédente/suivante.

Une fois les réglages terminés, les boutons de pagination apparaissent sous la grille.

Étape 08 : Paramètres de style

Dans l'onglet "Style", vous pouvez définir :

Espacement des lignes et des colonnes

Marges, arrière-plans, ombres, bordures pour chaque élément

Couleurs, polices, marges pour les boutons de pagination

Étape 09 : Ajustez à nouveau les détails du modèle

Si vous devez apporter des modifications au modèle, vous pouvez y accéder en arrière-plan :

HappyAddons > Theme Builder > Loop Template

Cliquez sur "Utiliser Elementor Modifier" pour ouvrir le modèle, par exemple, modifier le style du bouton "Continuer la lecture". Cliquez sur "Mettre à jour" après la modification.

Étape 10 : Prévisualisation et publication

Cliquez sur "Enregistrer le projet" sur la page principale, puis actualisez la page pour voir l'effet du modèle.

Enfin, cliquez sur le bouton Publier pour publier l'ensemble de la grille de boucles.

Il est recommandé de vérifier l'affichage sur les téléphones portables et les tablettes pour s'assurer de la compatibilité avec chaque appareil.

Scénarios d'application courants du Loop Grid

Voici quelques scénarios dans lesquels la grille à boucles est appropriée :

1) Mise en page des articles de blog

Articles en vitrinelégendeLa mise en page doit être soignée et ordonnée, en particulier pour les résumés, les images, les informations sur l'auteur, etc.

2. blocs d'affichage des produits de base

Utilisé pour les sites de commerce électronique afin d'afficher les images, les prix et les descriptions des produits pour faciliter la navigation et les achats.

3. la présentation d'un portfolio

Présenter des travaux de conception, des dossiers, des articles et d'autres contenus pour améliorer l'image professionnelle.

4. le calendrier des événements

L'affichage graphique du nom de l'événement, de la date, du lieu, etc. permet aux visiteurs d'accéder rapidement à l'information.

5. présentation de la classification des services

La grille affiche des noms de services, des descriptions et des images pour transmettre l'information de manière concise et intuitive.

résumés

La grille Loop est désormais pleinement opérationnelle. Ce composant est facile à utiliser et puissant, il vous permet de construire des blocs de contenu riches et flexibles sur vos pages web, améliorant ainsi la présentation visuelle et les performances de la page.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.