Integriranje jednostavnih CSS grid izgleda u WordPress

Dobivanje konzistentnog, čvrstog rasporeda u WordPress-u može biti bezbolan proces ako koristite prave alate. U ovom tutorialu, učit ćete korak po korak kako brzo postaviti grid sustav u WordPressu koji je vrlo lagan i jednostavan za mijenjanje. Dizajn ćemo zadržati jednostavnim kako bismo se mogli usredotočiti na korištenje odgovarajućih alata za postavljanje mreže, ali imajte na umu da možete sami oblikovati mrežu ako je potrebno.

Koristit ću zadanu temu Poola u WordPressu za ovaj vodič samo da bih vam pokazao pristup "počnite od nule" kako bi mreže bile ispravne.

Korak 1: Odredite širinu mreže

Prije početka morate odrediti koliko će široka mreža trebati biti. Za moju WordPress stranicu vidim da je širina mog glavnog stupca 450px pomoću značajke Google Chrome "Pregledaj element" kada desnom tipkom miša kliknete na objekt. To je najbrži način na koji sam mogao brzo odrediti širinu i visinu objekta na web-stranici.

Korak 2: Dizajner mreže

Umjesto ručne izrade rešetke, koju možete učiniti ako želite, predlažem da idete s jednim od mnogih dostupnih alata za generatore mreže. Za ovaj tutorial, koristit ću mrežni generator MindPlay. To je vrlo jednostavan i lagan mrežni generator.

Želim prikaz na tri stupca i moram provjeriti jesu li moji pikseli na 450. Stoga prilagodite u skladu s tim i preskočite na karticu "Izvoz". Nećemo prelaziti *tipografija značajke u ovom tutorial, iako je ovo svakako vrijedi istraživati na svoju vlastitu.

Na kartici Izvoz upotrijebite okvir najvišeg "Stilskog lista" i pomaknite se prema dolje dok ne vidite komentar "Grid". Kopirati ćete sve iz komentara na dno okvira. Trebalo bi biti samo oko 30 redaka

Korak 3: Ažuriranje WordPress stilova

Prijavite se na svoju WordPress stranicu i idite na Appearance> Editor.

Na donjem desnom dijelu ploče uređivača, vidjet ćete a styles.css datoteku (ili nešto slično, ovisno o vašoj temi). Kliknite da biste ga otvorili.

Pomaknite se do dna lista i zalijepite svoj pre iz MindPlay.dk:

Korak 4: Implementacija mreže

Da biste koristili mrežu, jednostavno stvorite

s klasom "grid". Svako područje mreže definirano je u CSS-u. Otvorite novu stranicu ili post. Idite na karticu HTML da biste počeli graditi mrežu.

Evo primjera koji možete zalijepiti na svoje mjesto kako biste započeli:

   Lijevi stupac
  Srednji stupac
  Desni stupac

Evo kako to izgleda u programu WordPress:

Spremite / ažurirajte stranicu i pogledajte rezultate. U mom slučaju, ovo je početna stranica za web-lokaciju:

Kao što možete vidjeti na slici iznad, imamo tri stupca i sve je točno tamo gdje očekujemo. Možete dodati koliko god želite redaka počevši od sljedećeg

    Lijevi stupac
  Srednji stupac
  Desni stupac
    Lijevi redak # 2
  Srednji red # 2
  Desni red br. 2

Evo kako to izgleda do sada:

Sada možete dodavati slike ili tekst i oblikovati svaki redak točno onako kako želite.

Savjeti za ugađanje

Možda imate poteškoća u nekim preglednicima kada imate više od jednog retka. Da biste zaobišli taj problem, morat ćete napraviti marginu na krajnjem desnom dijelu (.rešetke m4, u našem slučaju) do visine koju želite da svaki red bude. Ako koristite slike koje su 250px po 250px, tada napravite visinu retka u .rešetke m4 biti 250px:

.grid-m4 float: lijevo; širina: 20px; visina: 250px;

Ovo će osigurati vaš .rešetke m1 na lijevoj strani sljedećeg retka ne pluta do retka iznad njega.

Ako želite oblikovati pozadinu cijele mreže, morat ćete podesiti visinu .rešetka klase. Recimo da imate četiri retka na mreži, svaki na 250 piksela. Trebat ćete dodati visinu u .grid klasu na 1000 px tako da svi stilski elementi koje dodajete pokrivaju cijeli dizajn rešetke.

.rešetka širina: 450px; visina: 1000px; margina: auto;

Ovisno o verziji MindPlay.dk generatora mreže koji koristite, web-lokacija možda neće generirati ".grid-m4" i umjesto toga trebat ćete koristiti .rešetke m1 nakon .rešetke c3 kako bi se osiguralo da se vaša mreža proteže na odgovarajuće mjesto:

  Lijevi stupac
  Srednji stupac
  Desni stupac

Konačni rezultati

Kako izgledaju moji konačni rezultati s dva retka i nekim jednostavnim grafikama:

Zabavite se projektirati i zapamtite da možete oblikovati svoju mrežu na bilo koji način.

Napomena urednika: Ovaj post je napisao / la Tara Hornor za Hongkiat.com. Tara je diplomirala engleski jezik i piše o marketingu, oglašavanju, brendiranju, grafičkom dizajnu i stolnom izdavaštvu. Osim svoje karijere pisanja, Tara također uživa u druženju sa suprugom i dvoje djece.