Cum să transformați WordPress într-un constructor vizual

Sep 13, 2025
să
(Credit Imagine: Elementor / Joseph Ford)

Constructorii vizuali au existat pentru o lungă perioadă de timp pentru WordPress, dar au provocat întotdeauna diviziunea cu utilizarea lor. Majoritatea au avut dezavantaje semnificative în ceea ce privește viteza paginii și codul pe care îl generează și, mai des, blocurile de tragere și de picătură din ecranul de editare nu au fost o reprezentare realistă a rezultatului final. Pe de altă parte, uneori doriți doar să vă puteți proiecta și prototip rapid fără a fi nevoie să scrieți codul.

Utilizarea PageBuilder Plugin Elementor cu configurația potrivită, WordPress poate fi transformată într-un vizual minimalist Builder de site-uri web , aproape independent de temă, care are o gamă de setări, permițându-vă să creați design complexe cu ușurință.

Folosind implicit de douăzeci și nouăzeci Tema WordPress. , puteți construi o panza gata de utilizare care pot fi folosite pentru a prototipe sau a construi gata de producție WordPress site-uri . Cu această panza, vom face o pagină simplă cu două secțiuni și o formă de contact.

Vom face pagina de web prietenoasă și folosim două pluginuri, vom aborda principala preocupare cu utilizarea unui constructor vizual și vom minimiza timpul de încărcare deja minim al paginii. Alternativ, consultați Roundup-ul nostru de mare Tutoriale WordPress. pentru a vă perfecționa și abilitățile.

Utilizați pictograma din partea dreaptă sus a fiecărei imagini pentru ao mări

  • Cele mai bune servicii de găzduire WordPress în 2019

01. Instalați o copie a WordPress

Pentru a opri lucrurile, instalați o copie a WordPress pe sistemul pe care îl utilizați. Folosim un program numit Laragon, care oferă o opțiune de instalare rapidă pentru a crea o instanță pe mașina mea.

02. Scoateți părțile pe care nu le aveți nevoie

Give yourself a clutter-free page to work with

Dați-vă o pagină fără aglomerație pentru a lucra cu (Credit Imagine: Elementor / Joseph Ford)

Se îndreaptă spre pluginuri și ștergeți tot ceea ce vine asociat cu WordPress. La momentul scrierii, acesta va raționaliza eforturile noastre de a instala pluginul "Editor clasic" pentru a dezactiva noul Editorul Gutenburg. . Pentru a reduce dezordinea, ar trebui să mergem și la aspect & GT; Widget-uri și eliminați toate widgeturile.

03. Alegeți o temă cu un antet și subsol

Singura parte a temei pe care o vom folosi este antetul și subsolul - totul va fi dezbrăcat. Vom folosi implicit de douăzeci și nouă de temă și vă vom arăta câteva modificări rapide pentru a face să pară ascuțite. Când utilizați elementul, cu atât mai puțin tema face mai bine.

04. Instalați elementul și creați o pagină

You'll find Elementor in the WordPress plugins library

Veți găsi elector în biblioteca pluginurilor WordPress (Credit Imagine: Elementor / Joseph Ford)

Utilizați căutarea Plugin WordPress pentru a găsi Elementor și instalați-l. Odată instalat și activat, creați o pagină nouă. Denumiți noul "casă" și salvați-l ca un proiect, astfel încât să existe în baza de date. Faceți clic pe "Editați în elector." Aceasta va încărca constructorul vizual elementor.

05. Lățimea completă a paginii

Privind la pagină, este constrâns la aspectul cutii din tema noastră. Pentru a dezactiva acest lucru, faceți clic pe COG în partea stângă jos a editorului elementor și schimbați "aspectul paginii" la "Elementor Lățime completă". Dacă efectuați un site web fără mai multe pagini, puteți considera opțiunea "Elementor Canvas", care elimină și antetul și subsolul.

06. Adăugați un anumit conținut

Give yourself some content to work with

Dă-ți un anumit conținut pentru a lucra cu (Credit Imagine: Elementor / Joseph Ford)

Acum că avem o pagină goală, ar trebui să ne dăm ceva cu care să lucrăm. Faceți clic pe pictograma Grid elementor din partea dreaptă sus a editorului pentru a vedea toate elementele disponibile. Se adaugă un bloc de antet și un bloc de text prin glisarea acestora în mijlocul paginii. Aceste două elemente ne vor ajuta stilul nostru de tipografie.

07. Îndepărtați liniile de rubrică

Puteți observa când utilizați cele douăzeci și nouăzeci de teme că o linie este redată mai presus de toate titlurile. Să eliminăm acest lucru folosind instrumentul de personalizare WordPress. În timp ce suntem aici, voi adăuga, de asemenea, un logo în setările identității site-ului și câteva elemente de meniu. 

 H1: Înainte, H2: înainte de {
Afișaj: Nici unul;
}

08. Fixați lățimea conținutului

Ensure the content lines up with the header

Asigurați-vă că conținutul se fixează cu antetul (Credit Imagine: Elementor / Joseph Ford)

Secțiunea noastră de conținut nu se aliniază cu antetul. Acest lucru se datorează faptului că douăzeci de nouăzeci utilizează o marjă calculată pentru a seta lățimea antetului și a subsolului. Putem reproduce acest lucru pe secțiunile noastre elementare pentru consistența cu unele CSS.

De asemenea, ar trebui să creștem lățimea conținutului în pagina principală de setări elementare. 

 @Media numai ecran și (min-lățime: 768px) {
.ELementer-top-secțiune.Elementer-secțiunea-
boxed & gt; elemente-container {
Marja: 0 Calc (10% + 60px);
}
}

09. Faceți o secțiune de deschidere

Drag in the elements you want to include

Trageți în elementele pe care doriți să le includeți (Credit Imagine: Elementor / Joseph Ford)

Vom începe cu partea superioară a paginii, care va conține o cantitate mică de text și o imagine. Ștergeți secțiunea de la mai devreme și înlocuiți-o cu o nouă secțiune cu două coloane făcând clic pe Roșu Plus. Trageți într-un antet, un editor de text și un buton în coloana din stânga. În dreapta vom trage într-o imagine.

10. Adăugați un fundal

Selectați secțiunea fie plasând peste el și făcând clic pe fila albastră sau folosind navigatorul din partea dreaptă jos a butoanelor elementelor. Veți vedea trei file - aspect, stil și avansat.

Folosind fila Layout, dați secțiunii noastre o înălțime de 80VH. Selectați stilul pentru a găsi opțiunile și pentru a utiliza opțiunea de fundal pentru a seta un fundal de # 0073AA.

11. Stilul textului

You can change the font for your whole document in one go

Puteți schimba fontul pentru întregul dvs. document într-un singur lucru (Credit Imagine: Elementor / Joseph Ford)

Pentru a schimba fontul pentru întregul nostru document, putem face clic pe "Fonturile implicite" din meniul Hamburger din partea de sus a bara elementor. De asemenea, puteți să faceți clic pe elementele dvs. individuale de text și să utilizați fila Stil pentru a schimba culoarea și alte opțiuni.

12. Utilizați un efect de suprapunere de fond

O mare adăugare este abilitatea de a adăuga rapid suprapuneri de fundal din fila Stilk Style. Selectați secțiunea noastră și mergeți la fila de fundal. Dați fundalului nostru o imagine pentru a le oferi textura, apoi mergeți la "Overlay de fundal", dropdown de mai jos și selectați o suprapunere de fundal gradient.

13. Creați un apel la acțiune

A doua secțiune a paginii noastre va fi o secțiune de apel la acțiune. Vom încorpora formularul de contact 7, dar tot ce poate genera un cod scurt va funcționa. Faceți o nouă secțiune cu două coloane sau faceți clic dreapta pe ultima noastră secțiune și duplicați-o.

Instalați pluginul Formular de contact și generați codul scurt pentru formularul dvs. În coloana din dreapta, trageți într-un widget de scurtă durată și lipiți codul scurt în cutie.

14. prietenos mobil

Don't forget to tweak your design for mobile

Nu uitați să vă modificați designul pentru mobil (Credit Imagine: Elementor / Joseph Ford)

Pentru a accesa opțiunile mobile pentru pagina noastră, va trebui să activați "opțiunile responsabile" în partea de jos a panoului elementator. Prin selectarea modului "Mobile", putem vedea că secțiunile noastre vor avea nevoie de o pereche de căptușeală.

Folosind opțiunea mobilă, pe care o puteți verifica, asigurându-vă că există o pictogramă albastră lângă fiecare setare, alegerile noastre nu vor afecta vizualizarea principală de desktop. Cu toate acestea, orice modificare a structurii efectuate în acest mod vor afecta vizualizarea desktopului.

15. Optimizați imaginile

Pentru a minimiza preocupările privind viteza de încărcare a paginii, ar trebui să conducem o comprimare a imaginii. Acest lucru se poate face printr-un plugin sau prin intermediul serverului dvs. Web. Deocamdată, să folosim un plugin popular, EWWW Image Optimizor, pentru a seta o calitate maximă și o lățime pentru imaginile noastre și apoi rulați o optimizare.

16. Pagini cache pentru a stimula performanța

Make your site lightning-fast with help from a cache plugin

Faceți amploarea site-ului dvs. rapid cu ajutorul unui plugin de cache (Credit Imagine: Elementor / Joseph Ford)

În cele din urmă, vom instala un plugin de cache pentru a maximiza timpul de încărcare pentru pagina noastră. Există multe plug-uri cache acolo, dar în prezent, Memoria cache este un profil scăzut și funcționează bine cu această configurare.

Cu memoria cache este activată, site-ul se încarcă rapid. De asemenea, are un constructor vizual complet funcțional în fundal. Este panza perfectă de lucru rapidă pentru a vă proiecta.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Credit Imagine: Viitor)

Alăturați-vă la 26 septembrie pentru Generați CSS. , o conferință personalizată pentru designeri de web a fost adusă la dvs. de Creative Bloq, Net și Web Designer . Economisiți 50 de lire sterline cu un bilet de avion timpuriu când rezervați înainte de 15 august 2019.

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Cumpăra problema 287. sau Abonati-va .

Citeste mai mult:

  • 40 Tutoriale WordPress Brilliant
  • Utilizați WordPress ca un CMS fără cap
  • Ce este nou în WordPress 5.0?

să - Cele mai populare articole

Creați un bot personalizat

să Sep 13, 2025

(Credit Imagine: Web Designer) Slack este un instrument din ce în ce mai popular pentru întreprinderi și echipe ca..

Îmbunătățiți-vă abilitățile de artă concepte în Photoshop

să Sep 13, 2025

Pentru acest atelier, aș vrea să vă arăt un mod foarte distractiv de a schița personajele de la imaginația ta. Vă voi ară..

Cum se creează active digitale

să Sep 13, 2025

Pregătirea activelor pentru uz digital este o sarcină de bază pentru Junior designeri astăzi - și distinct de..

Cum să capturați lumina cu uleiuri

să Sep 13, 2025

Lumina este ceva care inspiră întotdeauna pictorii - indiferent dacă este soarele strălucind pe pietrele unei clădiri sau pe..

Creați cadre de stil în Photoshop

să Sep 13, 2025

Pagina 1 din 2: Pagina 1 Pagina 1 Pagina..

Cum să facem o mașină sport realistă

să Sep 13, 2025

În ultimii ani, mi-am gândit abilitățile în iluminare și de redare, precum și alte tehnici cu diferite motoare de redare, ..

Cum să obțineți mai mult din GIF-uri

să Sep 13, 2025

GIF-uri lucrează în cicluri fără sudură, care Rebecca mock. descrie ca "bucla perfectă". Această buclă ar trebui să ș..

Cum se proiectează un promo pentru un brand imaginar

să Sep 13, 2025

La proiectarea pentru un brand, fie că este vorba de una sau o pornire stabilită pe care o luați pe conducerea creativă, consistența în toate punctele de atingere este cheia. ..

Categorii