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 901.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 Schieberegler über die gesamte Breite des Browsers erstrecken. Divi-Schieberegler (Slider) unterstützen 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-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builderüber dem Post-Editor, wenn Sie eine neue Seite erstellen. 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 die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Erstelle ein Slide Divi Tutorial wordpress.png

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

Anwendungsbeispiel: Hinzufügen eines Heldenbereichs mit voller Breite zu Ihrer Startseite

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 in voller Breite hinzu, die als Hauptabschnitt auf einer Startseite dient.

Erstellen Sie eine Folie mit voller Breite example.jpg

Fügen Sie mit 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 Folieneinstellungen in 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

En-tê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 Folienschaltfläche ein] Hintergrundbild : [Geben Sie das Bild ein, das als Hintergrund für die Folie dienen soll]

Design-Optionen

Hintergrundüberlagerung verwenden : JA
Hintergrundüberlagerungsfarbe : rgba (0,0,0,0.2) Diese Überlagerung verdunkelt das Hintergrundbild leicht, 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 nach 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 sind nur zwei Folien enthalten. Das Ergebnis ist jedoch ein effektiver Helden-Schieberegler mit voller Breite und mehreren Handlungsaufrufen, mit denen der Benutzer auf die Schaltfläche klicken kann, um weitere Informationen zu erhalten. Da dies Ihr wichtigster Aufruf zum Handeln für Ihre Website ist, empfehle ich, Split-Tests auf Ihrer Folie in voller Breite mit Divi Leads durchzuführen und herauszufinden, welche am besten konvertiert.

Beispiel Folie divi dem.gif

Schieben Sie die vollständigen Inhaltsoptionen

Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert 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 Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Slide-Modul-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie Änderungen vornehmen können.

Diaabschnittentwurf divi.png

Entfernen Sie den inneren Schatten

Standardmäßig wird im Cursor 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. Beachten Sie, dass Ihre Bilder bei aktivierter Einstellung Ihre Bilder auf die Höhe des Browsers skalieren.

Header-Schriftart

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

slide section font design von lentete.png

Header-Schriftgröße

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilentextfarbe

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

Kopfbuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilenhöhe

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mithilfe des Bereichsreglers anpassen oder die gewünschte Abstandsgröße in das Feld eingeben Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körperpolizei

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

Körper Schriftgröße

Hier können Sie Ihre Körpertextgröße anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "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 Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Textes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.

Abstand der Körperbuchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "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, können Sie den Abstand mit dem Bereichsregler anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Obere Polsterung

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

Polsterung unten

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

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]

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 Ihres Moduls ändern können.

Schaltfläche Textgröße

Diese Einstellung kann verwendet werden, um den Text in der Schaltfläche zu vergrößern oder zu verkleinern. Die Schaltfläche passt sich an, wenn die Textgröße zunimmt und abnimmt.

Schaltfläche Textfarbe

Standardmäßig übernehmen die Schaltflächen die Akzentfarbe Ihres Themas, wie im Theme Customizer definiert. Mit dieser Option können Sie der Schaltfläche dieses Moduls eine benutzerdefinierte Textfarbe zuweisen. Wählen Sie Ihre benutzerdefinierte Farbe mit dem Farbwähler aus, um die Tastenfarbe 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 im Farbwähler geändert werden.

Breite des Schaltflächenrands

Alle Divi-Schaltflächen haben standardmäßig einen 2px-Rand. Dieser Rand kann mit dieser Einstellung vergrößert oder verkleinert werden. Rahmen können durch Eingabe des Werts 0 entfernt werden.

Schaltfläche Rahmenfarbe

Standardmäßig übernehmen die Schaltflächenränder die im Design-Customizer definierte Akzentfarbe Ihres Themas. Mit dieser Option können Sie der Schaltfläche dieses Moduls eine benutzerdefinierte Rahmenfarbe zuweisen. Wählen Sie Ihre benutzerdefinierte Farbe mit dem Farbwähler aus, um die Farbe des Schaltflächenrahmens zu ändern.

Schaltflächenrandradius

Der Radius des Rahmens beeinflusst die Rundheit der Ecken Ihrer Schaltflächen. Standardmäßig haben die Schaltflächen in Divi einen kleinen Rahmenradius, der die Ecken um 3 Pixel 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 Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. 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 Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Schaltfläche Schriftart

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

Fügen Sie ein Schaltflächensymbol hinzu

Deaktiviert, entfernt diese Einstellung Symbole von Ihrer Schaltfläche. Standardmäßig wird auf allen Divi-Schaltflächen ein Pfeilsymbol auf dem Hover angezeigt.

Schaltflächensymbol

Wenn Symbole aktiviert sind, können Sie mit dieser Einstellung auswählen, welches Symbol in Ihrer Schaltfläche verwendet werden soll. Divi hat verschiedene Symbole zur Auswahl.

Schaltfläche "Farbsymbol"

Durch Anpassen dieser Einstellung wird die Farbe des Symbols geändert, das auf Ihrer Schaltfläche angezeigt wird. Standardmäßig entspricht die Symbolfarbe der Textfarbe Ihrer Schaltfläche. 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 Symbol anzeigen, wenn Sie mit der Maus über die Schaltfläche fahren

Standardmäßig werden die Schaltflächensymbole nur beim Bewegen des Mauszeigers angezeigt. Wenn das Symbol immer angezeigt werden soll, deaktivieren Sie diese Einstellung.

Hover Textfarbe der Schaltfläche

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Schaltfläche Hintergrundfarbe

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Farbe Hover Border Schaltfläche

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Border Radius-Schaltfläche

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem in den vorherigen Einstellungen definierten Basiswert.

Schaltfläche zum Ankreuzen von Noten

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem in den vorherigen Einstellungen definierten Basiswert.

Erweiterte Optionen Diamodul voller Breite

Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei 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 verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons 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 angeben, wie schnell der Cursor zwischen den einzelnen Folien ausgeblendet wird, wenn oben die Option "Automatisch animieren" aktiviert ist. Je höher die Zahl, desto länger ist 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

Wenn die Bildschirmgröße auf Mobilgeräten kleiner wird, wird die Bildschirmfläche wertvoller. Manchmal ist es eine gute Idee, einige weniger wichtige Cursorelemente zu deaktivieren, um die Cursorgröße zu verringern und die Lesbarkeit zu verbessern. Durch Aktivieren dieser Einstellung wird der Cursortextinhalt auf dem Mobiltelefon ausgeblendet.

CTA auf Mobilgeräten ausblenden

Wenn die Bildschirmgröße auf Mobilgeräten kleiner wird, wird die Bildschirmfläche wertvoller. Manchmal ist es eine gute Idee, einige weniger wichtige Cursorelemente zu deaktivieren, um die Cursorgröße zu verringern und die Lesbarkeit zu verbessern. Durch Aktivieren dieser Einstellung wird der Cursoraufruf für Aktionsschaltflächen auf Mobilgeräten ausgeblendet.

Bild / Video auf dem Handy anzeigen

Wenn die Bildschirmgröße auf Mobilgeräten kleiner wird, wird die Bildschirmfläche wertvoller. Manchmal ist es eine gute Idee, einige weniger wichtige Cursorelemente zu deaktivieren, um die Cursorgröße zu verringern und die Lesbarkeit zu verbessern. Durch Aktivieren dieser Einstellung 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 Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

Inhaltsoptionen für Folienmodulelemente in voller Breite

Einzelelementmodul divi diapo.png

Titel

Stellen Sie hier den Text Ihres Cursortitels ein.

Schaltflächentext

Wenn Sie eine Schaltfläche unter Ihrem Folieninhalt anzeigen möchten, geben Sie hier den Schaltflächentext 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.

Bild ziehen

Wenn Sie ein Folienbild hinzufügen, wird es links von Ihrem Folientext über Ihrem Folienhintergrund angezeigt. Wenn Sie kein Folienbild angeben, befindet sich links eine zentrierte Folie nur mit Text. Da die Höhe jeder Folie durch den Text bestimmt wird, fällt Ihr Folienbild, wenn es groß genug ist, unter den unteren Rand der Folie und erzeugt unten ein ausgerichtetes Bild.

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 Ihr Folienbild groß genug ist, um zu passen, wenn Sie ein Bild unten ausrichten möchten. Zur besseren Lesbarkeit werden Folienbilder nur in den Schiebereglern Spalte, Spalte oder 1 Spaltenbreite angezeigt. Ebenso werden Dia-Bilder nicht in Browserbreiten angezeigt, die kleiner als 768 Pixel sind. Die Bildbreiten der Folien sind unten definiert. Wir empfehlen, dass Ihre Folienbilder mindestens so breit sind.

Videodia

Wenn Sie ein Folienvideo hinzufügen, wird es links von Ihrem Folientext über Ihrem Folienhintergrund angezeigt. Wenn Sie kein Folienvideo angeben, befindet sich links eine zentrierte Folie nur mit Text. Da die Höhe jeder Folie durch den Text bestimmt wird, fällt Ihr Folienbild, wenn es groß genug ist, unter den unteren Rand der Folie und erzeugt unten ein ausgerichtetes Bild.

Video pausieren

Ermöglichen Sie, dass Videos von anderen Playern angehalten werden, wenn sie mit der Wiedergabe beginnen

Hintergrundbild

Wenn festgelegt, wird dieses Bild als Hintergrund für dieses Modul verwendet. Um ein Hintergrundbild zu entfernen, entfernen 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 Schieberegler die Höhe der höchsten Folie an.

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

Position des Hintergrundbildes

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

Hintergrundbildgröße

Standardmäßig werden die Hintergrundbilder proportional vergrößert, um sicherzustellen, dass sie die gesamte Folie ausfüllen. Mit dieser Option können Sie jedoch das Standardverhalten ändern. "Abdeckung" ist das Standardverhalten, bei dem das Bild so skaliert wird, dass es den gesamten Folienbereich abdeckt. Durch „Anpassen“ wird das Bild auch gezwungen, den gesamten Bereich abzudecken. Die Höhe und Breite des Bilds werden jedoch so angepasst, dass sie mit der Höhe und Breite des Cursors übereinstimmen. Dies kann zu einem verzerrten Bild führen, verhindert jedoch, dass das Bild zugeschnitten wird. "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 den Farbwähler, um eine Hintergrundfarbe festzulegen.

MP4 Hintergrundvideo

Alle Videos sollten 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-Bild verwendet. Aus diesem Grund sollten Sie sowohl ein Hintergrundbild als auch ein Hintergrundvideo festlegen, um bessere Ergebnisse zu erzielen.

WEBM Hintergrundvideo

Alle Videos sollten 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-Bild verwendet. Aus diesem Grund sollten Sie sowohl ein Hintergrundbild als auch ein Hintergrundvideo festlegen, um bessere Ergebnisse zu erzielen.

Hintergrundvideobreite

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 Überlagerungsfarbe über Ihrem Hintergrundbild und hinter dem Inhalt Ihres Schiebereglers hinzugefügt.

Hintergrundüberlagerungsfarbe

Verwenden Sie den Farbwähler, um eine Farbe für den Hintergrund auszuwählen.

Verwenden Sie Textüberlagerung

Wenn diese Option aktiviert ist, wird hinter dem Cursortext eine Hintergrundfarbe hinzugefügt, um die Lesbarkeit auf 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 beeinflusst die Rundheit der Ecken des Textüberlagerungsbereichs. Standardmäßig haben die Ecken eine leicht abgerundete Kante von 3 Pixel. 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 mit der Maus über ein Schiebereglermodul fahren, werden Pfeile angezeigt, mit denen der Besucher durch jede Folie navigieren kann. Standardmäßig erben diese Pfeile die Farbe des Haupttextes der Folie. Mit dieser Einstellung können Sie jedoch eine benutzerdefinierte Farbe für diese Pfeile definieren.

Benutzerdefinierte Farbe für Punktnavigation

In jedem Cursor werden Punktnavigationselemente unterhalb des Cursorinhalts angezeigt. Mit diesen Elementen kann der Benutzer mit dem Cursor navigieren. Mit der Farbauswahl in dieser Einstellung können Sie eine benutzerdefinierte Farbe für diese Elemente definieren.

Vertikale Ausrichtung des Diabildes

Diese Einstellung bestimmt die vertikale Ausrichtung Ihres Folienbildes. 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 werden, wenn der Hintergrund der Folie hell ist.

Kopfzeile Schriftart

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

Header-Schriftgröße

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilentextfarbe

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

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

Kopfbuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilenhöhe

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mithilfe des Bereichsreglers anpassen oder die gewünschte Abstandsgröße in das Feld eingeben Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körper Schriftart

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

Körper Schriftgröße

Hier können Sie Ihre Körpertextgröße anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe des Körpers

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

Abstand der Körperbuchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "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, können Sie den Abstand mit dem Bereichsregler anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, 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 Ihres Moduls ändern können.

Schaltfläche Textgröße

Diese Einstellung kann verwendet werden, um den Text in der Schaltfläche zu vergrößern oder zu verkleinern. Die Schaltfläche passt sich an, wenn die Textgröße zunimmt und abnimmt.

Schaltfläche Textfarbe

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

Schaltfläche Hintergrundfarbe

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

Rahmenbreite Schaltfläche

Alle Divi-Schaltflächen haben standardmäßig einen 2px-Rand. Dieser Rand kann mit dieser Einstellung vergrößert oder verkleinert werden. Rahmen können durch Eingabe des Werts 0 entfernt werden.

Schaltfläche Rahmenfarbe

Standardmäßig übernehmen die Schaltflächenränder die im Design-Customizer definierte Akzentfarbe Ihres Themas. Mit dieser Option können Sie der Schaltfläche dieses Moduls eine benutzerdefinierte Rahmenfarbe zuweisen. Wählen Sie Ihre benutzerdefinierte Farbe mit dem Farbwähler aus, um die Farbe des Schaltflächenrahmens zu ändern.

Schaltflächenrandradius

Der Radius des Rahmens beeinflusst die Rundheit der Ecken Ihrer Schaltflächen. Standardmäßig haben die Schaltflächen in Divi einen kleinen Rahmenradius, der die Ecken um 3 Pixel 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 Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. 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 Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Schaltfläche Schriftart

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

Fügen Sie ein Schaltflächensymbol hinzu

Deaktiviert, entfernt diese Einstellung Symbole von Ihrer Schaltfläche. Standardmäßig wird auf allen Divi-Schaltflächen ein Pfeilsymbol auf dem Hover angezeigt.

Schaltflächensymbol

Wenn Symbole aktiviert sind, können Sie mit dieser Einstellung auswählen, welches Symbol in Ihrer Schaltfläche verwendet werden soll. Divi hat verschiedene Symbole zur Auswahl.

Schaltfläche "Farbsymbol"

Durch Anpassen dieser Einstellung wird die Farbe des Symbols geändert, das auf Ihrer Schaltfläche angezeigt wird. Standardmäßig entspricht die Symbolfarbe der Textfarbe Ihrer Schaltfläche. 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 Symbol anzeigen, wenn Sie mit der Maus über die Schaltfläche fahren

Standardmäßig werden die Schaltflächensymbole nur beim Bewegen des Mauszeigers angezeigt. Wenn das Symbol immer angezeigt werden soll, deaktivieren Sie diese Einstellung.

Hover Textfarbe der Schaltfläche

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Schaltfläche Hintergrundfarbe

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Farbe Hover Border Schaltfläche

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird diese Farbe verwendet. Die Farbe ändert sich von der in den vorherigen Einstellungen definierten Grundfarbe.

Hover Border Radius-Schaltfläche

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem in den vorherigen Einstellungen definierten Basiswert.

Schaltfläche zum Ankreuzen von Noten

Wenn Sie mit der Maus über die Schaltfläche eines Besuchers fahren, wird dieser Wert verwendet. Der Wert ändert sich gegenüber dem in den vorherigen Einstellungen definierten Basiswert.

Erweiterte Cursoroptionen Volle Breite

Vorlaufabschnitt Schiebemodul Einzelelement divi.png

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.

Alternativer Bildtext

Der Alternativtext enthält alle erforderlichen Informationen, wenn das Bild nicht geladen wird, korrekt angezeigt wird oder wenn ein Benutzer das Bild nicht sehen kann. Außerdem kann das Bild von Suchmaschinen gelesen und erkannt werden.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 5

  1. Hallo

    Vielen Dank für dieses Tutorial, es ist wirklich vollständig!
    Wissen Sie, ob es möglich ist, die Animation zu ändern oder sogar aus dem Text zu entfernen? weil nicht standardmäßig geht es auf den Hintergrundbildern von unten nach oben und es ist nicht sehr schön, denke ich.

    danke

  2. Guten Tag,
    Ist es möglich, dass durch Klicken auf eine Folienschaltfläche der URL-Link auf eine neue Registerkarte umgeleitet wird?
    Vielen Dank im Voraus für Ihre Lichter!

  3. Hallo ! Vielen Dank für Ihren Artikel. Mein Problem ist, dass das Hintergrundvideo auf dem Handy nicht angezeigt wird. Mein Kunde wollte es unbedingt. Ich dachte, ich hätte meine Antwort gefunden, weil laut Ihrem Artikel in "Erweitert" die Möglichkeit besteht, die Videos auf Mobilgeräten zu aktivieren, die standardmäßig deaktiviert sind. aber ich fand diese Möglichkeit nicht auf meiner Divi. Vielen Dank für Ihre 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