Das Masonry-Layout ist ein beliebter und moderner Stil. Sie können es ganz einfach auf der Blockeditor-Website verwenden. Der GutenKit Advanced Masonry-Block bietet alle erforderlichen Features und Funktionen, die Sie zum Entwerfen eines Pinterest-ähnlichen Masonry-Stils auf Ihrer WordPress-Website benötigen.

Folgen Sie diesem Dokument, um zu erfahren, wie Sie der Blockeditor-Website ein Masonry-Layout hinzufügen. 

So verwenden Sie den GutenKit Advanced Masonry Block #

Lassen Sie uns verschiedene Teile des GutenKit Advanced Masonry-Blocks durchgehen.

Mauerwerk hinzufügen #

Sobald Sie den GutenKit Advanced Masonry Block aufrufen, wird er standardmäßig mit drei Masonry-Elementen geladen. Sie können weitere hinzufügen, indem Sie auf das „Mauerwerk hinzufügen”-Schaltfläche. Unter diesen Elementen können Sie jeden beliebigen Blocktyp hinzufügen. 

Beachten Sie, dass Wenn Sie einem Mauerwerkselement einen Block hinzufügen, stehen Ihnen alle Blockeinstellungen zur Verfügung. 

Mauerwerksdesign einrichten #

Öffnen Sie die Blockeinstellungen und starten Sie mit dem Registerkarte „Inhalt“..

Registerkarte „Inhalt“.

• Wählen Sie Stil: Wählen Sie einen Stil zwischen Mauerwerk und Raster.
• Anzahl der Spalten: Definieren Sie die Anzahl der Spalten.
• Lücke zwischen: Passen Sie den Abstand zwischen den Spalten an.
• Filtern nach Kategorie anzeigen: Aktivieren Sie diesen Umschaltknopf, um den Kategorienamen anzuzeigen.

Stil Mauerwerk Design #

Von dem Registerkarte „Stil“.konzentrieren wir uns auf den Anpassungsteil der Mauerwerks- und Filterelemente.

Registerkarte „Stil“.

Artikel

• Polsterung: IVergrößern Sie den Platz innerhalb der Mauerwerkselemente.
• Grenzradius: Passen Sie die Rundung der Mauerwerkselementränder an.

Die folgenden Einstellungen werden sowohl im Normalzustand als auch im Schwebezustand angewendet.

• Hintergrundtyp: Wählen Sie einen Hintergrundtyp zwischen Volltonfarbe und Farbverlauf.
• Grenze: Wählen Sie eine Farbe für den Rahmen und ändern Sie seinen Stil und seine Dicke. 
• Box Schatten: Klicken Sie auf das Bearbeitungssymbol, um alle Boxschatteneinstellungen zu erhalten.

Filterelement

• Ausrichtung: Passen Sie die Platzierung der Filterkategorieelemente nach links, Mitte und rechts an.
• Lücke zwischen: Definieren Sie die Lücke zwischen den Filterkategorieelementen.
• Typografie: Rufen Sie alle typografischen Anpassungseinstellungen für den Filterkategorienamen ab.

Folgende Features können für die Modi „Normal“, „Hover“ und „Aktiv“ angepasst werden. Dabei bezieht sich der Aktivmodus auf den aktuellen Mauerwerksausschnitt, der auf Ihrem Display angezeigt wird oder wenn Sie darauf klicken.

• Schriftfarbe: Ändern Sie die Schriftfarbe der Filterkategorie.
• Hintergrund: Wählen Sie einen Hintergrundstil zwischen Volltonfarbe und Farbverlauf.
• Grenze: Erhalten Sie Rahmeneinstellungen wie Farbe, Dicke und Stil.
• Box Schatten: Verleihen Sie dem Caterer-Rand einen Schatteneffekt.
• Polsterung: Passen Sie die Abstände zwischen den 
• Grenzradius: Definieren Sie die Rundung des Filterkategorierahmens.

Filterhüllen

• Abstand unten: Schaffen Sie Platz zwischen Mauerwerksinhalten.
• Hintergrundtyp: Wählen Sie einen Hintergrundtyp zwischen Volltonfarbe und Farbverlauf.
• Polsterung: Schaffen Sie Platz rund um die Filterkategorie.
• Randradius: Passen Sie die Rundung des Rahmens an.

Das ist es! Sie werden am Ende ein atemberaubendes und ansprechendes Mauerwerksdesign auf Ihrer Blockeditor-Website entwerfen.