Das einzige, was Besucher immer auf der Suche nach einem Website, das sind Erfahrungsberichte. Sie stehen für Glaubwürdigkeit und beeinflussen den Entscheidungsprozess potenzieller Kunden bei einem Besuch bei Ihnen 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
Mobil
Erstellen Sie Beispiel 1 neu
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ügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile 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
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.
Filter
Gehen Sie dann zu den Filtereinstellungen und spielen Sie mit den verschiedenen Effekten.
- Sättigung: 40%
- Kontrast: 126%
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.
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
Abstand
Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.
- Top Polsterung: 10px
- Polsterung unten: 10px
- Linke Auffüllung: 30px
- Polsterung Rechts: 30px
Schattenkiste
Und beenden Sie mit einem subtilen Kastenfarbton.
- Box Shadow Blur Force: 80px
- Schattenfarbe: rgba (0,0,0,0,3)
Fügen Sie der 2-Spalte ein Testimonial-Modul hinzu
Inhalt hinzufügen
In der zweiten Spalte benötigen wir als einziges Modul ein Testimonial-Modul. Fügen Sie etwas hinzu Inhalt zu den verschiedenen Bereichen und dem Bereich von Inhalt.
Hintergrundfarbe
Fügen Sie dann eine leicht transparente Hintergrundfarbe hinzu.
- Hintergrundfarbe: rgba (255,255,255,0.96)
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)
Body-Text-Einstellungen
Ändern Sie dann die Textkörpereinstellungen.
- Körperschriftart: Verdana
- Körpergröße: 1.7em
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
Grenze
Fügen Sie auch einen linken Rand hinzu.
- Breite des linken Randes: 7px
- Linke Rahmenfarbe: # 5400ff
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)
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.
Bild ändern
Vergessen Sie nicht, das Bild Ihres zweiten Testimonials zu ändern.
Ändern Sie den Hintergrund mit Farbverlauf
Ändern Sie auch den Verlaufshintergrund der Schaltfläche.
- 1-Farbe: # ff001d
- 2-Farbe: # 3700ff
- Verlaufsrichtung: 100deg
Ä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
Erstellen Sie Beispiel 2 neu
Einen neuen Abschnitt hinzufügen
Fahren wir mit dem zweiten Beispiel fort! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu, ohne den Abschnitt zu ändern:
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
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)
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.
Bildüberlagerung
Fügen Sie auch eine Bildüberlagerung hinzu.
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.
Deaktivieren Sie das Testimonial-Symbol
Deaktivieren Sie dann das Testimonial-Symbol in den Artikeleinstellungen.
- Testimonial-Symbol anzeigen: Nein
Hintergrundfarbe
Fügen Sie dann einen weißen Hintergrund hinzu.
- Hintergrundfarbe: #ffffff
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
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
Grenze
Wir geben dem Modul auch abgerundete Ecken unten links und rechts '30px'.
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)
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.
Bearbeiten Sie Videolinks, Inhalte und Bildüberlagerungen
Vergessen Sie nicht, den Videolink zu ändern Inhalt und Bildeinblendungen Ihrer neuen Testimonials.
Erstellen Sie Beispiel 3 neu
Einen neuen Abschnitt hinzufügen
Fahren wir mit dem dritten Beispiel fort! Fügen Sie Ihrer Seite einen neuen regulären Abschnitt hinzu.
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
Spalte 1-Hintergrundfarbe
Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie der ersten Spalte eine Hintergrundfarbe hinzu.
- Spalte 1-Hintergrundfarbe: # f9f9f9
Spalte 2-Hintergrundfarbe
Die zweite Spalte benötigt einen weißen Hintergrund.
- Column 2 Background Color: #ffffff
Sizing
Gehen Sie dann zu den Größenparametern und entfernen Sie die Breite der Rinne.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
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
Grenze
Und gib jeder der Grenzen '20px'.
Schattenkiste
Zuletzt geben Sie Ihrer Linie einen Kastenschatten.
- Box Shadow Blur Force: 80px
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.
Laden Sie ein Bild hoch
Fahren Sie fort, indem Sie ein Bild in den Bildeinstellungen hochladen.
Deaktivieren Sie das Testimonial-Symbol
Schalten Sie dann das Testimonial-Symbol aus.
- Testimonial-Symbol anzeigen: Nein
Deaktivieren Sie die Hintergrundfarbe
Schalten Sie auch die Hintergrundfarbe aus.
- Verwenden Sie Hintergrundfarbe: Nein
Body-Text-Einstellungen
Fahren Sie fort, indem Sie zur Registerkarte Design gehen und einige Änderungen an den Einstellungen für den Textkörper vornehmen.
- Polizeikorps: Abril Fatface
- Text in Körperfarbe: # 000000
- Körpertextgröße: 20px
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.
Abstand
Gehen Sie dann zur Registerkarte Design und fügen Sie benutzerdefinierte obere und untere Ränder hinzu.
- Oberer Rand: 50px
- Unterer Rand: 50px
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.
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.
Ändern Sie das Bild und die Kopie des Testimonials
Achten Sie darauf, den Inhalt des Zeugnisses mit den Bildern zu ändern.
schließlich
Das ist alles für dieses Tutorial. Ich hoffe, Sie können damit verschiedene Variationen anbieten
