So fügen Sie Ihrer Divi-Seitenvorlage einen festen Kartenumschalter hinzu

Wenn Sie ein physisches Geschäft betreiben und eine Website dafür erstellen, besuchen möglicherweise viele Personen Ihre Website, um praktische Informationen wie Ihre Adresse zu erhalten. Natürlich ist Ihre Kontaktseite hier praktisch, aber das ist nicht die einzige Möglichkeit, Kontaktdaten nahtlos mit Ihren Besuchern zu teilen. Wenn Sie nach einer kreativen Möglichkeit suchen, die Adresse Ihres Unternehmens freizugeben, wird Ihnen dieses Tutorial gefallen. Wir zeigen Ihnen, wie Sie mit Divis Theme Builder jeder Seite dynamisch einen festen Kartenumschalter hinzufügen. Wir beginnen mit der Erstellung einer neuen Seitenvorlage. Dann fügen wir den dynamischen Seiteninhalt in den Textkörper der Vorlage ein und fügen einen festen Kartenumschalter über dem dynamischen Seiteninhalt hinzu. Sie können die JSON-Vorlagendatei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Seitenvorlage KOSTENLOS herunter

Um die kostenlose Seitenvorlage in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Erstellen Sie eine Seitenvorlage im Divi Theme Builder

Gehe zum Divi Theme Builder und füge eine neue Seitenvorlage hinzu

Wir beginnen dieses Tutorial, indem wir zum Divi Theme Builder navigieren und eine neue Seitenvorlage hinzufügen.

Körperbereich der Vorlage eingeben

Geben Sie dann den Körper der Vorlage ein, indem Sie „Benutzerdefinierten Körper erstellen“ auswählen.

2. Dynamischen Seiteninhalt zum Textbereich hinzufügen

Abschnittseinstellungen

Abstand

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Modul für Post-Inhalte zur Spalte hinzufügen

Damit der Inhalt jeder Seite dynamisch angezeigt werden kann, verwenden wir das Post-Content-Modul in dieser Zeile.

3. Erstellen Sie ein Pin-Design mit fester Karte

Zeile 2 zum Abschnitt hinzufügen

Spaltenstruktur

Weiter zur nächsten Zeile, die die folgende Spaltenstruktur verwendet:

Größe

Öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und ändern Sie die Größeneinstellungen wie folgt:

• Breite: 90%
• Maximale Breite:
  • Desktop: 600px
  • Tablet & Telefon: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1 Einstellungen

Hintergrundfarbe

Öffnen Sie dann die Einstellungen von Spalte 1 und verwenden Sie eine schwarze Hintergrundfarbe.

• Hintergrundfarbe: #000000

Hintergrundbild

Laden Sie als nächstes ein Hintergrundbild Ihrer Wahl hoch. Das Hintergrundbild finden Sie im gezippten Ordner, den Sie zu Beginn dieses Tutorials herunterladen können.

Hauptelement-CSS

Fügen Sie auch die folgenden CSS-Codezeilen zum Hauptelement der Spalte hinzu:

width: 80% !important;
max-height: 80vh;

Sichtweite

Stellen Sie dann den vertikalen Überlauf auf auto. Dies stellt in Kombination mit der maximalen Höhe im vorherigen Schritt sicher, dass eine Bildlaufleiste angezeigt wird, sobald die Spalte eine Höhe von 80 Vh überschreitet.

• Vertikaler Überlauf: Auto

Spalte 2 Einstellungen

Hauptelement-CSS

Öffnen Sie als nächstes die Einstellungen von Spalte 2 und wenden Sie die folgende CSS-Codezeile auf das Hauptelement an:

width: 12% !important;

Map-Modul zu Spalte 1 hinzufügen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Kartenmodul in Spalte 1. Fügen Sie einen Karten-Pin Ihrer Wahl hinzu.

Größe

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Größeneinstellungen wie folgt:

• Breite: 88%
• Modulausrichtung: Mitte

Abstand

Entfernen Sie als nächstes den standardmäßigen unteren Rand.

• Unterer Rand: 0px

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie unter dem Kartenmodul in Spalte 1 ein Blurb-Modul hinzu. Verwenden Sie Inhalte Ihrer Wahl.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Bild-/Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Links

Einstellungen für Titeltext

Stylen Sie den Titeltext als nächstes.

• Schriftstärke des Titels: Fett
• Titeltextfarbe: #ffffff
• Titeltextgröße: 16px
• Höhe der Titelzeile: 1,6 em

Textkörpereinstellungen

Ändern Sie dann die Textkörpereinstellungen entsprechend:

• Textkörperfarbe: #ffffff
• Textgröße:
  • Desktop: 16px
  • Tablet: 14px
  • Telefon: 13px
• Körperlinienhöhe: 1.8em

Abstand

Wenden Sie auch die folgenden Füllwerte an:

• Obere Polsterung: 70px
• Untere Polsterung: 70px
• Linke Polsterung: 7%
• Rechte Polsterung: 7%

Animation

Und entfernen Sie die Standardmodulanimation in den Animationseinstellungen.

• Bild-/Symbolanimation: Keine Animation

Blurb-Modul zu Spalte 2 hinzufügen

Inhaltsboxen leer lassen

Weiter zu Spalte 2. Dort fügen wir ein Blurb-Modul ohne Inhalt hinzu.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Hintergrundfarbe

Ändern Sie dann die Hintergrundfarbe.

• Hintergrundfarbe: #0045ff

Bild-/Symboleinstellungen

Wechseln Sie zur Registerkarte Design und gestalten Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolausrichtung: Mitte
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 25px

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Breite: 70px
• Höhe: 70px

Abstand

Entfernen Sie dann den standardmäßigen unteren Rand.

• Unterer Rand: 0px

Box Schatten

Fügen Sie auch einen Kastenschatten hinzu.

• Horizontale Position des Kastenschattens: 6px
• Vertikale Position des Kastenschattens: 6px
• Schattenfarbe: rgba(0,0,0,0.3)

CSS für Hauptelement und Blurb-Bild

Navigieren Sie dann zur Registerkarte Erweitert und verwenden Sie die folgenden CSS-Codezeilen für das Hauptelement:

display: flex;
justify-content: center;
align-items: center;

Und fügen Sie diese Zeile CSS-Code in das Blurb-Bildfeld ein:

margin-bottom: 0;

4. Toggle-Funktionalität hinzufügen

CSS-Klasse zu Zeile 2 hinzufügen

Jetzt, da wir alle Elemente an Ort und Stelle haben, ist es an der Zeit, sich auf die Funktionalität zu konzentrieren. Öffnen Sie zunächst die zweite Zeile und wenden Sie die folgende CSS-Klasse an:

• CSS-Klasse: map-toggle-row

CSS-Klasse zum Blurb-Modul in Spalte 2 hinzufügen

Öffnen Sie als nächstes das Blurb-Modul in Spalte 2 und verwenden Sie die folgende CSS-Klasse:

• CSS-Klasse: map-toggle

Codemodul unter Blurb-Modul in Spalte 2 hinzufügen

Fügen Sie dann unter dem Blurb-Modul in Spalte 2 ein Code-Modul hinzu.

Stil- und Skript-Tags hinzufügen

Fügen Sie einige Stil- und Skript-Tags in das Codefeld ein.

CSS-Code einfügen

Wir verwenden den folgenden CSS-Code innerhalb der style-Tags:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

JQuery-Code einfügen

Und der folgende JQuery-Code in den script-Tags:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

Feste Position mit horizontalem Versatz zu Zeile 2 hinzufügen

Zu guter Letzt müssen wir die Positionseinstellungen der zweiten Zeile entsprechend ändern:

• Position: Behoben
• Ort: Linke Mitte
• Horizontaler Versatz:
  • Desktop: -500px
  • Tablet & Telefon: -72%
• Z-Index: 11

5. Änderungen im Seiten- und Theme-Builder speichern

Sobald alle Änderungen übernommen wurden, können Sie alle Änderungen im Divi Theme Builder speichern und das Ergebnis auf Ihrer Website anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie die Adressdaten Ihres Unternehmens auf kreative Weise in Ihre Seitendesigns einbeziehen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie eine Seitenvorlage erstellen, die einen festen Kartenumschalter enthält, damit Ihre Besucher jederzeit auf den Standort Ihres Unternehmens zugreifen können! Sie konnten auch die JSON-Vorlagendatei kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.