SiteOrigin Hero-Image Widget

Hero Image

"Hero-Image" ist ein großes Bild, das häufig oben auf Ihrer Site platziert wird. Es enthält ein Hintergrundbild, Text und Aktions-Schaltflächen. Das Hero-Widget unterstützt mehrere Folien, sodass Sie mehrere Nachrichten anzeigen können.

Sobald das Helden-Widget mit Page Builder in Ihren Themen-Widget-Bereich oder Ihre Seite / Ihren Beitrag eingefügt wurde, bewegen Sie den Mauszeiger darüber und klicken Sie auf den Link Bearbeiten, um zu beginnen. Sie sehen dann die folgenden Abschnitte:

Hero frames / Hero-Rahmen

In diesem Abschnitt FRAME fügen Sie Ihre Hero-Folien hinzu. Ein Bild pro Folie. Wenn Sie nur ein Hero-Image hast, verwenden Sie nur einen Rahmen. Klicken Sie auf die Schaltfläche Hinzufügen, um Ihren ersten Frame hinzuzufügen. Der Abwärtspfeil rechts öffnet den Rahmen. Das Seiten-Symbol dupliziert den Rahmen und das Kreuzsymbol löscht den Rahmen.

Abwärtspfeil

Screen Hero-Frames

Hero frames

Content / Inhalt

Im Inhaltsfeld fügen Sie Ihren Hero-Text, Schaltflächen und ggf. weitere Bilder über die Schaltfläche "Medien hinzufügen" ein (nicht das Hintergrundbild, wir werden gleich darauf zurückkommen).

Buttons

Um Ihrem Hero-Bild eine oder mehrere Schaltflächen hinzuzufügen, klicken Sie unter der Überschrift „Schaltflächen“ auf „Hinzufügen“.

• Abwärtspfeil

  die Benutzeroberfläche,

• Seitensymbol

  dupliziert die Schaltfläche

• Kreuzpfeil

  löscht die Schaltfläche.

Öffnen Sie die Schaltfläche und fügen Sie Ihren Schaltflächentext und die Ziel-URL (Schaltflächen-Link) hinzu. Aktivieren Sie die unten stehende Option, wenn Sie die Schaltfläche in einem neuen Fenster öffnen möchten. Unten finden Sie Abschnitte für ein Symbol, Design und Layout sowie andere Attribute und SEO. Dies sind die gleichen Abschnitte, die auch im Widget für Standalone-Schaltflächen zu finden sind.

Sobald Ihre Schaltfläche oder Schaltflächen hinzugefügt wurden, können Sie sie mit dem folgenden Shortcode in das Inhaltsfeld oben einfügen:

[buttons]

Hintergrund

Background-Image / Hintergrundbild

Verwenden Sie das Hintergrundbild, um Ihr Hintergrundbild für die Hero-Folie einzufügen. Über die Schaltfläche Choose Media (Medien auswählen) können Sie ein Bild hochladen oder eines aus Ihrer Medienbibliothek auswählen. Über die Schaltfläche Bildsuche können Sie auf einfache Weise lizenzfreie Fotos suchen.

Image size / Bildgröße

Image size / Bildgröße

Wählen Sie die zu verwendende Bildgröße aus. Vollständig verwendet oder wählen Sie eine der von Ihrer WordPress-Installation bereitgestellten Miniaturbildgrößen aus.

Background image type / Hintergrund-Bildtyp

Wählen Sie den Hintergrund-Bildtyp aus. Derzeit ist nur Cover / Deckung verfügbar.

Wenn Sie SiteOrigin Premium verwenden, ist Parallax optional erhältlich.

Background image opacity / Hintergrundbild-Deckkraft Transparenz

Legen Sie die Hintergrundbild-Deckkraft fest. Verwenden Sie den Schieberegler, um einen Wert zwischen 0 und 100 festzulegen .

Background color / Hintergrundfarbe

Legen Sie eine Hintergrundfarbe fest.

Destination URL / Ziel-URL

Verknüpfe das Hero-Hintergrundbild. Geben Sie die Ziel-URL (Link) ein.

URL in einem neuen Fenster

öffnen Aktivieren Sie diese Option, um den Link zum Hintergrundbild in einem neuen Fenster zu öffnen.

Background videos / Hintergrundvideos

Fügen Sie nach Bedarf Hintergrundvideos hinzu.

Background videos / Hintergrundvideos

Video - file / Video - Datei

Verwenden Sie die Wählen Sie Media Schaltfläche , um Ihre Video - Datei auszuwählen.

Video-URL

Eine externe URL des Videos. Überschreibt die obige Einstellung für Videodateien.

Autoplay

Derzeit nur für YouTube-Videos möglich

Bitte beachten Sie, dass die automatische Wiedergabe von YouTube-Videos nur auf Desktop-Geräten funktioniert. Auf Mobilgeräten wird die automatische Wiedergabe automatisch deaktiviert, Benutzer können jedoch auf tippen, um das Video abzuspielen.

Videoformat

Wählen Sie das Videoformat. Wählen Sie zwischen MP4, WebM und Ogg.

Maximale Höhe
Legen Sie eine maximale Höhe für das Video fest.

Slider Controls / Schieberegler

Wenn Sie mehr als ein Bild (Folie) verwenden, wird das Helden-Widget ebenfalls als Schieberegler angezeigt. Die Einstellungen in diesem Abschnitt beziehen sich auf den Schieberegler.

Slider Controls / Schieberegler

Animation speed / Animationsgeschwindigkeit Stellen

Sie die Geschwindigkeit der Slider-Animation in Millisekunden ein. Standardeinstellung ist 800.

Time-out

Wie lange jedes Bild in Millisekunden angezeigt wird. Standardeinstellung ist 8000.

Navigation color / Navigationsfarbe

Die Navigationselemente des Schiebereglers sind die nächsten / vorherigen Pfeile und die Navigationspunkte, die angeben, wie viele Folien sich im Hero befinden und welche Seite gerade angezeigt wird.

Navigation style / Navigationselementstil

Legen Sie den Navigationselementstil fest (Standardeinstellung: dünn). Die Optionen sind

• Ultradünn,
• Dünn,
• Mittel,
• Dick,
• Abgerundet Ultradünn,
• Abgerundet Dünn,
• Abgerundet Mittel und
• Abgerundet Dick.

Navigation size / Navigationsgröße der Navigationspfeile

Stellen Sie die Größe der Navigationspfeile standardmäßig auf ein 25.

Navigation auf Mobilgeräten 

immer anzeigen

Aktivieren Sie diese Einstellung, wenn die Elemente der Schiebereglernavigation auf Mobilgeräten immer sichtbar sein sollen.

Swipe control / Swipe-Steuerung

Ermöglicht Benutzern das Wischen durch Frames auf Mobilgeräten. Im Falle eines Konflikts auf Plugin- oder Designebene mit anderen Swipe-Skripten kann diese Einstellung deaktiviert werden.

Show slide background videos on mobile / Slider Hintergrundvideos auf Mobilgeräten anzeigen

Ermöglichen Sie das Anzeigen von Folienhintergrundvideos auf Mobilgeräten, die die automatische Wiedergabe unterstützen.

Beachten Sie, dass die automatische Wiedergabe von YouTube-Videos auf Mobilgeräten nicht unterstützt wird. Da YouTube-Videos auf Mobilgeräten jedoch manuell wiedergegeben werden können, wird das Slide-Fallback-Image nicht verwendet.

Design und Layout -1-

Design und Layout -1-

height / Höhe

Stellen Sie eine Höhe ein. Wenn keine Höhe eingestellt ist, passt sich das Hero-Image dem Inhalt an.

Responsive height / Responsive Höhe

Stellen Sie die Höhe ein, wenn die Bildschirmauflösung des Mobilgeräts erreicht ist. Die mobile Breite kann in den Einstellungen angepasst werden Seitenersteller-Layout: Mobile Breite .

Top and bottom padding / Oberes und unteres Padding

Legen Sie das obere und unteres Padding des Inhalts (Text und Schaltflächen) fest.

Extra top padding / Extra Top-Padding

Zusätzliches Padding an die Spitze des Schiebers hinzugefügt.

Side padding / Seitenpadding

Legen Sie die Inhalte (Text und Tasten) Seitenpadding. (20)

Maximum container width / Maximale Container-Breite

Legen Sie die maximale Widget-Containerbreite fest. (1280)

Heading font / Überschriften Schrift

Wenn Ihr Widget-Inhalt Überschriften, Überschriften eins, Überschriften zwei, Überschriften drei usw. enthält, können Sie mit dieser Einstellung die Schriftart dieser Überschriften festlegen. Die Standardeinstellung lautet "Motivschrift verwenden".

Heading color / Überschriftenfarbe

Legen Sie die Schriftfarbe für alle im Widget-Inhalt verwendeten Überschriften fest.

Heading size / Überschriftengröße

Geben Sie die Schriftgröße h1 ein. h2 - h6 werden proportional zu diesem Wert dimensioniert. (38px)

Design und Layout -2-

Design und Layout -2-

FitText verwenden 

Passen Sie die Schriftgröße Ihrer Überschrift dynamisch an die Bildschirmgröße an.

FitText compressor strength / FitText-Kompressorstärke

Je höher der Wert, desto mehr werden Ihre Überschriften verkleinert. Werte über 1sind erlaubt.

Heading shadow intensity / Überschriften Test-Schatten -Intensität.

Wenn im Widget-Inhaltsbereich Überschriften verwendet wurden, kann mit dieser Einstellung die Intensität des Text-Schattens angepasst werden.

Text color / Textfarbe

Legen Sie die Farbe des im Widget verwendeten Absatztexts fest. Bitte beachten Sie, dass diese Einstellung Vorrang vor den Widget-Stilen hat. Design-Einstellung der Schriftfarbe .

Text size / Textgröße

Legen Sie die Größe des Absatztext im Widget verwendet.

Text font / Text - Schriftart

Wählen Sie Schriften-Familie oder eine benutzerdefinierte Schriftart für den Absatztext im Widget,

Text shadow intensity / Text-Schatten Intensität

Wenn im Widget-Inhaltsbereich Absatztext verwendet wurde, kann mit dieser Einstellung die Intensität des Text-Schattens angepasst werden.

Link color / Link Farbe

des Textlink Farbe einstellen.

Link hover color / Link-Hover-Farbe

Legen Sie die Farbe für den Text-Link-Hover fest.

Optimieren fürs Handy

Das Hero-Widget legt die Hintergrund-Bildgröße für die Folie fest. Cover weist den Browser an, sicherzustellen, dass das Bild immer den gesamten Container abdeckt, auch wenn es das Bild strecken oder ein wenig von einem der Ränder abschneiden muss. Wenn Ihr Bild auf Mobilgeräten abgeschnitten ist, sollten Sie ein Bild mit zentralem Fokus oder Motiv verwenden. Um mehr von Ihrem Bild auf Mobilgeräten sichtbar zu machen, sollten Sie das Auffüllen auf Zeilen-Ebene festlegen und dieses Auffüllen dann auf Mobilgeräten entfernen, indem Sie das Auffüllen für Mobilgeräte auf 0 0 0 0 festlegen .

Erstellen Sie einen Vollbild-Schieberegler

Erstellen Sie eine neue Seite und aktivieren Sie den Seiten-Generator oder öffnen Sie eine vorhandene Seite. Fügen Sie dieser Zeile eine neue Zeile und das SiteOrigin Hero Image-Widget hinzu. Wir müssen festlegen, dass die von Ihnen verwendete Zeile auf "Volle Breite strecken" eingestellt ist, damit das Helden-Widget die volle Breite der Seite hat. Öffnen Sie dazu die Zeile mit dem neu hinzugefügten Helden-Widget, indem Sie auf die Schraubenschlüssel-Schaltfläche über der Zeile klicken.

Gehen Sie zur rechten Seitenleiste "Zeilenstile" und öffnen Sie die Gruppe "Layouteinstellungen". Stellen Sie das Zeilenlayout auf Volle Breite gestreckt ein . Zum Nachschlagen, hier ist, was jedes Zeilenlayout tut:

Standard: Das von Ihrem Thema vorgegebene Standardlayout.

Volle Breite: Durch dieses Zeilenlayout wird die Zeile auf die volle Breite des Browsers gedehnt und ein Inhaltscontainer hinzugefügt, dessen Größe dem Standardcontainer entspricht. Mit diesem Zeilenlayout können Sie Hintergründe in voller Breite erstellen, während die Widgets in der Zeile die konsistente Platzierung des restlichen Seitenbereichs beibehalten.

Volle Breite gestreckt: Dieses Zeilenlayout entspricht der vollen Breite der Seite. Es ist perfekt, um Widgets (wie das Hero-Widget) in voller Breite und nicht nur als Zeilenhintergrund zu erstellen.

Schließen Sie die Zeile und öffnen Sie das SiteOrigin Hero-Widget, indem Sie den Mauszeiger über das Hero-Widget halten und auf Bearbeiten klicken.

Öffnen Sie die Einstellungsgruppe Design und Layout und stellen Sie die Höhe auf 100 vh ein . Das V in VH steht für Viewport Percentage Length und H für Height. Grundsätzlich ist 100vh die gesamte Höhe des Browsers, unabhängig vom Gerät. Daher ist es genau das, was Sie für einen Vollbild-Slider suchen.

Das ist alles, was zum Erstellen von Vollbild-Schiebereglern mit dem SiteOrigin Hero-Widget erforderlich ist. Jetzt müssen Sie nur noch den Rest des Schiebereglers wie gewünscht einrichten - Inhalte hinzufügen, Abstände anpassen usw. Als Referenz für Vollbild-Schieberegler empfehlen wir die Verwendung von Hintergrundbildern mit einer Größe von mindestens 1920 x 1080 . 1920 x 1080 ist eine äußerst beliebte Auflösung, die die meisten Anwendungsfälle abdeckt.

Viele weitere Möglichkeiten bietet Ihnen die Premium-Version