Cum să schimbi marginile în WordPress (Ghid pentru începători)

Modificarea marginilor în WordPress este o modalitate simplă de a îmbunătăți designul site-ului dvs. Marginile creează spațiu între elemente, făcând conținutul dvs. mai lizibil și mai atrăgător vizual.

Ca o practică generală, folosim întotdeauna margini și spațiere atunci când proiectăm site-urile noastre WordPress. Am observat că acest lucru are un impact pozitiv asupra modului în care utilizatorii interacționează cu paginile și conținutul nostru web.

În acest ghid pentru începători, vă vom arăta cum să adăugați și să ajustați marginile în WordPress. Vă vom învăța diferite metode pentru a schimba marginile în diverse zone ale site-ului dvs. WordPress.

Ce sunt marginile în WordPress și în designul web?

Marjele sunt spațiul adăugat în jurul unei pagini web sau al altor elemente dintr-o pagină web.

Gândește-te la o pagină web tipică ca la o foaie de hârtie goală. Marginile sunt spațiul alb sau gol din jurul marginilor hârtiei.

Scopul utilizării marginilor este de a asigura că elementele dintr-o pagină web nu par înghesuite.

Similar, marginile pot fi folosite în jurul diferitelor elemente din interiorul layout-ului paginii.

De exemplu, puteți schimba marginile din jurul imaginilor, astfel încât să nu fie prea aproape de text, sau puteți adăuga o margine pentru a lăsa spațiu între zona de conținut și bara laterală.

În acest articol, vom acoperi o mulțime de informații. Faceți clic pe linkurile de mai jos pentru a sări la orice secțiune doriți.

• Care este diferența dintre margine și spațiere interioară?
• De ce ai putea avea nevoie să adaugi sau să schimbi marginile în WordPress?
• Cum să adăugați margini în WordPress?
• Adăugarea marginilor în WordPress folosind editorul complet al site-ului
• Adăugarea marginilor în editorul de blocuri
• Adăugarea de margini în WordPress folosind SeedProd
• Schimbarea marginilor folosind Thrive Architect
• Modificarea marginilor în WordPress folosind cod CSS
• Adăugarea și modificarea marjelor folosind CSS personalizat în tema WordPress
• Utilizarea CSS personalizat pentru a modifica marginile în Editorul de site
• Adăugarea marginilor cu CSS în personalizatorul temei
• Schimbarea marginilor cu cod CSS personalizat folosind WPCode
• Întrebări frecvente despre marginile în WordPress

Care este diferența dintre margine și spațiere interioară?

Atât marginea, cât și spațierea sunt folosite pentru a adăuga spațiu alb în designul web. Cu toate acestea, sunt folosite foarte diferit.

Marginile adaugă spațiu gol în afara unui element, iar padding-ul adaugă spațiu gol în interiorul acestuia.

Marginile sunt folosite pentru a adăuga spațiu în afara unui element. Ele vă permit să vă asigurați că există mult spațiu între elementele de pe o pagină web.

Acum, să analizăm câteva exemple despre când să folosim marginile.

1. Adăugarea de margini pentru a crește spațiul dintre o imagine și text într-un articol.

2. Ajustarea marginilor pentru a adăuga spațiu între secțiuni, cum ar fi antetul și zona de conținut.

Padding-ul, pe de altă parte, este utilizat pentru a adăuga spațiu de amortizare între conținut și marginile unei casete sau ale unui element.

Iată câteva exemple despre când ați putea dori să folosiți padding suplimentar.

1. Ajustarea spațierii pentru a mări spațiul de umplutură în butoanele de apel la acțiune.

2. Mărirea spațierii într-o coloană de text

Atât spațierea (padding), cât și marginile (margins) sunt utilizate pe scară largă în designul web.

Utilizarea spațiilor goale adaugă spațiu de respirație oricărui design, ceea ce îl face mai ușor de utilizat și mai elegant.

Pentru mai multe detalii, consultați tutorialul nostru despre diferența dintre padding și margin în WordPress.

De ce ai putea avea nevoie să adaugi sau să schimbi marginile în WordPress?

Marginile sunt un aspect crucial al designului web. Ele fac ca site-ul dvs. să arate plăcut și ușor de utilizat.

Din experiența noastră în efectuarea testelor A/B, am constatat că utilizarea strategică a spațiului alb are adesea un impact pozitiv asupra conversiilor.

Când creezi un design mai curat și mai organizat, utilizatorii sunt mai predispuși să rămână pe site mai mult timp și să finalizeze acțiunile dorite.

Teme WordPress gestionează aspectul de design al site-ului tău WordPress. Majoritatea dintre ele fac deja o treabă excelentă în setarea regulilor CSS pentru a asigura mult spațiu liber folosind margini în întregul aspect al temei tale.

Acestea fiind spuse, este posibil să fie necesar ocazional să adăugați margini pentru a ajusta lucrurile.

De exemplu, s-ar putea să nu vă placă marginea din jurul meniurilor de navigare sau să doriți să adăugați mai multă margine în jurul butoanelor de apel la acțiune.

Similar, uneori puteți simți că elementele sunt prea apropiate unul de celălalt sau prea depărtate.

În acest caz, va trebui să modificați marginile în WordPress singur.

Cum să adăugați margini în WordPress?

Există numeroase modalități de a adăuga margini în WordPress.

În funcție de locul unde doriți să adăugați margini și de opțiunile disponibile în tema dvs. WordPress, va trebui să alegeți o metodă care funcționează pentru dvs.

Să începem cu opțiunile implicite încorporate în WordPress, deoarece sunt cele mai ușoare pentru începători.

Adăugarea marginilor în WordPress folosind editorul complet al site-ului

Dacă folosiți o temă bazată pe blocuri cu suport pentru editorul complet al site-ului, puteți folosi editorul integrat al site-ului pentru a modifica marginile oriunde pe site-ul dvs. WordPress.

O modalitate ușoară de a verifica este să vă uitați la tabloul de bord WordPress. Dacă vedeți Appearance » Editor, atunci aveți o temă bazată pe blocuri. Dacă vedeți Appearance » Customize în schimb, atunci puteți trece la o altă metodă de mai jos.

Mai întâi, trebuie să accesați Aspect » Editor pentru a lansa editorul site-ului.

Odată intrat în editorul site-ului, dă clic pentru a alege un șablon din coloana din stânga sau dă clic oriunde în fereastra de previzualizare.

Apoi, faceți clic pe zona sau elementul unde doriți să schimbați marginile. În coloana din dreapta, veți vedea opțiunea de a ajusta marginile sub fila „Style”.

Pe măsură ce ajustezi marginile, editorul va evidenția zona de margine.

Puteți alege, de asemenea, să adăugați marje în partea de sus, de jos, din dreapta sau din stânga.

Adăugarea marginilor în editorul de blocuri

Dacă lucrați la o postare de blog sau la o pagină, veți folosi editorul de blocuri.

Editorul de blocuri din WordPress îți permite să adaugi și să schimbi marginile pentru diverse blocuri.

Pur și simplu faceți clic pe blocul unde doriți să adăugați/ajustați marginile. Sub setările blocului, comutați la fila „Stil” și derulați în jos la opțiunea „Dimensiuni” sau „Margini”.

Adăugarea de margini în WordPress folosind SeedProd

SeedProd este cel mai bun plugin de constructor de pagini WordPress de pe piață. Îți permite să creezi cu ușurință pagini personalizate pentru site-ul tău.

Puteți chiar să îl utilizați pentru a crea o temă WordPress personalizată de la zero.

Mai multe dintre mărcile noastre partenere și-au proiectat întregul site web cu SeedProd și le place să îl folosească. Pentru a afla mai multe, consultați recenzia noastră completă SeedProd.

Constructorul de pagini intuitiv drag-and-drop al SeedProd vă permite să ajustați cu ușurință marginile oricărui element din editor.

Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalezi un plugin WordPress.

Apoi, trebuie să accesați SeedProd » Pagini de destinație și apoi să faceți clic pe butonul „Adăugați o pagină de destinație nouă”.

După aceea, vi se va cere să alegeți un șablon pentru pagina dvs.

SeedProd vine cu zeci de șabloane gata făcute pe care le puteți folosi ca punct de plecare, sau puteți începe cu un șablon gol.

Faceți clic pentru a alege șablonul, apoi furnizați un nume pentru pagina dvs. de destinație.

Aceasta va lansa constructorul de pagini SeedProd.

Veți vedea o previzualizare live a paginii dvs. în partea dreaptă. Și elementele pe care le puteți adăuga la pagina dvs. în coloana din stânga.

Puteți da clic pe orice element de pe pagină pentru a-l edita.

Făcând clic pe un element, acesta va fi selectat și veți vedea opțiunile sale în coloana din stânga. De aici, comutați la fila „Avansat” și faceți clic pe opțiunea „Spațiere”.

Puteți schimba marginile și spațierea pentru elementul selectat de aici.

După ce ați terminat de editat pagina, nu uitați să faceți clic pe butonul „Save” și „Publish” din colțul din dreapta sus.

După aceea, poți vizita site-ul tău pentru a vedea modificările în acțiune.

Schimbarea marginilor folosind Thrive Architect

Thrive Architect este un constructor de pagini WordPress ușor de utilizat, care vă permite să folosiți o interfață drag-and-drop pentru a proiecta pagini WordPress.

În timpul testării, am constatat că are peste 300 de șabloane pe care le puteți folosi ca punct de plecare. În plus, îl puteți folosi și pentru a edita postările și paginile dvs. WordPress, împrumutând aspectul și stilul temei dvs. WordPress existente.

Pentru a afla mai multe, consultați recenzia noastră completă Thrive Architect.

Pentru a instala Thrive Architect, va trebui mai întâi să vă conectați la contul dvs. pe site-ul Thrive Themes.

De acolo, trebuie să descărcați și să instalați pluginul Thrive Product Manager. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.

După activare, trebuie să vizitați pagina Thrive Product Manager.

Faceți clic pe butonul „Autentificați-vă în contul meu” pentru a conecta WordPress la contul dvs. Thrive Themes.

Odată conectat, veți vedea lista produselor Thrive Themes disponibile sub contul dvs.

Continuați și faceți clic pe caseta de selectare „Instalați produsul” sub Thrive Architect, apoi faceți clic pe butonul „Instalați produsele selectate” din partea de jos.

Thrive Product Manager va instala acum pluginul Thrive Architect pentru dvs.

După aceea, puteți edita sau crea o nouă postare sau pagină WordPress și faceți clic pe butonul „Edit with Thrive Architect” sau „Launch Thrive Architect”.

Thrive Architect vă va cere să alegeți un șablon dacă este o pagină nouă.

Puteți utiliza șablonul temei dvs. pentru a crea o pagină „Normală” sau un șablon de pagină „Pre-construită de destinație”.

Dacă alegeți opțiunea „Pagină de destinație preconstruită”, atunci pluginul vă va afișa o mulțime de șabloane din care să alegeți.

Pur și simplu faceți clic pentru a selecta pe cel care seamănă cu ceea ce doriți să creați.

Fie că este vorba de o pagină normală (folosind stilurile temei tale) sau de o pagină de destinație, constructorul de pagini Thrive Architect va avea aceleași caracteristici.

Veți vedea o previzualizare live a paginii dvs. cu o bară de instrumente în dreapta și un panou de setări în stânga.

Puteți indica și face clic pe un element pentru a-l selecta. Sau faceți clic pe butonul de adăugare [+] din bara de instrumente pentru a adăuga un element nou.

Odată ce faceți clic pentru a selecta și edita un element, setările acestuia vor apărea în coloana din stânga.

De aici, faceți clic pe fila „Aspect și poziție” pentru a modifica marginile și spațierea interioară.

Veți vedea o reprezentare vizuală a marginilor și a spațierii interioare.

Plasați mouse-ul peste orice parte a marginii și trageți mânerul pentru a mări sau micșora marginea.

Poți repeta procesul pentru a schimba marginile pe oricare dintre cele patru laturi.

Odată ce ați terminat, nu uitați să faceți clic pe butonul Salvare Lucrare, apoi selectați opțiunea Salvare și Ieșire la Editor Postare.

Acum puteți face clic pe butonul „Publicați” sau „Salvați” pentru a salva postarea sau pagina WordPress.

Modificarea marginilor în WordPress folosind cod CSS

Această metodă necesită adăugarea de cod CSS la tema dvs. WordPress. Veți avea, de asemenea, nevoie de o înțelegere foarte de bază a HTML și CSS.

Cu toate acestea, această metodă vă oferă mai multă flexibilitate, deoarece puteți alege manual zona în care doriți să adăugați sau să ajustați marginile.

Adăugarea și modificarea marjelor folosind CSS personalizat în tema WordPress

WordPress vă permite să salvați CSS personalizat în opțiunile temei WordPress. Cu toate acestea, în funcție de tema WordPress, există mai multe moduri de a face acest lucru.

Înainte de a adăuga sau modifica margini folosind CSS, este posibil să fie necesar să aflați ce element trebuie să vizați cu codul CSS.

De exemplu, dacă doriți să modificați marginile din jurul corpului paginii, puteți utiliza următorul cod:

body { 
margin:50px; 
}

În acest cod, „px” înseamnă pixeli, o unitate comună de măsură pentru ecrane. Utilizarea proprietății margin cu o singură valoare de acest gen setează marginea pentru toate cele patru laturi (sus, dreapta, jos și stânga) în același timp.

Cea mai ușoară modalitate de a găsi elementul de vizat este prin utilizarea instrumentului Inspect din browserul dvs.

Deschideți site-ul dvs. web într-o nouă filă de browser și treceți mouse-ul peste elementul pentru care doriți să schimbați marginile. După aceea, faceți clic dreapta și selectați „Inspect” din meniul browserului.

Aceasta va împărți ecranul browserului și veți vedea codul HTML și CSS din spatele paginii.

Puteți muta mouse-ul peste cod, iar browserul va evidenția zona afectată de acesta.

În cod, puteți vedea elementul HTML sau clasa CSS pe care trebuie să o vizați cu CSS-ul dvs. personalizat. Gândiți-vă la aceasta ca la „adresa” părții specifice a paginii pe care doriți să o stilizați.

Poți chiar să-ți încerci marginile aici pentru a previzualiza cum va arăta.

Cu toate acestea, aceste modificări nu sunt salvate în tema dvs. și vor dispărea când reîncărcați sau închideți fila browserului.

Să parcurgem diferitele moduri în care puteți salva acest CSS personalizat în WordPress.

Utilizarea CSS personalizat pentru a modifica marginile în Editorul de site

Dacă utilizați o temă bazată pe blocuri cu suport pentru editorul complet al site-ului. Atunci, iată cum puteți adăuga CSS personalizat temei dvs.

Mai întâi, accesați pagina Appearance » Editor pentru a lansa editorul de site, apoi comutați la panoul „Styles”.

În partea de jos a panoului „Stiluri”, faceți clic pe fila „CSS suplimentar”.

Aceasta va deschide un editor de text unde puteți adăuga codul CSS personalizat. Codul dvs. CSS se va aplica imediat și veți putea vedea modificările apărând pe ecran.

Odată ce sunteți mulțumit de modificări, nu uitați să faceți clic pe butonul „Salvare” pentru a vă stoca modificările.

Adăugarea marginilor cu CSS în personalizatorul temei

Dacă utilizați o temă clasică (fără suport pentru editorul de site), atunci puteți salva CSS-ul personalizat în personalizatorul temei.

Accesați pagina Aspect » Personalizare pentru a lansa personalizatorul temei.

Personalizatorul va afișa opțiuni diferite în funcție de tema WordPress.

Trebuie să dai clic pe fila CSS suplimentar pentru a o extinde.

Fila se va glisa pentru a vă afișa o casetă simplă unde puteți adăuga CSS-ul personalizat.

Imediat ce adăugați o regulă CSS validă, o veți putea vedea aplicată în panoul de previzualizare live al site-ului dvs. web.

Odată ce sunteți mulțumit de modificări, faceți clic pe butonul „Publicare” pentru a salva modificările.

Schimbarea marginilor cu cod CSS personalizat folosind WPCode

Cel mai simplu mod de a adăuga cod CSS personalizat în WordPress este prin utilizarea pluginului WPCode.

Este cel mai bun plugin de fragmente de cod WordPress care vă permite să adăugați orice cod CSS/HTML/PHP/JavaScript pe site-ul dvs. WordPress fără a-l deteriora.

În timpul evaluării noastre, am constatat că este extrem de ușor de utilizat. Pentru a afla mai multe despre experiența noastră, consultați recenzia noastră detaliată despre WPCode.

Avantajul utilizării WPCode este că nu veți pierde modificările CSS atunci când schimbați tema WordPress.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WPCode. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.

După activare, accesați pagina Code Snippets » + Add New.

Plasați cursorul mouse-ului peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” din biblioteca de fragmente de cod și faceți clic pe butonul „Utilizați fragmentul”.

Apoi, în partea de sus a paginii, adăugați un titlu pentru fragmentul dvs. CSS personalizat. Acesta poate fi orice vă ajută să identificați codul.

După aceea, scrieți sau lipiți CSS-ul personalizat în caseta „Previzualizare cod” și setați „Tipul codului” selectând opțiunea „Fragment de cod” din meniul derulant.

De exemplu, dacă dorești să adaugi sau să schimbi marginile din jurul întregului corp al paginii web, poți folosi următorul cod CSS:

body { 
margin:50px;
}

Apoi, derulați în jos la secțiunea „Inserare” și selectați metoda „Inserare automată” pentru a executa codul pe întregul site WordPress.

Dacă doriți să executați codul doar pe anumite pagini sau postări, puteți alege metoda „Shortcode”.

Acum, trebuie să reveniți în partea de sus a paginii și să comutați comutatorul la „Activ”.

În final, faceți clic pe butonul „Salvează fragment” pentru a stoca modificările.

Acum puteți vizita site-ul dvs. web pentru a vedea CSS-ul personalizat în acțiune.

Întrebări frecvente despre marginile în WordPress

Iată câteva întrebări pe care cititorii noștri le pun frecvent despre adăugarea de margini în WordPress:

Care este principala diferență între margine și padding?

Margin este spațiul din afara marginii unui element, care creează distanță între acesta și alte elemente. Padding este spațiul din interiorul marginii unui element, creând o pernă între conținut și marginea în sine.

Gândește-te la margine ca la spațiul dintre ramele de tablouri pe un perete, iar la spațierea interioară (padding) ca la passe-partout-ul din interiorul unei singure rame de tablou.

Pentru mai multe informații, puteți consulta și ghidul nostru despre padding vs margin în WordPress.

Cum pot schimba marginile specific pentru dispozitivele mobile?

Pentru a ajusta marginile pentru mobil, puteți utiliza interogări media CSS. Acest lucru vă permite să aplicați stiluri specifice pentru diferite dimensiuni ale ecranului.

Pluginurile de tip page builder precum SeedProd oferă, de asemenea, controale specifice dispozitivului, permițându-vă să modificați cu ușurință marginile pentru vizualizările desktop, tabletă și mobil.

De ce nu apare opțiunea de margine pentru un anumit bloc în editorul WordPress?

Nu toate blocurile WordPress au controale de margine încorporate, deoarece acest lucru poate depinde de tema dvs.

Dacă opțiunea lipsește, poți încadra blocul într-un bloc Grup, care are setări de margine și spațiere. Poți folosi, de asemenea, una dintre metodele CSS personalizate pentru a viza direct blocul.

Este mai bine să folosiți un plugin sau CSS personalizat pentru a schimba marginile?

Pentru începători, un plugin de constructor de pagini precum SeedProd este adesea mai ușor, deoarece oferă o interfață vizuală.

Pentru utilizatorii mai avansați sau pentru a face ajustări la nivelul întregului site, CSS personalizat vă oferă un control mai precis.

Utilizarea unui plugin precum WPCode pentru a adăuga CSS-ul dvs. este o alegere excelentă, deoarece vă protejează codul atunci când actualizați sau schimbați tema.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați sau să schimbați marginile în WordPress. S-ar putea să doriți, de asemenea, să învățați cum să puneți imagini una lângă alta în WordPress sau cum să adăugați butoane pentru subliniere și aliniere text în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.