Integrace jednoduchých rozvržení CSS Grid do WordPressu

Získání konzistentní, pevné rozvržení sítě do WordPress může být bezbolestný proces, pokud používáte správné nástroje. V tomto tutoriálu se naučíte krok za krokem, jak rychle nastavit síťový systém ve WordPressu, který je velmi lehký a snadno upravitelný. Udržíme design jednoduchý, abychom se mohli zaměřit na používání správných nástrojů pro nastavení vaší mřížky, ale mějte na paměti, že si můžete v případě potřeby vytvořit vlastní mřížku..

Budu používat výchozí téma Pool ve WordPressu pro tento tutoriál, jen abych vám ukázal "start od nuly", jak dostat mřížky do pořádku.

Krok 1: Určení šířky mřížky

Než začnete, musíte určit, jak široká bude vaše síť. Pro mé stránky WordPress, vidím, že šířka mého hlavního sloupce je 450px pomocí funkce Google Inspect Element, když kliknete pravým tlačítkem myši na objekt. Toto je nejrychlejší způsob, který jsem zjistil a který může rychle určit šířku a výšku objektu na webové stránce.

Krok 2: Návrhář mřížky

Namísto sestavení mřížky, kterou můžete udělat, pokud chcete, doporučuji jít s jedním z mnoha dostupných nástrojů pro generování mřížek. Pro tento tutoriál budu používat generátor mřížek MindPlay. Je to velmi jednoduchý a lehký generátor.

Chci tří-sloupcový displej a musím se ujistit, že moje pixely jsou na 450. Takže odpovídajícím způsobem upravit a přeskočit na kartu "Export". Nepůjdeme přes *typografie funkce v tomto tutoriálu, i když to určitě stojí za prozkoumání na vlastní pěst.

V záložce Export použijte rámeček "Styl listů" a přejděte dolů, dokud neuvidíte komentář "Mřížka". Zkopírujete vše z komentáře do dolní části tohoto rámce. Mělo by to být jen asi 30 řádků

Krok 3: Aktualizace šablony stylů aplikace WordPress

Přihlaste se na své stránky WordPress a přejděte do Vzhled> Editor.

V pravém dolním rohu panelu Editor uvidíte a Styles.css soubor (nebo něco podobného, záleží na vašem tématu). Klepnutím na tuto možnost otevřete.

Přejděte do dolní části listu a vložte jej z MindPlay.dk:

Krok 4: Implementace mřížky

Chcete-li použít mřížku, jednoduše vytvoříte

s třídou "mřížka". Každá oblast mřížky je definována v CSS. Otevřete novou stránku nebo příspěvek. Přejděte na kartu HTML a začněte stavět mřížku.

Zde je několik příkladů, které můžete vložit, abyste mohli začít:

   Levý sloupec
  Střední sloupec
  Pravý sloupec

Zde je to, co vypadá ve WordPressu:

Uložte / aktualizujte stránku a podívejte se na výsledky. V mém případě se jedná o domovskou stránku webu:

Jak vidíte z výše uvedeného snímku, máme tři sloupce a vše je tam, kde očekáváme, že to bude. Můžete přidat tolik řádků, kolik byste chtěli

    Levý sloupec
  Střední sloupec
  Pravý sloupec
    Řádek vlevo # 2
  Střední řádek # 2
  Pravý řádek # 2

Jak to vypadá:

Nyní můžete přidávat obrázky nebo text a upravovat každý řádek přesně tak, jak chcete.

Tipy pro ladění

V některých prohlížečích můžete mít potíže, pokud máte více než jeden řádek. Chcete-li tento problém vyřešit, budete muset vytvořit okraj na krajní pravici (.mřížka-m4, v našem případě) na výšku, kterou chcete, aby každý řádek byl. Pokud používáte obrázky, které jsou 250px 250px, pak nastavte výšku řádku v .mřížka-m4 být 250px:

.grid-m4 float: vlevo; šířka: 20px; výška: 250x;

To zajistí, že vaše .mřížka-m1 na levé straně dalšího řádku se vznáší až po řádek nad ním.

Chcete-li vytvořit pozadí celé mřížky, budete muset upravit výšku .mřížka třída. Řekněme, že máte čtyři řádky na mřížce, každý na 250px. Do třídy .grid budete chtít přidat výšku 1000px, takže všechny prvky, které přidáte, budou pokrýt celý design mřížky.

.grid width: 450px; výška: 1000px; okraj: auto;

V závislosti na verzi generátoru sítě MindPlay.dk, kterou používáte, nemusí web generovat ".grid-m4" a místo toho budete muset použít .mřížka-m1 po .grid-c3 zajistit, aby se mřížka rozšířila na správné místo:

  Levý sloupec
  Střední sloupec
  Pravý sloupec

Konečné výsledky

Moje konečné výsledky vypadají se dvěma řádky a jednoduchou grafikou:

Bavte se navrhování a nezapomeňte, že můžete styl mřížky v žádném případě si přejete.

Poznámka editora: Tento příspěvek je napsán Tara Hornor pro Hongkiat.com. Tara má titul v angličtině a píše o marketingu, reklamě, brandingu, grafickém designu a desktop publishingu. Kromě její kariéry psaní, Tara také rád tráví čas se svým manželem a dvěma dětmi.