Cum să creați o pagină de destinație cu Elementor și PowerPack

WordPress a făcut ca toată lumea să își construiască ușor prezența online, fie că este un blog sau un site web de afaceri sau un ERP complex. Temele și pluginurile WordPress fac chiar mai ușor pentru utilizatori să își construiască site-urile web, fără să se îngrijoreze de angajarea unui expert. Plugin-urile Page Builder au jucat un rol vital în transformarea modului în care site-urile web sunt construite cu WordPress. Elementor este un astfel de plugin popular pentru generatorul de pagini.

Dacă sunteți designer de web și doriți să vă aduceți la viață desenele fără să vă faceți griji cu privire la cod, puteți folosi Elementor. Dar dacă ești dezvoltator? Ei bine, dacă sunteți dezvoltator, puteți utiliza și Elementor datorită funcționalității sale prietenoase cu dezvoltatorii și API-ului ușor de extins.

În această postare, veți afla mai multe despre Elementor și despre modul în care îl puteți folosi cu elementele complementare Elementor pentru a construi rapid site-uri web, pagini de destinație, ferestre de tip pop-up.

Ce este Elementor?

Elementor este un popular plugin pentru Page Builder pentru WordPress. Elementor oferă blocuri de conținut gata de utilizat numite Widget-uri, împreună cu elemente structurale de bază, cum ar fi secțiuni și coloane.

Puteți să glisați și să plasați aceste widget-uri pe orice pagină de pe site-ul dvs. WordPress și să creați un aspect personalizat conform nevoilor dvs.

Elementor Pro vine cu peste 60 de widget-uri și o mulțime de șabloane pre-proiectate pe care le puteți utiliza pentru a proiecta orice pagină.

Caracteristicile Elementor

Elementor vine cu o mulțime de caracteristici și funcționalități care pot face dezvoltarea site-ului dvs. web mai confortabilă și mai rapidă. Să vedem toate caracteristicile impresionante ale Elementor care îl fac să merite.

Rapid și ușor de utilizat

Elementor este optimizat pentru performanță. Chiar dacă sunteți un utilizator începător, veți găsi foarte ușor de utilizat și de a naviga fără efort în Elementor. Nu veți simți niciodată că Elementor vă trage înapoi în procesul de proiectare și va face lucrurile rapide și ușoare doar pentru dvs.

În timp ce Elementor se aprinde rapid, puteți profita din plin de Elementor atunci când utilizați găzduirea Cloudways Elementor. CW se referă la performanță și oferă un control extraordinar asupra funcționării serverului dvs. Când vine vorba de securitate, Cloudways oferă servere cu adevărat sigure și sigure guvernate de practicile lor proactive de securitate pentru a vă menține serverele în siguranță. Numărul de caracteristici care vin cu Cloudways este ceva greu de găsit în industrie astăzi.

Șabloane de pagină predefinite

Cu Elementor, veți obține o mulțime de șabloane pre-proiectate pe care le puteți utiliza pentru a crea o pagină web cu un singur clic. Există șabloane pentru aproape fiecare categorie de pagini web, cum ar fi pagina de destinație, despre pagină etc. și pot face procesul de proiectare a site-ului web mult mai rapid.

Dacă nu puteți găsi un șablon bun în Biblioteca Elementor, puteți verifica șabloanele Elementor terțe. Cu o comunitate înfloritoare de designeri și dezvoltatori, luarea Elementor la nivelul următor este ușoară.

Încărcat cu widgeturi

Ambele versiuni gratuite și Pro Elementor vine cu widget-uri încărcate cu funcții. De la widget-uri de conținut simple precum titluri, editor de text, butoane până la widget-uri avansate precum grila de postări, formular de conectare, WooCommerce, partajare socială, veți obține o mulțime de funcționalități cu Elementor.

Dacă doriți să aveți mai multă putere atunci când vine vorba de widget-uri, puteți încerca complementele Elementor terțe. Vă recomandăm să mergeți cu PowerPack pentru Elementor. Este un addon de vârf pentru Elementor și construit de aceeași echipă din spatele popularului addon PowerPack Beaver Builder.

Elementor Pop up Builder

Generatorul de ferestre de tip pop-up este una dintre cele mai recente adăugiri la generatorul de elemente. Funcția de generare a popup-urilor elimină necesitatea utilizării unui plugin de terță parte pentru generatorul de popup-uri pe site-ul dvs. web. Puteți utiliza Elementor pentru a proiecta ferestre pop-up impresionante cu reguli și funcționalități avansate de direcționare.

Puteți crea formulare de conectare, covoare cu ecran complet, ferestre pop-up cu reducere și ce nu cu funcția de generare a ferestrelor popup.

Setări globale

Când creați un site web, este important să aveți setări de culoare consistente, tipografie etc. Puteți personaliza culorile, fonturile și chiar selectorul de culori în avans pentru a vă ușura procesul de proiectare cu setările globale din Elementor.

Construiți părți tematice precum antet, subsol, arhive etc.

Cu Elementor, designul dvs. nu se limitează doar la zona de conținut a unei pagini . Puteți crea un antet, subsol, bara laterală personalizată și aproape fiecare parte a site-ului web, fără să vă faceți griji cu privire la scrierea codului. Toate acestea pot fi create cu ușurință folosind funcționalitatea Theme Builder din Elementor Pro.

Conținut dinamic

Cu funcționalitatea Dynamic Content în Elementor Pro, puteți afișa date dinamice / conținut din câmpuri personalizate WordPress, ACF, Toolset, Pods, MetaBox sau orice alt plugin pentru câmpuri personalizate. Puteți utiliza datele din câmpurile personalizate și le puteți afișa cu widget-uri Elementor în orice parte a site-ului dvs. Puteți afla mai multe despre conținutul dinamic aici.

Versiunea Lite și Pro

Deși Elementor are multe de oferit, nu este necesar ca utilizatorii să fie nevoiți să plătească o sumă uriașă pentru a avea acces la acesta. De fapt, Elementor are două versiuni, Lite și Pro. Puteți obține acces la o mulțime de caracteristici ale Elementor în versiunea simplă. Ambele versiuni au propriile caracteristici de oferit. Iată o comparație detaliată a Elementor Lite și Pro, care vă poate ajuta în luarea unei decizii.

PowerPack pentru Elementor

Elementor este cu siguranță întregul pachet. Singurul instrument de care aveți nevoie pentru a începe să proiectați pagini web cu un unghi minim de învățare.

S-ar putea să apară momente când vă simțiți puțin restricționat în timp ce utilizați Elementor. Pentru aceasta, sunt salvate programe de completare terțe bine codificate, cum ar fi programul de completare PowerPack Elementor . Acest supliment este unul dintre cele mai bune din categoria sa și oferă widget-uri excelente și impresionante, cu o mulțime de opțiuni de personalizare pentru utilizatori.

În prezent, există mai mult de 50 de widget-uri în versiunea Pro a PowerPack, iar echipa continuă să adauge widget-uri noi, ceea ce îl face o alegere excelentă printre suplimentele Elementor.

PowerPack este construit de o echipă de dezvoltatori și designeri experți WordPress, având în vedere performanța. Pluginul este bine codat și actualizat periodic pentru compatibilitate cu cele mai recente versiuni ale Elementor și WordPress

Să vedem cum puteți utiliza Elementor și PowerPack add-on împreună pentru a crea pagini web fantastice.

Crearea unei pagini de destinație

În acest tutorial, veți afla cum puteți crea o pagină de destinație rapidă cu Elementor și PowerPack Elementor addon. Este ușor să începeți cu Elementor , totul datorită interfeței ușor de utilizat.

Vă rugăm să vă asigurați că aveți atât Elementor cât și PowerPack instalate pe site-ul dvs. Puteți obține versiunile gratuite din linkurile de mai jos:

1. Elementor
2. PowerPack Lite pentru Elementor

Crearea unei pagini cu Elementor

Conectați-vă la tabloul de bord al administratorului WordPress și faceți clic pe opțiunea Adăugare nouă sub Pagini . Acum acordați paginii dvs. un titlu / nume și faceți clic pe butonul Editați cu Elementor .

În acest tutorial, creăm o pagină de destinație pentru o pizzerie, așa că ne vom denumi pagina în consecință. Iată cum ar trebui să arate rezultatul nostru final:

Să începem cu prima secțiune . Înainte de a face acest lucru, schimbați aspectul în Elementor Canvas făcând clic pe pictograma micilor setări din colțul din stânga jos al editorului.

Pasul 1: Secțiunea Hero

Secțiunea erou cuprinde o imagine de fundal, două widget-uri de titlu și un buton CTA.

Mai întâi, faceți clic pe pictograma plus și adăugați o singură structură de coloană din opțiuni. Acum accesați setările secțiunii și activați opțiunea de secțiune stretch și setați umplutura de jos și de sus la 250 din fila avansată.

Acum, puteți selecta imaginea dorită pentru fundal din fila stil> tip fundal> Clasic și alegând imaginea din afișajul media.

Avem fundalul pregătit. Acum să adăugăm titlurile și butonul la secțiunea erou.

Trageți și fixați widgetul Dual Heading pe pagină și modificați textul respectiv. Acum, asigurați-vă că împărțiți primul și al doilea titlu în consecință pentru a sublinia mai mult prețul, așa cum am făcut în imaginea de mai jos. Modificați tipografia pentru ambele părți ale titlului.

Există multe alte modificări pe care le puteți face pentru ca titlul eroului dvs. să fie așa cum doriți.

Odată ce ați făcut modificările, glisați și fixați un alt widget Heading sub antetul dual și modificați setările de text și tipografie pentru aceleași cerințe, aici am schimbat dimensiunea textului la 90 , fontul la Elsie și greutatea fontului la 600 .

Acum vom adăuga butonul CTA .

Trageți și fixați widgetul Elementor Button pe secțiunea de sub widgetul Heading. Acum vom începe să modificăm setările pentru buton.

Iată modificările pe care le-am făcut butonului:

• Textul a fost modificat în Comandă acum!
• Aliniați centrul butonului.
• A fost adăugat linkul CTA
• Tipografia a fost schimbată în Elise; 24; 600 pentru font, dimensiune și respectiv greutate.
• Am schimbat culoarea de fundal în roșu ( # ff0000 ) și culoarea fontului în alb ( # ff0000 ).
• S-a adăugat umplutura 18, 40, 18, 40 pentru sus, dreapta, jos, respectiv stânga.

După efectuarea modificărilor, așa arată secțiunea erou.

Pasul 2: Secțiunea Despre

Acum vom lucra la secțiunea Despre, Continuați și adăugăm o structură cu două coloane la pagină făcând clic pe pictograma „+”.

Acum vizăm să creăm un aspect similar cu acesta, așa că vom adăuga un widget de antet, un widget de editor de text și un widget de mărturii în coloana din stânga. În coloana din dreapta, vom adăuga un widget Heading, un widget Text și un widget Buton.

Pur și simplu începeți să trageți și să fixați widgeturile de pe secțiune și să le modificați pentru a arăta ca cele din imaginea de mai sus. Adăugați titlul și modificați tipografia pentru același lucru.

Iată cum va arăta:

Acum adăugați editorul de text sub titlul din coloana din stânga și schimbați tipografia la aceeași afișată mai jos.

Acum vom adăuga widgetul Testimonial Carousel sub widgetul editorului de text. Adăugați „Articole” sau Mărturii pentru a fi afișate pe site-ul dvs. web. De asemenea, puteți utiliza widgetul Testimonials de la PowerPack, care oferă mult mai multă putere de personalizare.

După ce ați terminat de efectuat modificările, coloana din stânga secțiunii despre ar trebui să arate astfel.

Acum, pentru coloana din dreapta , adăugați fundalul pentru a adăuga un pic de contrast secțiunii.

Acum creați un duplicat al titlului pe care l-am făcut pe coloana din stânga și trageți-l și fixați-l pe coloana din dreapta. Faceți același lucru pentru Editorul de text, deoarece vă va salva de la o redundanță inutilă și va economisi timp. Acum, pentru buton, pur și simplu copiați butonul din secțiunea Hero și trageți-l și mutați-l în coloana din dreapta a secțiunii Despre.

Aliniați vertical coloana din dreapta la mijloc din coloana de editare> aspect> aliniați vertical și aveți secțiunea Despre dvs. pregătită!

Acesta este rezultatul final al secțiunii Despre:

Pasul 3: secțiunea CTA „Aflați mai multe”

Vom adăuga o altă secțiune despre Pizzeria. Această secțiune va fi similară cu cea pe care am creat-o înainte, dar structura va fi puțin diferită.

Deci, dorim ca rezultatul nostru final să arate astfel:

Ai observat ceva similar aici?

Da! Antetul, editorul de text este similar cu cel pe care l-am creat deja anterior. Deci, în loc să reproiectăm toate widgeturile, le vom duplica pur și simplu și le vom trage în poziție.

Hai să o facem!

Mai întâi, adăugați o nouă structură cu două coloane și accesați setările secțiunii și adăugați imaginea de fundal din fereastra media și adăugați o căptușeală superioară de 100 pentru a face panoul să arate mai spațios. De asemenea, activați opțiunea Secțiune întindere din setări.

Acum mergeți la secțiunea anterioară și copiați titlul, editorul de text și widgetul de butoane . Puteți face acest lucru făcând clic dreapta pe widget și selectând opțiunea duplicat . Odată duplicat, glisați și fixați widgeturile duplicate în noile lor poziții.

Așa arată secțiunea:

Acum, pentru coloana din dreapta, glisați și fixați widgetul de imagine și selectați imaginea din galeria media. Reglați imaginea în funcție de dimensiunea imaginii etc. și după ce ați terminat, așa arată secțiunea.

Pasul 4: secțiunea Contact / Comandă

Aceasta este secțiunea CTA care va ajuta utilizatorul să plaseze comanda. Acum, ce ar trebui să includă toată această secțiune? Să vedem ce vizăm să facem aici.

Trebuie să creăm două widgeturi de editor de antet și text, un formular de contact și widgetul meniului listei de prețuri de către PowerPack.

În primul rând, știm că trebuie să păstrăm același design și aspect al titlului și al editorului de text. Puteți merge mai departe și le puteți copia din secțiunea anterioară și le puteți plasa aici. Acum schimbați textul acolo cu cel dorit.

Puteți utiliza widgetul Formulare în Elementor Pro pentru a crea un formular de contact printr-un simplu proces de glisare și fixare. După ce faceți acest lucru, formularul de contact va apărea pe pagină. Acum puteți face o personalizare suplimentară a formularelor. Iată modificările pe care le-am făcut:

• S-au adăugat câmpuri de formular și s-au schimbat dimensiunea câmpului.
• S-au schimbat textul, dimensiunea și alinierea butonului.
• Am adăugat e-mailul ca acțiune a butonului de trimitere și am adăugat detaliile e-mailului.
• Am ajustat golurile coloanei și am refăcut tipografia și culorile textului și câmpurilor
• Alte modificări necesare pentru ca formularul de contact să pară mai atrăgător .

Dacă utilizați orice plugin pentru formularul de contact, cum ar fi Gravity Forms, WPForms, Ninja Forms, etc., puteți utiliza widget-ul de formulare PowerPack pentru a stiliza formularul cu Elementor.

Acum, în coloana din dreapta, vom adăuga lista de prețuri pentru produse. Pentru aceasta, vom folosi widget-ul Meniu preț de la PowerPack. Pur și simplu trageți-l și fixați-l, adăugați detaliile și modificați designul și aspectul pentru același lucru. Așa ar arăta întreaga secțiune:

Intrați acum în Giveaway!

PowerPack Giveaway Găzduit de Cloudways

Înfășurându-l!

După ce ați făcut toate modificările, așa ar arăta întregul nostru aspect.

Acum puteți crea un aspect frumos pentru dvs. și cu Elementor și PowerPack pentru Elementor. În timp ce Elementor oferă o mulțime de caracteristici, PowerPack îl extinde și mai mult cu widget-uri creative, orientate spre funcționalitate. Cu peste 50 de widgeturi extrem de utile în setul de instrumente, puteți crea site-uri web mai rapid.

Elementor și PowerPack vă pot economisi timp, efort și vă pot ajuta să vă extindeți afacerea de design web. Nu numai acest lucru, ambele produse sunt susținute de o echipă uimitoare de experți WordPress, astfel încât să aveți o liniște sufletească completă.