Divi je definitivno jedan od njih WordPress teme najpopularniji u današnje vrijeme. Jedan od elemenata koji čini snagu ove teme je njen graditelj (Divi Builder), koji nas jako podsjeća na onaj iz Visual Skladatelj.

Divi Builder dolazi u dva oblika: standardni "Back-end Builder" i "Visual Builder". Oba sučelja omogućuju vam izradu potpuno istih vrsta web stranica s istim dijelovima sadržaja i istim parametrima dizajna. Jedina razlika je sučelje. Pozadinski graditelj živi unutar WordPress nadzorne ploče i dostupan je sa svim ostalim standardnim postavkama WordPressa.

Smješten je unutar WordPress korisničkog sučelja i zamjenjuje standardni WordPress urednik postova. Izvrsno je za brze promjene dok ste unutar nadzorne ploče, ali također je ograničena nadzornom pločom i prikazuje se kao blok prikaz vašeg web mjesta. Ovaj će se vodič usmjeriti samo na vizualni graditelj.

Preuzmite DIVI WordPress temu

divi builder.jpeg

S druge strane, potpuno novi Visual Builder omogućuje vam izradu stranica na prednjem kraju web stranice! To je nevjerojatno iskustvo i omogućuje puno brži dizajn. Kad dodate sadržaj ili prilagodite postavke dizajna unutar vizualnog graditelja, vaše se promjene odmah pojavljuju.

Možete kliknuti na stranicu i započeti tipkati. Možete istaknuti tekst i prilagoditi njegov font i stil. Možete dodati novi sadržaj, izgraditi stranicu i vidjeti sve što se događa pred vašim očima.

upotreba vizualnog graditelja.jpg

Kako omogućiti Visual Builder

Kada ste prijavljeni na svoju WordPress nadzornu ploču, možete prijeći na bilo koju stranicu na prednjem kraju web stranice i kliknuti gumb "Aktiviraj Visual Builder" na administratorskoj traci WordPressa za pokretanje graditelja. vizualni.

kako omogućiti vizualni builder.jpeg

Ako uređujete svoju stranicu na nadzornoj ploči, možete se prebaciti na vizualni graditelj klikom na gumb "Omogući Visual Builder" koji se nalazi na vrhu pozadinskog sučelja Divi Builder (imajte na umu da prvo morate aktivirajte Divi Builder prije nego što se pojavi gumb za vizualni graditelj).

upotrijebite vizualni graditelj Divi.jpeg

Osnove Visual Buildera

Moć Divi-a leži u Visual Builderu, alatu za izradu stranica koji radi s funkcijom "Povuci i ispusti", a omogućuje vam izradu gotovo svih vrsta web stranica kombiniranjem i uređivanjem dijelova sadržaja.

Graditelj koristi tri glavna gradivna bloka: odjeljke, redove i module. Njihova ujedinjena upotreba omogućuje vam stvaranje bezbroj rasporeda. Odjeljci su najveći građevinski blokovi i u njima se nalaze skupine redova. Redovi su unutar odjeljaka i koriste se za smještaj modula. Moduli su smješteni unutar redova. Ovo je struktura svake web stranice Divi.

Sekcije

Najosnovniji i najveći građevinski blokovi koji se koriste u dizajniranju izgleda s Divi-jem su odjeljci. Koriste se za stvaranje velikih grupa sadržaja i to je prvo što dodate na svoju stranicu. Postoje tri vrste odjeljaka: redoviti, specijalni i pune širine.

Redovni odjeljci sastoje se od redaka stupaca, dok su odjeljci pune širine moduli pune širine koji proširuju cijelu širinu zaslona. Posebni odjeljci omogućuju naprednije bočne rasporede.

red

Redovi su unutar odjeljaka i unutar odjeljka možete smjestiti bilo koji broj redaka. Na izbor je mnogo različitih vrsta stupaca. Nakon što definirate strukturu stupca za svoj redak, možete smjestiti module u željeni stupac. Ne postoji ograničenje broja modula koje možete smjestiti u stupac.

moduli

Moduli su dijelovi sadržaja koji čine vašu web stranicu. Svaki se Divi modul može prilagoditi bilo kojoj širini stupca i svi u potpunosti reagiraju.

Izradite svoju prvu stranicu

Tri osnovna gradivna bloka (odjeljci, linije i moduli) koriste se za izradu vaše stranice.

izgradnja stranice Divi.jpg

Dodavanje prvog odjeljka

Da biste mogli dodati bilo što na svoju stranicu, prvo ćete morati dodati odjeljak. Odjeljke možete dodati klikom na plavi gumb (+). Kad zadržite pokazivač iznad odjeljka koji već postoji na stranici, ispod će se pojaviti plavi gumb (+). Kad kliknete, novi odjeljak bit će dodan ispod odjeljka nad kojim trenutno lebdite.

Ako pokrenete novu stranicu, vaš će se prvi odjeljak automatski dodati.

popis divi.jpg odjeljaka

Dodavanje vašeg prvog retka

Nakon dodavanja prvog odjeljka možete početi dodavati retke stupaca unutra. Odjeljak može sadržavati neograničen broj redaka, a možete kombinirati i podudarati retke različitih vrsta stupaca kako biste stvorili razne izglede.

Da biste dodali redak, kliknite zeleni gumb (+) unutar praznog odjeljka ili kliknite zeleni gumb (+) koji se pojavljuje kada zadržite pokazivač iznad trenutnog retka da biste dodali novi redak u nastavku. Nakon što kliknete zeleni gumb (+), dočekat će vas popis vrsta stupaca. Odaberite stupac po vašem izboru i spremni ste za dodavanje prvog modula.

kako umetnuti red Divi.jpeg

Dodavanje prvog modula

Moduli se mogu dodavati unutar redova, a svaki redak može sadržavati neograničen broj modula. Moduli su sadržajni elementi vaše stranice, a Divi dolazi s preko 40 različitih elemenata koje možete koristiti za izgradnju.

Možete koristiti osnovne module kao što su tekstovi, slike i gumbi ili naprednije module kao što su klizači, galerije portfelja i eCommerce Trgovine.

Da biste dodali modul, kliknite sivi gumb (+) koji postoji unutar praznog stupca ili kliknite sivi gumb (+) koji postoji kad zadržite pokazivač iznad modula na stranici da biste dodali novi modul u nastavku . Jednom kada kliknete gumb, dočekat će vas popis modula.

Odaberite modul po vašem izboru i on će biti dodan na vašu stranicu i pojavit će se upravljačka ploča modula. Pomoću ove upravljačke ploče možete započeti konfiguriranje modula.

umetnite DIVI.jpeg modul

To je to za ovaj tutorial. S onim što ste danas naučili, moći ćete stvoriti izgled s Divi. Vratit ćemo se s naprednim tutorijalima na tu temu. Već možete preuzeti Divi tema.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] PREUZMITE DIVI TEMU [/ vcex_button] [/colu [m»n_colum] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" ravno "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] ATE DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostali Divi tutoriali