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 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]

Bevor Sie Ihrer Seite ein Zusammenfassungsmodul hinzufügen können, müssen Sie zuerst auf den Divi Builder zugreifen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. Durch Klicken auf diese Schaltfläche wird Divi Builder aktiviert, 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

Sobald Sie in Visual Builder eingegeben haben, 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.

Modul Lebenslauf divi builder.png

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

Verwenden Sie den Anwendungsfall, um die Dienste des Unternehmens auf der Startseite aufzulisten

Da das Zusammenfassungsmodul Bilder und Text kombiniert, um bestimmte Funktionen darzustellen, können Sie damit eine Liste der Dienste Ihres Unternehmens zu Ihrer Startseite hinzufügen. Mit dem Blurb-Modul können Sie auch Ihr Bild / Symbol und Ihren Titel in einen Link zu Ihrer Serviceseite verwandeln. In diesem Beispiel verwende ich das Blurb-Modul, um einer Homepage vier vorgestellte Dienste hinzuzufügen.

divi.png Service-Seite

Verwenden Sie den Visual Builder, um die vier Klappentexte zu Ihrer Seite hinzuzufügen, und fügen Sie einen Standardabschnitt mit einer vierspaltigen Zeile hinzu. Fügen Sie dann ein Blurb-Modul in die erste Spalte Ihrer Zeile ein.

Aktualisieren Sie die Blurb-Einstellungen wie folgt:

Inhaltsoptionen

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

Design-Optionen

Farbsymbol: # 42bb99 (machen Sie die Farbe als Kompliment des Site-Designs)
Verwenden Sie das Schriftgrößensymbol: JA
Symbol-Schriftgröße: 68px (passt die Größe des Symbols an)
Orientierungstext: Mitte -
head Schriftgröß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 doppelten Zusammenfassungen auf die anderen drei Spalten. Da Ihre Entwurfsparameter in Ihre doppelten Module integriert wurden, müssen Sie lediglich den Inhalt (Kopfzeile, Inhalt, Symbol, URL usw.) ändern und die Farben für jeden Ihrer Dienste anpassen.

vollständige Liste der Dienstleistungen divi.jpg

Inhaltsoptionen für die Zusammenfassung

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 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 unter dem Feld Titel können Sie Ihren Titel zu einem Hyperlink machen.

Inhalt

In diesem Feld können Sie den Textinhalt Ihres Texts eingeben. Klappentext deckt auch die gesamte Breite Ihrer Spalte bis zu 550px ab.

URL

Geben Sie eine gültige Web-URL in dieses Feld ein, um Ihren Blurb-Titel in einen Link zu verwandeln. Wenn Sie dieses Feld leer lassen, bleibt Ihr Titel lediglich ein statisches Element.

URL öffnen

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

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

Wenn Sie Klappentexte verwenden, können Sie ein Symbol oder Bild für Ihren Text verwenden. Wenn Sie "Ja" für die Option "Symbol verwenden" auswählen, stehen die folgenden Optionen zum Anpassen Ihres Symbols zur Verfügung. Wenn Sie kein Symbol verwenden, werden Sie aufgefordert, stattdessen ein Bild hochzuladen.

Symbol

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

benutze icons divi builder.png

Bild

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

Hintergrundfarbe

Legen Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul fest 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 löschen, löschen 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. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Entwurfsoptionen für das Zusammenfassungsmodul

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, 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 Konstruktionsparametern, mit denen Sie so gut wie alles bearbeiten können.

Option Design Modul Lebenslauf divi.png

Farbe des Icons

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

Kreissymbol

Wenn Sie für die Einstellung "Symbol verwenden" "Ja" gewä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, erhalten Sie zusätzliche Optionen zum Anpassen der Farbe und des Rahmens Ihres Kreises.

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 zur Auswahl der Rahmenfarbe angezeigt.

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.

Bild- / Symbolplatzierung

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

Verwenden Sie die Schriftgröße des Symbols

Wenn diese Option aktiviert ist, können Sie eine benutzerdefinierte Größe für das Symbol eingeben, das über oder zwei links von Ihrem Präsentationstext angezeigt wird.

Textfarbe

Wenn Ihr Präsentationstext auf einem dunklen Hintergrund platziert ist, sollte die Textfarbe auf "Dunkel" eingestellt sein. Wenn Ihr Präsentationstext dagegen auf einem hellen Hintergrund platziert ist, sollte die Textfarbe auf "Hell" eingestellt sein.

Textausrichtung

In diesem Dropdown-Menü können Sie die Ausrichtung Ihres Texts so festlegen, dass er linksbündig, zentriert oder rechtsbündig ausgerichtet ist.

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 großartiger 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 Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts vom Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

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]

Modul fasst den Abschnittsstil title.png zusammen

Farbe des Kopftextes

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 Farbe Ihrer Wahl 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 Intervall-Schieberegler, um den Abstand anzupassen, oder geben Sie die Größe des gewünschten Abstands in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Kopfzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Intervallregler, um den Abstand anzupassen, oder geben Sie den gewünschten Abstand in ein das Eingabefeld rechts vom Cursor. Die Eingabefelder unterstützen verschiedene 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 die Schriftart Ihres Körpers ä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 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 Textkörpers anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene 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örpertexts ä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 Ihres Textes vergrößern möchten, stellen Sie den Abstand mit dem Intervall-Schieberegler ein oder geben Sie den gewünschten Abstand in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Körperlinie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Textkörpers 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 verschiedene 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 Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern 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 haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Schieberegler in den Bereich ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Benutzerdefinierte Maßeinheiten für die Unterstützung, dh Sie können die Standardeinheit von "px" in eine andere Einheit ändern, z. B. em, vh, vw usw.

Konfiguration des Moduls sbourdires resume divi builder.png

Grenzstil

Die Ränder unterstützen acht verschiedene Stile, darunter: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inset 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 Wert für die maximale Breite festlegen, wird die Breite des Präsentationsbilds begrenzt. Dies gilt nur für 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 eingefügt wird. Sie können einer der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Um einen benutzerdefinierten Rand zu löschen, entfernen Sie den hinzugefügten Wert aus dem Eingabefeld. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Benutzerdefinierte Polsterung

Das Auffüllen ist der Raum, der in Ihrem Modul zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Sie können einer der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Um einen benutzerdefinierten Rand zu löschen, entfernen Sie den hinzugefügten Wert 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 für erfahrene Webdesigner hilfreich sind, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie ein 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.

Modulübersicht Abschnitt advance.png

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]

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Ein Bezeichner 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 Divi Child-Design oder in dem benutzerdefinierten CSS verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi Theme-Optionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Ein 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 CSS hinzufügen können. Die CSS-Einträge in diesen Einstellungen sind bereits in Style-Tags eingebettet. Sie müssen nur CSS-Regeln eingeben, die durch Semikolons getrennt sind.

Bild- / Symbolanimation

Dies steuert die Richtung der Animation durch verzögertes Laden.

ALT-Text des Bildes

Wenn Sie kein Symbol ausgewählt haben, wird diese Einstellung angezeigt. Anderer Text liefert alle erforderlichen Informationen, wenn das Bild nicht geladen wird, korrekt 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.

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.

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

Dieser Artikel enthält Kommentare 0

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
13 Aktien
Aktie6
tweet2
Registrieren5