Springe zum Hauptinhalt

3-Methode zum Anpassen des Testimonial-Moduls auf Divi

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]

Das einzige, wonach Besucher auf einer Website immer suchen, sind Testimonials. Sie repräsentieren die Glaubwürdigkeit und beeinflussen den Entscheidungsprozess potenzieller Kunden beim Besuch Ihrer Website.

Neben der Sicherstellung, dass Sie starke Testimonials zum Teilen haben, spielt deren visuelle Attraktivität auch eine wichtige Rolle. In diesem Tutorial zeigen wir Ihnen drei fantastische Möglichkeiten, das Divi-Testimonial-Modul nur mit den integrierten Optionen anzupassen.

Übersicht

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Endergebnis in verschiedenen Bildschirmgrößen an.

Büro

Beispiel 1-Modulmodifikation testimonial.jpg

Beispiel 2-Änderungsmodul testimony.jpg

Beispiel 3-Modifikationsmodul testimonial.jpg

Mobile

mobiles beispiel.jpg

Erstellen Sie Beispiel 1 neu

Erstes Beispiel Testimonial divi.png

Einen neuen Abschnitt hinzufügen

Beginnen wir mit dem ersten Beispiel! Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu.

füge einen Abschnitt zu divi.jpg hinzu

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

füge eine neue Spalte bei divi.jpg hinzu

Sizing

Öffnen Sie die Linienparameter, ohne weitere Module hinzuzufügen, und nehmen Sie einige Änderungen an den Größenparametern vor.

  • Machen Sie diese Linie in voller Breite: Ja
  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1

Einstellung der Bemaßung divi.jpg

Fügen Sie Spalte 1 ein Bildmodul hinzu

Laden Sie ein Bild hoch

Es ist Zeit, Module hinzuzufügen! Der erste Mod, den wir benötigen, ist ein Image-Mod in Spalte 1. Laden Sie ein quadratisches Bild Ihrer Wahl hoch.

Bild herunterladen divi.jpg

Filter

Gehen Sie dann zu den Filtereinstellungen und spielen Sie mit den verschiedenen Effekten.

  • Sättigung: 40%
  • Kontrast: 126%

Bildkonfiguration.jpg

Fügen Sie der 1-Spalte ein Schaltflächenmodul hinzu

Kopie hinzufügen

Das zweite und letzte Modul, das wir in Spalte 1 benötigen, ist ein Schaltflächenmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Kopieren Sie eine Kopie von image.jpg

Tasteneinstellungen

Gehen Sie dann zu den Tasteneinstellungen und ändern Sie das Aussehen Ihrer Taste.

  • Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
  • Schaltflächentextgröße: 14px
  • 1-Farbe: # 5400ff
  • 2-Farbe: # 00fff6
  • Verlaufsrichtung: 100deg
  • Breite des Schaltflächenrandes: 0px
  • Schriftgewicht: Ultra Bold
  • Schriftstil: Großbuchstaben

Einstellungen für die Schaltfläche "divi.jpg"

Abstand

Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.

  • Top Polsterung: 10px
  • Polsterung unten: 10px
  • Linke Auffüllung: 30px
  • Polsterung Rechts: 30px

innere Polsterung configuration.jpg

Schattenkiste

Und beenden Sie mit einem subtilen Kastenfarbton.

  • Box Shadow Blur Force: 80px
  • Schattenfarbe: rgba (0,0,0,0,3)

Konfiguration des Schattens divi.jpg

Fügen Sie der 2-Spalte ein Testimonial-Modul hinzu

Inhalt hinzufügen

In der zweiten Spalte benötigen wir nur ein Testimonial-Modul. Fügen Sie den verschiedenen Feldern und dem Inhaltsbereich Inhalte hinzu.

Fügen Sie ein testimonial module.jpg hinzu

Hintergrundfarbe

Fügen Sie dann eine leicht transparente Hintergrundfarbe hinzu.

  • Hintergrundfarbe: rgba (255,255,255,0.96)

Hintergrundbild configuration.jpg

Testimonial Icon Einstellungen

Ändern Sie auch die Einstellungen für das Testimonial-Symbol.

  • Farbe des Testimonial-Symbols: # 0c0c0c
  • Hintergrundfarbe des Testimonial-Symbols: rgba (245,245,245,0)

Konfiguration des Abschnitts des Testimonials icon.jpg

Body-Text-Einstellungen

Ändern Sie dann die Textkörpereinstellungen.

  • Körperschriftart: Verdana
  • Körpergröße: 1.7em

Body-Text-Parameter-Modul testimonial.jpg

Abstand

Fahren Sie fort, indem Sie in den Abstandseinstellungen verschiedene benutzerdefinierte Rand- und Füllwerte hinzufügen.

  • Oberer Rand: 15vw (Desktop und Tablet), 0vw (Telefon)
  • Unterer Rand: 50px (Tablet und Telefon)
  • Linker Rand: -10vw (Desktop und Tablet), 0vw (Telefon)
  • Rechter Rand: 5vw
  • Polsterung oben: 70px
  • Polsterung unten: 70px
  • Linke Auffüllung: 50px
  • Polsterung Rechts: 50px

Abstandskonfiguration divi-Modul testimonial.jpg

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]

Grenze

Fügen Sie auch einen linken Rand hinzu.

  • Breite des linken Randes: 7px
  • Linke Rahmenfarbe: # 5400ff

Linke Randkonfiguration divi.jpg

Schattenkiste

Fügen Sie schließlich einen subtilen Kastenschatten hinzu, um das Zeugnismodul zu formen.

  • Box Shadow Blur Force: 80px
  • Box Schattenausbreitungskraft: -10px
  • Schattenfarbe: rgba (0,0,0,0,49)

Schattenkonfigurationsmodul testimonial.jpg

Klonen Sie beide Module und platzieren Sie die Duplikate in den Spalten 3 und 4

Nachdem Sie die Module in den Spalten 1 und 2 bearbeitet haben, können Sie sie klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Klonen Sie zwei Module divi.jpg

Bild ändern

Vergessen Sie nicht, das Bild Ihres zweiten Testimonials zu ändern.

Bearbeiten Sie das Bild divi.jpg

Ändern Sie den Hintergrund mit Farbverlauf

Ändern Sie auch den Verlaufshintergrund der Schaltfläche.

  • 1-Farbe: # ff001d
  • 2-Farbe: # 3700ff
  • Verlaufsrichtung: 100deg

ändere den Hintergrund des verschlechterten Divi-Moduls testimonial.jpg

Ändern Sie die Farbe des Randes des Zeugnisses

Verknüpfen Sie die Farbe des Rahmens mit dem Verlaufshintergrund der neuen Schaltfläche.

  • Linke Rahmenfarbe: # ff001d

Divi Zeugnis Modul

Erstellen Sie Beispiel 2 neu

Beispiel 2-Erstellung einer testimonial section.png

Einen neuen Abschnitt hinzufügen

Fahren wir mit dem zweiten Beispiel fort! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.

Auswahl eines neuen Abschnitts divi.jpg

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu, ohne den Abschnitt zu ändern:

wähle ein Layout für das Testimonialmodul divi.jpg

Sizing

Fahren Sie fort, indem Sie die Linienparameter öffnen und die Größenparameter ändern.

  • Machen Sie diese Linie in voller Breite: Ja
  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1

Abstandsmodul Testimonial divi.jpg

Abstand

Fügen Sie dann benutzerdefinierte Füllwerte zu den Zeilen und Spalten hinzu.

  • Auffüllen links: 200px (Desktop), 30px (Tablet), 25px (Telefon)
  • Polsterung rechts: 200px (Desktop), 30px (Tablet), 25px (Telefon)
  • 1-Spalte Auffüllen auf der linken Seite: 5px (Desktop), 0px (Tablet und Telefon)
  • 1-Spalte Polsterung rechts: 2.5px (Desktop), 0px (Tablet und Telefon)
  • 2-Spalte Auffüllen auf der linken Seite: 2.5px (Desktop), 0px (Tablet und Telefon)
  • 2-Spalte Polsterung rechts: 2.5px (Desktop), 0px (Tablet und Telefon)
  • 3-Spalte Auffüllen auf der linken Seite: 2.5px (Desktop), 0px (Tablet und Telefon)
  • 3-Spalte Polsterung rechts: 5px (Desktop), 0px (Tablet und Telefon)

Anpassung der Randlinie divi.jpg

Fügen Sie der 1-Spalte ein Videomodul hinzu

Videolink

Das erste Modul, das wir in Spalte 1 benötigen, ist ein Videomodul. Verknüpfen Sie dieses Video mit Ihrem Testimonial-Video.

Fügen Sie ein video.jpg-Modul hinzu

Bildüberlagerung

Fügen Sie auch eine Bildüberlagerung hinzu.

um das Bild-Overlay auf divi.jpg zu konfigurieren

Fügen Sie der 1-Spalte ein Testimonial-Modul hinzu

Inhalt hinzufügen

Das zweite und letzte Modul in Spalte 1 ist ein Testimonial-Modul. Fügen Sie zunächst die Details des Zeugnisses hinzu.

Fügen Sie der Spalte 1.jpg ein Testimonial-Modul hinzu

Deaktivieren Sie das Testimonial-Symbol

Deaktivieren Sie dann das Testimonial-Symbol in den Artikeleinstellungen.

  • Testimonial-Symbol anzeigen: Nein

Deaktivieren Sie den Klon auf der Testimonial divi.jpg

Hintergrundfarbe

Fügen Sie dann einen weißen Hintergrund hinzu.

  • Hintergrundfarbe: #ffffff

Legen Sie den Hintergrund color.jpg fest

Body-Text-Einstellungen

Ändern Sie auch die Körpertexteinstellungen.

  • Text in Körperfarbe: # 000000
  • Abstand zwischen Buchstaben und Buchstaben: -0.5px
  • Körpergröße: 1.7em

Konfigurieren Sie die Farbe des Schriftmoduls testimonial.jpg

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]

Abstand

Fügen Sie in den Abstandseinstellungen benutzerdefinierte Rand- und Füllwerte hinzu.

  • Unterer Rand: 30px (Tablet und Telefon)
  • Auffüllung: 50px
  • Polsterung unten: 50px
  • Linke Auffüllung: 80px
  • Polsterung Rechts: 80px

Konfigurieren Sie die Polsterung.jpg

Grenze

Wir geben dem Modul auch abgerundete Ecken unten links und rechts '30px'.

abgerundete Grenzen configuration.jpg

Schattenkiste

Zum Schluss geben wir dem Testimonial-Modul einen subtilen Schatten.

  • Box Shadow Blur Force: 80px
  • Box Schattenausbreitungskraft: -10px
  • Schattenfarbe: rgba (0,0,0,0,3)

Erstellung von Grenzen Modul Testimonials divi.jpg

Klonen Sie die Module dreimal und platzieren Sie die Duplikate in den verbleibenden Spalten

Wenn Sie die beiden Module in der 1-Spalte bearbeitet haben, klonen Sie sie zweimal und platzieren Sie die Duplikate in den beiden verbleibenden Spalten.

module testimonial divi blogpascher.jpg

Bearbeiten Sie Videolinks, Inhalte und Bildüberlagerungen

Vergessen Sie nicht, den Videolink, den Inhalt und die Bildüberlagerungen Ihrer neuen Testimonials zu ändern.

Ändern Sie die Links Videos Module Testimonials Beispiel 2.jpg

Erstellen Sie Beispiel 3 neu

Erstelle das Beispiel 3 divi module testimonials.png

Einen neuen Abschnitt hinzufügen

Fahren wir mit dem dritten Beispiel fort! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.

Auswahl eines Abschnitts divi.jpg

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

Wählen Sie eine doppelte Spalte layout.jpg

Spalte 1-Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie der ersten Spalte eine Hintergrundfarbe hinzu.

  • Spalte 1-Hintergrundfarbe: # f9f9f9

Konfiguration der divi.jpg Leitungseinstellungen

Spalte 2-Hintergrundfarbe

Die zweite Spalte benötigt einen weißen Hintergrund.

  • Column 2 Background Color: #ffffff

Farbkonfiguration auf divi.jpg

Sizing

Gehen Sie dann zu den Größenparametern und entfernen Sie die Breite der Rinne.

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1

Konfiguration des Abstandsmoduls Testimonial divi Beispiel 3.jpg

Abstand

Fügen Sie als Nächstes benutzerdefinierte Abstandswerte hinzu.

  • Beste Polsterung: 0px
  • Polsterung unten: 0px
  • Linke Auffüllung: 0px
  • Polsterung Rechts: 0px
  • Spalte 1 obere Polsterung: 100px
  • Spalten-1-Bodenauffüllung: 100px
  • Spalte 1 Polsterung links: 50px
  • 1-Spalte Auffüllung rechts: 50px
  • Spalte 2 obere Polsterung: 100px
  • Unteres Auffüllen der 2-Spalte: 100px
  • Spalte 2 Polsterung links: 50px
  • 2-Spalte Auffüllung rechts: 50px

Spaltenabstand Konfiguration auf divi.jpg

Grenze

Und gib jeder der Grenzen '20px'.

Zusammenstellung der Grenzen von divi.jpg

Schattenkiste

Zuletzt geben Sie Ihrer Linie einen Kastenschatten.

  • Box Shadow Blur Force: 80px

Beispiel für das Schattenkonfigurationsmodul 3.jpg

Fügen Sie der 1-Spalte ein Testimonial-Modul hinzu

Inhalt hinzufügen

Es ist Zeit, Module hinzuzufügen! Das erste Modul, das wir in Spalte 1 benötigen, ist ein Testimonial-Modul. Inhalt hinzufügen.

fügen Sie ein Testimonial-Modul divi-Beispiel 3.jpg hinzu

Laden Sie ein Bild hoch

Fahren Sie fort, indem Sie ein Bild in den Bildeinstellungen hochladen.

Laden Sie ein Image Divi Builder-Modul testimonial.jpg herunter

Deaktivieren Sie das Testimonial-Symbol

Schalten Sie dann das Testimonial-Symbol aus.

  • Testimonial-Symbol anzeigen: Nein

Deaktivieren Sie das Symbol Testimonial Divi-Beispiel 3.jpg

Deaktivieren Sie die Hintergrundfarbe

Schalten Sie auch die Hintergrundfarbe aus.

  • Verwenden Sie Hintergrundfarbe: Nein

Deaktivieren Sie den Hintergrund color.jpg

Body-Text-Einstellungen

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und einige Änderungen an den Einstellungen für den Textkörper vornehmen.

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]

  • Polizeikorps: Abril Fatface
  • Text in Körperfarbe: # 000000
  • Körpertextgröße: 20px

Körpertext Parameter Modul Testimonial divi.jpg

Fügen Sie der 1-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Das zweite Modul, das wir in Spalte 1 benötigen, ist ein Textmodul. Fügen Sie die Testimonial-Kopie zum Inhaltsbereich hinzu.

Fügen Sie der Spalte 1 divi example 3.jpg ein Textmodul hinzu

Abstand

Gehen Sie dann zur Registerkarte Design und fügen Sie benutzerdefinierte obere und untere Ränder hinzu.

  • Oberer Rand: 50px
  • Unterer Rand: 50px

Konfiguration des Abstandsmoduls Referenzbeispiel 3.jpg

Fügen Sie Spalte 1 ein Bildmodul hinzu

Laden Sie das Firmenlogo herunter

Das dritte und letzte Modul, das wir in der ersten Spalte benötigen, ist ein Bildmodul. Mit diesem Modul können Sie das mit dem Testimonial verknüpfte Firmenlogo hinzufügen.

Divi Zeugnis Modul

Klonen Sie alle Module und platzieren Sie Duplikate in der 2-Spalte

Wenn Sie alle Module in Spalte 1 bearbeitet haben, können Sie sie kopieren und kopieren. Sobald Sie dies getan haben, platzieren Sie die Duplikate in der zweiten Spalte.

Divi Zeugnis Modul

Ändern Sie das Bild und die Kopie des Testimonials

Achten Sie darauf, den Inhalt des Zeugnisses mit den Bildern zu ändern.

ändere das Icon und den Inhalt des Testimonials divi.jpg

schließlich

Das ist alles für dieses Tutorial. Ich hoffe, Sie können damit verschiedene Variationen anbieten

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
2 Aktien
Aktie2
tweet
Registrieren