Vključitev enostavnih postavitev CSS Grid v WordPress

Če uporabljate pravo orodje, je lahko dosledna, trdna postavitev omrežja v WordPress neboleč proces. V tem vodiču boste korak za korakom izvedeli, kako hitro vzpostaviti mrežni sistem v WordPressu, ki je zelo lahek in enostaven za spreminjanje. Oblikovanje bomo ohranjali preprosto, tako da se bomo lahko osredotočili na uporabo ustreznih orodij za nastavitev omrežja, vendar ne pozabite, da lahko slog rešite sami, če je to potrebno.

Za to vadnico bom uporabil privzeto temo Pool v WordPressu, da vam pokažem pristop "začnite iz nič", da dobite ravno prav omrežje.

1. korak: Določite širino mreže

Preden začnete, morate določiti, kako široko bo vaše omrežje. Za mojo spletno stran WordPress lahko vidim, da je širina mojega glavnega stolpca 450px, če uporabite funkcijo »Preglej element« brskalnika Google Chrome, ko z desno tipko miške kliknete predmet. To je najhitrejši način, s katerim lahko hitro določimo širino in višino objekta na spletni strani.

2. korak: Oblikovalec mreže

Namesto ročne gradnje mreže, ki jo lahko naredite, če želite, predlagam, da greste z enim od številnih orodij, ki so na voljo. Za to vadnico bom uporabljal mrežni generator MindPlay. To je zelo preprost in lahek mrežni generator.

Želim prikaz s tremi stolpci in poskrbeti moram, da bodo moji piksli na 450. Torej ustrezno prilagodite in preskočite na kartico "Izvoz". Ne bomo šli čez * tipografija funkcije v tej vadnici, čeprav je to vsekakor vredno raziskati sami.

Na kartici Export (Izvoz) uporabite najvišji okvir "Style Sheet" in se pomaknite navzdol, dokler ne vidite komentarja "Grid". Kopirali boste vse od komentarja na dno tega okvirja. To naj bo le okoli 30 vrstic

.
 
 
 
3. korak: Posodobitev sloga WordPress
 
Prijavite se v svoje WordPress mesto in pojdite v Videz> Urednik.
 
 
 
V spodnjem desnem kotu plošče urejevalnika boste videli a Styles.css datoteko (ali kaj podobnega, odvisno od vaše teme). Kliknite to, da ga odprete.
 
 
 
Pomaknite se na dno lista in prilepite vašo datoteko Pre iz MindPlay.dk:
 
 
 
4. korak: Izvedba omrežja
 
Za uporabo mreže preprosto ustvarite 
 z razredom "mreža". Vsako območje omrežja je definirano v CSS. Odprite novo stran ali objavo. Pojdite na zavihek HTML, da začnete graditi omrežje.
 
 
 
Tu je nekaj vzorcev, ki jih lahko prilepite na svoje mesto:
 
 
  
Levi stolpec
  
Srednji stolpec
  
Desni stolpec
  
 
 
To je videti v WordPressu:
 
 
 
Shranite / posodobite stran in si oglejte rezultate. V mojem primeru je to domača stran za spletno mesto:
 
 
 
Kot lahko vidite iz zgornjega posnetka zaslona, ​​imamo tri stolpce in vse je tam, kjer pričakujemo, da bo. Dodate lahko toliko vrstic, kot želite, tako da začnete z naslednjim 
:
 
 
   
Levi stolpec
  
Srednji stolpec
  
Desni stolpec
    
Levi vrstica # 2
  
Srednja vrstica # 2
  
Desni vrstni red # 2
  
 
Do sedaj je videti tako:
 
 
 
Zdaj lahko dodajate slike ali besedilo in oblikujete vsako vrstico točno tako, kot želite.
 
Nasveti za spreminjanje
 
V nekaterih brskalnikih lahko pride do težav, ko imate več vrstic. Če želite odpraviti to težavo, boste morali narediti rob na skrajni desni strani (.grid-m4, v našem primeru) do višine, ki naj bo vsaka vrstica. Če uporabljate slike, ki so 250px po 250px, potem naredite višino vrstice v .grid-m4 biti 250px:
 
.grid-m4 float: levo; širina: 20px; višina: 250px; 
 
To bo zagotovilo vašo .grid-m1 na levi strani naslednje vrstice ne lebdi do vrstice nad njo.
 
Če želite slog ozadja celotne mreže, morate prilagoditi višino .mreža razred. Recimo, da imate na svoji mreži štiri vrstice, vsaka na 250 px. V razredu .grid boste želeli dodati višino na 1000 px, tako da bodo vsi elementi, ki jih dodate, zajemali celotno obliko mreže..
 
.mreža širina: 450px; višina: 1000px; margin: auto; 
 
Odvisno od različice generatorja MindPlay.dk, ki ga uporabljate, spletno mesto morda ne ustvari ".grid-m4" in namesto tega boste morali uporabiti .grid-m1 po .grid-c3 da zagotovite, da se vaše omrežje razširi na ustrezno mesto:
 
  
Levi stolpec
  
Srednji stolpec
  
Desni stolpec
  
 
Končni rezultati 
 
Kakšen je moj končni rezultat z dvema vrsticama in nekaj preprostimi grafikami:
 
 
 
Zabavajte se pri načrtovanju in ne pozabite, da lahko svoj slog oblikujete na kakršenkoli način, ki ga želite.
 
Opomba urednika: To objavo je napisal Tara Hornor za Hongkiat.com. Tara je diplomirala iz angleščine in piše o marketingu, oglaševanju, blagovni znamki, grafičnem oblikovanju in namiznem založništvu. Poleg pisne kariere Tara uživa tudi v druženju z možem in dvema otrokoma.