Verwendung des Pagebuilders – Kurzeinführung

Wir setzen Brizy als Pagebuilder ein. Brizy hat eine sehr intuitive Oberfläche. Auf der linken Seite befindet sich ein Bedienfeld, in dem Sie Designelemente hinzufügen, das Seitenlayout festlegen und die Blöcke verwalten können. Um die Einstellungen für die Designelemente vorzunehmen, haben Sie eine Einstellungsleiste. Ziemlich ähnlich wie Gutenberg (der neue WordPress-Standardeditor), aber mit mehr Einstellungsoptionen.

Wenn Sie Brizy noch nicht kennen, zeigt Ihnen dieser Artikel, wie Sie den Pagebuilder verwenden. Dieser Artikel befasst sich mit dem Erstellen einer Seite. Um zu erfahren, wie Sie einen benutzerdefinierten Header, eine benutzerdefinierte Fußzeile und Popups erstellen, können Sie separate Artikel der Doku lesen.

Erstellen Sie Ihre erste Seite mit dem Pagebuilder

Grundlegendes zur Oberfläche

Bevor Sie eine Seite erstellen, sollten Sie zunächst die Benutzeroberfläche des Pagebuilders (oder auch Editors) kennenlernen. Die Screenshots sind alle in Englisch gehalten. Die meisten Texte sind mittlerweile ins Deutsche übersetzt, hie rund da werden Sie aber noch auf Englische Bezeichnungen stoßen.

Wie Sie auf dem Screenshot oben sehen können, ist die Benutzeroberfläche recht einfach und übersichtlich gehalten. Die anfängliche Oberfläche besteht nur aus dem linken Bereich und dem sogenannten Canvas-Bereich (Leinwand, Zeichenbereich). Das Bedienfeld auf der rechten Seite (das Einstellungsfeld) wird nur angezeigt, wenn Sie auf das Zahnradsymbol in der Einstellungsleiste klicken, wenn Sie ein bestimmtes Element anpassen möchten.

Im Einzelnen:

Der linke Bereich

Hier ist der feste Bereich gemeint, der sich auf der linken Seite des Editors befindet (wie Sie auf dem Screenshot oben sehen können). In diesem Bereich können Sie Designelemente (Text, Bild, Form, Form, Schaltfläche usw.) hinzufügen, die Blöcke neu anordnen, das Seitenlayout festlegen und in den Gerätemodus (Desktop, Tablet, Smartphone) wechseln.

Leinwandbereich (Canvas, Zeichenbereich)

In vielen Artikeln auf dieser Website finden Sie das Wort “Leinwand”. Das Wort bezieht sich auf Ihren tatsächlichen Arbeitsbereich, in dem Sie Ihre Gestaltungselemente hinzufügen.

Einstellungsleiste

Wenn Sie auf ein bestimmtes Element im Canvas-Bereich klicken, wird eine Leiste angezeigt, die aus Zeilen mit Einstellungsoptionen besteht. Mit dieser Leiste können Sie das zugehörige Element anpassen. Die Einstellungsoptionen variieren je nach dem Element, auf das Sie klicken.

Einstellungsfeld

In der Einstellungsleiste jedes Elements sehen Sie ein Zahnradsymbol. Durch Klicken auf dieses Symbol wird auf der rechten Seite ein neues Fenster geöffnet. Wir nennen es das Einstellungsfeld. In diesem Bereich können Sie erweiterte Einstellungen für das zugehörige Element vornehmen.

Bearbeiten einer Seite

Nachdem Sie die Benutzeroberfläche kennengelernt haben, können Sie mit der Arbeit beginnen. Um eine Seite zu bearbeiten, erstellen Sie zunächst eine neue Seite ( Inhalte > Seiten > Seite erstellen ). Geben Sie Ihrer Seite wie gewohnt einen Namen und klicken Sie auf die Schaltfläche “Edit with Brizy“, um die Seite mit dem Brizy-Editor (Pagebuilder) zu bearbeiten, der daraufhin geladen wird.

Bevor Sie Ihrer Seite ein Element hinzufügen, können Sie zuerst die Layoutseite/Vorlage festlegen. Klicken Sie dazu auf das Papiersymbol unten links im linken Bereich und wählen Sie das gewünschte Layout aus.

Die verfügbaren Layoutoptionen hängen von der verwendeten Designvorlage ab. In der Regel brauchen Sie hier nichts einzustellen und können “Default” nutzen. Fügen Sie Ihrer Seite nun Elemente hinzu, zum Start einen neuen Block.

Klicken Sie dazu im Canvas-Bereich auf die Plus-Schaltfläche. Sie können dann die Elemente aus dem linken Bereich hinzufügen. Um ein Element hinzuzufügen, ziehen Sie das gewünschte Element in einen Block im Canvas-Bereich.

Wenn Sie die Bearbeitung Ihre Seite abgeschlossen haben, können Sie sie veröffentlichen, indem Sie auf das kleine Pfeilsymbol in der unteren rechten Ecke klicken und Seite veröffentlichen auswählen. Sie können sich Ihre Seite auch als Entwurf speichern, indem Sie im unteren Bereich auf Seite als Entwurf speichern (Save Draft) klicken.

Um sich die aktuell bearbeitete Seite in einer Vorschau anzuschauen (beispielsweise bevor Sie sie live schalten), klicken Sie im unteren Bereich auf das entsprechende Icon (Linksymbol).

Wenn Sie mit dem Brizy-Editor fertig sind und wieder zum WordPress-Dashboard wechseln möchten, können Sie auf das Hamburger-Symbol in der unteren linken Ecke klicken und Gehe zum Dashboard auswählen .

Blöcke hinzufügen und verwalten

Zwei Begriffe, mit denen Sie sich bei der Arbeit mit dem Brizy-Pagebuilder vertraut machen müssen, lauten: Block und Element.

Ein Block ist ein Container, in dem Sie Designelemente platzieren können, während ein Element das eigentliche Designelement ist. Eventuell treffen Sie im Internet auf auch abweichende Bezeichnungen wie Abschnitt für Block oder Widget (oder auch Modul) für Element.

Wie oben erwähnt, können Sie zum Hinzufügen eines neuen Blocks einfach auf die Plus-Schaltfläche im Canvas-Bereich klicken. Um einen Block anzupassen (z. B. die Hintergrundfarbe, den Rand, das Layout usw.), können Sie auf das Symbol klicken, das einem Mischer ähnelt. Sie können dieses Symbol sehen, wenn Sie mit der Maus über einen Block fahren. Durch Klicken auf das Mischersymbol wird die Einstellungsleiste geöffnet, in der Sie den Block anpassen können.

Um einen Block zu löschen, klicken Sie einfach auf das Papierkorbsymbol in der Einstellungsleiste. Sie können die Blöcke auch neu anordnen. Klicken Sie dazu auf das Block- oder Box-Symbol im linken Bereich. Ziehen Sie einen Block nach unten oder oben, um ihn neu anzuordnen. Sie können hier auch einen Block löschen.

Ein Block kann in der Bibliothek gespeichert werden, falls Sie ihn später auf anderen Seiten wiederverwenden möchten. Um einen Block in der Bibliothek zu speichern, bewegen Sie die Maus über den Block, den Sie speichern möchten, öffnen Sie die Einstellungsleiste und klicken Sie auf das Herzsymbol.

Um auf die gespeicherten Blöcke oder Layouts zuzugreifen, können Sie beim Hinzufügen eines neuen Blocks zur Registerkarte Saved (gespeichert) wechseln.

Spalten hinzufügen

Bei anderen Pagebuildern wie Elementor oder Divi müssen Sie beim Hinzufügen eines neuen Abschnitts eine Spalte hinzufügen. In Brizy ist die Spalte kein erforderliches Element, aber das Hinzufügen von Spalten zu einem Block kann Ihr Design und die Anordnung und Organisation der Elemente verbessern. Sie können eine Spalte als kleineren Container verwenden, um Designelemente zu platzieren. Um einem Block eine Spalte hinzuzufügen, ziehen Sie das Column-Element einfach aus dem linken Bereich in den Canvas-Bereich.

Das Column-Element fügt Ihrem Block zwei Spalten hinzu. Um eine zusätzliche Spalte einzufügen, bewegen Sie den Mauszeiger über eine vorhandene Spalte und klicken Sie auf das Pfeilsymbol in der oberen rechten Ecke der Spalte. Klicken Sie dann auf das Pluszeichen in der angezeigten Leiste. Um eine Spalte zu löschen, klicken Sie einfach auf das Papierkorbsymbol in der Leiste.

Um die Größe einer Spalte zu ändern, bewegen Sie den Mauszeiger über die Spalte, deren Größe Sie ändern möchten. Klicken und halten Sie den Spaltengriff, während Sie ihn nach links oder rechts ziehen.

Um einer Spalte einen Hintergrund hinzuzufügen, öffnen Sie die Einstellungsleiste, indem Sie auf das Pfeilsymbol in der Spalte klicken, zu der Sie den Hintergrund hinzufügen möchten. Sie können ein Bild oder eine Volltonfarbe als Hintergrund verwenden. Eine Rahmenfarbe oder einen Box-Schatten legen Sie in der entsprechenden Registerkarte Border bzw. Schatten fest.

Für die erweiterten Spalteneinstellungen klicken Sie auf das Zahnradsymbol in der Einstellungsleiste.

Elemente hinzufügen

Wir haben dieses Thema bereits weiter oben kurz angeschnitten, werden es in diesem Abschnitt jedoch etwas detaillierter behandeln. Elemente sind die eigentlichen Gestaltungselemente, mit denen Sie Ihre Seite erstellen. Elemente werden in anderen Pagebuilder auch Widget oder Modul genannt, daher können Sie im Internet auch auf diese Begriffe stoßen.

Um eines der zahlreichen Elemente Ihrer Seite hinzuzufügen, ziehen Sie einfach es aus dem linken Bereich in den Canvas-Bereich und legen es dort ab.

Um das Element anzupassen, klicken Sie es an, worauf die Einstellungsleiste öffnet. Bitte beachten Sie, dass die in der Einstellungsleiste verfügbaren Anpassungsoptionen je nach Element unterschiedlich ausfallen. Um die erweiterten Einstellungen wie Auffüllen, Rand, Eingangsanimation usw. im Einstellungsfeld vorzunehmen, klicken Sie auf das Zahnradsymbol in der Einstellungsleiste.

Ändern Sie den Standardtextinhalt eines Elements, indem Sie ihn markieren und überschreiben oder löschen und neu schreiben.

Um ein Element zu löschen, können Sie auf das Papierkorbsymbol in der Einstellungsleiste klicken oder einfach die Entf- Taste auf der Tastatur drücken .

Verwenden von Tastaturkürzeln

Um Ihren Workflow zu optimieren, können Sie Tastaturkürzel verwenden. Die Liste der Tastenkürzel können Sie durch Klicken auf das Hamburger-Symbol in der unteren linken Ecke > Shortcuts einsehen: