Divi 3.0 Har en fantastisk Front End Builder för din WooCommerce Shoppa

Divi är vårt WordPress-tema som valts när det gäller WooCommerce, och den nya Divi 3.0 introducerar en helt ny "visuell byggare" (även kallad "front-end editor") som har byggts om från grunden med hjälp av React, ett modernt JavaScript-bibliotek för användargränssnitt. Den här nya byggaren låter användare redigera sina WordPress-sidor i framsidan av sin webbplats med enkla och vackra visuella kontroller. När du aktiverar byggaren ser du din sida exakt som den skulle se ut på framsidan av din webbplats.

Med byggaren aktiv kan sidan dock redigeras med Divis stora utbud av innehållselement och designinställningar. Du kan klicka in i ett stycke och börja skriva, markera text och justera dess teckensnitt, storlek och stil, eller öppna inställningarna för valfritt element och ändra dess innehåll, utseende och placering. Att dra, släppa, ändra storlek, kopiera, klistra in, ta bort och duplicera element är också enkelt.

Sidan blir levande och varje element känns påtagligt eftersom du kan manipulera allt på naturliga och intuitiva sätt. När du gör en designändring eller lägger till nytt innehåll på en sida visas dessa ändringar direkt. Det beror på att den nya visuella byggaren inte förlitar sig på traditionell lastning, så det finns behov av siduppdateringar eller Ajax-laddningsfält under majoriteten av byggareupplevelsen. Detta är framtiden för WYSIWYG.

Lägg till nytt innehåll från Divi40+ moduler

Lägger till nytt innehåll i Divi 3.0 är enkelt. Håll muspekaren över önskad plats på sidan och klicka på knappen "+" för att lägga till ett nytt element. Du hälsas med en lista över Divi40+ innehållsmoduler som kan användas för att bygga nästan vilken typ av webbplats som helst. Det finns inget behov av att dra och släppa innehåll från en central docka för DiviVerktygstips för innehåll finns alltid när du behöver det.

Inline-Editor-1

Anpassa enkelt allt

Det fina med Divi 3.0 blir uppenbart när du börjar justera innehållets design. Allt kan anpassas och du kan se att ändringarna visas i realtid:

  • Välj bland dussintals anpassade teckensnitt.
  • Justera textfärg, storlek, radhöjd och bokstavsavstånd.
  • Lägg till anpassad stoppning och marginaler.
  • Ändra kolumnstrukturer och radhöjder.
  • Lägg till bakgrundsfärger och bilder.
  • Aktivera parallaxbakgrunder och videobakgrunder.
  • Dra, släpp, kopiera och klistra in innehållselement.
  • Använd olika designinställningar för varje responsiv brytpunkt.
  • Dra för att justera radhöjder och bredder.
  • Njut av en vacker inline-redigeringsupplevelse

När den nya visuella byggaren är aktiv blir all text på sidan redigerbar. Det finns inget behov av att öppna inställningarna för ett element för att justera dess textinnehåll. Klicka bara i valfritt stycke och börja skriva för att lägga till text, eller markera vilken text som helst för att justera dess teckensnitt, storlek, stil och avstånd. De har skapat ett eget gränssnittsredigerargränssnitt som är supermjukt och underbart att använda. Om du någonsin har varit frustrerad över det vanliga TinyMCE-gränssnittet kommer du att bli positivt överraskad när du använder den Divi 3.0.

Upplev otroligt hastighet

Divi 3.0s visuella byggare är förmodligen den snabbaste webbplatsupplevelsen du någonsin har använt. Det finns små eller inga siduppdateringar eller Ajax-laddningsfält. Det finns faktiskt ingen traditionell lastning av något slag under större delen av byggprocessen. Detta beror på att JavaScript driver byggaren och att byggupplevelsen sker helt i din webbläsare.

Istället för att förlita sig på kommunikation mellan din webbläsare och din server för att ändringar ska kunna inträffa Divi 3.0-byggaren behöver bara vänta på att tiden tar in applikationen för att beräkna varje ändring. När du använder den med en anständig dator och en modern webbläsare kommer du att uppleva nästan omedelbara uppdateringar när du lägger till och justerar innehåll. Din serverbelastning, serverhastighet och internethastighet är inte längre en faktor.

Det "osynliga" och anpassningsbara byggmästargränssnittet

Customizable-Gränssnitt-2

De kodade den nya visuella byggarens design till "Invisible Interface." Detta representerar en av deras grundläggande designfilosofier, vilket är att "bra design går ofta obemärkt förbi." Det bästa användargränssnittet är ett som inte kommer i vägen och en som förutsäger dina avsikter och erbjuder dig lösningar. Det är vad det betyder för ett gränssnitt att vara riktigt "intuitivt." Divi 3.0 bombarderar dig inte med onödiga rutnät, linjer och knappar. Det finns inga flytande rubriker eller sidofält som stjäl bort din skärmfastighet eller överlägg för att dölja din syn. När du först laddar byggaren kanske du inte ens vet att den är där, men när du börjar utforska sidan med musen blir kontrollerna uppenbara.

Divi 3.0s visuella byggare är den första WordPress-sidbyggaren som erbjuder ett anpassningsbart gränssnitt. Det betyder att du inte är duva i vissa UI-konventioner när det gäller hur byggarens kontroller visas. Du kan välja att ha dessa inställningar i en modal popup, eller så kan du knäppa den till sidan av sidan och gå in i "sidofältet". Du kan justera
popup- och sidofältets storlek och position så att du kan optimera ditt utrymme baserat på storleken på din skärm eller innehållet på din sida.

Catalin Zorzini

Jag är en webbdesignblogger och startade detta projekt efter att ha tillbringat några veckor och kämpat för att ta reda på vilket är den bästa e-handelsplattformen för mig själv. Kolla in min nuvarande topp 10 e-handel byggare.