Principaux points à retenir
- La maçonnerie signifie que les images conservent leurs propres proportions au lieu d'être recadrées sur une carte uniforme, de sorte qu'une photo de portrait reste haute.
- Le widget gratuit Image Gallery d'Elementor n'a pas d'option de maçonnerie Ses commandes de mise en page sont des colonnes et des espaces.
- La galerie d'images filtrables Master Addons dispose d'un commutateur de maçonnerie qui arrête le recadrage, mais le script frontal présente les éléments en rangées, de sorte que les cartes hautes laissent un espace sous les cartes courtes de la même rangée.
- Si vous voulez des colonnes serrées sans espaces, les colonnes CSS sur un conteneur sont l'itinéraire honnête lors d'une installation gratuite.
- Pour les photos de produits et les photos d'équipe, une grille uniforme se lit généralement mieux que la maçonnerie, alors activez le rapport d'aspect de l'image à la place.
La maçonnerie est la disposition où les images sont assises à leur hauteur naturelle et les colonnes chancellent, la forme que Pinterest a rendue familière Elle convient à la photographie, où le recadrage d'un cadre de portrait en carré jette la moitié de l'image.
Elementor peut s'en rapprocher de trois manières différentes, et ils ne produisent pas tous la même chose L'un d'eux a un interrupteur étiqueté Maçonnerie qui fait moins que ce que son nom suggère, qui est la partie qui vaut la peine d'être lue avant de construire.
Table des matières
Maçonnerie, quadrillage et justifié : la différence
| Disposition | Ce que ça fait aux images | Lit le mieux pour |
|---|---|---|
| Grille | Recadre chaque image à la même taille de carte | Produits, photos d'équipe, logos, tout ce que vous voulez rangé |
| Maçonnerie | Garde la hauteur de chaque image, les colonnes chancellent | Photographie mixte, portraits à côté de paysages |
| Justifié | Garde les proportions mais étire chaque rangée à la même hauteur | Essais photo et fiches de contact |
Maçonnerie et justifiés protègent tous deux la culture d'origine La différence est la direction dans laquelle les mathématiques s'étendent : la maçonnerie fixe la largeur de la colonne et laisse la hauteur varier, justifie la hauteur de la rangée et laisse la largeur varier.
Route 1 : Widget Galerie de l'Élémenteur (Pro)
Le widget gratuit Image Gallery d'Elementor a deux commandes de mise en page, Colonnes et Espacement, et il se recadre sur une carte uniforme Le widget Gallery, qui est Pro, a un contrôle de mise en page avec trois valeurs : Grille, Justifié et Maçonnerie il y a la vraie chose, des colonnes remplies sans espaces, et le widget Pro Portfolio a son propre commutateur de maçonnerie aussi Si vous possédez déjà Pro, c'est le chemin le plus court et il n'y a rien à installer.
Route 2 : l'interrupteur Maçonnerie dans la galerie filtrable
Sur une installation gratuite d'Elementor, le Galerie d'images filtrables dispose d'un commutateur de maçonnerie dans sa section Paramètres, à côté du rapport d'aspect d'image et de la gouttière.
Avec la maçonnerie activée et le rapport d'aspect de l'image désactivé, les images conservent leurs propres proportions, de sorte qu'un cadre de portrait reste haut et que rien n'est recadré. L'emballage des colonnes est la partie que vous n'obtenez pas. Dans la version actuelle, le script qui présente la grille dispose les éléments en lignes, donc une image courte laisse un espace vide en dessous jusqu'au début de la ligne suivante.
C'est utile lorsque vos images ont une forme à peu près similaire, puisque rien n'est recadré et que les lignes restent nettes. Pour le look Pinterest emballé lors d'une installation gratuite, la route 3 est la réponse.
Route 3 : colonnes CSS sur un conteneur
CSS a une disposition de colonnes qui emballe le contenu comme la maçonnerie devrait. Mettez vos images dans un conteneur, ajoutez-y quelques lignes de CSS et le navigateur fait le travail sans script.
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}Le selector keyword cible l'élément que vous modifiez, donc cet extrait va dans la boîte CSS personnalisée sur le conteneur lui-même Sur un Elementor gratuit installer cette boîte provient d'un addon tel que Css personnalisé: puisque Elementor marque son propre champ Custom CSS comme Pro.
Le compromis est l'ordre Les colonnes CSS remplissent de haut en bas dans chaque colonne, donc l'ordre de lecture descend dans la première colonne, puis dans la deuxième colonne. Pour une galerie, personne ne lit dans l'ordre, ce qui est bien. Pour tout ce qui est chronologique, ce n'est pas le cas.
Tailles d'image qui donnent à la maçonnerie une bonne apparence
- Télécharger à une largeur constante Environ 1 200 px est suffisant pour une grille à trois colonnes et maintient la lumière de la page.
- Que les hauteurs varient et gardent les largeurs les mêmes, puisque la maçonnerie fonctionne en fixant la largeur de la colonne.
- Définir délibérément la résolution d'image Les fichiers pleine taille dans une grille de neuf images sont une page lente sans gain visuel.
- Le curseur Gutter est réactif et fonctionne de 0 à 40 px, vous pouvez donc le serrer sur les téléphones.
- Évitez un cadre extrême Un seul panorama très haut parmi des images carrées arrache le regard de tout le reste.
Quand une grille uniforme est la meilleure réponse
Activez le rapport d'aspect de l'image et vous obtenez une grille uniforme, ce que veulent les photos de produits, les photos d'équipe et les logos, ainsi que tout ce qui devrait ressembler à un ensemble.
Une façon simple de choisir : si les images ont été prises en une seule session avec une configuration de caméra, recadrez-les sur une grille S'ils proviennent de différentes prises de vue dans des orientations différentes, laissez-les garder leur forme.
Questions fréquemment posées
Elementor possède-t-il une galerie en maçonnerie ?
Pas dans le widget gratuit Image Gallery, qui propose uniquement des colonnes et des espaces. Le widget Galerie d'Elementor avec options de mise en page figure sur sa liste Pro.
Pourquoi ma galerie en maçonnerie a-t-elle encore des lacunes ?
Parce que la grille est disposée en lignes plutôt qu'en colonnes compactées Les images gardent leur hauteur naturelle, donc une image courte assise en rangée avec une haute laisse de l'espace en dessous Les colonnes CSS sont la voie vers un véritable emballage.
La maçonnerie fonctionne-t-elle avec les languettes filtrantes ?
Oui. Le filtrage et la mise en page sont séparés, donc cliquer sur une catégorie réduit la grille et les éléments restants se recontrent.
Puis-je mettre la maçonnerie sur mobile seulement ?
Non. Le commutateur Masonry s'applique à toutes les tailles d'écran. Le curseur Gutter est le contrôle qui change par appareil.
La maçonnerie est-elle mauvaise pour la vitesse des pages ?
La mise en page elle-même est bon marché Ce qui vous coûte, ce sont les images, alors définissez une résolution d'image sensée plutôt que des fichiers en taille réelle, et rappelez-vous que chaque élément de la galerie se charge avec la page.
Réflexions finales
Trois itinéraires, trois résultats différents Le widget Galerie d'Elementor Pro emballe les colonnes pour vous L'interrupteur Maçonnerie sur la galerie filtrable arrête le recadrage et garde les lignes, ce qui est souvent suffisant Les colonnes CSS donnent le look emballé sur une installation gratuite, au prix d'une commande de lecture.
Protéger la récolte originale et maintenir une grille bien rangée sont deux objectifs différents, alors choisissez l'itinéraire qui correspond à celui que vous avez réellement.
Lecture connexe
