Integrarea layout-urilor simple de CSS Grid în WordPress

Obținerea unui aspect consistent, solid al grila în WordPress poate fi un proces fără durere dacă folosiți instrumentele potrivite. În acest tutorial, veți învăța pas cu pas cum să configurați rapid un sistem de grilă în WordPress, care este foarte ușor și ușor de modificat. Vom păstra design-ul simplu, astfel încât să ne putem concentra pe folosirea instrumentelor potrivite pentru a vă configura grilă, dar rețineți că puteți modela grila pe cont propriu dacă este necesar.

Voi folosi o temă implicită pentru Pool în WordPress pentru acest tutorial doar pentru a vă arăta o abordare "pornire de la zero" pentru a obține grila exactă.

Pasul 1: Determinați lățimea rețelei

Înainte de a începe, trebuie să determinați cât de mare va fi grila dumneavoastră. Pentru site-ul meu WordPress, văd că lățimea coloanei mele principale este de 450 pixeli utilizând caracteristica "Inspectare Element" a Google Chrome când faceți clic dreapta pe un obiect. Acesta este cel mai rapid mod pe care l-am găsit că poate determina rapid lățimea și înălțimea unui obiect de pe o pagină Web.

Pasul 2: Designer de rețea

În loc să construiți o grilă pe mâini, pe care o puteți face dacă doriți, vă recomand să mergeți cu unul din multele instrumente de generare a rețelei. Pentru acest tutorial, voi folosi generatorul de rețea de MindPlay. Este un generator foarte simplu și ușor de rețea.

Vreau un afișaj cu trei coloane și trebuie să mă asigur că pixelii mei sunt la 450. Deci, ajustați corespunzător și treceți la fila "Export". Nu vom trece peste *tipografie caracteristici în acest tutorial, deși acest lucru este cu siguranță merită explorat pe cont propriu.

În fila Export, utilizați cel mai mare cadru "Stil" și derulați în jos până când vedeți comentariul "Grilă". Veți copia totul din comentariu în partea de jos a acestui cadru. Ar trebui să fie doar aproximativ 30 de linii

Pasul 3: Actualizarea foii de stil WordPress

Conectați-vă la site-ul dvs. WordPress și mergeți la Aspect> Editor.

În partea din dreapta-jos a panoului editorului, veți vedea a styles.css fișier (sau ceva similar, în funcție de tema dvs.). Faceți clic pe acesta pentru ao deschide.

Derulați până la partea de jos a colii și inserați-vă preul din MindPlay.dk:

Pasul 4: Implementarea rețelei

Pentru a utiliza grila, creați pur și simplu a

cu clasa "grilă". Fiecare zonă a rețelei este definită în CSS. Deschideți o nouă pagină sau o postare. Accesați fila HTML pentru a începe să vă construiți grila.

Iată câteva eșantioane pe care le poți lipi pe loc pentru a începe să începi:

   Coloana stângă
  Coloana de mijloc
  Coloana dreaptă

Iată cum arată în WordPress:

Salvați / actualizați pagina și examinați rezultatele. În cazul meu, aceasta este pagina de pornire a site-ului:

După cum puteți vedea din ecranul de mai sus, avem trei coloane și totul este exact unde ne așteptăm ca acesta să fie. Puteți adăuga cât mai multe rânduri pe care le doriți, pornind pur și simplu cu următoarele

    Coloana stângă
  Coloana de mijloc
  Coloana dreaptă
    Rândul stânga # 2
  Rândul mijlociu # 2
  Rândul drept # 2

Iată cum arată până acum:

Acum puteți adăuga imagini sau text și puteți personaliza fiecare rând exact așa cum doriți.

Sfaturi pentru optimizare

Este posibil să aveți probleme în unele browsere când aveți mai mult de un rând. Pentru a rezolva această problemă, va trebui să faceți marja pe extrema dreaptă (.grid-m4, în cazul nostru) până la înălțimea pe care doriți să fie fiecare rând. Dacă utilizați imagini care sunt de 250 x 250 pixeli, faceți înălțimea rândului în .grid-m4 pentru a fi 250px:

.grilă-m4 float: stânga; lățime: 20px; înălțime: 250px;

Acest lucru vă va face sigur .grid-m1 în partea stângă a rândului următor nu plutește până la rândul de deasupra lui.

Dacă doriți să modelați fundalul întregii grile, va trebui să reglați înălțimea .grilă clasă. Deci, să spunem că aveți patru rânduri pe grilă, fiecare la 250px. Veți dori să adăugați o înălțime la clasa .grid la 1000px, astfel încât orice elemente de styling pe care le adăugați să acopere întregul design al rețelei.

.grilă lățime: 450px; înălțime: 1000px; marja: auto;

În funcție de versiunea generatorului de grilă MindPlay.dk pe care îl utilizați, site-ul poate să nu genereze ".grid-m4" și în schimb va trebui să utilizați .grid-m1 după .grid-c3 pentru a vă asigura că grila dvs. se extinde până la locul potrivit:

  Coloana stângă
  Coloana de mijloc
  Coloana dreaptă

Rezultatele finale

Iată ce arată rezultatele mele finale cu două rânduri și câteva grafice simple:

Distrează-te și concepeți-vă că vă puteți modela grila în orice fel doriți.

Nota editorului: Această postare este scrisă de Tara Hornor pentru Hongkiat.com. Tara are o diplomă în limba engleză și scrie despre marketing, publicitate, branding, design grafic și publicații desktop. În plus față de cariera ei de scriere, Tara se bucură și de petrecerea timpului cu soțul și cu doi copii.