Benutzerdefinierter Block

Wenn du keinen passenden Block in unserer Blockbibliothek findest oder einfach kreativ sein möchtest, wähle einen benutzerdefinierten Block aus und fülle ihn mit deinem eigenen Inhalt aus.

Du kannst den benutzerdefinierten Block verwenden, um ein einzigartiges Blocklayout zu erstellen, indem du die Blockelemente (Widgets) auf deine eigene Art und Weise anordnest. Mit den entsprechenden Widgets kannst du beispielsweise ein Bild neben einem Formular oder ein Video neben einem Button platzieren.

Hinzufügen eines benutzerdefinierten Blocks

Der benutzerdefinierte Block befindet sich oben in der Blockbibliothek.

No-logo-Custom-block-1.png

Nachdem du den Block zum Canvas hinzugefügt hast, musst du Widgets hinzufügen, die deinen Anforderungen entsprechen. Klicke dazu auf die gelbe Widget hinzufügen-Schaltfläche.

No-logo-Custom-block-2.png

Welche Widgets sind verfügbar?

Unsere Widgets sind in Abschnitte unterteilt, damit du dich leicht durch sie navigieren kannst. Du kannst auch das gesuchte Widget finden, indem du deine Anfrage in die Suchleiste oben in der Widgetbibliothek eingibst.

No-logo-Custom-block-3.png

Hier ist die Liste der Abschnitte mit den entsprechenden Widgets:

Raster & Spalten

Raster & Spalten helfen dir beim Gestalten des Layouts deines benutzerdefinierten Blocks. Sie dienen als Trenner mit Containern, zu denen du ein weiteres Widget hinzufügen kannst.

Du solltest eines der Widgets Raster & Spalten verwenden, um deinen Block in vertikale Abschnitte zu unterteilen. Wenn du Widgets übereinander und nicht nebeneinander hinzufügen möchtest, kannst du diesen Abschnitt überspringen.

Wenn du deine Widgets jedoch nebeneinander anordnen möchtest, wähle eines der folgenden Widgets:

  • 2-Spalten-Widget: Verwende es, wenn du deinen benutzerdefinierten Block vertikal in zwei Spalten aufteilen möchtest. Du kannst separate Widgets zu beiden Spalten hinzufügen.
  • 3-Spalten-Widget: Verwende es, wenn du deinen benutzerdefinierten Block vertikal in drei Spalten aufteilen möchtest. Du kannst separate Widgets zu allen drei Spalten hinzufügen.
  • 4-Spalten-Widget: Verwende es, wenn du deinen benutzerdefinierten Block vertikal in vier Spalten aufteilen möchtest. Du kannst separate Widgets zu allen vier Spalten hinzufügen.
  • Media-on-the-right/left-Widget: Diese Widgets haben das Layout des Über uns-Blocks. Der Abstand zwischen den Spalten ist größer als bei dem 2-Spalten-Widget. Dadurch erhöht sich die Lesbarkeit des Inhalts, wenn ein großes Medienelement neben dem Text eingefügt wird.

Du kannst die Anzahl der Spalten in einer Zeile ändern oder das Elementlayout in den Blockeinstellungen ändern.

Hinweis: Du kannst nur eines der Widgets Raster & Spalten zu einem einzigen benutzerdefinierten Block hinzufügen. Es ist beispielsweise nicht möglich, ein 2-Spalten-Widget oben auf ein 3-Spalten-Widget oder innerhalb davon hinzuzufügen. Du kannst jedoch zwei benutzerdefinierte Blöcke hinzufügen und für einen ein 2-Spalten-Widget und für den anderen ein 3-Spalten-Widget verwenden.

Basis

Diese Widgets sind die Grundelemente jeder Website: Buttons, Textcontainer, Icons, Bilder und mehr.

No-logo-Custom-block-4.png

Hier ist die vollständige Liste der Basis-Widgets:

  • Text: Hier kannst du beliebige Texte zu deinem Block hinzufügen, einschließlich Links. Verwende dieses Tutorial, um zu lernen, wie du Text bearbeiten kannst.
  • Bild: Mit diesem Widget kannst du ein Bild zu deinem Block hinzufügen.
  • Button: Dieses Widget fügt deinem Block einen Button hinzu, den du dann verlinken kannst.
  • 2 Buttons: Fügt auf einmal zwei Buttons hinzu. Du kannst sie separat bearbeiten.
  • Abstandshalter: Ermöglicht das Hinzufügen von zusätzlichem Platz zwischen zwei anderen Widgets, wie Bild und Text, und die Anpassung der Höhe.
  • Formular: Verwende dieses Widget, um deinem benutzerdefinierten Block ein Kontaktformular hinzufügen.
  • Zitat: Besteht aus verschiedenen Elementen: einem Textelement, einem kleinen Bildelement (wenn du ein Foto hinzufügen möchtest) und einem weiteren Textelement, in dem du einen Namen hinzufügen kannst.
  • Symbol: Hilft dir dabei, ein Symbol für Social Media oder ein beliebiges anderes Symbol aus unserer Sammlung hinzuzufügen. Ein kleines Element, um deine Website professioneller aussehen zu lassen.
  • Liste mit Symbolen: Kombiniert Symbol-Elemente mit Text-Elementen. Perfekt, wenn du eine Liste der von dir angebotenen Dienstleistungen bereitstellen möchtest. Die Elemente dieses Widgets können dupliziert werden.
  • HTML: Füge dieses Widget hinzu, wenn du benutzerdefinierten Code zu deinem Block hinzufügen möchtest.

Medien

Wenn du ein Foto zu deiner Website hinzufügen oder eine Audiodatei einbetten möchtest, wähle eines der Medien-Widgets aus:

  • Bild: Mit Hilfe dieses Widgets kannst du ein Bild zu deinem Block hinzufügen.
  • Video: Verwende dieses Widget, um ein Video zu deinem benutzerdefinierten Block hinzufügen.
  • Musik: Hier können Audiodateien eingebettet werden, beispielsweise von einer Sound-Hosting-Plattform.
  • Einbetten: Neben Video oder Audio kannst du mit diesem Widget auch jede andere Drittanbieterlösung einbetten, die über einen iframe-Code funktioniert. Dies kann ein Google-Dokument, Google-Kalender, ein Elfsight-Widget oder Ähnliches sein. Wenn der Code einzubetten nicht als iframe funktioniert, kannst du ihn über das HTML-Widget hinzufügen.

No-logo-Custom-block-5.png

Soziale Medien

Mit Hilfe von Social-Media-Widgets kannst du Social-Media-Icons hinzufügen und sie mit deinen Social-Media-Konten verknüpfen.

No-logo-Custom-block-6.png

  • Social-Media-Icons: Vier der beliebtesten Social-Media-Icons an einem Ort. Du kannst sie nach deinem Geschmack ändern oder nicht benötigte Icons entfernen.
  • Folge uns: Warm wie das Social-Media-Icons-Widget, enthält jedoch auch das Textelement "Folge uns". Du kannst diese Wortwahl ebenfalls ändern.

Anpassen der Blockeinstellungen

Wie bei jedem anderen Block kannst du den benutzerdefinierten Block über das Steuerungsfeld anpassen. Um es zu aktivieren, klicke auf den Block und dann auf das Blockeinstellungen-Symbol.

No-logo-Custom-block-7.png

Der Layout-Tab ist für den benutzerdefinierten Block nicht aktiv, da du das Layout mit Hilfe von Raster & Spalten in der Widgetbibliothek einstellst.

Im Tab Erscheinungsbild kannst du folgende Änderungen vornehmen:

  • Block-Stil: Ändere das Farbschema des Blocks.
  • Block-Abstände: Ändere die Abstände oben und unten im Block.
  • Spaltenlayout: Wähle die Anzahl der Elemente in einer Reihe aus.
  • Hintergrund-Einstellungen: Füge diesem Block ein Hintergrundbild hinzu.

Sobald du mit der Anpassung der Blockeinstellungen fertig bist, klicke auf Speichern, um die Änderungen zu bestätigen.

Weitere Informationen zur Anpassung von Blockeinstellungen findest du in unserem Artikel zu Blockeinstellungen.

Widgets duplizieren

Jedes Widget innerhalb eines benutzerdefinierten Blocks kann dupliziert werden. Um ein Widget zu duplizieren, fahre mit der Maus darüber, um sein Steuerungsfeld zu aktivieren, und klicke dann auf die Schaltfläche Duplizieren.

No-logo-Custom-block-9.png

Die Elemente des Liste mit Symbolen-Widgets können auch innerhalb des Widgets selbst dupliziert werden. Fahre mit der Maus über das Listenelement und klicke auf Duplizieren.

No-logo-Custom-block-8.png

Hinweis: Wenn du eine Spalte duplizierst, werden auch alle darin enthaltenen Widgets dupliziert.

Größe von Widgets ändern

Du kannst die Größe der Widgets, die Medien enthalten (Bild, Video, Musik-Widgets), ändern. Klicke dazu auf das Widget und ziehe den Größenänderungs-Regler am unteren Rand des Mediums.

No-logo-Custom-block-10.png

Das Text-Widget kann durch Ziehen der Regler an den Seiten des Widgets. vergrößert oder verkleinert werden.


Verschieben eines Widgets

Alle Widgets im benutzerdefinierten Block können verschoben werden. Um ein Widget zu verschieben, fahre mit der Maus darüber und klicke dann auf die Schaltfläche Verschieben und ziehe es an den neuen Ort. Hier ist das Video des Vorgangs.

Hinweis: Wenn du eine Spalte verschiebst, werden auch alle darin enthaltenen Widgets verschoben.

Löschen eines Widgets

Um ein Widget zu löschen, fahre mit der Maus darüber und klicke dann auf die Schaltfläche Löschen.

No-logo-Custom-block-11.png

Hinweis: Wenn du eine Spalte löschst, werden auch alle darin enthaltenen Widgets gelöscht.

Text in den Widgets bearbeiten

Um den Demoinhalt zu bearbeiten, klicke auf das Textelement und tippe deinen neuen Text ein. Du kannst den Text auch aus einem anderen Texteditor kopieren und einfügen, den du verwendest.

Weitere Informationen findest du in diesem Tutorial: Text bearbeiten und formatieren.

Bilder bearbeiten

Du kannst Demo-Bilder im benutzerdefinierten Block durch eigene Fotos ersetzen. Lies unser Anpassen deiner Bilder-Tutorial für detaillierte Anleitungen. Schau dir auch Empfohlene Bildgrößen an.

Buttons bearbeiten

Du kannst die Buttons in deinem benutzerdefinierten Block bearbeiten, um zu verschiedenen Seiten auf deiner Website oder zu einer externen URL zu führen. Um Links in Buttons zu bearbeiten, befolge die Schritte in diesen einzelnen Tutorials:

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich