Lihtsate CSS-võrkude paigutuste integreerimine WordPressi

Järjepideva ja tugeva võrgukujunduse saamine WordPressi võib olla valutu protsess, kui kasutate õigeid tööriistu. Selles juhendis õpid samm-sammult, kuidas kiiresti luua võrgusüsteem WordPressis, mis on väga kerge ja kergesti modifitseeritav. Hoiame disaini lihtsana, et saaksime oma võrku seadistada, kasutades selleks sobivaid vahendeid, kuid pidage meeles, et vajadusel saate võrku ise kujundada..

Ma kasutan WordPressis vaikimisi Pool teema, et see õpetus lihtsalt näitaks sulle nullist lähtuvat lähenemist võrkude õigeks saamiseks.

1. samm: määrake oma võrgulaius

Enne alustamist peate määrama, kui suur peab teie võrk olema. Minu WordPressi saidi jaoks näen, et minu peamise veeru laius on 450px, kasutades Google Chrome'i "Kontrolli elementi" funktsiooni, kui objektile paremklõpsate. See on kiireim viis, mille ma leidsin, mis võib kiiresti määrata veebilehe objekti laiuse ja kõrguse.

Samm 2: Grid Designer

Selle asemel, et luua võrku, mida soovid teha, soovitan ma minna ühe paljudest võrgugeneraatori tööriistadest. Selle juhendi puhul kasutan MindPlay'i võrgugeneraatorit. See on väga lihtne ja kerge võrgugeneraator.

Ma tahan kolme veeru kuva ja ma pean veenduma, et minu pikslid on 450 juures. Seega muutke vastavalt ja vahele vahekaart „Eksport”. Me ei lähe üle * tüpograafia selle juhendi funktsioonid, kuigi see on kindlasti väärt uurimist ise.

Vahekaardil Eksport kasutage kõige ülemist "Style Sheet" kaadrit ja liikuge allapoole, kuni näete "Grid" kommentaari. Te kopeerite kõike kommentaarist selle kaadri põhjale. See peaks olema vaid 30 rida

.
 
 
 
3. samm: WordPressi stiilitabeli värskendamine
 
Logige sisse oma WordPress saidile ja minge välimusele> Redaktor.
 
 
 
Redaktori paneeli alumises paremas servas näete a Styles.css fail (või midagi sarnast, sõltuvalt teie teemast). Selle avamiseks klõpsake seda.
 
 
 
Liikuge lehe alumisse serva ja kleepige oma preemia MindPlay.dk-st:
 
 
 
4. samm: Võrgu rakendamine
 
Võrgu kasutamiseks saate lihtsalt luua a 
 klassi "võrk". Võrgu iga ala on defineeritud CSS-is. Avage uus leht või postitus. Võrgu ehitamise alustamiseks minge vahekaardile HTML.
 
 
 
Siin on mõned näidisvormid, mida saate paigale panna, et alustada:
 
 
  
Vasak veerg
  
Keskmine veerg
  
Parempoolne veerg
  
 
 
Siin näeb WordPressis välja:
 
 
 
Salvestage / värskendage leht ja vaadake tulemusi. Minu puhul on see saidi kodulehekülg:
 
 
 
Nagu näete ülaltoodud ekraanipildist, on meil kolm veergu ja kõik on õige seal, kus me ootame seda. Saate lisada nii palju ridu kui soovite, alustades lihtsalt järgmistest 
:
 
 
   
Vasak veerg
  
Keskmine veerg
  
Parempoolne veerg
    
Vasak rida # 2
  
Keskmine rida # 2
  
Parem rida # 2
  
 
Siin on, kuidas see siiani näeb:
 
 
 
Nüüd saate lisada pilte või teksti ja kujundada iga rida täpselt nii, nagu soovite.
 
Näpunäiteid
 
Mõnes brauseris võib tekkida probleeme, kui teil on rohkem kui üks rida. Selle probleemi ümberlülitamiseks peate muutma varu paremale (.grid-m4, meie puhul) kõrgusele, mida soovite iga rea ​​jaoks. Kui kasutate pilte, mis on 250 pikslit suurusega 250 pikslit, siis tehke rea kõrgus .grid-m4 olema 250 pikslit:
 
.grid-m4 float: vasakule; laius: 20 px; kõrgus: 250 px; 
 
See tagab teie .grid-m1 järgmise rea vasakus servas ei libistata üle selle rea.
 
Kui soovid kujundada kogu ruudustiku tausta, peate reguleerima .võrku klassi. Oletame, et teie ruudul on neli rida, millest igaüks on 250 pikslit. Te soovite lisada kõrgusele .grid klassile 1000 px, nii et kõik lisatud kujunduselemendid katavad kogu võrgukujunduse.
 
.võrk laius: 450 px; kõrgus: 1000 px; marginaal: auto; 
 
Sõltuvalt kasutatavast MindPlay.dk võrgugeneraatori versioonist ei pruugi sait ".grid-m4" genereerida ja selle asemel peate kasutama .grid-m1 pärast seda .grid-c3 veenduge, et teie võrk ulatub õigesse kohta:
 
  
Vasak veerg
  
Keskmine veerg
  
Parempoolne veerg
  
 
Lõpptulemused 
 
Järgnevalt näevad minu lõpptulemused kahe rea ja mõne lihtsa graafikaga:
 
 
 
Lõbutsege projekteerimisel ja pidage meeles, et saate kujundada oma võrku mis tahes viisil, mida soovid.
 
Toimetaja märkus: See postitus on kirjutatud Tara Hornor Hongkiat.com jaoks. Tara on omandanud inglise keele kraadi ja kirjutab turunduse, reklaami, brändi, graafilise disaini ja töölaua kirjastamise teemal. Lisaks oma kirjutamiskarjäärile naudib Tara ka aega oma abikaasa ja kahe lapsega.