WordPress este un CMS foarte popular în întreaga lume datorită interfeței sale simple, temelor foarte personalizabile și varietății nesfârșite de Plugin-uri puternic. A simplificat crearea, dezvoltarea și gestionarea site-urilor web, chiar și pentru cei mai amatori utilizatori.

Astăzi și datorită WordPress, nu mai trebuie să aveți cunoștințe specifice pentru a crea pagini web atractive. Cu toate acestea, sunteți putea fi deja ai dat peste un site web care oferă un design cu adevărat incredibil și probabil te-ai întrebat: Cum a fost făcut?

Din păcate, dacă ești amator sau începător, nu poți face mare lucru, chiar și cu WordPress, deoarece pentru a vă modifica tema, aveți nevoie de un anumit grad de expertiză în HTML, CSS, PHP și alte câteva abilități în funcție de natura temei dvs., dar și de proiectul sau obiectivul dvs.

Cu toate acestea, chiar dacă sunteți un programator cu experiență, cu siguranță aveți nevoie de un instrument care să vă permită să economisiți timp și calitate la rezultatul final.

Din fericire, conecteaza WordPress « WPBakery Page Builder Fost cunoscut sub numele de " Compozitor Visual » oferă o soluție la această problemă. Cu acestea din urmă, chiar și majoritatea bloggeri începători pot crea pagini cu un aspect complet unic pentru site-ul lor.

Cu acest plugin puteți crea:

  • Pagini de destinație atractive (pagina de destinație)
  • De la paginile de vânzări la aspect profesional
  • Site-uri „Vitrina” pentru afacerea dvs.
  • Module pagini pentru formarea dumneavoastră
  • pe scurt toate

În opinia mea, este cel mai bun instrument de formatare (sau aspect) de pe internet. Mai ales pentru utilizatorii de WordPress.

Prin urmare, în acest tutorial vă voi arăta cum să arătați un aspect unic site-ului dvs. web (sau blog) cu conecteaza Compozitor Visual.

Deci ...

Cum se instalează și se configurează Pluginul WPBakery Page Builder

WPBakery Page Builder este o conecteaza prima pe care o puteți cumpăra Codecanyon : Cea mai bună platformă de vânzări pe plugin-uri de internet.

BINE. După ce ați achiziționat și descărcat acest plugin de layout pe WordPress, tot ce trebuie să faceți este să îl instalați și să îl activați.

Apoi vom începe prin a face unele ajustări de bază. Pentru a face acest lucru, navigați la locație „Setări >> Compozitor Visual » în tabloul de bord.

Setări generale

setări generale compozitor vizualPrima filă (setări generale), vă permite să modificați:

  • Conținutul de pe care vizual compune vor fi disponibile. Puteți verifica elementele (post) și / sau pagini (pagină)
  • Diferitele reguli aleacces roluri diferite. Cu această opțiune puteți determina care modifică ce. Vor fi afișate diferitele roluri disponibile. Va trebui să faceți clic pe fiecare pentru a verifica elementele la care se află (rolul) va avea acces. Aveți opțiunea de a interzice utilizarea „ vizual compozitor ”pentru utilizatorii unui anumit rol.
    activați editorul pe generatorul de pagini WPbakery
  • Activați sau dezactivați elementele sensibil
  • Definiți subseturile pentru fonturile Google

selectarea rolurilor wpbakeryOpțiuni de proiectare

În opțiunile de proiectare, aveți posibilitatea de a modifica aspectul vizual implicit al diferitelor elemente din „ vizual compozitor ". Înainte de ao utiliza, asigurați-vă că ați bifat opțiunea « Utilizați opțiuni de design personalizate ».

setări css

Aceste opțiuni vă vor permite să definiți culoarea care se aplică tuturor elementelor. 

  • CSS personalizate »Vă oferă posibilitatea de a personaliza în continuare fiecare articol, doar dezvoltatorii pot ști ce este.
  • Fila « Licență produs »Vă permite să activați conecteaza pentru a primi actualizări automate.
  • Fila « Scurtăturile activ Este în esență despre dezvoltatori.

Bine, acum vom crea o pagină web personalizată cu Compozitor vizual.

Cum se creează o pagină personalizată cu vizual compozitor

Pentru a crea cu ușurință pagini web personalizate, aveți de ales între editorul „ back office „, Adică modificați site-ul din tabloul de bord WordPress, unde cel al„ front office ".

redactor-the-front-end-the-redactor-backend

Dacă utilizați Gutenberg, veți observa un buton „Editor de pagini” în bara de activități de sus.

redactor compozitor vizual tablou de bord editor gutenberg

Avantajul cu editorul de Front office este că puteți edita live paginile dvs. și puteți vedea cum apar diferitele elemente pe tema dvs.

Cu editorul de back office

Pentru a accesa editorul „ back office », Vă invit să faceți clic pe« editor Back-Office ". Puteți reveni oricând la editorul vizual WordPress făcând clic pe „ modul clasic “. Dar cred că nu va fi necesar, astfel că această completare de formatare a paginilor web este completă.

Odată ajuns în editorul Back-Office, puteți alege un aspect global care se va aplica paginii.

Actualizările pagină variază în funcție de ceea ce intenționați să faceți cu pagina. Deci puteți alege « aterizare pagina » pentru a crea o pagină de pornire, "Lista serviciilor" pentru o pagină care prezintă servicii etc. Cu experiență, veți reuși chiar să creați pariuri en pagini personalizat proiectat foarte pro.

Oricare ar fi alegerea setării dvs. pagină, prezentarea elementelor este similară asupra tuturor celor din urmă. Puteți adăuga un nou element en cliquant sur "+" chiar în partea de sus a meta caseta « Visual Editor », Sau adăugați un model făcând clic pe pictogramă „Șablon“.

Pe fiecare linie, puteți (de la stânga la dreapta) :

  • Mutați linia
  • Gestionează coloanele din rând
  • Adaugă o nouă coloană

interfață pentru constructorul de pagini wpbakeryAlte opțiuni sunt disponibile în partea dreaptă a casetei. Aceste opțiuni vă permit să (de la stânga la dreapta) Către:

  • reduce linia
  • editați un rând
  • duplică un rând
  • ștergeți un rând

layout wpbackeryÎn mijlocul fiecărei coloane, puteți adăuga un articol înainte, editați o coloană sau ștergeți-o.

opțiuni secțiune wpbackeryopțiuni secțiune wpbackery

Resurse recomandate

Iată câteva compoziții vizuale pe care le recomandăm:

1 - Cum se gestionează coloanele

În fila de gestionare a coloanelor, puteți alege numărul de coloane pe care doriți să le adăugați la rând. Pentru a înțelege diferitele modele de coloane, știți că fiecare fracție corespunde lățimii pe care o va ocupa coloana. Atât cât un șablon are fracții, de atâtea ori pagina va avea coloane.

Desigur, 11 sunt disponibile șabloane de coloane diferite, dar puteți crea câte dorințe, făcând clic pe link „Personalizat“ chiar sub lista de coloane.

De exemplu, pentru a afișa o secțiune a paginii cu coloane 2 la lățimi egale, trebuie să alegeți (sau adăugați) "1 / 2 + 1 / 2". 

Coloanele vor fi afișate pe blogul dvs., iar lățimile lor vor fi distribuite proporțional cu dimensiunile temei. O coloană poate conține cât mai multe elemente posibil, deci nu aveți limite la acest nivel.

layout secțiune wpbakery

Diferitele elemente pot fi mutate în orice coloane.

deplasarea wordpress text box wpbakeryTrecând peste fiecare element, veți putea accesa opțiunile sale, în special butonul care permite:

  • mutare element
  • schimbare element
  • duplicat element
  • elimina element

Opțiuni de-a-elemente

2 - Cum se adaugă elemente

Aveți opțiunea de a personaliza fiecare coloană cu elementele propuse de „ Vizual Compozitor ". Pentru a adăuga un articol, faceți clic pe buton "+" pe o anumită coloană sau pe buton "+" plug-in Meniu principal.

adăugați un element wpbakery
Când o coloană este goală (ne conține niciun conținut)ea are un buton "+" interior.
 Pentru a adăuga un videoclip, de exemplu, faceți clic pe acest buton și alegeți elementul video.

add-un video-

Făcând clic pe ea, se va deschide o fereastră nouă. În această fereastră, trebuie să furnizați titlul, linkul video și o clasă suplimentară (ceea ce nu este obligatoriu). După ce ați terminat de introdus diversele informații despre videoclipul dvs., nu uitați să salvați modificările.

reglare video wpbakeryVideoclipul dvs. va fi disponibil pe editorul de back office. Salvați modificările încă o dată. Acum îl puteți vizualiza făcând simplu clic " previzualizare ".

adăuga video wpbakery wordpressProcesul de adăugare a unui articol este același pentru toate celelalte, cu câteva excepții. Informațiile care trebuie completate pot varia în funcție de elemente. 

Prin selectarea elementului de text, de exemplu, veți găsi un editor vizual clasic (cel disponibil la scrierea de articole sau pagini), dar și o opțiune care vă permite să adăugați o animație în timpul afișării elementului. Prin urmare, acesta din urmă se poate estompa de la o poziție la alta, în funcție de setările dvs.

setările blocului de textCel mai interesant cu asta conecteaza, este că veți putea crea Barele laterale dacă tema dvs. nu, de exemplu. Pentru a face acest lucru, faceți clic pe butonul Adăugați (" + »), și alegeți elementul „ WP Comentarii recent "" Facebook ca Și în cele din urmă « Categorii WP ".

Acum creați acest șablon personalizat pentru coloane 1 / 3 + 2 / 3 »Sau orice altul și adăugați elementul bara laterală pe coloana din stânga sau pe cea din dreapta. Nu contează, deoarece totul depinde de cât de largă doriți să oferiți bara laterală creată sub această extensie de aspect decât în ​​Visual Composer.

configurația coloanelor wpbakery

Veți observa o coloană goală din dreapta, adăugați un element nou la alegere (Vă recomand să adăugați un text simplu). Acum salvați pagina și accesați previzualizarea pentru a vedea rezultatul acestui exercițiu.

3 - Cum să salvați și să reutilizați un șablon de pagină

Este posibil să salvați șablonul paginii dvs. și să îl utilizați mai târziu. Îmi place această opțiune, deoarece vă economisește să petreceți ore încercând să copiați un șablon de pe o pagină. Aici totul se face cu un singur clic. Da, ai auzit bine, într-un singur clic ... sau în două 🙂

Pentru a salva un șablon, faceți clic pe pictograma șabloane. În fereastra care va apărea, introduceți numele modelului dvs. în „ Salvați aspectul curent ca șablon », Apoi faceți clic pe« Salvați șablonul ".

Important: Trebuie să faceți acest lucru pe pagina pe care doriți să o salvați ca șablon și nu pe o pagină goală.

înregistrați un model wpbakery

În același mod, veți găsi diferitele modele pe care le-ați salvat, mai jos pe aceeași fereastră din secțiune „Încărcați un model”.

modelele mele wpbakeryTot ce trebuie să faceți în acest caz este să creați o pagină nouă, apoi accesați șabloanele și alegeți-o pe care doriți să o dați paginii dvs.

Cu editorul front-office

Editorul de la front office are avantajul de vă permit să vă editați pagina în timp real. Cu alte cuvinte, vă permite să vedeți cum vor arăta fiecare schimbare pe site-ul dvs. utilizând Visual Composer. Avantajul acestei abordări este că nu trebuie să lucrați orbește așa cum faceți cu editorul de pagini back-office.

Puteți trece de la o opțiune la alta oricând (birou de back office sau recepție).

Editorul front-office nu este atât de diferit de editorul back-office, prin faptul că există un bar utilizator identice, dar și toate opțiunile din editorul de birou sunt aceleași ca și în editorul de birou.

bara de instrumente wpbakeryCu toate acestea, au fost adăugate cinci butoane noi, acestea includ:

  • Activarea sau dezactivarea ghidurilor
  • Emulatorul, care vă permite să vedeți cum va arăta blogul dvs. pe diferite dispozitive
  • Butonul "Înapoi-înapoi"
  • Butonul de salvare a modificărilor
  • Butonul de ieșire vizual compozitor

opțiuni wpbakeryFiecare element al unei pagini poate fi modificat, veți putea vedea opțiunile disponibile trecând peste fiecare element. Butonul în formă "JOACA", vă va permite să afișați mai multe opțiuni pentru un element.

Opțiuni de-a-elemente-of-the-front biroul

Primii dvs. pași pot fi dificili, dar cu practica veți realiza pagina principală de acest fel.  Dacă doriți, înainte de a obține conecteazapoți testați-l gratuit (log in, utilizator: demo, parola: demo).

Iată ce am reușit să realizez în 1 minut acasă. Cu practica, puteți obține rezultate foarte satisfăcătoare. Și dacă aveți nevoie de ajutor pentru a vă construi site-ul WordPress cu acest plugin puternic, atunci nu ezitați contactați echipa BlogPasChercare va fi fericit să realizeze proiectele tale.

Sper că acest tutorial complet în limba franceză vă va ajuta să faceți primii pași cu conecteaza « Compozitor Visual ". Dacă aveți o problemă, noi (sau asistență) va fi bucuros să vă ajute. Nu uita: o pagină web frumoasă poate converti mai curioși în clienți.

Extensii recomandate

Iată câteva compoziții vizuale pe care le recomandăm:

Descoperiți mai multe pluginuri Codecanyon

Distribuiți acest tutorial cu cei care au nevoie de el.