Ein Blick auf Elegant Themes Divi 2.4

Veröffentlicht: 2015-06-22

Divi-Miniaturansicht Divi ist derzeit das leistungsstärkste und fortschrittlichste WordPress-Thema von Elegant Themes und wurde gerade mit dem größten Upgrade in seiner Geschichte aktualisiert. Divi bietet Ihnen Bausteine, mit denen Sie interessante Layouts und Inhaltsbereiche erstellen können. Sie können Text, Schieberegler, Karten, Klappentexte, Akkordeons, Preisstrukturen und vieles mehr hinzufügen. Sie können praktisch jede Art von Website erstellen, die Sie benötigen. Und natürlich reagiert es.

Ich bin Divi-Benutzer seit dem ersten Tag, an dem es veröffentlicht wurde. In diesem Artikel teile ich meine Gedanken zu Divi und werfe einen Blick auf die Neuerungen in Version 2.4.

Was ist neu in 2.4

Divi 2.4 ist die Grundlage der zukünftigen Produktlinie von ET. Es hat über 1000 Moduldesign- und Customizer-Einstellungen und fügt einige interessante Funktionen hinzu:

  • Globale Einstellungen – einfachere seitenweite Anpassungen
  • Fließendes Raster – das Seitenlayout hat keine festen Breiten. Mit Fluid Grid können Sie Ihre eigenen Breiten erstellen.
  • Erweiterte Builder-Einstellungen – Jedes Modul verfügt über erweiterte CSS-Einstellungen über eine einfache Benutzeroberfläche.
  • Divi-Bibliothek – erweiterte Layouts.

Themenoptionen

Themenoptionen

Alle ET-Designs verwenden einen Optionsbildschirm namens epanel. Die Funktionen des Epanels ändern sich abhängig von den Funktionen des Themas. Das Epanel von Divi ist umfangreich. Es verfügt über die Grundlagen wie Logo, Favicon, feste Navigationsleiste, erstes Bild abrufen, Blog-Stil, Anzahl der anzuzeigenden Beiträge usw. Es fügt viele Optionen hinzu, darunter:

  • WooCommerce Shop-Seite
  • MailChimp-Schlüssel
  • Aweber-Autorisierung
  • Symbole für soziale Medien
  • URLs von sozialen Medien
  • Google-Schriftarten
  • Glattes Scrollen – ermöglicht das Einblenden der nächsten Zeile und ihres Inhalts beim Scrollen
  • Responsive Shortcodes
  • Schaltfläche "Zurück zum Anfang".
  • Benutzerdefinierte CSS
  • Und mehr

Zu den Navigationseinstellungen gehören Seiten, Kategorien, Home-Link, Dropdown-Menü usw. Es verfügt über Layouteinstellungen, Anzeigenverwaltung, SEO-Anpassung, erweiterte Codeintegration und Dokumentation. Sie können viele Anpassungen direkt über das epanel vornehmen.

Theme-Anpasser

Theme-Anpasser

Der Design-Customizer funktioniert vom Frontend aus und fügt viele Schieberegler hinzu, um Schriftgrößen, Stile, Zeilen, Schaltflächen, Farben, Animationen, Kopfzeilengröße, Fußzeilengröße, Hintergrundbild und vieles mehr anzupassen. Sie können alle Ihre Anpassungen vornehmen und die Auswirkungen sehen, während sie auftreten (WYSIWYG – what you see is what you get).

Sie können Ihre Kontaktinformationen und sozialen Links in der Kopfzeile platzieren. Die Kopfzeile ist eine besonders gute Wahl für Unternehmen, da sie wichtige Informationen vorne und in der Mitte platziert und auf dem Bildschirm bleibt, wenn die Leser nach unten scrollen. Es enthält auch Layout und Topographie. Genau wie bei Standardanpassungen können Sie Navigation, Widgets und eine statische Startseite auswählen.

Sie können sogar mobile Einstellungen für Tablet und Telefon anpassen, und zwar unabhängig von allen anderen Einstellungen und voneinander. Sie sehen die Effekte auf einem Bildschirm, der das mobile Gerät simuliert, damit Sie sehen können, wie es aussieht, bevor Sie es veröffentlichen. Dies ist eine nette Funktion, da Sie sich kein mobiles Gerät besorgen müssen, nur um zu überprüfen, wie die Website mit den gerade vorgenommenen Anpassungen aussieht. Ich bin wirklich froh, dass dies enthalten ist.

Modul-Anpasser

Modul-Anpasser

Sie können das Aussehen der Module im Frontend mit dem Module Customizer anpassen. Zu den Anpassungen gehören Schieberegler für Größen, Breiten, Höhen usw. Sie können auch Schriftarten, Stile, Animationen, Aktionen usw. auswählen.

Divi-Bibliothek

Divi-Bibliothek

Die Divi-Bibliothek enthält Layouts, die Sie erstellt haben. In diesem Menü können Sie jedes Ihrer Layouts bearbeiten und neue Layouts erstellen.

Der Divi-Builder

Der Divi-Builder

Die wahre Magie von Divi passiert, wenn Sie The Divi Builder verwenden. Sie verwenden dies, indem Sie die Schaltfläche mit der Bezeichnung Use The Divi Builder über dem visuellen Editor auswählen. Die vorherige Ausgabe hatte Page Builder, der nur mit Seiten funktionierte. Divi Builder funktioniert mit allen Beitragstypen.

  • Divi fügt Ihrem Editor auch Post-Einstellungen hinzu, sodass Sie das Seitenlayout, die Punktnavigation, das Ausblenden der Navigation und den Post-Titel für jeden Post ausblenden können, wenn Sie möchten.

Sie können ein Seitenlayout laden oder das Standardlayout ändern. Ein Layout besteht aus Abschnitten mit Zeilen und Spalten. Module werden dann in den Spalten platziert. Sie können das Layout ändern, indem Sie einen Abschnitt, eine Zeile, eine Spalte oder ein Modul ziehen und ablegen.

Abschnitte

Abschnitte

Abschnitte können hinzugefügt, gelöscht, geklont und geändert werden. Sie können ändern, wie der Hintergrund aussieht und reagiert, ein Hintergrundbild hinzufügen, den Hintergrund transparent machen, seine Farbe auswählen, ein Video abspielen, seine Gesamtgröße auswählen, ob er von anderen Spielern angehalten werden kann oder nicht, ob er einen inneren Schatten hat , wenn es einen Parallax-Effekt verwendet, und legen Sie spezielles CSS fest. Mit dieser Einstellung können Sie dasselbe einfache Layout einzigartig aussehen lassen.

Sie können auch einen Klon jedes Abschnitts erstellen – komplett mit denselben Zeilen, Modulen, Inhalten und Einstellungen. Natürlich können Sie den neuen Abschnitt dann beliebig verändern.

Es gibt vier verschiedene Arten von Abschnitten. Sie können einen Standardabschnitt, einen Abschnitt in voller Breite, einen Spezialabschnitt oder aus der Bibliothek hinzufügen.

Reihen

Reihen

Sie können neue Zeilen hinzufügen und vorhandene Zeilen ändern. Spalten können dann auf den Zeilen platziert werden, um Ihr Layout aufzubauen.

Säulen

Säulen

In diesen Spalten werden die Module hinzugefügt. Es stehen 11 verschiedene Spaltenlayouts zur Auswahl.

Fachabteilungen

Fachabteilungen

Es gibt auch 9 spezielle Spaltenlayouts. Dazu gehören verschiedene Optionen für Seitenleisten.

Aus Bibliothek laden

Aus Bibliothek laden

Sie können Layouts aus den 32 vordefinierten Layouts oder Layouts aus dem, was Sie erstellt haben, laden. Jeder kann geändert werden. Die Layouts umfassen eine unterschiedliche Anzahl von Spalten, Rastern, Karussells, Seitenleisten, Homepages, Shops, Unternehmen, Portfolios, Blogs, Wartungsmodus, Coming Soon, Zielseite, Verkaufsseite, Fallstudien, Produktfunktionen, About-Seiten, Kontaktseiten, Einkaufsseiten und mehr.

Aus Bibliothek laden 2

Ihre Seite wird aufgebaut, indem Sie Zeilen ablegen, Spalten innerhalb dieser Zeilen platzieren und dann Module in diesen Spalten platzieren. Sie können neue Zeilen hinzufügen, Zeilen per Drag & Drop verschieben oder Zeilen löschen. Vorgefertigte Layouts haben diese bereits für Sie erstellt. Ich entschied mich für Homepage Basic und es gab mir ein Layout mit einem Schieberegler, einer Kopfzeile, vier Klappentexten und einem Aufruf zum Handeln.

Module

Module

Module sind spezielle Inhaltstypen (wie Widgets). Sie können neue Module hinzufügen, per Drag-and-Drop in beliebiger Reihenfolge ablegen oder löschen. Sie können auch verschiedene Arten von Inhalten hinzufügen. Sie können beliebig viele Module haben und diese beliebig kombinieren. Sie sind nicht darauf beschränkt, wie oft Sie dasselbe Modul verwenden. Wenn Sie beispielsweise einen Bildschirm voller Karten wünschen, fügen Sie einfach so viele Kartenmodule hinzu, wie Sie möchten.

Es gibt 40 Module:

  • Kopfzeile in voller Breite
  • Menü in voller Breite
  • Schieberegler in voller Breite
  • Portfolio in voller Breite
  • Karte in voller Breite
  • Code in voller Breite
  • Bild in voller Breite
  • Beitragstitel in voller Breite
  • Bild
  • Galerie
  • Video
  • Video-Slider
  • Text
  • Klappentext
  • Registerkarten
  • Schieberegler
  • Zeugnis
  • Preistabelle
  • Aufruf zum Handeln
  • Audio
  • Anmelden
  • Anmeldung
  • Portfolio
  • Filterbares Portfolio
  • Bartheken
  • Kreiszähler
  • Zahlenzähler
  • Akkordeon
  • Umschalten
  • Kontakt Formular
  • Seitenleiste
  • Teiler
  • Person
  • Bloggen
  • Einkaufen
  • Countdown-Timer
  • Karte
  • Folgen Sie den sozialen Medien
  • Titel des Beitrags
  • Code

Das sind genug Module, mit denen Sie einige interessante Layouts und Funktionen für Ihre Website erstellen können. Module ist eine der Stärken von Divi. Indem Sie Module in Spalten platzieren, können Sie buchstäblich ein Layout erstellen, das einzigartig für Sie ist. Mithilfe von Modulen können Sie mit Divi nahezu jede Art von Website erstellen, die Sie möchten.

Jedes Modul hat seine eigenen Einstellungen. Die meisten von ihnen verfügen über einen Editor, erweiterte Designeinstellungen und CSS-Einstellungen, sodass Sie ihren Inhalt hinzufügen und ihr Erscheinungsbild ändern können. Hier ist ein Blick auf einige Module und ihre Funktionen:

Text

Text

Text bietet Ihnen den grundlegenden Editor und Auswahlmöglichkeiten für Textfarbe und -ausrichtung, erweiterte Designeinstellungen (Schieberegler für Breiten, Höhen, Farben, Ränder usw.) und benutzerdefiniertes CSS. Die meisten Module beinhalten diese oder ähnliche Funktionen.

Klappentext

Klappentext

Ich habe auf Blurb geklickt, um zu sehen, welche Art von Inhalt ich hinzufügen könnte. Hier kann ich ihm einen Titel und eine URL geben, bestimmen, wie die URL funktioniert, ihm ein Symbol geben, Farben, Schriftarten und Erweiterungen auswählen und dann mit dem Standard-TinyMCE-Editor Inhalte hinzufügen. Die erweiterten Designeinstellungen umfassen die gleichen Einstellungen wie das Textmodul, jedoch mit einer zusätzlichen Bildeinstellung.

Karte

Karte

Karte gibt Ihnen eine schöne Karte, die Sie als normale Karte (mit oder ohne Gelände) oder in der Satellitenansicht (mit oder ohne Beschriftungen) anzeigen können. Sie können Stecknadeln hinzufügen, um bestimmte Orte auf der Karte hervorzuheben. Geben Sie einfach die Adresse ein und wählen Sie „Neue PIN hinzufügen“. Die erweiterten Einstellungen bieten Ihnen einen Graustufenfilter mit Prozentsteuerung.

Bloggen

Bloggen

Interessant ist das Blog-Modul. Es ermöglicht Ihnen, Blog-Beiträge in einer einzelnen Spalte beliebiger Breite Ihrer Wahl zu platzieren. Der Grund, warum ich das mag, ist, dass Sie eine statische Startseite haben und trotzdem Ihre Blog-Posts aus bestimmten Kategorien anzeigen können, die Sie auswählen. Sie können so viele anzeigen, wie Sie möchten, und Sie können einen Auszug, den Namen des Autors, das Datum, die Kategorien, die Paginierung, das Beitragsbild, die Schaltfläche „Weiterlesen“ und mehr anzeigen. Dies würde ein interessantes Magazin-Layout ergeben. Es enthält die gleichen erweiterten Designeinstellungen wie das Textmodul, jedoch mit einigen zusätzlichen Einstellungen für Hintergrundfarben und Kopfzeilen.

Titel des Beitrags

Titel des Beitrags

Dies ist eines der neuen Module. Sie können das Aussehen des Beitragstitels gestalten und auswählen, was enthalten ist und was nicht. Die erweiterten Designfunktionen sind größtenteils die gleichen wie beim Textmodul, mit einigen zusätzlichen Einstellungen wie der Hintergrundfarbe.

Beitragstitel 2

Hier ist ein Blick auf die erweiterten Designeinstellungen für das Beitragstitelmodul.

Verwenden von Divi als reguläres Thema

Verwenden von Divi als reguläres Thema

Natürlich müssen Sie keine dieser Funktionen verwenden. Sie können Divi einfach wie jedes andere Thema verwenden. Wählen Sie einfach die gewünschte Einstellung im epanel und erstellen Sie Inhalte wie gewohnt – mit dem Standard-Editor. Dadurch entsteht eine einfache und saubere Website oder ein Blog, das elegant genug ist, um es so zu verwenden, wie es ist.

Sprachunterstützung

Sprachunterstützung

Divi hat eine integrierte Unterstützung für über 30 Sprachen und kann in andere übersetzt werden. Dazu gehören das Frontend und der Builder, der sogar von rechts nach links angezeigt wird, wenn eine RTL-Sprache aktiviert ist.

Divi erhalten

Divi erhalten

Divi ist Teil des persönlichen Plans von ET, der 69 US-Dollar pro Jahr kostet und den Zugriff auf alle Themen, ständige Updates, Support und unbegrenzte Nutzung beinhaltet. Wenn Sie Ihr Abonnement kündigen, behalten Sie alles, was Sie von ET heruntergeladen haben.

Divi allein ist meiner Meinung nach diesen Preis wert (insbesondere wenn man bedenkt, dass die meisten Themen dieses Kalibers viel mehr kosten), aber wenn man bedenkt, dass dies 87 Themen umfasst und zählt, ist es ein Nein, sich Elegant Themes für mindestens ein Jahr anzuschließen. Denker.

Weiter unten auf der Straße

Die nächsten Veröffentlichungen auf der Agenda von ET sind das Divi Builder-Plug-in, ein Magazinthema namens Extra, das die gleichen Bauelemente teilt, jedoch mit Fokus auf das Magazinlayout, und dann Divi 3.0. Es ist klar, dass ET sich voll und ganz dem Erfolg von Divi und der Divi-Builder-Plattform verschrieben hat. Jetzt, wo ich Divi 2.4 gesehen habe, kann ich mir die Verbesserungen und Funktionen in Divi 3.0 nicht vorstellen.

Divi Builder-Plugin

Ein Nachteil von Divi ist, dass Sie nach dem Erstellen eines Seitenlayouts die Themen nicht wechseln können, ohne die Seiten und Beiträge neu zu erstellen. ET hat dies mit einem kostenlosen Plugin gelöst, das das Layout unabhängig vom verwendeten Thema beibehält. Sie können alle Ihre Layouts und Module behalten, auch wenn Sie kein Design von ET verwenden. Dieses Plugin sollte bald verfügbar sein.

Abschließende Gedanken

Divi kann komplexe Layouts erstellen, ist aber dennoch einfach zu bedienen. Es hat keine große Lernkurve. Sie können ganz einfach Elemente hinzufügen und per Drag-and-Drop überall dort ablegen, wo Sie Ihre eigenen benutzerdefinierten Layouts erstellen und ihr Aussehen mit Schiebereglern ändern möchten. Sie können so komplex oder so einfach sein, wie Sie es möchten.

Es kann einige Zeit dauern, bis Ihr Layout Ihren Wünschen entspricht, aber Sie können Ihre Layouts zumindest als Vorlagen speichern oder vorgefertigte Layouts verwenden, wodurch Sie viel Entwicklungszeit sparen können. Es ist einfacher als je zuvor, Anpassungen im erweiterten Stil vorzunehmen, und jede Einstellung verfügt über eine Schaltfläche zum Rückgängigmachen, sodass Sie sich keine Gedanken über Fehler machen müssen. Mit Divi erstellte Websites sehen auf jedem Gerät beeindruckend aus und werden schnell geladen. Ich empfehle Divi 2.4 von Elegant Themes.

Erfahren Sie mehr über Divi und laden Sie es hier herunter

Und du? Hast du Divi ausprobiert? War Ihre Erfahrung so ähnlich wie meine? Haben Sie etwas hinzuzufügen? Erzählen Sie uns davon in den Kommentaren unten.