So verwenden Sie das exklusive Cyber ​​Monday Bakery Layout Pack, um eine Standortseite für Ihr Unternehmen zu erstellen

Wenn Sie sich dieses Jahr einen Cyber ​​Monday Deal sichern, erhalten Sie auch jede Menge kostenlose Sachen! Neben 25 % Rabatt erhält jeder, der eine neue Elegant Themes-Mitgliedschaft kauft oder sein bestehendes Konto aktualisiert (oder bereits eine lebenslange Mitgliedschaft hat), auch 6 kostenlose und exklusive Layout-Pakete, die NUR während unseres Cyber ​​Monday-Sales zum Download zur Verfügung stehen.

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

Ein Blick in das exklusive Cyber ​​Monday Bakery Layout Pack

Eines der exklusiven Layout-Pakete, die wir Ihnen als Lifetime-Mitglieder und neue Cyber ​​Monday-Kunden zur Verfügung stellen, ist dieses für Bäckereien. Es besteht aus 5 leckeren Seiten, die jede Bäckerei-Website unwiderstehlich machen.

Landingpage-Design

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

Rezeptseitendesign

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

Menüseitengestaltung

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

Über Seitendesign

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

Design der Kontaktseite

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

Holen Sie sich das exklusive Cyber ​​Monday Bakery Layout Pack

Bevor Sie in diesen Anwendungsfall einsteigen, müssen Sie das exklusive Cyber ​​Monday Bakery Layout Pack in die Hände bekommen, das Sie erhalten können, indem Sie ein neues Elegant Themes-Mitglied werden, Ihr bestehendes Konto aktualisieren oder bereits ein Lifetime-Mitglied bei uns sind. Wenn Sie bereits ein Lifetime-Mitglied sind, können Sie sich in unseren Mitgliederbereich einloggen und alle unsere exklusiven Layoutpakete hier herunterladen. Alle anderen müssen die Schaltfläche unten zum Kaufen oder Upgraden verwenden, bevor sie dem Rest unseres Tutorials folgen können.

Laden Sie das exklusive Layout herunter, bevor es verschwindet!

Bereits ein Lifetime-Mitglied? Sie können das Paket jetzt herunterladen, Sie müssen nicht an unserem Cyber ​​Monday-Sale teilnehmen!

So verwenden Sie das exklusive Cyber ​​Monday Bakery Layout Pack, um eine Standortseite für Ihr Unternehmen zu erstellen

Für den Rest dieses Beitrags gehen wir davon aus, dass Sie entweder unseren Cyber ​​Monday-Deal genutzt haben oder bereits ein Lifetime-Mitglied sind und Zugriff auf das Bäckerei-Layout-Paket haben.

Nachdem Sie das neue Bäckerei-Layout-Paket aus unserem Mitgliederbereich heruntergeladen haben, können Sie sich das Video unten ansehen, um zu sehen, wie einfach die Einrichtung ist. Wir empfehlen Ihnen auch, dieses Tutorial zu befolgen, um Ihre Website für die weitere Anpassung vorzubereiten.

Kommen wir nun zum Anwendungsfall selbst.

Beim Erstellen einer Website für ein Unternehmen mit mehr als einem Standort ist es wichtig, darüber nachzudenken, wie diese Informationen den Besuchern am besten mitgeteilt werden können. Sie müssen wissen, welcher Standort sich in ihrer Nähe befindet und alle wichtigen Informationen zu diesem Standort. Und das Erstellen einer Standortseite für eine Website ist ein guter Anfang.

In diesem Anwendungsfall zeige ich Ihnen, wie unglaublich einfach es ist, mit dem Bakery Layout Pack eine professionelle Standortseite für Ihr Unternehmen zu erstellen.

Im Rahmen des Bäckerei-Kontaktseiten-Layouts zeige ich Ihnen, wie Sie Ihrem Kartenmodul zusätzliche Pins hinzufügen können, um alle Standorte Ihres Unternehmens sowie gut organisierte und gestaltete Abschnitte zur Anzeige wichtiger Informationen für jeden Standort widerzuspiegeln. Da wir die bereits vom Layout bereitgestellten Gestaltungselemente verwenden können, ist dieser Prozess erfrischend und macht Spaß (zumindest für mich).

Lass uns anfangen.

Beginnen Sie mit der Verwendung des Kontaktlayouts, um Ihre Standortseite zu erstellen

Das Layout der Bäckerei-Kontaktseite eignet sich perfekt als Grundlage für unsere neue Standorte-Seite. Oben befindet sich ein Kartenmodul, mit dem wir jeden unserer Unternehmensstandorte präsentieren werden. Außerdem enthält es einige andere Elemente wie Textmodule, die bereits entworfen wurden und die wir nach Bedarf neu anordnen und ändern können.

Neue Seite erstellen

Zuerst müssen Sie eine neue Seite erstellen und ihr einen Titel geben (etwa „Unsere Standorte“) und klicken, um den divi Builder und dann den visuellen Builder zu verwenden.

Laden Sie das Layout der Bäckerei-Kontaktseite

Zu diesem Zeitpunkt sollten Sie die Seitenlayouts bereits in Ihre Divi-Bibliothek hochgeladen haben. Klicken Sie auf das violette Menü unten auf der Seite, um es zu öffnen, und wählen Sie die Schaltfläche "Aus Bibliothek hinzufügen" mit dem Plus-Symbol aus. Wählen Sie die Registerkarte Laden aus Bibliothek und dann das Layout Bäckereikontakt aus der Liste aus. Das Layout wird sofort auf der Seite geladen.

Veröffentlichen.

Hinzufügen von Abschnitten für Ihre spezifischen Standortinformationen

Wir haben wirklich nicht viele Inhalte auf der Kontaktseite, um zusätzliche Inhalte für unsere spezifischen Standorte zu erstellen. Gehen wir also zur Bakery Landing Page, wählen Sie die Zeile aus dem zweiten Abschnitt der Seite aus und speichern Sie sie in der Bibliothek.

Gehen Sie nun zurück zur Seite mit den Standorten. Duplizieren Sie den Abschnitt unten auf der Seite mit dem Kontaktformular (nicht löschen, wir brauchen ihn später). Löschen Sie im Abschnitt direkt unter der Karte die gesamte Zeile aus dem Abschnitt und fügen Sie die Zeile hinzu, die Sie aus Ihrer Bibliothek gespeichert haben.

Ändern Sie als Nächstes das Spaltenlayout der Zeile in ein Zwei-Drittel-Ein-Drittel-Layout.

Suchen Sie den Textbaustein mit dem Adressinhalt in der rechten Spalte des unteren Abschnitts. Ziehen Sie es unter das Bildmodul in die rechte Spalte der Zeile im Abschnitt darüber.

Aktualisieren Sie dann den Inhalt in den Textbausteinen in der linken Spalte, um Ihren spezifischen Firmenstandort darzustellen. Für mein Beispiel füge ich folgendes hinzu:

Hauptquartier
New York City

Aktualisieren Sie nun das Bildmodul in der rechten Spalte um ein Bild Ihres Firmenstandortes.

Dies dient als schöner Abschnitt für jeden Ihrer spezifischen Standorttexte.

Jetzt müssen Sie nur noch diesen Abschnitt duplizieren, um weitere Standorte hinzuzufügen.

Duplizieren Sie diesen Abschnitt zweimal, sodass Sie insgesamt 3 Standortabschnitte haben. Ändern Sie dann die Hintergrundfarbe des mittleren Standortabschnitts in Weiß, um die Abschnitte besser aufzuteilen.

Aktualisieren Sie dann die duplizierten Abschnitte mit standortspezifischen Inhalten. In diesem Beispiel werde ich zusätzlich zu meinem Standort in New York auch einen Abschnitt für San Francisco und Houston erstellen.

Gestalten Sie den Fußzeilenbereich des Kontaktformulars

Denken Sie an den Abschnitt, den wir unten gespeichert haben, der unser Kontaktformular enthält. Dies wird als großartiger Fußzeilenbereich für unsere Standortseite dienen. Alles, was wir tun müssen, ist, es ein wenig zu optimieren.

Zuerst löschen wir die restlichen Module in der rechten Spalte. Aktualisieren Sie dann das Zeilenspaltenlayout auf ein Einspaltenlayout. Jetzt sollten Sie nur noch das Kontaktformular in einer einspaltigen Zeile sehen.

Klicken Sie anschließend auf , um die Zeileneinstellungen zu bearbeiten und Folgendes zu aktualisieren:

Unter der Registerkarte Inhalt…

Hintergrundfarbe: #ffffff

Unter der Registerkarte Design…

individuelle Polsterung: 5 % oben, 5 % rechts, 5 % unten, 5 % links

Boxschatten: [Boxschatten auswählen]

Jetzt fügen wir ein Hintergrundbild für unseren Abschnitt hinzu. Gehen Sie zu den Abschnittseinstellungen und wählen Sie eines der Hintergrundbilder aus, die im Layout enthalten sind.

Groß! Nun zum Kartenmodul.

Fügen Sie Ihren Google API-Schlüssel hinzu

An dieser Stelle müssen Sie sicherstellen, dass Sie Ihren Google API-Schlüssel erstellen und ihn dann zu den Theme-Optionen hinzufügen.

Aktualisieren Sie das Kartenmodul mit neuen Standort-Pins

An dieser Stelle ist der größte Teil unserer Seite fertiggestellt. Was bleibt, sind die Aktualisierungen des Kartenmoduls oben auf der Seite. Wir müssen die neuen Pin-Positionen für die drei Abschnitte hinzufügen, die wir in den Seitenabschnitten erstellt haben (New York City, San Francisco und Houston).

Klicken Sie hier, um das Kartenmodul zu bearbeiten und die Einstellungen wie folgt zu aktualisieren:

Löschen Sie den einen Pin, der im Modul angezeigt wird, damit Sie neu beginnen. Fügen Sie dann einen neuen Pin hinzu und aktualisieren Sie die Einstellungen wie folgt:

Titel: New York City Bäckerei
Inhalt: Mehr Infos
Karte Pin-Adresse: New York City

Klicken Sie auf die Schaltfläche Suchen.

Fügen Sie dann einen neuen Pin hinzu und aktualisieren Sie die Einstellungen wie folgt:

Titel: Bäckerei in San Francisco
Inhalt: mehr Infos
Karte Pin-Adresse: San Francisco

Klicken Sie auf die Schaltfläche Suchen.

Fügen Sie dann einen neuen Pin hinzu und aktualisieren Sie die Einstellungen wie folgt:

Titel: Houston Bäckerei
Inhalt: mehr Infos
Karte Pin-Adresse: Houston, TX

Klicken Sie auf die Schaltfläche Suchen.

Sie können die Adresse des Kartenzentrums als New York City belassen. Passen Sie die Kartenanzeige jedoch so an, dass sie weit genug herausgezoomt wird, um alle Standorte zu sehen, wenn der Besucher die Karte zum ersten Mal sieht.

Ankerlinks zu den Pin-Inhaltsfeldern hinzufügen

Als zusätzliche Funktion können Sie die Benutzererfahrung verbessern, indem Sie einen Ankerlink innerhalb des Pin-Inhalts hinzufügen, der beim Klicken auf den Pin angezeigt wird. Dieser Ankerlink führt den Benutzer auf der Seite nach unten zu dem bestimmten Abschnitt der Seite, der die Informationen zu diesem Standort anzeigt.

Öffnen Sie die Kartenmodul-Einstellung und bearbeiten Sie dann die ersten Pin-Einstellungen. Markieren Sie den Text im Inhaltsfeld mit der Aufschrift „Weitere Informationen“ und klicken Sie dann auf das Linksymbol, um daraus einen Link zu erstellen. Geben Sie als URL „#newyork“ ein und klicken Sie auf OK.

Machen Sie dasselbe für den San Francisco-Pin (verwenden Sie die URL „#sanfran“) und den Houston-Pin (verwenden Sie die URL „#houston“).

Jetzt müssen Sie nur noch eine benutzerdefinierte CSS-ID zu jedem Ihrer Abschnitte hinzufügen, die den Link-URLs entspricht, die Sie gerade in den Pins erstellt haben.

Aktualisieren Sie für den Abschnitt „New York City“ die Abschnittseinstellungen im Reiter „Erweitert“ mit der CSS-ID „newyork“ und speichern Sie Ihre Einstellungen.

Wenn der Benutzer jetzt auf den Link "Weitere Informationen" (mit der URL #newyork) im New Yorker Pin klickt, springt die Seite zu diesem Abschnitt.

Machen Sie dasselbe für den Abschnitt San Francisco (verwenden Sie die CSS-ID „sanfran“) und den Abschnitt Houston (verwenden Sie die CSS-ID „houston“)

Das ist es. Sie sind alle fertig!