Divi-Produkt-Highlight: DiviCity

DiviCity ist ein einseitiges Divi-Layout, das auf dem Divi-Marktplatz verfügbar ist. Es hat ein vielseitiges Design, das für viele verschiedene Arten von Websites verwendet werden kann, und ist vollständig reaktionsschnell und anpassbar. In diesem Produkthighlight werfen wir einen Blick auf das DiviCity-Layout und helfen Ihnen bei der Entscheidung, ob es das richtige Layout für Sie ist.

Lass uns anfangen!

Installieren von DiviCity

DiviCity wird als ZIP-Datei geliefert, die Divi Visual Builder .json-Dateien enthält. Um das Layout zu installieren, entpacken Sie zunächst die Datei. Öffnen Sie als Nächstes Ihre Seite im Divi Builder.

Klicken Sie unten auf der Seite auf die Portabilitätsoption und wählen Sie die Registerkarte Import aus. Wählen Sie dann die .json-Datei für das DiviCity-Layout aus und beginnen Sie mit dem Importieren des Layouts. Nach dem Import des Layouts müssen Sie nur noch die Inhalte durch Ihre eigenen ersetzen, und Ihre Website ist fertig!

DiviCity

DiviCity besteht aus einem einseitigen Divi Builder-Layout. Es wird ohne Demo-Bilder geliefert, daher habe ich für diesen Artikel meine eigenen hinzugefügt. Werfen wir einen Blick auf die Abschnitte, die mit diesem Layout geliefert werden!

DiviCity-Header-Abschnitt

Die Kopfzeile besteht aus einem großen Bild mit einer abgewinkelten Trennlinie am unteren Rand. Die Kopfzeile verfügt über Funktionen für Zwischenüberschrift und Kopfzeilentext sowie eine Schaltfläche. Der Text verfügt über einen Ladeanimationseffekt. Zwei Felder überlagern den unteren Rand des Kopfzeilenabschnitts. Jedes Feld enthält Überschriftentext, eine Trennlinie, Fließtext und eine Schaltfläche. Diese Boxen haben auch eine Ladeanimation und erweitern sich beim Hover. Schließlich gibt es unten vier Klappentext-Module mit einem Symbol, einem Überschriftentext und einem Haupttext. Die Klappentext-Module werden beim Laden der Seite einzeln angezeigt. Dieses Überschriftenlayout kann einfach mit Ihren eigenen Fotos und Inhalten angepasst werden, um einen großartig aussehenden, ansprechenden Überschriftenabschnitt zu erstellen, der Ihren Besuchern auf einen Blick wichtige Informationen über Ihr Unternehmen bietet.

Abschnitt „Über DiviCity“.

Der About-Abschnitt enthält einen Einführungstext, eine Überschrift auf der linken Seite und ein Bild auf der rechten Seite. Beide Elemente haben eine Einblendanimation und rücken in die Mitte. Unten sind drei Abschnitte in voller Breite, die ein Bild und einen Textblock mit einer Überschrift und etwas Fließtext enthalten. Jeder dieser Abschnitte hat auch einen Ladeanimationseffekt.

DiviCity-Blog-Bereich

Standardmäßig enthält der Blog-Bereich ein einfaches Modul für aktuelle Posts, das drei aktuelle Posts mit dem vorgestellten Bild und den Post-Informationen auflistet. In diesem Abschnitt befinden sich auch einige Überschriften und Fließtexte. Dieser Abschnitt enthält eine Einblendanimation.

Alternativ können Sie das in der Layout-Demo gezeigte Design erreichen, indem Sie das kostenlose Divi Article Cards-Plugin installieren. Sobald das Plugin auf Ihrer Website installiert und aktiviert ist, öffnen Sie die Divi 100-Einstellungen über das WordPress-Dashboard-Menü. Aktivieren Sie die Artikelkarte und klicken Sie dann auf Speichern.

Jetzt sollten die Blog-Module auf der DiviCity-Seite ungefähr so ​​​​aussehen wie das Layout oben.

Abschnitt DiviCity-Nummern

Der Zahlenbereich enthält vier Balkenzähler auf einem Bildhintergrund – die Zahlenzähler werden geladen, wenn die Seite geladen wird.

DiviCity Abschnitt Was zu tun ist

Dieser Abschnitt enthält eine Überschrift und etwas Fließtext. Darunter befinden sich zwei Unterabschnitte mit jeweils einem Bild, einer Überschrift und einem Textkörper. Dieser Abschnitt ist ein sehr vielseitiges Layout, das verwendet werden kann, um Funktionen, Dienste oder andere Aspekte Ihres Unternehmens zu demonstrieren.

DiviCity Abschnitt Wo es zu tun ist

Dieser Abschnitt ist ebenfalls vielseitig und enthält eine Überschrift, einen Haupttext und drei Klappentexte mit einem Bild, etwas Text, etwas kurzem Beschreibungstext und einem Rahmen, der beim Bewegen der Maus angezeigt wird. Das Bild wird auch beim Hover vergrößert. Sie können diese Klappentexte verwenden, um auf eine andere Seite oder einen anderen Abschnitt Ihrer Website zu verlinken oder um einfach einige Funktionen oder Informationen anzuzeigen.

DiviCity Besuchen Sie uns Abschnitt

Als Nächstes enthält der Abschnitt „Besuchen Sie uns“ sechs Klappentext-Module mit jeweils einem Symbol, einem Überschriftentext und einem Haupttext. Sie können diesen Abschnitt anpassen, um mehr Funktionen oder Aspekte Ihrer Dienste hervorzuheben oder dichten Text mit separaten Überschriften und Symbolen aufzubrechen. Die Klappentext-Module verfügen alle über eine Zoom-in-Animation.

DiviCity-Kontaktbereich

Schließlich beginnt der Kontaktbereich mit einem orangefarbenen Streifen mit drei Social-Media-Symbolen. Unten befindet sich der Kontaktformularabschnitt mit großem Überschriftentext auf der linken Seite und dem Formular auf der rechten Seite. Der Kontaktbereich hat einen großen Bildhintergrund mit einem dunklen Overlay. Dieser Abschnitt enthält auch einen Flip-Loading-Animationseffekt und die Social-Media-Symbole werden eingeblendet.

DiviCity Mobile-Layout

DiviCity reagiert vollständig auf Tablets und Mobilgeräte. Werfen wir einen Blick auf die mobile Version einiger Abschnitte.

Der erste ist der Kopfzeilenabschnitt mit einem großen Bildhintergrund, Überschriftentext und einer Schaltfläche. Das erste Textfeld überlagert die Kopfzeile und der Rest des Inhalts des Kopfabschnitts folgt darunter.

Dies ist Teil des Bereichs „Über uns“ für Mobilgeräte mit Bildern, die durch einige Abschnitte mit Text getrennt sind.

Dies ist die mobile Version des Abschnitts „Wo es zu tun ist“. Es hat oben ein großes Bild, Überschriftentext, Haupttext und dann drei Bilder mit jeweils einem Label.

Und schließlich ist dies die mobile Fußzeile. Wie die Desktop-Version verfügt sie über eine orangefarbene Leiste mit Social-Media-Symbolen, gefolgt von der Fußzeile mit Bildhintergrund, Text und dem Kontaktformular.

Kaufen Sie DiviCity

DiviCity ist auf dem Divi Marketplace verfügbar. Es kostet 19 US-Dollar für die unbegrenzte Nutzung der Website und lebenslange Updates. Der Preis beinhaltet auch eine 30-tägige Geld-zurück-Garantie.

Abschließende Gedanken

DiviCity ist ein einfaches und gut aussehendes Website-Layout, das unglaublich vielseitig ist. Da es mit Divi erstellt wurde, lässt sich das Layout einfach und intuitiv für Ihren eigenen Gebrauch anpassen. Die Ladeanimationen und Hover-Effekte im gesamten Layout sehen gut und zusammenhängend aus und lenken nicht zu sehr vom Seiteninhalt oder der Benutzerfreundlichkeit ab. Ich mag auch die Verwendung großer Bilder im gesamten Design sowie die im Layout verwendete Typografie. Wenn Sie nach einem einfachen einseitigen Website-Layout für Ihr nächstes Divi-Projekt suchen, ist dies möglicherweise das richtige Produkt für Sie.

Wir würden uns freuen, von Ihnen zu hören! Hast du DiviCity ausprobiert? Lass uns in den Kommentaren wissen, was du darüber denkst!