Springe zum Hauptinhalt

Wie verwende ich das Modul Zusammenfassung im Divi Builder?

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]

Bevor Sie Ihrer Seite ein Zusammenfassungsmodul hinzufügen können, müssen Sie zuerst auf den Divi Builder zugreifen. 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. Durch Klicken auf diese Schaltfläche aktivieren Sie Divi Builder, mit dem Sie auf alle Divi Builder-Module zugreifen können. 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 beim Surfen auf Ihrer Upstream-Website, wenn Sie in Ihrem WordPress-Dashboard angemeldet sind.

Button Divi Builder Modul Blog Divi

Nach der Eingabe in Visual Builder 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.

Modul Lebenslauf divi builder.png

Suchen Sie das Zusammenfassungsmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "Zusammenfassung" eingeben und dann auf die Eingabetaste klicken, um das beschreibende Textmodul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie mit der Liste der Moduloptionen begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsfall, um Unternehmensdienste auf der Homepage aufzulisten

Da das Zusammenfassungsmodul sowohl Bilder als auch Text kombiniert, um bestimmte Funktionen zu präsentieren, können Sie damit Ihrer Homepage eine Liste Ihrer Unternehmensdienste hinzufügen. Mit dem Klappentext-Modul können Sie auch Ihr Bild / Symbol und Ihren Titel in einen Link zu Ihrer Serviceseite verwandeln. In diesem Beispiel werde ich das Blurb-Modul verwenden, um einer Homepage vier vorgestellte Dienste hinzuzufügen.

divi.png Service-Seite

Verwenden Sie zum Hinzufügen der vier Klappentexte zu Ihrer Seite den visuellen Builder, um einen Standardabschnitt mit einer vierspaltigen Zeile hinzuzufügen. Fügen Sie dann der ersten Spalte Ihrer Zeile ein Klappentext-Modul hinzu.

Aktualisieren Sie die Blurb-Einstellungen wie folgt:

Inhaltsoptionen

Titel: [Diensttitel eingeben] Inhalt: [Geben Sie eine kurze Beschreibung des Dienstes ein] URL: [Fügen Sie der Dienstseite eine URL hinzu] Verwenden Sie das Symbol: JA
Symbol: [Wählen Sie ein Symbol aus, das Ihren Dienst veranschaulicht.]

Design-Optionen

Symbolfarbe: # 42bb99 (machen Sie die Farbe, die zum Design der Site passt)
Verwenden Sie das Symbol Schriftgröße: JA
Symbol Schriftgröße: 68px (passt die Symbolgröße an)
Textorientierung: Mitte -
Kopfschriftgröße: 24px
Schriftgröße: 18px
Höhe der Körperlinie: 1.5em

Designdienstleistungen divi.png

Nun ist Ihr erster Einführungstext fertig.

Liste der Dienstleistungen divi builder.jpg

Duplizieren Sie nun das soeben erstellte Zusammenfassungsmodul dreimal und ziehen Sie jede der duplizierten Zusammenfassungen in die anderen drei Spalten. Da Ihre Designparameter in Ihre doppelten Module integriert wurden, müssen Sie nur den Inhalt (Kopfzeile, Inhalt, Symbol, URL usw.) und die Farben für jeden Ihrer Dienste ändern.

vollständige Liste der Dienstleistungen divi.jpg

Inhaltsoptionen für die Zusammenfassung

Auf der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls wie Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer in dieser Registerkarte.

Parameter Modulübersicht wordpress.png

Titel

Geben Sie Ihrem Text einen Titel, der in Fettdruck über dem Text angezeigt wird. Mit der URL-Option im Feld Titel können Sie Ihren Titel zu einem Hyperlink machen.

Inhalt

In dieses Feld können Sie den Textinhalt Ihres Textes eingeben. Klappentext deckt auch die gesamte Breite Ihrer Spalte bis zu 550 Pixel ab.

URL

Fügen Sie in dieses Feld eine gültige Web-URL ein, um Ihren Klappentext in einen Link zu verwandeln. Wenn Sie dieses Feld leer lassen, bleibt Ihr Titel als statisches Element erhalten.

URL öffnen

Hier können Sie auswählen, ob Ihr Link in einem neuen Fenster geöffnet werden soll oder nicht.

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 das Symbol

Bei Verwendung von Klappentext können Sie ein Symbol oder ein Bild mit Ihrem Text verwenden. Wenn Sie für die Option "Symbol verwenden" die Option "Ja" auswählen, werden Ihnen die folgenden Optionen zum Anpassen Ihres Symbols angeboten. Wenn Sie kein Symbol verwenden, werden Sie aufgefordert, stattdessen ein Bild hochzuladen.

Symbol

Wenn Sie für die Einstellung "Symbol verwenden" die Option "Ja" ausgewählt haben, wird diese Option angezeigt. Diese Option zeigt Ihnen eine Liste der verfügbaren Symbole an, die Sie mit Ihrem Klappentext verwenden können. Klicken Sie einfach auf das Symbol, das Sie verwenden möchten, und es wird in Ihrem Text angezeigt.

benutze icons divi builder.png

Bild

Wenn Sie kein Symbol verwendet haben, wird diese Einstellung angezeigt. Platzieren Sie hier eine gültige Bild-URL oder wählen Sie ein Bild aus / laden Sie es über die WordPress-Medienbibliothek hoch. Bilder im Zusammenfassungsmodul werden immer zentriert in ihren Spalten angezeigt und erstrecken sich über die gesamte Breite Ihrer Spalte bis zu 550 Pixel. Ihr Bild wird jedoch niemals größer als die ursprüngliche Upload-Größe sein. Die Höhe des Präsentationsbildes wird durch das Seitenverhältnis Ihres Originalbildes bestimmt. Es ist daher ratsam, alle Präsentationsbilder auf derselben Höhe zu platzieren, wenn Sie sie nebeneinander platzieren.

Hintergrundfarbe

Definieren Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul oder lassen Sie das Feld leer, um die Standardfarbe zu verwenden.

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 Feld Einstellungen. Die Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass Ihre Hintergrundfarbe nicht sichtbar ist, wenn ein Hintergrundbild angewendet wird.

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Bei Verwendung der WireFrame-Ansicht in Visual Builder werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Entwurfsoptionen für das Zusammenfassungsmodul

Auf der Registerkarte Design finden Sie alle Optionen für den Modulstil, 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 nahezu alles optimieren können.

Option Design Modul Lebenslauf divi.png

Symbolfarbe

Wenn Sie für die Einstellung "Symbol verwenden" die Option "Ja" ausgewählt haben, wird diese Option angezeigt. Mit dieser Option können Sie die Farbe Ihres Symbols anpassen. Standardmäßig werden Symbole auf die Akzentfarbe Ihres Themas eingestellt.

Kreissymbol

Wenn Sie für die Einstellung "Symbol verwenden" die Option "Ja" ausgewählt haben, wird diese Option angezeigt. Mit dieser Option können Sie Ihr Symbol in einem farbigen Kreis platzieren. Wenn Sie für diese Einstellung "Ja" auswählen, werden Ihnen zusätzliche Optionen zum Anpassen der Farbe und des Rahmens Ihres Kreises angeboten.

Farbe des Kreises

Wenn Sie für die Einstellung "Kreissymbol" "Ja" gewählt haben, wird diese Option angezeigt. Hier können Sie eine Farbe für Ihren Kreis auswählen. Diese Farbe ist unabhängig von der Farbe Ihres zuvor ausgewählten Symbols. Ihr Symbol wird in seiner Farbe in einem Kreis mit der hier ausgewählten Farbe angezeigt.

Zeigen Sie die Grenze des Kreises an

Wenn Sie für die Einstellung "Kreissymbol" "Ja" gewählt haben, wird diese Option angezeigt. Mit dieser Option können Sie einen Rahmen für Ihren Kreis aktivieren. Wenn diese Option ausgewählt ist, wird eine zusätzliche Option angezeigt, um Ihre Rahmenfarbe auszuwählen.

Kreisrandfarbe

Wenn Sie für die Einstellung "Kreisrahmen anzeigen" "Ja" gewählt haben, wird diese Option angezeigt. Hier können Sie die Farbe des Randes des Kreises einstellen.

Platzierung von Bildern / Symbolen

Hier können Sie den Ort Ihres Bildes / Symbols auswählen. Es kann entweder über dem Text oder links vom Text erscheinen. Wenn Sie das Bild / Symbol links neben Ihrem Text platzieren, wird das Bild kleiner als oben platziert.

Verwenden Sie die Symbolschriftgröße

Wenn diese Option aktiviert ist, können Sie eine benutzerdefinierte Größe für das oben oder zwei links neben Ihrem Klappentext angezeigte Symbol eingeben.

Textfarbe

Wenn Ihr Klappentext auf einem dunklen Hintergrund platziert ist, sollte die Textfarbe auf "Dunkel" eingestellt sein. Wenn Ihr Klappentext hingegen auf einem hellen Hintergrund platziert ist, sollte die Textfarbe auf „Hell“ eingestellt sein.

Textausrichtung

In diesem Dropdown-Menü können Sie die Ausrichtung Ihres Textes als linksbündig, zentriert oder rechtsbündig festlegen.

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]

Header-Schriftart

Sie können die Schriftart Ihrer Kopfzeile ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden fantastischer 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 den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Header-Schriftgröße

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Modul fasst den Abschnittsstil title.png zusammen

Kopfzeilentextfarbe

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

Kopfbuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Kopfzeilentextes vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler 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öße "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, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße ein das Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, 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 fantastischer 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 den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Körper Schriftgröße

Hier können Sie die Größe Ihres Körpertextes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, 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 Körpertextes ä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 Ihres Textes vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler 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öß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 aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird ein Rand um Ihr Modul gelegt. Dieser Rahmen kann mithilfe der folgenden bedingten Parameter angepasst werden.

Farbe der Grenze

Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.

Breite der Grenze

Standardmäßig sind die Ränder 1 Pixel breit. Sie können diesen Wert erhöhen, indem Sie den Bereichsschieberegler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Unterstützt benutzerdefinierte Maßeinheiten, was bedeutet, dass Sie die Standardeinheit von „px“ in etwas anderes wie em, vh, vw usw. ändern können.

Konfiguration des Moduls sbourdires resume divi builder.png

Grenzstil

Rahmen unterstützen acht verschiedene Stile, darunter: fest, gepunktet, gepunktet, doppelt, Nut, Grat, Einschub und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.

Maximale Bildbreite

Wenn Sie hier einen maximalen Breitenwert anwenden, wird die Breite des Präsentationsbilds begrenzt. Dies betrifft nur Klappentexte, die sich nicht im Symbolmodus befinden.

Benutzerdefinierte Marge

Der Rand ist der Abstand, der an der Außenseite Ihres Moduls, zwischen dem Modul und dem nächsten Element darüber, darunter oder links und rechts davon hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Um einen benutzerdefinierten Rand zu entfernen, entfernen Sie den Mehrwert aus dem Eingabefeld. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Benutzerdefinierte Polsterung

Polsterung ist der Raum, der innerhalb Ihres Moduls zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Um einen benutzerdefinierten Rand zu entfernen, entfernen Sie den Mehrwert aus dem Eingabefeld. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Erweiterte Optionen Zusammenfassungsmodul

Auf der Registerkarte Erweitert finden Sie Optionen, die erfahrene Webdesigner möglicherweise nützlich finden, 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.

Modulübersicht Abschnitt advance.png

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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 Divi Child-Design oder in benutzerdefiniertem CSS verwendet werden, das Sie Ihrer Seite oder Website mithilfe der Divi-Designoptionen oder der Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt CSS hinzufügen können. Die CSS-Einträge in diesen Einstellungen sind bereits mit Stil-Tags eingebettet. Sie müssen also nur CSS-Regeln eingeben, die durch Semikolons getrennt sind.

Bild- / Symbolanimation

Dies steuert die Richtung der Animation zum verzögerten Laden.

ALT-Text aus dem Bild

Wenn Sie kein Symbol verwendet haben, wird diese Einstellung angezeigt. Anderer Text enthält alle Informationen, die benötigt werden, wenn das Bild nicht geladen, korrekt angezeigt oder in einer anderen Situation, in der ein Benutzer das Bild nicht sehen kann. Außerdem kann das Bild von Suchmaschinen gelesen und erkannt werden.

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.

Das war's für dieses Tutorial. Wir hoffen, Ihnen gezeigt zu haben, wie Sie das Zusammenfassungsmodul auf Divi verwenden.

Dieser Artikel enthält 1 Kommentar

  1. Guten Tag,
    Ich möchte das Zusammenfassungsmodul verwenden, um ungefähr 200 Miniaturansichten auf einer Seite einzufügen.
    Jedes Vorschaubild stellt einen zum Verkauf stehenden Produkttitel dar, aber ich möchte keinen Woocommerce verwenden, sondern nur einen Kontaktlink ...
    Diese Seite wird regelmäßig mit neuen Miniaturansichten aktualisiert.
    Diese Miniaturansichten (also die 200 Zusammenfassungsmodule) sollten in alphabetischer Reihenfolge (basierend auf dem Titel) aufgelistet werden, auch wenn ich am Ende der Seite neue Module hinzufüge ...
    Weißt du, wie ich das machen könnte?
    merci beaucoup

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
12 Aktien
Aktie6
tweet
Registrieren6