Divi 3.0 heeft een geweldige front-endbouwer voor uw WooCommerce Shop

Divi is ons favoriete WordPress-thema als het gaat om WooCommerce en het nieuwe Divi 3.0 introduceert een compleet nieuwe "visual builder" (ook wel een "front-end editor" genoemd) die vanaf de basis opnieuw is opgebouwd met React, een moderne JavaScript-bibliotheek voor gebruikersinterfaces. Met deze nieuwe bouwer kunnen gebruikers hun WordPress-pagina's aan de voorkant van hun website bewerken met behulp van eenvoudige en mooie visuele bedieningselementen. Wanneer u de builder activeert, ziet u uw pagina precies zoals deze op de voorkant van uw website zou verschijnen.

Met de actieve bouwer kan de pagina echter worden bewerkt met Divi's uitgebreide reeks inhoudselementen en ontwerpinstellingen. U kunt in een alinea klikken en beginnen met typen, tekst markeren en het lettertype, de tekengrootte en de stijl aanpassen, of de instellingen voor elk element openen en de inhoud, het uiterlijk en de positionering ervan wijzigen. Slepen, laten vallen, vergroten / verkleinen, kopiëren, plakken, verwijderen en dupliceren van elementen is ook eenvoudig.

De pagina wordt levend en elk element voelt tastbaar omdat je alles op een natuurlijke en intuïtieve manier kunt manipuleren. Wanneer u een ontwerpwijziging aanbrengt of nieuwe inhoud aan een pagina toevoegt, verschijnen deze wijzigingen onmiddellijk. Dit komt omdat de nieuwe beeldopbouwer niet afhankelijk is van traditioneel laden, dus er is behoefte aan paginavernieuwingen of Ajax-laadbalken tijdens het grootste deel van de bouwerservaring. Dit is de toekomst van WYSIWYG.

Nieuwe inhoud toevoegen aan Divi's 40 + -modules

Het toevoegen van nieuwe inhoud in Divi 3.0 is eenvoudig. Plaats de muisaanwijzer op de gewenste locatie op de pagina en klik op de knop "+" om een ​​nieuw element toe te voegen. Je wordt begroet met een lijst met Divi's 40 + inhoudsmodules die kunnen worden gebruikt om zo ongeveer elke soort website te bouwen. Het is niet nodig inhoud van een centraal dok te slepen en neer te zetten, omdat Divi's tooltip voor inhoud altijd beschikbaar is wanneer u het nodig hebt.

Inline-Editor-1

Pas alles eenvoudig aan

De schoonheid van Divi 3.0 wordt duidelijk wanneer u begint met het aanpassen van het ontwerp van uw inhoud. Alles kan worden aangepast en je kunt zien dat die veranderingen verschijnen in real time:

  • Kies uit tientallen aangepaste lettertypen.
  • Pas tekstkleur, grootte, regelhoogte en letterafstand aan.
  • Voeg aangepaste opvulling en marges toe.
  • Kolomstructuren en rijhoogten wijzigen.
  • Voeg achtergrondkleuren en afbeeldingen toe.
  • Parallax-achtergronden en videobeelden inschakelen.
  • Content-elementen slepen, neerzetten, kopiëren en plakken.
  • Pas verschillende ontwerpinstellingen toe voor elk responsief breekpunt.
  • Versleep om rijhoogten en -breedten aan te passen.
  • Geniet van een mooie inline montage-ervaring

Wanneer de nieuwe visuele builder actief is, kan alle tekst op de pagina bewerkbaar worden gemaakt. Het is niet nodig om de instellingen van een element te openen om de tekstinhoud aan te passen. Klik eenvoudig in een alinea en begin met typen om tekst toe te voegen of markeer tekst om het lettertype, de tekengrootte, stijl en spatiëring aan te passen. Ze hebben hun eigen inline editor UI gemaakt die superglad en geweldig in gebruik is. Als je ooit gefrustreerd bent door de standaard drukke TinyMCE-interface, zul je aangenaam verrast zijn wanneer je Divi 3.0 gebruikt.

Ervaar ongelofelijke snelheid

De visuele bouwer van Divi 3.0 is waarschijnlijk de snelste online websitebouwervaring die je ooit hebt gebruikt. Er zijn weinig of geen pagina-vernieuwingen of Ajax-laadbalken. In feite is er geen traditionele belasting van welke aard dan ook gedurende het grootste deel van het bouwproces. Dit komt omdat JavaScript de bouwer aandrijft en de bouwervaring volledig in uw browser voorkomt.

In plaats van te vertrouwen op communicatie tussen uw browser en uw server om wijzigingen door te voeren, hoeft de Divi 3.0-builder alleen te wachten op de tijd die nodig is om elke wijziging te berekenen. Bij gebruik met een fatsoenlijke computer en een moderne browser, ervaar je bijna directe updates terwijl je inhoud toevoegt en aanpast. Uw serverbelasting, serversnelheid en internetsnelheid zijn niet langer een factor.

De interface "Invisible" en aanpasbare bouwer

Klantgericht-Interface-2

Ze hebben de nieuwe naam 'Invisible Interface' gekregen in het ontwerp van de nieuwe visual builder. Dit vertegenwoordigt een van hun belangrijkste ontwerpfilosofieën, namelijk dat 'goed ontwerp vaak onopgemerkt blijft'. De beste gebruikersinterface is er een die je niet in de weg loopt, en een die je intenties voorspelt en oplossingen biedt. Dit is wat het betekent dat een interface echt "intuïtief" is. Divi 3.0 bombardeert je niet met onnodige rasters, lijnen en knoppen. Er zijn geen zwevende headers of sidebars om uw schermvastgoed of overlays weg te stelen om uw zicht te verdoezelen. Wanneer u de builder voor het eerst laadt, weet u misschien niet eens dat hij er is, maar als u de pagina met uw muis begint te verkennen, worden de bedieningselementen duidelijk.

De Visual Builder van Divi 3.0 is de eerste WordPress-paginabuilder die een aanpasbare interface biedt. Dit betekent dat u niet bent gehekeld in bepaalde UI-conventies als het gaat om hoe de bedieningselementen van de bouwer worden weergegeven. Je kunt ervoor kiezen om deze instellingen in een modale pop-up te laten verschijnen, of je kunt die pop-up aan de zijkant van de pagina klikken en de "zijbalk" -modus openen. Je kunt aanpassen
de grootte en positie van het pop-upvenster en de zijbalk, zodat u uw ruimte kunt optimaliseren op basis van de grootte van uw scherm of de inhoud van uw pagina.

Catalin Zorzini

Ik ben een blogger voor webdesign en ben dit project gestart na een paar weken worstelen om erachter te komen welke dat is het beste e-commerceplatform voor mezelf. Bekijk mijn huidige top 10 bouwers van e-commerce-sites.