Wichtige Erkenntnisse
- Mauerwerk bedeutet, dass Bilder ihre eigenen Proportionen behalten, anstatt auf eine einheitliche Karte zugeschnitten zu werden, sodass ein Porträtfoto hoch bleibt.
- Das kostenlose Image Gallery-Widget von Elementor hat keine Mauerwerksoption. Die Layoutsteuerung besteht aus Spalten und Lücken.
- Die Master Addons Filterable Image Gallery verfügt über einen Freimaurerschalter, der das Zuschneiden stoppt, aber das Front-End-Skript legt Elemente in Reihen dar, sodass große Karten eine Lücke unter den kurzen Karten in derselben Reihe hinterlassen.
- Wenn Sie dicht gepackte Säulen ohne Lücken wünschen, sind CSS-Säulen auf einem Container der ehrliche Weg bei einer kostenlosen Installation.
- Für Produktaufnahmen und Teamfotos liest sich ein einheitliches Raster normalerweise besser als Mauerwerk, also schalten Sie stattdessen das Bildaspektverhältnis ein.
Mauerwerk ist das Layout, bei dem Bilder auf ihrer natürlichen Höhe sitzen und die Säulen taumeln, die Form, die Pinterest bekannt gemacht hat. Es passt zur Fotografie, wo das Zuschneiden eines Porträtrahmens in ein Quadrat die Hälfte des Bildes wegwirft.
Elementor kann auf drei verschiedene Arten nahe an diese herankommen, und sie produzieren nicht alle das gleiche Eine von ihnen hat einen Schalter mit der Bezeichnung Freimaurerei, der weniger leistet, als der Name vermuten lässt, was der Teil ist, der es wert ist, gelesen zu werden, bevor Sie bauen.
Inhaltsverzeichnis
Mauerwerk, Gitter und gerechtfertigt: der Unterschied
| Grundriss | Was es mit den Bildern macht | Liest sich am besten für |
|---|---|---|
| Gitter | Schneidet jedes Bild auf die gleiche Kartengröße zu | Produkte, Teamfotos, Logos, alles was Sie aufgeräumt haben möchten |
| Mauerwerk | Hält die Höhe jedes Bildes bei, Spalten staffeln sich | Gemischte Fotografie, Porträts neben Landschaften |
| Begründet | Behält die Proportionen bei, dehnt aber jede Reihe auf die gleiche Höhe | Fotoaufsätze und Kontaktblätter |
Mauerwerk und gerechtfertigt schützen beide die ursprüngliche Ernte Der Unterschied ist, in welche Richtung die Mathematik verläuft: Mauerwerk fixiert die Säulenbreite und lässt die Höhe variieren, gerechtfertigt fixiert die Reihenhöhe und lässt die Breite variieren.
Route 1: Elementor's Gallery-Widget (Pro)
Das kostenlose Widget Image Gallery von Elementor hat zwei Layout-Steuerelemente, Spalten und Abstand, und es wird zu einer einheitlichen Karte gecropt Das Galerie-Widget, das Pro ist, hat ein Layout-Steuerelement mit drei Werten: Gitter, Rechtfertigt und Freimaurerei. Freimaurerei gibt es das Echte, Spalten ohne Lücken, und das Pro Portfolio-Widget hat auch einen eigenen Freimaurerschalter. Wenn Sie Pro bereits besitzen, ist das der kürzeste Weg und es gibt nichts zu installieren.
Route 2: der Freimaurerschalter in der filterbaren Galerie
Bei einer kostenlosen Elementor-Installation ist die Filterbare Bildergalerie Hat einen Freimaurerschalter in seinem Einstellungsbereich, neben Bild-Aspekt-Verhältnis und Gosse.
Mit Masonry on und Image Aspect Ratio aus behalten Bilder ihre eigenen Proportionen, so bleibt ein Portrait-Rahmen hoch und es wird nichts beschnitten Spaltenpackung ist der Teil, den man nicht bekommt In der aktuellen Version ordnet das Skript, das das Raster anlegt, Gegenstände in Reihen an, so dass ein kurzes Bild einen leeren Raum darunter lässt, bis die nächste Reihe startet.
Das ist nützlich, wenn Ihre Bilder in etwa eine ähnliche Form haben, da nichts beschnitten wird und die Reihen ordentlich bleiben Für den gepackten Pinterest-Look auf einer kostenlosen Installation ist Route 3 die Antwort.
Route 3: CSS-Säulen auf einem Container
CSS hat ein Spaltenlayout, das Inhalte so verpackt, wie Mauerwerk es soll Legen Sie Ihre Bilder in einen Container, fügen Sie ein paar Zeilen CSS hinzu, und der Browser erledigt die Arbeit ohne Skript.
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; }
}Die selector Keyword zielt auf das Element ab, das Sie bearbeiten, also kommt dieser Snippet in die Custom CSS-Box auf dem Container selbst. Bei einer kostenlosen Elementor-Installation stammt diese Box von einem Addon wie z Benutzerdefiniertes CSS, da Elementor sein eigenes benutzerdefiniertes CSS-Feld als Pro markiert.
Der Kompromiss ist die Reihenfolge. CSS-Spalten füllen sich in jeder Spalte von oben nach unten, sodass die Lesereihenfolge in Spalte eins und dann in Spalte zwei nach unten verläuft. Für eine Galerie liest niemand in der Reihenfolge, die in Ordnung ist. Für alles Chronologische ist dies nicht der Fall.
Bildgrößen, die Mauerwerk richtig aussehen lassen
- Hochladen in gleichbleibender Breite Rund 1.200 px ist für ein dreispaltiges Raster reichlich und hält die Seite leicht.
- Lassen Sie die Höhen variieren und halten Sie die Breiten gleich, da Mauerwerk durch Fixieren der Säulenbreite funktioniert.
- Bildauflösung bewusst einstellen Dateien in voller Größe in einem neun Bilderraster sind eine langsame Seite ohne visuellen Gewinn.
- Der Gutter-Schieberegler ist responsive und läuft von 0 bis 40 px, so dass Sie ihn an Telefonen festziehen können.
- Vermeiden Sie einen extremen Rahmen Ein einzelnes sehr hohes Panorama unter quadratischen Bildern zieht den Blick von allem anderen ab.
Wenn ein einheitliches Raster die bessere Antwort ist
Bild-Aspekt-Verhältnis einschalten und Sie erhalten ein einheitliches Raster, was Produktaufnahmen, Teamfotos und Logos wollen, zusammen mit allem anderen, was wie ein Set aussehen sollte.
Eine einfache Möglichkeit der Wahl: wenn die Bilder in einer Sitzung mit einem Kamera-Setup aufgenommen wurden, schneidet sie auf ein Gitter zu, wenn sie aus verschiedenen Trieben in unterschiedlichen Ausrichtungen stammen, lasst sie ihre Form behalten.
Häufig gestellte Fragen
Verfügt Elementor über eine gemauerte Galerie?
Nicht im kostenlosen Widget Bildergalerie, das nur Spalten und Lücke bietet Das Galerie-Widget von Elementor mit Layout-Optionen steht auf seiner Pro-Liste.
Warum hat meine Mauerwerksgalerie noch Lücken?
Denn das Gitter ist in Reihen statt in gepackten Spalten angelegt Bilder behalten ihre natürliche Höhe, so dass ein kurzes Bild, das in einer Reihe mit einem hohen sitzt, Platz darunter lässt CSS-Spalten sind der Weg zur wahren Verpackung.
Funktioniert Mauerwerk mit den Filterlaschen?
Ja. Filterung und Layout sind getrennt, so dass das Anklicken einer Kategorie das Raster verengt und die restlichen Gegenstände sich neu auslegen.
Kann ich Mauerwerk nur auf Mobilgeräten einstellen?
Nein. Der Freimaurerschalter gilt für jede Bildschirmgröße. Der Gutter-Schieberegler ist die Steuerung, die sich pro Gerät ändert.
Ist Mauerwerk schlecht für die Seitengeschwindigkeit?
Das Layout selbst ist billig Was Sie kosten, sind die Bilder, also legen Sie eine vernünftige Bildauflösung statt Dateien in voller Größe fest und denken Sie daran, dass jedes Element in der Galerie mit der Seite geladen wird.
Letzte Gedanken
Drei Routen, drei verschiedene Ergebnisse Das Galerie-Widget von Elementor Pro packt die Spalten für Sie Der Freimaurerschalter auf der filterbaren Galerie stoppt das Zuschneiden und behält die Zeilen, was oft ausreicht CSS-Spalten verleihen den gepackten Look bei einer kostenlosen Installation, auf Kosten der Lesebestellung.
Der Schutz der ursprünglichen Ernte und die Aufrechterhaltung eines aufgeräumten Rasters sind zwei verschiedene Ziele. Wählen Sie also die Route aus, die der Route entspricht, die Sie tatsächlich haben.
Verwandte Lektüre
