Divi 3.0 Beschikt over een geweldige front-end builder voor uw WooCommerce Shop

Divi is ons WordPress-thema bij uitstek als het gaat om WooCommerceen 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.

Als de builder echter actief is, kan de pagina 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 grootte en de stijl aanpassen, of de instellingen voor elk element openen en de inhoud, het uiterlijk en de positionering wijzigen. Slepen, neerzetten, 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.

Voeg nieuwe inhoud toe van Divi's 40+ modules

Nieuwe inhoud toevoegen 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. U wordt begroet met een lijst met Divi's 40+ inhoudsmodules die kunnen worden gebruikt om zowat elke soort website te bouwen. Het is niet nodig om inhoud vanuit een centraal dock te slepen en neer te zetten, omdat DiviDe tooltip voor inhoud is er altijd wanneer u deze nodig heeft.

Inline-Editor-1

Pas alles eenvoudig aan

De schoonheid van Divi 3.0 wordt duidelijk wanneer u het ontwerp van uw inhoud begint aan te passen. Alles kan worden aangepast en u kunt die wijzigingen zien 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

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

Ervaar ongelofelijke snelheid

Divi 3.0's visuele bouwer is waarschijnlijk de snelste online website-bouwervaring die je ooit hebt gebruikt. Er zijn weinig tot geen paginavernieuwingen of laadbalken van Ajax. In feite is er tijdens het grootste deel van het bouwproces geen enkele traditionele belasting. Dit komt omdat JavaScript de bouwer aandrijft en de bouwervaring volledig in uw browser plaatsvindt.

In plaats van te vertrouwen op communicatie tussen uw browser en uw server om wijzigingen door te voeren, kan het Divi 3.0-builder hoeft alleen maar te wachten tot de toepassing de tijd nodig heeft om elke wijziging te berekenen. Bij gebruik met een fatsoenlijke computer en een moderne browser, ervaar je bijna onmiddellijke 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 noemden het ontwerp van de nieuwe visuele bouwer de 'Invisible Interface'. Dit vertegenwoordigt een van hun belangrijkste ontwerpfilosofieën, namelijk dat "goed ontwerp vaak onopgemerkt blijft". De beste gebruikersinterface is er een die u niet in de weg zit, en een die uw bedoelingen voorspelt en u 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 zijbalken om uw schermruimte te stelen of overlays die uw zicht belemmeren. Wanneer u de builder voor het eerst laadt, weet u misschien niet eens dat deze er is, maar wanneer u de pagina met uw muis begint te verkennen, worden de bedieningselementen duidelijk.

Divi 3.0's visuele bouwer is de eerste WordPress-paginabuilder die een aanpasbare interface biedt. Dit betekent dat u niet onder bepaalde UI-conventies valt als het gaat om hoe de bedieningselementen van de bouwer worden weergegeven. U kunt ervoor kiezen om deze instellingen in een modale pop-up te laten verschijnen, of u kunt die pop-up aan de zijkant van de pagina vastklikken en de "zijbalk" -modus openen. U 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 mijzelf. Bekijk mijn huidige top 10 bouwers van e-commerce-sites.