Zwei HERO-Frames anlegen

Im Pagebuilder legen Sie eine neue Zeile mit 100% (= 1 Spalte) an / Widget hinzufügen / SiteOrigin Hero

SiteOrigin HERO Breite einstellen

Gesamte Seitenbreite

(normalerweise im Kopfbereich der Webseite, Standard nehmen Sie, wenn Hero innerhalb des Beitrages erscheinen soll)

Hero-Zeile markieren / Bearbeiten / rechte Sidebar: Layout / Gesamte Breite gestreckt

Einstell-Möglichkeiten im Zeilen-Layout des PageBuilders

Frontend Gesamte Breite gestreckt

Zwei Frames anlegen

Hero Frames / Frame / Add ( 2 Mal)

Screen ZWEI Frames sind angelegt

Frame 1 mit dem Foto Pizzeria 2000 x 1200 WEB.jpg anlegen

Wählen Sie den ersten Frame und klicken auf das kleine Dreieck rechts oben. Nun geben Sie den Text ein, der mit Ihrem Bild angezeigt werden soll. Achtung: Achten Sie später darauf, dass dieser Text gut lesbar sein wird. (Textfarbe / Hintergrund).
Überschrift = <h2>, der Text <h3> Den restlichen zweiten Frame erstellen Sie nach dem gleichen Muster.

Hintergrundbild Pizzeria 2000 x 1200 WEB.jpg + Hintergrundfarbe auswählen

Hintergrundbild

Die Hintergrundfarbe wird zu 65% transparent gemacht. so dass die Schrift besser zu lesen ist.

Frontend Frame 1 - mit Bild Pizzeria 2000 x 1200 WEB.jpg und transparenter Hintergrundfarbe und mit Text

Frame 2 mit dem Foto Gedeckter Tisch 2000 x 1200 WEB.jpg anlegen

Wählen Sie den zweiten Frame und klicken auf das kleine Dreieck rechts oben. Nun geben Sie den Text ein, der mit Ihrem Bild angezeigt werden soll. Achtung: Achten Sie später darauf, dass dieser Text gut lesbar sein wird. (Textfarbe / Hintergrund / Textgröße und fett).
Überschrift = <h2>, der Text <h3> 

Hintergrundbild Gedeckter Tisch 2000 x 1200 WEB.jpg + Hintergrundfarbe auswählen

Hintergrundbild Gedeckter Tisch

Die Hintergrundfarbe blau wird zu 10 % (Eintrag 90) transparent gemacht. so dass die Schrift besser zu lesen ist.

Frontend Frame 2 - mit Bild Gedeckter Tisch 2000 x 1200 WEB.jpg und transparenter Hintergrundfarbe und mit Text

Design und Layout

Der PageBuilder SiteOrigin bietet eine ganze Menge Features an, um dieses Hero zu konfigurieren

Design & Layout Ansicht -2- Fortsetzung

Bild größer anzeigen

Design und Layout / Höhe

Bild ist zu groß

Die Bilder haben die Abmessung 2000 x 1200 px. Probieren Sie mal bei Höhe 900 px
Das Bild wird nun in voller Seitenhöhe angezeigt. Der Text befindet sich im oberen Teil des Bildes und nicht mehr in der Mitte

Das zu große Bild

Bild verkleinern

Die Bilder haben die Abmessung 2000 x 1200 px. Probieren Sie jetzt einmal die Höhe 700 px
und Top and Bottom padding (Abstand zwischen Bild zum oberen / unteren Rand) 300 px

Das kleiner Bild

Das Bild eignet sich gut für die Kopfzeile einer Landingpage.

Buttons in die Bilder einfügen

Frame -1- aufrufen / Buttons / Add / kleines Dreieck anklicken

Button text

Reservieren Sie jetzt Ihren Tisch

Destination-URL

URL eines Formulars oder Ihres Digital-Shops

ICON auswählen

Es werden Ihnen zahlreiche Icons angeboten

ICON Farbe

weiss

Design and Layout

Button-Farbe

ROT

Text-Farbe

weiss

Schrift-Größe

Extra gross / Extra large

Button in den Text des Frames -1- per Shortcode einfügen

Als Sie den Button oben einfügten, tauchte folgender Hinweis auf, dass Sie den Shortcode [buttons] verwenden sollen.

Button in Text einfügen

Rufen Sie Frame -1- auf und fügen Sie den Shortcode [buttons] unter dem Text links ein.

auch wenn der Shortcode links steht, die Schaltflkäche wird immer zentriert.

Frontend Frame -1- mit Schaltfläche