Integrácia jednoduchého rozvrhu CSS Grid do WordPress
Získanie konzistentné, masívne rozloženie mriežky do WordPress môže byť bezbolestný proces, ak používate správne nástroje. V tomto výučbe sa naučíte krok za krokom, ako rýchlo nastaviť mriežkový systém v aplikácii WordPress, ktorý je veľmi ľahký a ľahko upraviteľný. Budeme udržiavať dizajn jednoduchý, aby sme sa mohli sústrediť na používanie správnych nástrojov na nastavenie vašej siete, ale majte na pamäti, že môžete štýl mriežky na vlastnú päsť, ak je to potrebné.
Budem používať predvolenú tému Pool v aplikácii WordPress pre tento tutoriál, aby som vám ukázal prístup "od začiatku od začiatku" na získanie správnych mriežok.
Krok 1: Určite šírku mriežky
Predtým, než začnete, musíte určiť, aká šírka vašej siete bude potrebná. Na mojej stránke WordPress môžem vidieť, že šírka môjho hlavného stĺpca je 450 pixlov pomocou funkcie "Inspect Element" prehliadača Google Chrome, keď kliknete pravým tlačidlom na objekt. Toto je najrýchlejší spôsob, akým som zistil, že môže rýchlo určiť šírku a výšku objektu na webovej stránke.
Krok 2: Návrhár siete
Namiesto ručného budovania mriežky, čo môžete urobiť, ak chcete, odporúčam ísť s jedným z mnohých dostupných nástrojov generátora siete. Pre tento tutoriál budem používať generátor mriežky MindPlay. Je to veľmi jednoduchý a ľahký generátor.
Chcem zobrazenie s tromi stĺpcami a musím sa uistiť, že moje pixely sú na 450. Preto sa prispôsobte a prejdite na kartu "Exportovať". Nebudeme prechádzať * typografie funkcie v tomto tutoriáli, aj keď to určite stojí za preskúmanie na vlastnú päsť.
Na karte Export (Exportovať) použite najdôležitejší rám "Štýl štýlu" a prejdite nadol, kým sa nezobrazí komentár "Mriežka". Všetko z kópie skopírujete do spodnej časti tohto rámčeka. Malo by byť len okolo 30 riadkov .
Krok 3: Aktualizácia štýlu WordPress
Prihláste sa na svoju stránku WordPress a prejdite na položku Vzhľad> Editor.
V pravom dolnom rohu panela Editora sa zobrazí a styles.css súbor (alebo niečo podobné, v závislosti od vašej témy). Kliknutím na ňu ho otvoríte.
Prejdite na spodný okraj hárku a prilepte svoj prevod z MindPlay.dk:
Krok 4: Implementácia siete
Ak chcete použiť mriežku, stačí vytvoriť Tu je niekoľko predbežných vzoriek, ktoré môžete vložiť na miesto, aby ste mohli začať: Ľavý stĺpec Stredný stĺpec Pravý stĺpec Tu je to, ako to vyzerá v programe WordPress: Uložte / Aktualizujte stránku a pozrite sa na výsledky. V mojom prípade ide o domovskú stránku stránky: Ako vidíte z vyššie uvedeného záberu obrazovky, máme tri stĺpce a všetko je správne tam, kde to očakávame. Môžete pridať toľko riadkov, koľko by ste chceli jednoduchým začiatkom s nasledujúcimi Ľavý stĺpec Stredný stĺpec Pravý stĺpec Ľavý riadok # 2 Stredná riadka # 2 Pravá riadka # 2 Tu je to, ako to vyzerá takto: Teraz môžete pridať obrázky alebo text a štýl každého riadku presne tak, ako by ste chceli. V niektorých prehliadačoch môžete mať problémy, ak máte viac ako jeden riadok. Ak chcete tento problém vyriešiť, musíte vytvoriť okraj vpravo ( Tým sa ubezpečíte, že vaše Ak chcete prispôsobiť pozadie celej mriežky, musíte nastaviť výšku V závislosti od verzie generátora siete MindPlay.dk, ktorý používate, web nemusí generovať ".grid-m4" a namiesto toho budete musieť použiť Ľavý stĺpec Stredný stĺpec Pravý stĺpec Tu je moje konečné výsledky s dvoma riadkami a nejakou jednoduchou grafikou: Zabávajte sa dizajnovaním a pamätajte, že môžete štýl vašej mriežky akýmkoľvek spôsobom chcete. Poznámka redaktora: Tento príspevok je napísaný používateľom Tara Hornor pre Hongkiat.com. Tara má titul v angličtine a píše o marketingu, reklame, brandingu, grafickom dizajne a desktop publishing. Okrem svojej kariéry písanie Tara tiež teší trávenie času so svojím manželom a dvoma deťmi.
:
Tipy na ladenie
.grid-m4, v našom prípade) do výšky, ktorú chcete mať každý riadok. Ak používate obrázky s rozmermi 250 x 250 pixlov, urobte výšku riadku v .grid-m4 má byť 250 pixlov:.mriežka-m4 float: vľavo; šírka: 20px; výška: 250px;
.grid-m1 na ľavej strane ďalšieho riadku nepreteká k riadku nad ním..mriežka trieda. Povedzme teda, že máte na svojej mriežke štyri riadky, každá na 250 pixeloch. Budete chcieť pridať výšku k triede .grid na 1000px, takže všetky prvky, ktoré pridáte, budú pokrývať celý dizajn mriežky..mriežka width: 450px; výška: 1000px; marža: auto;
.grid-m1 po .grid-c3 aby sa vaše mriežka dostala na správne miesto:Konečné výsledky
