Springe zum Hauptinhalt

Divi Tutorial: Wie man das Slide Modul benutzt

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Mit Divi können Sie Schieberegler in Abschnitten voller Breite platzieren, sodass sich Ihre Cursor über die Breite des Browsers erstrecken. Sliders (Slides) Divi unterstützt sowohl Parallaxenhintergründe als auch Videohintergründe!

Verwenden Sie einen Schieberegler für Divi.png

Wie man ein Diapo-Modul voller Breite von Divi hinzufügt

Bevor Sie Ihrer Seite ein Slider-Modul in voller Breite hinzufügen können, müssen Sie zunächst in Divi Builder springen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builderjedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

benutze visual builder divi.png

Sobald Sie sich im Visual Builder befinden, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Erstelle ein Slide Divi Tutorial wordpress.png

Suchen Sie das Cursor-Modul mit voller Breite in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Folie" eingeben und dann auf die Eingabetaste klicken, um das Slider-Modul in voller Breite automatisch zu suchen und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Fügen Sie Ihrer Startseite einen vollbreiten Slider-Heldenabschnitt hinzu

Mit einem Schieberegler in voller Breite können Sie mehrere CTAs über dem Schwellenwert Ihrer Homepage anzeigen. Die Kombination von Bildern und Inhalten kann Ihrem Bereich ein professionelles Gefühl verleihen, das auffällt.

In diesem Beispiel füge ich eine Folie mit voller Breite hinzu, die als Hauptabschnitt auf einer Homepage dient.

Erstellen Sie eine Folie mit voller Breite example.jpg

Fügen Sie in Visual Builder oben auf Ihrer Webseite einen Abschnitt mit voller Breite hinzu. Fügen Sie dann das Fullwidth Slider-Modul in Ihren neuen Abschnitt ein. Klicken Sie auf der Registerkarte Inhalt der Folie mit voller Breite auf + Fügen Sie einen neuen Artikel hinzu um deine erste Folie zu erstellen.

erstelle eine Folie divi.png

Aktualisieren Sie in den Folieneinstellungen Ihrer ersten Folie die folgenden Optionen:

Inhaltsoptionen

Entête : [Geben Sie den Titel der Folie ein] Schaltflächentext : [Geben Sie den Text ein] Inhalt : [Geben Sie den Textinhalt der Folie ein] Schaltflächen-URL : [Geben Sie die Ziel-URL der Schaltfläche ein] Hintergrundbild : [Geben Sie das Bild ein, das als Hintergrund für die Folie dienen soll]

Design-Optionen

Hintergrundüberlagerung verwenden : JA
Hintergrund-Overlay-Farbe : rgba (0,0,0,0.2) Diese Überlagerung verdunkelt das Hintergrundbild geringfügig, um den Text besser lesbar zu machen.

Folie divi blogpascher.png

Folieneinstellungen speichern

Duplizieren Sie nun die soeben erstellte Folie und aktualisieren Sie die neue Folie bei Bedarf mit neuem Inhalt. Wiederholen Sie diesen Vorgang für alle Folien, die Sie hinzufügen möchten.

Dupliziere eine divi.png Folie

Das ist alles In diesem Beispiel füge ich nur zwei Folien ein, aber das Ergebnis ist ein effektiver Heldencursor in voller Breite mit mehreren Aufrufen zum Handeln, mit denen der Benutzer auf die Schaltfläche klickt, um weitere Informationen zu erhalten. Da dies Ihr Hauptziel für Ihre Website ist, empfehle ich, auf Ihrer Folie in voller Breite mit Divi Leads Split-Tests durchzuführen und zu ermitteln, welche am besten konvertiert.

Beispiel Folie divi dem.gif

Schieben Sie die vollständigen Inhaltsoptionen

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Folie Divi Abschnitt content.png

Pfeile

Wählen Sie aus, ob Sie die linken und rechten Navigationspfeile anzeigen möchten.

Contrôles

Wählen Sie aus, ob die Kreisschaltflächen / Folienindikatoren am unteren Rand des Cursors angezeigt werden sollen oder nicht.

Administrator-Label

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Slide-Modul-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

Diaabschnittentwurf divi.png

Entfernen Sie den inneren Schatten

Standardmäßig wird im Schieberegler ein interner Schatten angezeigt. Wenn Sie diesen Schatten deaktivieren möchten, können Sie dies mit dieser Einstellung tun.

Parallax-Effekt

Wenn Sie diese Option aktivieren, erhalten Ihre Hintergrundbilder beim Scrollen eine feste Position. Denken Sie daran, dass bei aktivierter Einstellung Ihre Bilder auf die Höhe des Browsers skaliert werden.

Header-Schriftart

Sie können die Schriftart Ihres Kopfzeilentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

slide section font design von lentete.png

Größe der Kopfzeile

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Farbe des Kopftextes

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Kopfzeilentexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Briefköpfe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Kopfzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Kopfzeilentexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie den gewünschten Abstand in die Zeile ein. Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körperpolizei

Sie können die Schriftart Ihres Körpers ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Körper Schriftgröße

Hier können Sie die Größe Ihres Körpertexts anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Abschnitt Design Slide Modul Divi.png

Textfarbe des Körpers

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Texts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Körperbuchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Körperlinie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Textzeilen in Ihrem Körper aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Obere Polsterung

Dieser Parameter steuert den internen Raum zwischen dem oberen Rand des Moduls und dem Textinhalt im Modul. Wenn Sie diesen Abstand vergrößern oder verkleinern möchten, geben Sie hier Ihren gewünschten Wert ein. Um beispielsweise den Platz und die Gesamtgröße des Schiebereglers zu verringern, können Sie den Wert 100 px eingeben. Sie können auch einen Prozentwert eingeben, z. B. 10%, um die Höhe dynamischer zu gestalten.

Polsterung unten

Diese Einstellung steuert den internen Raum zwischen der Unterseite des Moduls und dem Textinhalt im Modul. Wenn Sie diesen Abstand vergrößern oder verkleinern möchten, geben Sie hier Ihren gewünschten Wert ein. Um beispielsweise den Platz und die Gesamtgröße des Schiebereglers zu verringern, können Sie den Wert 100 px eingeben. Sie können auch einen Prozentwert eingeben, z. B. 10%, um die Höhe dynamischer zu gestalten.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Verwenden Sie benutzerdefinierte Stile für die Schaltfläche

Wenn Sie diese Option aktivieren, werden verschiedene Einstellungen für die Tastenanpassung angezeigt, mit denen Sie das Erscheinungsbild der Taste auf Ihrem Modul ändern können.

Schaltfläche Textgröße

Diese Einstellung kann verwendet werden, um die Größe des Texts in der Schaltfläche zu erhöhen oder zu verringern. Die Schaltfläche ändert sich mit zunehmender und abnehmender Textgröße.

Schaltfläche Textfarbe

Standardmäßig übernehmen die Schaltflächen die im Customizer des Themas definierte Akzentfarbe Ihres Themas. Mit dieser Option können Sie der Schaltfläche dieses Moduls eine benutzerdefinierte Textfarbe zuweisen. Wählen Sie mit der Farbauswahl Ihre benutzerdefinierte Farbe aus, um die Farbe der Schaltfläche zu ändern.

divi.png Schaltflächenfarbe

Schaltfläche Hintergrundfarbe

Standardmäßig haben die Schaltflächen eine transparente Hintergrundfarbe. Dies kann durch Auswahl der gewünschten Hintergrundfarbe in der Farbauswahl geändert werden.

Breite des Schaltflächenrands

Alle Divi-Schaltflächen haben einen 2px-Standardrahmen. Dieser Rand kann mit diesem Parameter vergrößert oder verkleinert werden. Rahmen können durch Eingabe eines Wertes von 0 gelöscht werden.

Schaltfläche Rahmenfarbe

Standardmäßig ändern sich die Schaltflächenränder zu der im Customizer des Themas definierten Akzentfarbe Ihres Themas. Mit dieser Option können Sie der Schaltfläche in diesem Modul eine benutzerdefinierte Rahmenfarbe zuweisen. Wählen Sie mithilfe der Farbauswahl Ihre benutzerdefinierte Farbe aus, um die Farbe des Schaltflächenrahmens zu ändern.

Schaltflächenrandradius

Der Radius des Rahmens wirkt sich auf die Rundheit der Ecken Ihrer Schaltflächen aus. Standardmäßig haben die Schaltflächen in Divi einen kleinen Rahmenradius, der die Ecken von 3-Pixeln abrundet. Sie können diesen Wert auf 0 reduzieren, um eine quadratische Schaltfläche zu erstellen, oder ihn erheblich erhöhen, um Schaltflächen mit kreisförmigen Kanten zu erstellen.

Abstand der Buchstaben des Knopfes

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Schaltflächentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Schaltfläche Schriftart

Sie können die Schriftart Ihres Schaltflächentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Fügen Sie ein Schaltflächensymbol hinzu

Deaktiviert, diese Einstellung entfernt die Symbole von Ihrer Schaltfläche. Standardmäßig zeigen alle Divi-Schaltflächen ein Pfeilsymbol auf dem Hover an.

Schaltflächensymbol

Wenn Symbole aktiviert sind, können Sie mit dieser Einstellung das Symbol für Ihre Schaltfläche auswählen. Divi hat verschiedene Symbole zur Auswahl.

Schaltfläche "Farbsymbol"

Durch Festlegen dieser Einstellung wird die Farbe des Symbols geändert, das auf Ihrer Schaltfläche angezeigt wird. Standardmäßig stimmt die Farbe des Symbols mit der Textfarbe Ihrer Schaltflächen überein. Mit dieser Einstellung können Sie die Farbe jedoch unabhängig voneinander anpassen.

Schaltfläche zum Platzieren von Symbolen

Sie können wählen, ob das Symbol Ihrer Schaltfläche links oder rechts von Ihrer Schaltfläche angezeigt werden soll.

Nur das Symbol für den Button-Hover anzeigen

Standardmäßig werden Schaltflächensymbole nur während des Rollovers angezeigt. Wenn das Symbol immer angezeigt werden soll, deaktivieren Sie diese Einstellung.

Hover Textfarbe der Schaltfläche

Wenn die Schaltfläche von einer Besuchermaus überflogen wird, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Schaltfläche Hintergrundfarbe

Wenn die Schaltfläche von einer Besuchermaus überflogen wird, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Farbe Hover Border Schaltfläche

Wenn die Schaltfläche von einer Besuchermaus überflogen wird, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Border Radius-Schaltfläche

Wenn die Taste von einer Besuchermaus betätigt wird, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem Basiswert, der in den vorherigen Parametern definiert wurde.

Schaltfläche zum Ankreuzen von Noten

Wenn die Taste von einer Besuchermaus betätigt wird, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem Basiswert, der in den vorherigen Parametern definiert wurde.

Erweiterte Optionen Diamodul voller Breite

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

Gleitschlittenmodul divi.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Automatische Animation

Wenn der Cursor automatisch verschoben werden soll, ohne dass der Besucher auf die nächste Schaltfläche klicken muss, aktivieren Sie diese Option und passen Sie anschließend die Rotationsgeschwindigkeit an, wenn Sie möchten.

Automatische Animationsgeschwindigkeit (in ms)

Hier können Sie festlegen, wie schnell der Cursor zwischen den einzelnen Folien eingeblendet wird, wenn die Option "Automatische Animation" oben aktiviert ist. Je höher die Zahl, desto länger dauert die Pause zwischen den einzelnen Umdrehungen.

Fortfahren Automatisch auf Schweben schieben

Wenn Sie dies einschalten, wird die automatische Folie beim Mauszeiger weiterlaufen.

Inhalte auf Mobilgeräten ausblenden

Je kleiner der Bildschirm auf Mobilgeräten wird, desto wertvoller wird die Bildschirmfläche. Manchmal ist es eine gute Idee, einige weniger wichtige Cursorelemente zu deaktivieren, um die Größe des Cursors zu verringern und ihn besser lesbar zu machen. Durch Aktivieren dieser Einstellung wird der Inhalt des Cursortexts auf dem Mobiltelefon ausgeblendet.

CTA auf Mobilgeräten ausblenden

Je kleiner der Bildschirm auf Mobilgeräten wird, desto wertvoller wird die Bildschirmfläche. Manchmal ist es eine gute Idee, einige weniger wichtige Cursorelemente zu deaktivieren, um die Größe des Cursors zu verringern und ihn besser lesbar zu machen. Durch Aktivieren dieser Einstellung wird der Cursoraufruf auf die mobilen Aktionstasten ausgeblendet.

Mobiles Bild / Video anzeigen

Je kleiner der Bildschirm auf Mobilgeräten wird, desto wertvoller wird die Bildschirmfläche. Manchmal ist es eine gute Idee, einige weniger wichtige Cursorelemente zu deaktivieren, um die Größe des Cursors zu verringern und ihn besser lesbar zu machen. Wenn Sie diese Einstellung aktivieren, werden Folienbilder und Videos auf Mobilgeräten angezeigt (diese sind standardmäßig deaktiviert).

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Inhaltsoptionen der Elemente des Folienmoduls in voller Breite

Einzelelementmodul divi diapo.png

Titel

Stellen Sie hier den Text Ihres Cursortitels ein.

Schaltflächentext

Wenn Sie unter dem Inhalt Ihrer Folie eine Schaltfläche anzeigen möchten, geben Sie hier den Text der Schaltfläche ein. Lassen Sie dieses Feld leer, wenn Sie keine Schaltfläche anzeigen möchten.

Inhalt

Geben Sie hier den Körperinhalt Ihres Cursors ein. Beachten Sie, dass die hier eingegebene Textmenge die Höhe Ihrer Folien bestimmt.

Schaltflächen-URL

Wenn Sie eine Schaltfläche anzeigen, geben Sie eine gültige Web-URL in dieses Feld ein, um den Ziel-Link festzulegen.

Ziehe das Bild

Wenn Sie ein Folienbild hinzufügen, wird es links neben dem Text Ihrer Folie über dem Folienhintergrund angezeigt. Wenn Sie kein Folienbild angeben, bleibt eine zentrierte Folie (nur Text) übrig. Da die Höhe jeder Folie durch den Text bestimmt wird, wird das Bild auf der Folie, wenn es hoch genug ist, unter den unteren Rand der Folie fallen und ein am unteren Rand ausgerichtetes Bild erstellen.

Ziehe ein Bild divi.png

Beachten Sie, dass die Höhe einer Folie mit einem Folienbild durch eine größere Folie im Schieberegler bestimmt werden kann. Stellen Sie sicher, dass das Bild auf Ihrer Folie groß genug ist, um zu passen, wenn Sie ein Bild am unteren Rand ausrichten möchten. Zur besseren Lesbarkeit werden Folienbilder nur in den Spalten, Spalten oder Spaltenschiebern der 1-Spalte angezeigt. In ähnlicher Weise werden Folienbilder nicht in Browserbreiten angezeigt, die kleiner als 768-Pixel sind. Die Dia-Bildbreiten sind unten definiert. Wir empfehlen, dass Ihre Folienbilder mindestens so breit sind.

Videodia

Wenn Sie ein Folienvideo hinzufügen, wird es links neben dem Text Ihrer Folie über dem Hintergrund Ihrer Folie angezeigt. Wenn Sie kein Folienvideo angeben, bleibt nur eine zentrierte Folie mit Text übrig. Da die Höhe jeder Folie durch den Text bestimmt wird, wird das Bild auf der Folie, wenn es hoch genug ist, unter den unteren Rand der Folie fallen und ein am unteren Rand ausgerichtetes Bild erstellen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Video pausieren

Lassen Sie zu, dass andere Player das Video anhalten, wenn sie mit der Wiedergabe beginnen

Hintergrundbild

Wenn festgelegt, wird dieses Bild als Hintergrund für dieses Modul verwendet. Um ein Hintergrundbild zu löschen, löschen Sie einfach die URL aus dem Einstellungsfeld.

Die Höhe einer Folie wird durch die hinzugefügte Textmenge bestimmt. Wenn Sie mehrere Folien haben, nimmt der Cursor die Höhe der höchsten Folie an.

Die Breite Ihres Cursors wird durch die Breite des Browsers bestimmt. Basierend auf Standardbildschirmgrößen empfehlen wir, dass Ihre Bilder mindestens 1280px von 768px sind.

Position des Hintergrundbildes

Standardmäßig werden Hintergrundbilder in der Mitte der Folie angezeigt. Mit dieser Einstellung können Sie die Position oben, unten, links, rechts oder in einer der vier Ecken der Folie ändern.

Größe des Hintergrundbildes

Standardmäßig werden Hintergrundbilder proportional vergrößert, um sicherzustellen, dass sie die gesamte Folie ausfüllen. Sie können diese Option jedoch verwenden, um das Standardverhalten zu ändern. "Cover" ist das Standardverhalten, bei dem das Bild so skaliert wird, dass es den gesamten Folienbereich abdeckt. "Anpassen" bewirkt auch, dass das Bild den gesamten Bereich abdeckt, jedoch werden Höhe und Breite des Bildes an die Höhe und Breite des Schiebereglers angepasst. Dies kann zu verzerrten Bildern führen, verhindert jedoch das Beschneiden des Bildes. "Tatsächliche Größe" skaliert das Bild nicht und zeigt es in seiner ursprünglichen Größe an.

Hintergrundfarbe

Wenn Sie nur einen einfarbigen Hintergrund für Ihre Folie verwenden möchten, verwenden Sie die Farbauswahl, um eine Hintergrundfarbe festzulegen.

MP4-Hintergrundvideo

Alle Videos müssen in beiden .MP4 .WEBM-Formaten heruntergeladen werden, um maximale Kompatibilität in allen Browsern zu gewährleisten. Laden Sie hier die .MP4-Version herunter. Wichtiger Hinweis: Videohintergründe sind auf Mobilgeräten deaktiviert. Stattdessen wird Ihr bkacground-Image verwendet. Aus diesem Grund müssen Sie sowohl ein Hintergrundbild als auch ein Hintergrundvideo festlegen, um bessere Ergebnisse zu erzielen.

WEBM Hintergrundvideo

Alle Videos müssen in beiden .MP4 .WEBM-Formaten heruntergeladen werden, um maximale Kompatibilität in allen Browsern zu gewährleisten. Laden Sie hier die .WEBM-Versionen herunter. Wichtiger Hinweis: Videohintergründe sind auf Mobilgeräten deaktiviert. Stattdessen wird Ihr bkacground-Image verwendet. Aus diesem Grund müssen Sie sowohl ein Hintergrundbild als auch ein Hintergrundvideo festlegen, um bessere Ergebnisse zu erzielen.

Videobreite des Hintergrunds

Damit Videos die richtige Größe haben, müssen Sie hier die genaue Breite (in Pixel) Ihres Videos eingeben.

Videohöhe Hintergrund

Damit Videos die richtige Größe haben, müssen Sie hier die genaue Höhe (in Pixel) Ihres Videos eingeben.

Gestaltungsoptionen für Folienelemente

Abschnittsstilmodul divi.png

Hintergrundüberlagerung verwenden

Wenn diese Option aktiviert ist, wird eine benutzerdefinierte Overlay-Farbe über Ihrem Hintergrundbild und hinter Ihrem Slider-Inhalt hinzugefügt.

Hintergrundüberlagerungsfarbe

Verwenden Sie die Farbauswahl, um eine Farbe für den Hintergrund auszuwählen.

Verwenden Sie Textüberlagerung

Wenn diese Option aktiviert ist, wird eine Hintergrundfarbe hinter dem Cursortext hinzugefügt, um die Lesbarkeit von Hintergrundbildern zu verbessern.

Textüberlagerungsfarbe

Verwenden Sie die Farbauswahl, um eine Farbe für die Textüberlagerung auszuwählen.

Textüberlagerungsrandradius

Der Radius des Rahmens wirkt sich auf die Abrundung der Ecken des Textüberlagerungsbereichs aus. Standardmäßig haben die Ecken eine leicht abgerundete Kante aus 3-Pixeln. Sie können diesen Wert auf 0 reduzieren, um ein rechteckiges Feld zu erstellen, oder den Wert erhöhen, um die Ecken noch runder zu machen.

Benutzerdefinierte Farbpfeile

Wenn Sie den Mauszeiger über ein Cursormodul bewegen, werden Pfeile angezeigt, mit denen der Besucher durch die einzelnen Folien navigieren kann. Standardmäßig übernehmen diese Pfeile die Farbe des Haupttexts der Folie. Mit dieser Einstellung können Sie jedoch eine benutzerdefinierte Farbe für diese Pfeile festlegen.

Benutzerdefinierte Farbe für Punktnavigation

In jedem Schieberegler werden Punktnavigationselemente unterhalb des Schiebereglerinhalts angezeigt. Diese Elemente ermöglichen es dem Benutzer, mit dem Cursor zu navigieren. Sie können eine benutzerdefinierte Farbe für diese Elemente definieren, indem Sie die Farbauswahl in dieser Einstellung verwenden.

Vertikale Ausrichtung des Folienbildes

Diese Einstellung bestimmt die vertikale Ausrichtung Ihres Dia-Bildes. Ihr Bild kann vertikal zentriert oder am unteren Rand Ihrer Folie ausgerichtet werden.

Textfarbe

Wenn der Hintergrund Ihrer Folie dunkel ist, sollte die Textfarbe auf "Hell" eingestellt sein. Umgekehrt sollte die Textfarbe auf "Dunkel" eingestellt sein, wenn der Hintergrund der Folie klar ist.

Kopfzeile Schriftart

Sie können die Schriftart Ihres Kopfzeilentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Größe der Kopfzeile

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Farbe des Kopftextes

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Kopfzeilentexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Farbe des Header-Bereichs Design-Modul dispo divi.png

Abstand der Briefköpfe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Kopfzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Kopfzeilentexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie den gewünschten Abstand in die Zeile ein. Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körper Schriftart

Sie können die Schriftart Ihres Körpers ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Körper Schriftgröße

Hier können Sie die Größe Ihres Körpertexts anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe des Körpers

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Texts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Körperbuchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Body Line Divi Modul diapo.png

Höhe der Körperlinie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Textzeilen in Ihrem Körper aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Verwenden Sie benutzerdefinierte Stile für die Schaltfläche

Wenn Sie diese Option aktivieren, werden verschiedene Einstellungen für die Tastenanpassung angezeigt, mit denen Sie das Erscheinungsbild der Taste auf Ihrem Modul ändern können.

Schaltfläche Textgröße

Diese Einstellung kann verwendet werden, um die Größe des Texts in der Schaltfläche zu erhöhen oder zu verringern. Die Schaltfläche ändert sich mit zunehmender und abnehmender Textgröße.

Schaltfläche Textfarbe

Standardmäßig übernehmen die Schaltflächen die im Customizer des Themas definierte Akzentfarbe Ihres Themas. Mit dieser Option können Sie der Schaltfläche dieses Moduls eine benutzerdefinierte Textfarbe zuweisen. Wählen Sie mit der Farbauswahl Ihre benutzerdefinierte Farbe aus, um die Farbe der Schaltfläche zu ändern.

Schaltfläche Hintergrundfarbe

Standardmäßig haben die Schaltflächen eine transparente Hintergrundfarbe. Dies kann durch Auswahl der gewünschten Hintergrundfarbe in der Farbauswahl geändert werden.

Rahmenbreite Schaltfläche

Alle Divi-Schaltflächen haben einen 2px-Standardrahmen. Dieser Rand kann mit diesem Parameter vergrößert oder verkleinert werden. Rahmen können durch Eingabe eines Wertes von 0 gelöscht werden.

Schaltfläche Rahmenfarbe

Standardmäßig ändern sich die Schaltflächenränder zu der im Customizer des Themas definierten Akzentfarbe Ihres Themas. Mit dieser Option können Sie der Schaltfläche in diesem Modul eine benutzerdefinierte Rahmenfarbe zuweisen. Wählen Sie mithilfe der Farbauswahl Ihre benutzerdefinierte Farbe aus, um die Farbe des Schaltflächenrahmens zu ändern.

Schaltflächenrandradius

Der Radius des Rahmens wirkt sich auf die Rundheit der Ecken Ihrer Schaltflächen aus. Standardmäßig haben die Schaltflächen in Divi einen kleinen Rahmenradius, der die Ecken von 3-Pixeln abrundet. Sie können diesen Wert auf 0 reduzieren, um eine quadratische Schaltfläche zu erstellen, oder ihn erheblich erhöhen, um Schaltflächen mit kreisförmigen Kanten zu erstellen.

Konfigurationstastenmodul divi.png

Abstand der Buchstaben des Knopfes

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Schaltflächentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Schaltfläche Schriftart

Sie können die Schriftart Ihres Schaltflächentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Fügen Sie ein Schaltflächensymbol hinzu

Deaktiviert, diese Einstellung entfernt die Symbole von Ihrer Schaltfläche. Standardmäßig zeigen alle Divi-Schaltflächen ein Pfeilsymbol auf dem Hover an.

Schaltflächensymbol

Wenn Symbole aktiviert sind, können Sie mit dieser Einstellung das Symbol für Ihre Schaltfläche auswählen. Divi hat verschiedene Symbole zur Auswahl.

Schaltfläche "Farbsymbol"

Durch Festlegen dieser Einstellung wird die Farbe des Symbols geändert, das auf Ihrer Schaltfläche angezeigt wird. Standardmäßig stimmt die Farbe des Symbols mit der Textfarbe Ihrer Schaltflächen überein. Mit dieser Einstellung können Sie die Farbe jedoch unabhängig voneinander anpassen.

Schaltfläche zum Platzieren von Symbolen

Sie können wählen, ob das Symbol Ihrer Schaltfläche links oder rechts von Ihrer Schaltfläche angezeigt werden soll.

Nur das Symbol für den Button-Hover anzeigen

Standardmäßig werden Schaltflächensymbole nur während des Rollovers angezeigt. Wenn das Symbol immer angezeigt werden soll, deaktivieren Sie diese Einstellung.

Hover Textfarbe der Schaltfläche

Wenn die Schaltfläche von einer Besuchermaus überflogen wird, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Schaltfläche Hintergrundfarbe

Wenn die Schaltfläche von einer Besuchermaus überflogen wird, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Farbe Hover Border Schaltfläche

Wenn die Schaltfläche von einer Besuchermaus überflogen wird, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Border Radius-Schaltfläche

Wenn die Taste von einer Besuchermaus betätigt wird, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem Basiswert, der in den vorherigen Parametern definiert wurde.

Schaltfläche zum Ankreuzen von Noten

Wenn die Taste von einer Besuchermaus betätigt wird, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem Basiswert, der in den vorherigen Parametern definiert wurde.

Erweiterte Cursoroptionen Volle Breite

Vorlaufabschnitt Schiebemodul Einzelelement divi.png

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Alternativer Text des Bildes

Alternativer Text bietet alle erforderlichen Informationen, wenn das Bild nicht geladen wird, nicht richtig angezeigt wird oder in einer anderen Situation, in der ein Benutzer das Bild nicht sehen kann. Es ermöglicht auch, dass das Bild von den Suchmaschinen gelesen und erkannt wird.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 2
  1. Hallo! danke für ihren artikel. Mein Problem ist das Nicht-Anzeigen des Hintergrundvideos auf dem Handy, mein Kunde wollte es unbedingt. Ich dachte, ich hätte meine Antwort gefunden, weil Ihrem Artikel zufolge in "Erweitert" die Möglichkeit besteht, mobile Videos zu aktivieren, die standardmäßig deaktiviert sind. aber ich fand diese möglichkeit nicht in meinem divi. Danke für deine Antwort ...

    Yanis

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie4
tweet
Registrieren2