Les concepteurs travaillent au-dessus d'une grille de colonnes C'est ainsi que les titres, les cartes et les boutons finissent par s'aligner au lieu de dériver à quelques pixels l'un de l'autre. L'élémenteur ne vous en montre pas un, donc l'alignement se produit généralement à l'œil nu Ligne Grille extension dans Modules complémentaires principaux pour Elementor corrige qu'avec une superposition de grille de colonnes, vous pouvez activer directement l'éditeur.
Vous contrôlez le nombre de colonnes, la gouttière, la largeur max, le décalage, et la couleur de la superposition, directement depuis les Paramètres de Page d'Elementor Voici comment l'activer et ce que fait chaque option.
Ce que fait l'extension de la Grid Line #
Grid Line dessine un ensemble de colonnes verticales régulièrement espacées sur votre page à l'intérieur de l'éditeur Elementor La superposition se trouve au-dessus de votre conception, afin que vous puissiez vérifier si vos sections et vos widgets s'alignent réellement sur la grille qu'un concepteur utiliserait dans Figma ou Photoshop.
La valeur par défaut est une grille de 12 colonnes à 1280 px de largeur maximale avec une gouttière de 40 px, la même convention que la plupart des systèmes de conception utilisent Chaque valeur est réglable par appareil, et l'ensemble de la superposition s'allume et s'éteint avec une bascule.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Grid Line est une extension gratuite, donc aucune licence Pro n'est requise.
Comment activer l'extension Grid Line #
Étape 1 : Allumez-le dans l'onglet Extensions #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Grid Line vit dans le Widgets d'affichage groupe avec un badge Populaire, à côté de Glassmorphism et Patterns Cliquez sur sa bascule pour qu'elle devienne violette.
Étape 2 : Enregistrez vos modifications #
Faites défiler vers le haut et cliquez Enregistrer Modifications. Un avis vert “Settings enregistré avec succès” confirme que l'extension est active Si l'éditeur Elementor était ouvert, rechargez-le une fois.
Comment afficher la grille dans l'éditeur Elementor #
Ouvrez n'importe quelle page avec Elementor et cliquez sur le Paramètres de la page icône dans la barre supérieure Sous le Paramètres onglet vous trouverez un nouveau Ligne Grille section marquée du badge MA violet Retourner Activer to On, et la superposition de colonnes apparaît immédiatement sur la toile.
Étant donné que le paramètre est présent dans les paramètres de page, la grille est par page : vous décidez où elle apparaît et elle ne vous suit pas dans chaque document.
Paramètres de la ligne de grille expliqués #
- Activer: active et désactive la superposition pour cette page.
- Couleur de grille : la couleur des colonnes Choisissez l'échantillon global ou définissez une couleur personnalisée avec le sélecteur Une faible valeur d'opacité permet de garder votre contenu lisible sous l'incrustation.
- Colonnes : combien de colonnes dessiner. 12 est la norme, mais vous pouvez correspondre à la grille utilisée par votre conception.
- Largeur maximale : la largeur totale de la grille, 1280 px par défaut Faites-la correspondre à la largeur de contenu de votre site afin que les colonnes s'alignent avec votre mise en page réelle.
- Décalage: pousse la grille depuis les bords lorsque votre mise en page en a besoin.
- Gouttière: l'espace entre les colonnes, 40 px par défaut.
- Z-Index : l'ordre d'empilement de la superposition, 999 par défaut, afin que la grille reste visible au-dessus de votre contenu.
Les colonnes, la largeur maximale, le décalage et la gouttière sont des commandes réactives : cliquez sur l'icône de l'appareil à côté de chacune d'elles pour définir différentes valeurs pour le bureau, la tablette et le mobile.
Changer la couleur de la grille #
Cliquez sur l'échantillon personnalisé à côté de Couleur de grille pour ouvrir le sélecteur de couleurs Toute valeur HEXA fonctionne, et le canal alpha compte le plus : quelque chose comme 50 pour cent d'opacité vous donne des colonnes visibles sans cacher le design en dessous.
Réglez les colonnes et le caniveau #
Faites glisser les curseurs et les mises à jour de superposition en direct Dans l'exemple sous la gouttière est jusqu'à 58 px et la grille porte une teinte personnalisée, de sorte qu'elle se lit clairement sur le fond clair pendant que les cartes de prix restent lisibles.
Lorsque la disposition est alignée, retournez Activer reculez Le paramètre enregistre avec la page, il est donc facile d'oublier la superposition.
Quand Grid Line vous fait gagner du temps #
- Correspondance à un fichier de conception. Reconstruire une disposition Figma ou XD sur la même grille de 12 colonnes sur laquelle elle a été conçue, au lieu de distances de globes oculaires.
- Alignement des sections. Vérifiez que les éléments des différentes sections commencent et se terminent sur la même colonne.
- Série de pages cohérente. Gardez les pages de destination construites par les différents membres de l'équipe sur une seule grille partagée.
- Polissage des modèles importés. Déposez la superposition sur une page à partir d'un kit modèle et repérez les éléments qui restent hors réseau.
- Décisions d'espacement. Utilisez les lignes de gouttière comme règle rapide lors du réglage de la largeur des colonnes et du remplissage.
Tutoriel Vidéo #
Préférez le regarder en mouvement ? cette vidéo passe par l'activation de Grid Line et le réglage de la superposition dans l'éditeur Elementor.
Foire aux questions #
Qu'est-ce que l'extension Grid Line dans Master Addons ?
C'est une extension gratuite qui dessine une superposition de grille de colonnes dans l'éditeur Elementor Vous définissez le nombre de colonnes, de gouttières, la largeur maximale, le décalage et la couleur à partir des paramètres de page, puis utilisez les colonnes pour aligner les sections et les widgets comme le font les concepteurs dans Figma.
Où puis-je trouver les paramètres de la Grid Line ?
Dans l'éditeur Elementor, ouvrez Paramètres de page depuis la barre supérieure et restez dans l'onglet Paramètres Après avoir activé l'extension dans le tableau de bord Master Addons, une section Ligne de grille avec un badge MA y apparaît, en maintenant la bascule Activer et toutes les options de grille.
Puis-je changer le nombre de colonnes et la gouttière ?
Oui. Le champ Colonnes prend n'importe quel nombre, 12 par défaut, et le curseur Gutter contrôle l'espace entre les colonnes. La largeur maximale et le décalage façonnent l'empreinte de la grille. Chacun d'eux est réactif, donc le bureau, la tablette et le mobile peuvent utiliser des valeurs différentes.
La superposition de grille apparaît-elle sur chaque page ?
No. Grid Line est un paramètre par page à l'intérieur des paramètres de page, vous l'activez donc uniquement sur les pages où vous souhaitez la superposition. Désactivez la bascule Activer lorsque vous avez terminé l'alignement, et cette page revient à un canevas propre.
L'extension de la Grid Line est-elle gratuite ?
Oui. Grid Line est livré avec la version gratuite de Master Addons for Elementor, dans le groupe Display Widgets de l'onglet Extensions. Vérifiez le page de tarification pour voir ce que les plans Pro ajoutent au-delà des extensions gratuites.
Envelopper #
L'extension Grid Line donne à Elementor la seule chose que chaque outil de conception possède déjà : une véritable grille de colonnes contre laquelle construire Activez-la une fois dans le tableau de bord, retournez-la depuis les paramètres de page lorsque vous en avez besoin, et réglez les colonnes, la gouttière et la couleur pour qu'elles correspondent à votre système de conception Parcourir le reste de la Widgets et extensions Master Addons pour plus d'outils comme celui-ci, y compris le Quel élément survolez les étiquettes pour l'éditeur.
