Divi 3.0 bietet einen erstaunlichen Front-End-Builder für Ihren WooCommerce-Shop

Divi ist unser WordPress-Theme der Wahl, wenn es um WooCommerce geht, und das neue Divi 3.0 stellt einen komplett neuen "Visual Builder" (auch als "Front-End-Editor" bezeichnet) vor, der von Grund auf mit React, einer modernen JavaScript-Bibliothek für Benutzerschnittstellen, neu aufgebaut wurde. Dieser neue Builder ermöglicht es Benutzern, ihre WordPress-Seiten am Front-End ihrer Website mit einfachen und schönen visuellen Steuerelementen zu bearbeiten. Wenn Sie den Builder aktivieren, sehen Sie Ihre Seite genau so, wie sie im Frontend Ihrer Website erscheinen würde.

Wenn der Builder aktiviert ist, kann die Seite jedoch mit Divis umfangreichen Inhaltselementen und Designeinstellungen bearbeitet werden. Sie können in einen Absatz klicken und mit der Eingabe beginnen, Text markieren und dessen Schriftart, Größe und Stil anpassen oder die Einstellungen für ein beliebiges Element öffnen und dessen Inhalt, Aussehen und Positionierung ändern. Das Ziehen, Ablegen, Ändern der Größe, Kopieren, Einfügen, Löschen und Duplizieren von Elementen ist ebenfalls einfach.

Die Seite wird lebendig und jedes Element fühlt sich greifbar an, weil Sie alles auf natürliche und intuitive Weise manipulieren können. Wenn Sie eine Designänderung vornehmen oder einer Seite neuen Content hinzufügen, werden diese Änderungen sofort angezeigt. Der Grund dafür ist, dass der neue visuelle Builder nicht auf herkömmlichem Laden basiert. Daher sind Seitenerfrischungen oder Ajax-Ladebalken während des Großteils der Builder-Erfahrung erforderlich. Das ist die Zukunft von WYSIWYG.

Fügen Sie neue Inhalte aus Divis 40 + Modulen hinzu

Das Hinzufügen neuer Inhalte in Divi 3.0 ist einfach. Bewegen Sie den Mauszeiger über den gewünschten Ort auf der Seite und klicken Sie auf die Schaltfläche "+", um ein neues Element hinzuzufügen. Sie werden mit einer Liste von Divis 40 + Content-Modulen begrüßt, mit denen Sie jede Art von Website erstellen können. Sie müssen Inhalte nicht aus einem zentralen Dock ziehen und ablegen, da Divis Tooltip immer dort ist, wo Sie ihn brauchen.

Inline-Editor-1

Einfach alles anpassen

Die Schönheit von Divi 3.0 wird offensichtlich, wenn Sie anfangen, das Design Ihres Inhalts anzupassen. Alles kann angepasst werden und Sie können diese Änderungen sehen in Echtzeit:

  • Wählen Sie aus Dutzenden von benutzerdefinierten Schriftarten.
  • Passen Sie Textfarbe, Größe, Zeilenhöhe und Buchstabenabstand an.
  • Fügen Sie benutzerdefinierte Abstände und Ränder hinzu.
  • Ändern Sie Spaltenstrukturen und Zeilenhöhen.
  • Fügen Sie Hintergrundfarben und Bilder hinzu.
  • Aktivieren Sie Parallax-Hintergründe und Videohintergründe.
  • Ziehen, löschen, kopieren und fügen Sie Inhaltselemente ein.
  • Wenden Sie verschiedene Designeinstellungen für jeden responsiven Haltepunkt an.
  • Ziehen Sie, um die Zeilenhöhe und -breite anzupassen.
  • Genießen Sie eine schöne Inline-Bearbeitungserfahrung

Wenn der neue visuelle Builder aktiv ist, kann der gesamte Text auf der Seite bearbeitet werden. Es ist nicht erforderlich, die Einstellungen eines Elements zu öffnen, um den Textinhalt anzupassen. Klicken Sie einfach in einen Absatz und beginnen Sie mit der Eingabe, um Text hinzuzufügen, oder markieren Sie den Text, um Schriftart, Größe, Stil und Abstand anzupassen. Sie haben eine eigene Inline-Editor-Benutzeroberfläche erstellt, die super glatt und wunderbar zu bedienen ist. Wenn Sie schon einmal von der standardmäßig ausgelasteten TinyMCE-Benutzeroberfläche frustriert wurden, werden Sie mit Divi 3.0 angenehm überrascht sein.

Erleben Sie unglaubliche Geschwindigkeit

Der Visual Builder von Divi 3.0 ist wahrscheinlich das schnellste Online-Websiteerstellungs-Erlebnis, das Sie je genutzt haben. Es gibt wenig bis keine Seitenaktualisierungen oder Ajax-Ladebalken. In der Tat gibt es während des größten Teils des Bauprozesses keine traditionelle Belastung irgendeiner Art. Dies liegt daran, dass JavaScript den Builder aktiviert und die Gebäudeerfahrung vollständig in Ihrem Browser erfolgt.

Anstatt sich auf die Kommunikation zwischen Ihrem Browser und Ihrem Server zu verlassen, wenn Änderungen vorgenommen werden, muss der Builder für Divi 3.0 nur warten, bis die Anwendung jede Änderung berechnet hat. Wenn Sie einen anständigen Computer und einen modernen Browser verwenden, werden Sie beim Hinzufügen und Anpassen von Inhalten fast sofort aktualisiert. Ihre Serverlast, Servergeschwindigkeit und Internetgeschwindigkeit sind nicht mehr ein Faktor.

Das "unsichtbare" & anpassbare Builder-Interface

Anpassbare-Schnittstelle-2

Sie benannten das neue visuelle Builder-Design mit dem Codenamen „Invisible Interface“ (Invisible Interface). Dies stellt eine ihrer zentralen Designphilosophien dar. „Gutes Design bleibt oft unbemerkt.“ Eine, die Ihre Absichten vorhersagt und Ihnen Lösungen bietet. Dies bedeutet, dass eine Benutzeroberfläche wirklich „intuitiv“ ist. Divi 3.0 bombardiert Sie nicht mit unnötigen Rastern, Linien und Schaltflächen. Es gibt keine schwebenden Kopfzeilen oder Seitenleisten, die Ihre Bildschirmfläche stehlen oder Überlagerungen, um Ihre Sicht zu verdecken. Wenn Sie den Builder zum ersten Mal laden, wissen Sie vielleicht noch nicht einmal, dass er vorhanden ist. Wenn Sie jedoch die Seite mit der Maus erkunden, werden die Steuerelemente sichtbar.

Der Visual Builder von Divi 3.0 ist der erste WordPress-Seitengenerator, der eine anpassbare Oberfläche bietet. Dies bedeutet, dass Sie nicht in bestimmte UI-Konventionen eingeordnet sind, wenn es darum geht, wie die Steuerelemente des Builders angezeigt werden. Sie können festlegen, dass diese Einstellungen in einem modalen Popup angezeigt werden, oder Sie können das Popup an der Seite der Seite einrasten und den Modus "Sidebar" eingeben. Sie können anpassen
Die Größe und Position des Popups und der Seitenleiste, sodass Sie Ihren Platz basierend auf der Größe Ihres Bildschirms oder dem Inhalt Ihrer Seite optimieren können.

Catalin Zorzini

Ich bin ein Webdesign-Blogger und habe dieses Projekt gestartet, nachdem ich ein paar Wochen damit verbracht habe, herauszufinden, wer das ist die beste E-Commerce-Plattform für mich. Überprüfen Sie meine aktuelle top 10 E-Commerce-Site-Builder.