Paprastų CSS tinklelio išdėstymų integravimas į WordPress

Nuoseklus ir tvirtas tinklo išdėstymas į „WordPress“ gali būti neskausmingas procesas, jei naudojate tinkamus įrankius. Šioje pamokoje jūs išmoksite žingsnis po žingsnio, kaip greitai sukurti „WordPress“ tinklą, kuris yra labai lengvas ir lengvai modifikuojamas. Mes išsaugosime dizainą paprastą, kad galėtume sutelkti dėmesį į tinkamų įrankių naudojimą, kad sukonfigūruotų jūsų tinklą, tačiau nepamirškite, kad, jei reikia, galite stiliuoti tinklelį..

Aš naudosiu numatytąjį „Pool“ temą „WordPress“, kad ši pamoka tiesiog parodytų „pradžią nuo nulio“ požiūrio į tinklų teisingumą.

1 žingsnis: nustatykite tinklelio plotį

Prieš pradėdami, turite nustatyti, kiek turi būti jūsų tinklas. Mano „WordPress“ svetainėje matau, kad mano pagrindinio stulpelio plotis yra 450 pikselių, naudojant „Google Chrome“ funkciją „Apžiūrėti elementą“, kai dešiniuoju pelės klavišu spustelėsite objektą. Tai greičiausias būdas, kurį aš rasiu, kad galiu greitai nustatyti objekto plotį ir aukštį tinklalapyje.

2 žingsnis: tinklelio dizaineris

Vietoj to, kai norite sukurti tinklelį, kurį galite padaryti, jei norite, siūlau eiti su vienu iš daugelio galimų tinklelio generatoriaus įrankių. Šiai pamokai naudosiu „MindPlay“ tinklelį. Tai labai paprastas ir lengvas tinklo generatorius.

Noriu trijų stulpelių ekrano ir turiu įsitikinti, kad mano pikseliai yra 450. Todėl atitinkamai pakoreguokite ir pereikite prie skirtuko „Eksportuoti“. Mes nebebusime per * tipografija šios pamokos funkcijos, nors tai tikrai verta išsiaiškinti.

Skirtuke Eksportuoti naudokite didžiausią „Stiliaus lapas“ rėmelį ir slinkite žemyn, kol pamatysite komentarą „Tinklelis“. Viskas bus nukopijuota iš komentaro į šio rėmelio apačią. Tai turėtų būti tik apie 30 eilučių

3 žingsnis: „WordPress“ stilių lentelės atnaujinimas

Prisijunkite prie „WordPress“ svetainės ir eikite į „Išvaizda“ redaktorių.

Redaktoriaus skydelio apačioje dešinėje matysite a Styles.css failas (arba kažkas panašaus, priklausomai nuo jūsų temos). Spustelėkite šį, kad jį atidarytumėte.

Pereikite prie lapo apačios ir įklijuokite savo iš anksto „MindPlay.dk“:

4 žingsnis: Tinklelio diegimas

Norėdami naudoti tinklelį, tiesiog sukurkite a

klasė "tinklelis". Kiekviena tinklo sritis yra apibrėžta CSS. Atidarykite naują puslapį arba įrašą. Eikite į HTML skirtuką, kad pradėtumėte kurti tinklelį.

Štai keletas pavyzdžių, kuriuos galite įklijuoti į vietą, kad pradėtumėte:

   Kairė stulpelis
  Vidurio stulpelis
  Dešinė skiltis

Štai ką atrodo „WordPress“:

Išsaugokite / atnaujinkite puslapį ir peržiūrėkite rezultatus. Mano atveju, tai yra svetainės pagrindinis puslapis:

Kaip matote iš pirmiau pateikto ekrano, mes turime tris stulpelius ir viskas yra teisinga ten, kur tikimės, kad tai bus. Galite pridėti tiek eilių, kiek norite, tiesiog pradėdami toliau pateiktą

    Kairė stulpelis
  Vidurio stulpelis
  Dešinė skiltis
    Kairė eilutė # 2
  Vidutinė eilutė # 2
  Dešinė eilutė # 2

Štai kaip atrodo iki šiol:

Dabar galite pridėti vaizdų ar teksto ir stilius kiekvienai eilutei tiksliai taip, kaip norite.

Patarimai, kaip keisti

Kai kuriose naršyklėse gali kilti problemų, kai turite daugiau nei vieną eilutę. Jei norite išspręsti šią problemą, turėsite padaryti dešinėje esančią maržą (.grid-m4, mūsų atveju) iki aukščio, kurį norite kiekvienoje eilutėje. Jei naudojate 250px 250 pikselių vaizdus, tada eilutėje nustatykite aukštį .grid-m4 būti 250 pikselių:

.grid-m4 float: kairėje; plotis: 20px; aukštis: 250 pikselių;

Tai užtikrins, kad jūsų .grid-m1 kairėje kitos eilutės pusėje nėra plūduriuojančių iki eilutės virš jo.

Jei norite sukurti viso tinklelio foną, turėsite sureguliuoti .tinklelis klasė. Tarkime, jūs turite keturias eilutes ant jūsų tinklelio, kiekvienas - 250 pikselių. Norėsite pridėti „.grid“ klasės aukštį 1000px, kad bet kokie pridedami stiliaus elementai apimtų visą tinklelio dizainą.

.tinklelis plotis: 450px; aukštis: 1000px; marža: auto;

Priklausomai nuo naudojamo „MindPlay.dk“ tinklo generatoriaus versijos, svetainė gali nesukurti „.grid-m4“ ir vietoj to turėsite naudoti .grid-m1 po to .grid-c3 užtikrinti, kad jūsų tinklelis tektų tinkamą vietą:

  Kairė stulpelis
  Vidurio stulpelis
  Dešinė skiltis

Galutiniai rezultatai

Štai ką mano galutiniai rezultatai atrodo su dviem eilėmis ir kai kuriomis paprastomis grafikomis:

Smagiai projektuokite ir nepamirškite, kad galite tinkinti savo tinklą bet kokiu būdu.

Redaktoriaus pastaba: Šį įrašą parašė Tara Hornor už Hongkiat.com. Tara turi anglų kalbos laipsnį ir rašo apie rinkodarą, reklamą, prekės ženklą, grafinį dizainą ir leidybą. Tara taip pat mėgsta praleisti laiką su vyru ir dviem vaikais.