Divi 3.0 har en fantastisk Front End Builder til din WooCommerce-butik

Divi er vores valg af WordPress-tema, når det kommer til WooCommerce, og det nye Divi 3.0 introducerer en komplet ny "visual builder" (også kaldet en "front-end editor"), der er blevet genopbygget fra bunden op ved hjælp af React, et moderne JavaScript-bibliotek til brugergrænseflader. Denne nye builder giver brugerne mulighed for at redigere deres WordPress-sider i forkant af deres websted ved hjælp af enkle og smukke visuelle kontroller. Når du aktiverer builder, kan du se din side nøjagtigt, som den ville se ud på forsiden af ​​dit websted.

Når bygherren er aktiv, kan siden dog redigeres ved hjælp af Divis enorme vifte af indholdselementer og designindstillinger. Du kan klikke på et afsnit og begynde at skrive, fremhæve tekst og justere dens skrifttype, størrelse og stil eller åbne indstillingerne for ethvert element og ændre dets indhold, udseende og placering. Det er også let at trække, slippe, ændre størrelse, kopiere, indsætte, slette og duplikere elementer.

Siden bliver levende, og hvert element føles håndgribeligt, fordi du er i stand til at manipulere alt på naturlige og intuitive måder. Når du foretager en designændring eller tilføjer nyt indhold til en side, vises disse ændringer med det samme. Dette skyldes, at den nye visuelle builder ikke er afhængig af traditionel indlæsning, så der er behov for sideopdateringer eller Ajax-indlæsningsbjælker i størstedelen af ​​byggeroplevelsen. Dette er fremtiden for WYSIWYG.

Tilføj nyt indhold fra Divis 40+ moduler

Tilføjelse af nyt indhold i Divi 3.0 er enkelt. Hold markøren hen over den ønskede placering på siden, og klik på “+” -knappen for at tilføje et nyt element. Du bliver mødt med en liste over Divis 40+ indholdsmoduler, som kan bruges til at opbygge næsten enhver form for hjemmeside. Det er ikke nødvendigt at trække og slippe indhold fra en central dock, fordi Divis indholdsværktøjstip altid er der, når du har brug for det.

Inline-Editor-1

Tilpas nemt alt

Skønheden i Divi 3.0 bliver tydelig, når du begynder at justere dit indholds design. Alt kan tilpasses, og du kan se disse ændringer vises i realtid:

  • Vælg mellem dusinvis af tilpassede skrifttyper.
  • Juster tekstfarve, størrelse, linjehøjde og bogstavafstand.
  • Tilføj tilpasset polstring og margener.
  • Skift kolonnestrukturer og rækkehøjder.
  • Tilføj baggrundsfarver og billeder.
  • Aktivér parallaxbaggrundsbilleder og videobakgrunder.
  • Træk, slip, kopier og indsæt indholdselementer.
  • Anvend forskellige designindstillinger for hvert responsivt breakpoint.
  • Træk for at justere rækkehøjder og bredder.
  • Nyd en smuk inline-redigeringsoplevelse

Når den nye visual builder er aktiv, kan al tekst på siden redigeres. Det er ikke nødvendigt at åbne indstillingerne for et element for at justere dets tekstindhold. Klik blot på et hvilket som helst afsnit og start med at skrive for at tilføje tekst, eller fremhæv en hvilken som helst tekst for at justere dens skrifttype, størrelse, stil og afstand. De har oprettet deres egen inline editor UI, der er super glat og vidunderlig at bruge. Hvis du nogensinde har været frustreret over den standard travle TinyMCE-grænseflade, bliver du glædeligt overrasket, når du bruger Divi 3.0.

Oplev utrolige hastigheder

Divi 3.0s visuelle bygherre er sandsynligvis den hurtigste online websidebygningsoplevelse, du nogensinde har brugt. Der er lidt eller ingen sideopdateringer eller Ajax-indlæsningsbjælker. Der er faktisk ingen traditionel belastning af nogen art under det meste af byggeprocessen. Dette skyldes, at JavaScript tillader bygherren, og bygningsoplevelsen forekommer helt i din browser.

I stedet for at stole på kommunikation mellem din browser og din server for at der skal ske ændringer, behøver Divi 3.0-builder kun at vente på det tidspunkt, hvor applikationen beregner hver ændring. Når det bruges med en anstændig computer og en moderne browser, vil du opleve næsten øjeblikkelige opdateringer, når du tilføjer og justerer indhold. Din serverbelastning, serverhastighed og internethastighed er ikke længere en faktor.

Den "usynlige" og brugerdefinerede Builder-interface

Tilpasselig-interface-2

De kaldte den nye visuelle bygherres design kodenavnet "Invisible Interface." Dette repræsenterer en af ​​deres centrale designfilosofier, nemlig at "godt design ofte går ubemærket hen." Den bedste brugergrænseflade er en, der ikke kommer i vejen for dig, og en, der forudsiger dine intentioner og tilbyder dig løsninger. Dette er hvad det betyder for en grænseflade at være virkelig "intuitiv." Divi 3.0 bombarderer dig ikke med unødvendige gitre, linjer og knapper. Der er ingen flydende overskrifter eller sidebjælker, der stjæler din skærm fast ejendom eller overlays for at skjule din vision. Når du først indlæser bygherren, ved du måske ikke engang, at den er der, men når du begynder at udforske siden med din mus, vises kontrollerne.

Divi 3.0s visuelle builder er den første WordPress-sidebygger, der tilbyder en tilpassbar interface. Dette betyder, at du ikke er bundet til visse UI-konventioner, når det kommer til, hvordan bygherrens kontroller vises. Du kan vælge at få disse indstillinger til at vises i en modal popup, eller du kan klikke på denne popup til siden af ​​siden og gå ind i "sidebar" -tilstand. Du kan justere
popup- og sidefeltets størrelse og placering, så du kan optimere din plads baseret på størrelsen på din skærm eller indholdet på din side.

Catalin Zorzini

Jeg er blogger af webdesign og startede dette projekt efter at have brugt et par uger på at kæmpe for at finde ud af, hvad der er den bedste e-handelsplatform for mig selv. Tjek min nuværende top 10 e-handel byggere.