Eine WordPress-Website zu erstellen, muss nicht entmutigend sein, selbst wenn du Anfänger/in bist. Mit den richtigen Werkzeugen und Anleitungen kannst du schnell eine elegante, voll funktionsfähige Website erstellen und betreiben.
Dieser Leitfaden zeigt dir, wie du eine WordPress-Website mit dem Bricks Builder erstellst, einem leistungsstarken Theme-Builder, der umfangreiche Anpassungsmöglichkeiten bietet, ohne dass du eine einzige Zeile Code schreiben musst.
Überblick über Bricks Builder
Bricks Builder ist ein visueller Website-Builder, mit dem du direkt in der WordPress-Umgebung individuelle, responsive Websites erstellen kannst. Er wurde entwickelt, um die Benutzererfahrung zu verbessern, da er sich nahtlos in WordPress integriert und es sowohl Anfängern als auch erfahrenen Entwicklern ermöglicht, Websites visuell über eine Drag-and-Drop-Oberfläche zu erstellen.
Im Gegensatz zu Elementor und anderen Website-Buildern ist Bricks ein Theme und kein Plugin. Es enthält fast alle Funktionen, während andere Website-Builder zusätzliche Plugins benötigen.
Es bietet eine Live-Bearbeitung im Frontend, d. h. du kannst deine Änderungen in Echtzeit sehen, während du Designelemente und Layouts anpasst.
Es bietet ein umfassendes Toolkit mit vorgefertigten Vorlagen, einer großen Auswahl an Designelementen und fortgeschrittenen Anpassungsoptionen für eine detailliertere Webentwicklung.
Außerdem unterstützt der Bricks Builder dynamische Daten, sodass Nutzer/innen datengesteuerte Websites einfach erstellen und Inhalte dynamisch in ihre Vorlagen integrieren können.
Vorteile der Verwendung von Bricks für WordPress
Bricks Builder zeichnet sich durch seine Leistung und Flexibilität aus. Er ist eine neuere und dennoch robuste Alternative zu anderen Buildern und bietet:
- Geschwindigkeit – Bricks ist unglaublich schnell und leichtgewichtig.
- Benutzerfreundlichkeit – Die Oberfläche ist intuitiv und macht es Anfängern und Profis leicht.
- Anpassung – Bricks bietet umfangreiche Anpassungsmöglichkeiten durch benutzerdefiniertes CSS und JavaScript und ist mit einer Vielzahl von WordPress-Plugins kompatibel.
Erste Schritte mit Bricks
Bricks ist ein Premium-Theme, das ein kostenpflichtiges Abonnement erfordert. Um es zu nutzen, musst du eines der Abonnements kaufen. Sobald du bezahlt hast, kannst du auf deinem Dashboard eine Zip-Datei herunterladen, die du zusammen mit einem Lizenzschlüssel, der Bricks in deiner WordPress-Installation aktiviert, auf deine WordPress-Website hochladen kannst.
Nach der Installation des Bricks-Themes erscheint ein neuer Bricks-Menüpunkt in deinem WordPress-Dashboard.
Um deine Lizenz zu aktivieren, gehe zum Dashboard, klicke auf Lizenz aktivieren, gib deinen Lizenzschlüssel aus deinem Bricks-Konto ein und klicke auf Aktivieren. Dadurch wird die volle Funktionalität des Bricks-Themes aktiviert.
Wenn du Bricks erst einmal ausprobieren möchtest, bevor du dich zum Kauf verpflichtest, kannst du ein Testkonto unter try.bricksbuilder.io einrichten. Diese Plattform bietet dir Zugang zu einer vorkonfigurierten WordPress-Website, auf der Bricks installiert ist, sodass du die Funktionen und Möglichkeiten von Bricks kostenlos testen kannst.
So startest du den Bricks Page Builder
Um eine neue Seite mit dem Bricks Page Builder zu erstellen, navigiere zu Websites > Neu hinzufügen oder klicke auf eine bestehende Website. Du kannst den Bricks-Editor starten, indem du auf Mit Bricks bearbeiten klickst.
Du kannst jetzt Elemente aus dem Elemente-Panel ziehen, um deine Seite zu gestalten.
Das Bricks-Interface verstehen
Die Bricks-Oberfläche lässt sich nahtlos in die WordPress-Umgebung integrieren.
Hier ist eine Aufschlüsselung der Hauptschnittstelle:
- Builder-Arbeitsbereich – Der Hauptbereich von Bricks ist der Builder-Arbeitsbereich, der eine visuelle Darstellung deiner Website ist. Hier kannst du direkt mit deinen Seiten interagieren, indem du Elemente an ihren Platz ziehst, die Größe veränderst und die Komponenten neu anordnest.
- Symbolleiste – Am oberen Rand des Arbeitsbereichs bietet die Symbolleiste schnellen Zugriff auf wichtige Funktionen wie das Speichern deiner Arbeit, die Vorschau deiner Website und den Zugriff auf das Einstellungsmenü und die responsiven Steuerelemente.
- Elemente-Panel – Das Elemente-Panel auf der linken Seite der Benutzeroberfläche ist dein Werkzeugkasten. Es enthält alle Bausteine, die du für deine Website verwenden kannst, wie z. B. Textfelder, Bilder, Schaltflächen und mehr. Du kannst diese Elemente aus dem Panel direkt auf deine Website ziehen.
- Strukturansicht – Die Strukturansicht befindet sich oft neben dem Elemente-Bedienfeld oder ist ein Kippschalter innerhalb des Bedienfelds und bietet eine hierarchische Übersicht über deine Website. Diese Ansicht ist besonders nützlich, um das Layout und die Tiefe deiner Seitenelemente zu verstehen und um verschachtelte Elemente einfach auszuwählen und zu bearbeiten.
Benutzerdefinierte Schriftarten in Bricks verwenden
Bricks bietet dir die Möglichkeit, eigene Schriftarten auf deine WordPress-Website hochzuladen. Navigiere dazu zu Bricks > Benutzerdefinierte Schriftarten.
In diesem Bereich kannst du deine Schriftdateien in verschiedenen Formaten hochladen, darunter WOFF2, WOFF oder TTF. Du kannst auch verschiedene Schriftarten hochladen, z. B. dünn, halbfett, normal und fett.
Um eine eigene Schriftart hinzuzufügen, klicke auf Neu hinzufügen. Gib dann einen Namen für die Schriftart in das Feld Titel hinzufügen ein. Wähle dann die Schriftvariante aus, die du hochladen möchtest, wähle den Schriftstil und klicke auf Bearbeiten.
Es erscheint ein Dropdown mit Feldern zum Hochladen der Schriftartdatei. Wähle deine Schriftdatei aus und lade sie hoch. Du kannst diesen Vorgang wiederholen, indem du für so viele Varianten wie möglich auf Schriftvariante hinzufügen klickst. Zum Schluss klickst du auf Veröffentlichen.
Um deine neu hochgeladene benutzerdefinierte Schriftart auf den Text deiner WordPress-Website anzuwenden, befolge diese Schritte:
- Gehe zu der Seite, auf der du die neue Schriftart verwenden willst, und klicke auf Mit Bricks bearbeiten.
- Klicke auf den Text, den du ändern möchtest.
- Informationen über den ausgewählten Text werden im linken Bereich angezeigt. Klicke auf STYLE.
- Erweitere das Dropdown-Menü TYPOGRAPHIE, um weitere Optionen anzuzeigen.
- Durchsuche im Feld Schriftfamilie die verfügbaren Schriftarten, einschließlich der Google-Schriftarten und deiner benutzerdefinierten Uploads.
- Wähle deine eigene Schriftart aus der Liste aus, um deinen Text sofort zu aktualisieren.
Jetzt wird dein Text in deiner benutzerdefinierten Schriftart angezeigt und verleiht deiner Seite eine persönliche Note.
Vorlagen in Bricks verwenden
Vorlagen sind eine grundlegende Funktion in Bricks und es gibt verschiedene Arten von Vorlagen, z. B. Kopf- und Fußzeilen oder Blogpost-Layouts. Diese Vorlagen können von einem einzelnen Abschnitt, wie einem Website-Header oder einem Hero-Abschnitt, bis hin zu ganzseitigen Inhalten, wie Blogpost-Layouts, Archivseiten, Suchergebnissen und Fehlerseiten reichen.
Eine Vorlage erstellen
So erstellst du eine Vorlage:
- Navigiere zu Bricks > Vorlagen in deinem Dashboard.
- Wähle aus, ob du eine neue Vorlage hinzufügen oder eine bestehende Vorlage importieren möchtest.
- Klicke auf Neu hinzufügen, wähle den Vorlagentyp und wähle dann Mit Bricks bearbeiten.
Erstellen einer neuen Vorlage für deinen Bricks Builder
Anwenden von Vorlagen
Um eine Vorlage auf eine Seite anzuwenden:
- Navigiere zu der Seite, auf der du die Vorlage verwenden möchtest.
- Klicke auf das Symbol Vorlagen (Ordner) in der Symbolleiste des Builders, um den Bereich Vorlagen zu öffnen.
Anwenden von Vorlagen auf Bricks-Websites - Hier kannst du sowohl auf die von dir erstellten Vorlagen als auch auf die Gemeinschaftsvorlagen zugreifen.
- Wähle die gewünschte Vorlage aus und zeige sie in der Vorschau an.
Bricks-Vorlagenstore – enthält gemeinschaftliche, lokale und remote Vorlagen - Schließlich kannst du auf Einfügen klicken, um sie anzuwenden.
Wähle eine ausgewählte Gemeinschaftsvorlage aus und verwende sie
Remote-Vorlagen
Die Vorlagen von Bricks bieten einzigartige Möglichkeiten, die andere Site Builder nicht haben. Remote-Vorlagen sind Vorlagen, die auf anderen Websites erstellt und verwendet wurden und die du auf deiner Website verwenden möchtest.
Um anderen Websites die Nutzung deiner Bricks-Vorlagen zu ermöglichen, gehe zu Bricks > Einstellungen > Vorlagen in deinem WordPress-Dashboard und aktiviere das Kontrollkästchen Zugriff auf meine Vorlagen.
Verwende Whitelist-URLs und Passwortschutz, um den Zugriff auf Vorlagen auf Personen zu beschränken, die das richtige Passwort kennen.
Um Vorlagen von anderen Websites zu verwenden, gehe zu Bricks > Einstellungen > Vorlagen, scrolle zum Abschnitt Remote-Vorlagen und füge die URL der Bricks-Website, von der du die Vorlagen abrufen möchtest, in das Feld Remote-Vorlagen-URL ein.
Wenn du ein Passwort festlegst, musst du darauf achten, dass du es in das Feld Passwort für Fernvorlagen schreibst. Klicke dann auf Einstellungen speichern.
Um diese Vorlagen zu verwenden, navigierst du zum Page Builder und klickst wie zuvor auf Vorlagen; es erscheint ein neuer Abschnitt Remote-Vorlagen mit allen Vorlagen von der Remote-Site.
Dynamische Daten in Bricks verwenden
Bricks ermöglicht es dir, dynamische Daten in deine Vorlagen und Seiten einzubinden, was es zu einem vielseitigen Werkzeug für die Erstellung dynamischer Websites macht.
Du kannst verschiedene dynamische Elemente wie Bilder, Beitragstitel, Veröffentlichungsdaten, Autorennamen, Kategorien, Tags, Seitentitel und alle deine benutzerdefinierten Felder einfügen.
Dynamische Daten sind besonders nützlich, wenn du bestimmte Vorlagen in Bricks erstellst, z. B. deine Blogpost-Vorlage oder Vorlagen für benutzerdefinierte Beitragstypen, wie z. B. ein einzelnes Immobilienangebot.
Um dynamische Daten hinzuzufügen, gibst du { auf der Arbeitsfläche ein oder klickst auf das „Bolzen“-Symbol neben den meisten Feldern im Einstellungsbereich.
Hier erfährst du, wie du eine Vorlage für einen einzelnen Beitrag mit dynamischen Daten mit Bricks erstellst:
- Navigiere zu Bricks > Vorlage, um eine neue Vorlage zu erstellen. Gib deiner Vorlage einen Titel, setze den Typ auf Einzeln und veröffentliche sie oder speichere sie als Entwurf.
- Klicke auf Mit Bricks bearbeiten, um deine Vorlage für die Verwendung dynamischer Daten zu konfigurieren.
- Gestalte die Seite wie gewünscht. Normalerweise möchtest du, dass Elemente wie der Titel des Beitrags, das Bild, das Veröffentlichungsdatum, der Name des Autors und der Inhalt des Beitrags dynamisch angezeigt werden.
- Füge auf einer leeren Leinwand einen Titel und einen Inhalt hinzu, indem du
{post_title}in ein Überschriftenelement und{post_content}in ein einfaches Textelement einfügst.
Dynamische Daten in Bricks verwenden
So legst du diese Vorlage als Standard für alle Beiträge fest:
- Klicke auf das Einstellungssymbol in der Symbolleiste, gehe zu Vorlageneinstellungen > Bedingungen und klicke dann auf die Schaltfläche + BEDINGUNG HINZUFÜGEN.
- Wähle Beitragstyp und gib Beiträge an.
Lege die Vorlage als Standard für alle Beiträge fest - Stelle sicher, dass du die Vorlagenseite in WordPress speicherst und aktualisierst. Navigiere dann zur Seite Beiträge, um jeden Beitrag mit der neuen Vorlage und ohne zusätzliches Styling zu formatieren.
Die Vorlage wird für alle Beiträge verwendet
Um das Styling dieser Vorlage zu vereinfachen, füge einen Standardbeitrag hinzu, der als Referenz für die dynamischen Elemente dient:
- Klicke auf das Einstellungssymbol in der Symbolleiste und gehe zu Vorlageneinstellungen > INHALTE EINFÜGEN.
- Wähle Einzelner Beitrag/Seite als Inhaltstyp und wähle einen bestimmten Beitrag als Vorlageninhalt. Wenn keine angezeigt werden, suche nach einer Vorlage und klicke dann auf VORLAGE ANWENDEN.
Füge einen Standardbeitrag hinzu, der als Referenz für die dynamischen Elemente dient - Jetzt kannst du Elemente wie den Titel und den Inhalt des Beitrags ganz einfach mit dem ausgewählten Vorlagenbeitrag anzeigen.
Der ausgewählte Standardbeitrag wird angezeigt, wenn du die Seite mit dynamischen Daten anpasst
Außerdem unterstützt Bricks die Verwendung von Inhalten aus erweiterten benutzerdefinierten Feldern (Advanced Custom Fields, ACF), wodurch du noch mehr Möglichkeiten hast, detaillierte, maßgeschneiderte Seiten zu erstellen.
Formularübermittlung mit Bricks
Die Funktion zur Übermittlung von Formularen wurde in Bricks 1.9.2 eingeführt, damit du die Übermittlung von Formularen erfassen kannst. Dies ermöglicht es dir, eine benutzerdefinierte Tabelle mit dem Namen bricks_form_submissions in deiner Datenbank zu erstellen (plus dein WP-Datenbankpräfix).
Du kannst die neue Einstellung Formulareingaben in der Datenbank speichern unter Bricks > Einstellungen > Allgemein > Sonstiges aktivieren.
Klicke dann auf Einstellungen speichern. Es erscheint eine Registerkarte für Formularübermittlungen (Bricks > Formularübermittlungen), die deine verschiedenen Formularübermittlungstabellen enthält.
Sammeln von Formularübermittlungen
Für das Sammeln von Formulareingaben in Bricks ist kein zusätzliches Plugin erforderlich. Du musst nur das Formular-Element verwenden, um ein Formular zu erstellen und die Felder richtig zu setzen.
Klicke im Einstellungsfenster auf Aktionen und wähle dann die Aktion Einreichung speichern.
Klicke dann auf Einstellungen speichern, um dem Formular einen beschreibenden Namen zu geben. Dieser Name wird für den Zugriff auf die Daten des Formulars verwendet.
Wenn du jetzt die Seite speicherst und öffnest. Du kannst das Formular ausfüllen und dann zurück zu Bricks > Formularübermittlung navigieren, um die Formulardaten zu sehen.
Du kannst auch eine CSV-Datei mit den verschiedenen Formularübermittlungen herunterladen. Im Abschnitt Bricks > Einstellungen > Allgemein > Sonstiges, in dem du diese Funktion konfiguriert hast, kannst du die Datenbanktabelle zurücksetzen oder löschen.
Verwendung von WooCommerce mit Bricks
WooCommerce ist ein kostenloses Plugin, das deine WordPress-Website um E-Commerce-Funktionen erweitert. Es ist weltweit als führende Open-Source-Lösung für die Einrichtung und Verwaltung eines Online-Shops anerkannt.
Bricks lässt sich nahtlos in WooCommerce integrieren und bietet einen robusten In-Theme-Builder für die Gestaltung deines gesamten Shops, von der Hauptseite des Shops bis zu einzelnen Produktseiten, Produktarchiven, Warenkörben, Kassen und Kontoseiten.
Bricks bietet spezielle Elemente und Vorlagen speziell für WooCommerce, mit denen du das Layout deines Shops gestalten kannst.
Um den WooCommerce Builder in Bricks nutzen zu können, musst du das WooCommerce Plugin installieren und aktivieren. Sobald es aktiviert ist, kannst du Bricks nutzen, um verschiedene WooCommerce-Vorlagen visuell zu gestalten und anzupassen, ähnlich wie du Layouts für einzelne Posts verwalten würdest.
So erstellst du eine einfache Shop-Seite:
- Navigiere zu Seiten und wähle die Shop-Seite aus.
- Klicke auf Mit Bricks bearbeiten. Das Elemente-Panel enthält verschiedene Produktelemente. Mit ihnen kannst du Produkte, Titel, Beschreibungen, Preise und mehr anzeigen und so die dynamische Erstellung von Vorlagen erleichtern.
WooCommerce mit Bricks Builder verwenden Mit diesen Elementen kannst du deine Seite nach Belieben anordnen und gestalten.
So wie du eine einzelne Beitragsvorlage erstellst, kannst du auch eine einzelne Produktvorlage erstellen und ihre Bedingungen so einstellen, dass sie mit allen Produkten funktioniert.
Abfrageschleifen in Bricks
Mit dem Query Loop Builder kannst du deine Datenbank nach deinen Abfrageparametern abfragen und die Abfrageergebnisse, die du anzeigen möchtest, innerhalb der Schleife darstellen. Er kann in Layout-Elementen wie Containern, Akkordeons und Schiebereglern verwendet werden.
Du kannst Beitragstypen, Taxonomiebegriffe und Benutzer abfragen. Du kannst zum Beispiel eine Liste von Blogautoren, Community-Mitgliedern und Teammitgliedern abfragen.
Um die Abfrageschleife zu verwenden, füge dem Canvas ein Container-Element hinzu. Aktiviere die Einstellung Abfrageschleife verwenden, um deinen Container in ein Schleifenelement zu verwandeln.
Sobald du die Einstellung Abfrageschleife verwenden aktiviert hast, siehst du ein Abfrage-Steuerelement (Unendlichkeitssymbol). Klicke auf das Symbol, um das Abfrage-Steuerelement zu öffnen und die Abfrageparameter für den Abruf des Inhalts aus deiner Datenbank festzulegen.
Der Container dient jetzt als dein Wiederholungselement. Alle Elemente innerhalb dieses Containers werden so oft wiederholt, wie es Abfrageergebnisse gibt. Dieser Academy Guide erklärt, wie das funktioniert.
Bricks Preise
Bricks hat keinen kostenlosen Plan. Du kannst nur ein Konto einrichten, um das Theme auszuprobieren, aber du kannst es nicht für deine Website nutzen, wenn du nicht bezahlst.
Bricks bietet einen Basisplan und einen Lifetime-Plan an. Der Lifetime-Plan bietet unbegrenzte Privilegien, aber du entscheidest, was du willst.
Bricks bietet den Vorteil, dass fast alles, was du brauchst, in der Plattform enthalten ist. Das trägt zu einem nahtlosen und effizienten Arbeitsablauf bei und macht es zu einer lohnenden Investition für alle, die eine robuste und vielseitige Webdesign-Lösung suchen.
Bricks Bewertung: Ist es einen Versuch wert?
Ein möglicher Nachteil ist, dass Bricks im Gegensatz zu Elementor keine kostenlose Version anbietet. Dennoch hat Bricks Builder mit seiner Mischung aus Einfachheit und leistungsstarken Funktionen in der Branche Aufmerksamkeit erregt.
In einer Umfrage von The Admin Bar aus dem Jahr 2024 unter 1.144 WordPress-Fachleuten heißt es: „Bricks war der einzige Page Builder, der seine Zahlen im Vergleich zum letzten Jahr steigern konnte und 32 % der Gesamtzahl für sich verbuchen konnte“:
Das zeigt, wie viele WordPress-Profis Bricks nutzen, obwohl es noch ein relativ neuer Anbieter auf dem Markt ist.
Bricks funktioniert als komplettes Theme. Das bedeutet, dass du keine Funktionen aus anderen Themes mit seinem Page Builder kombinieren kannst. Auch was die Geschwindigkeit angeht, ist Bricks Builder als neuerer Page Builder, der für leistungsstarke Websites entwickelt wurde, angeblich schneller als Elementor Pro.
Die Verwendung eines Page Builders, der nur auf Geschwindigkeit ausgelegt ist, kann nicht die beste Leistung garantieren. Unabhängig von der Art der Website, die du erstellst, spielt dein Hosting-Anbieter eine entscheidende Rolle für die Leistung der Website.
Wir bei Kinsta sind dafür bekannt, erstklassiges WordPress-Hosting mit Dutzenden von Premium-Funktionen anzubieten. Darauf sind wir stolz!
Wir arbeiten mit einer vollständig containerisierten Architektur, die ausschließlich von der Google Cloud Platform im Premium Tier-Netzwerk von Google betrieben wird. Dadurch können wir dir eine große Auswahl der schnellsten Datenserver, unglaubliche Leistung, Caching auf Serverebene, dedizierte Ressourcen und verbesserte Sicherheit bieten.
Schau dir an, was unsere Kunden sagen, oder kontaktiere uns, um mehr über unsere Managed-Hosting-Lösung und ihre Vorzüge zu erfahren.
Zusammenfassung
In diesem Artikel haben wir uns mit dem Bricks Builder, seiner Funktionsweise, einigen seiner Funktionen und deren Nutzung beschäftigt. Wir haben seinen umfassenden themenbasierten Ansatz, seine Anpassungsmöglichkeiten und seine Leistungsvorteile untersucht.
Zwar gibt es von Bricks keine kostenlose Version wie von Elementor, aber das integrierte Design und die häufigen Updates können die Leistung der Website optimieren.
Hast du Fragen zur Verwendung des WordPress Bricks Theme Builders? Lass es uns im Kommentarbereich unten wissen!
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar