Integrering Simple CSS Grid Layouts i WordPress

At få et konsistent, solidt layout i WordPress kan være en smertefri proces, hvis du bruger de rigtige værktøjer. I denne vejledning lærer du trin for trin, hvordan du hurtigt opretter et gittersystem i WordPress, der er meget let og nemt at ændre. Vi vil holde designen enkel, så vi kan fokusere på at bruge de rigtige værktøjer til at oprette dit net, men husk på, at du selv kan stile nettet selv hvis det er nødvendigt.

Jeg vil bruge et standard Pool tema i WordPress til denne vejledning for blot at vise dig en "start fra bunden" tilgang til at få nettet netop lige.

Trin 1: Bestem din netbredde

Før du kommer i gang, skal du bestemme, hvor stort dit net skal være. For mit WordPress-websted kan jeg se, at bredden af min hovedkolonne er 450px ved at bruge Google Chrome's "Inspect Element" -funktion, når du højreklikker på et objekt. Dette er den hurtigste måde jeg har fundet, der hurtigt kan bestemme bredden og højden af et objekt på en webside.

Trin 2: Gitterdesigner

I stedet for at opbygge et gitter, som du kan gøre, hvis du vil, foreslår jeg at gå med et af mange tilgængelige gittergeneratorværktøjer. Til denne tutorial vil jeg bruge gridgeneratoren af MindPlay. Det er en meget enkel og lysnetgenerator.

Jeg vil have en tre-kolonne skærm, og jeg skal sørge for, at mine pixels er på 450. Så juster derefter og spring til "Export" fanen. Vi vil ikke gå over * typografi funktioner i denne tutorial, selv om dette er bestemt værd at udforske på egen hånd.

På fanen Eksporter skal du bruge den øverste "Style Sheet" -ramme og rulle ned, indtil du ser "Gitter" -kommentaren. Du vil kopiere alt fra kommentaren til bunden af denne ramme. Det bør kun være omkring 30 linjer

Trin 3: Opdatering af dit WordPress Stylesheet

Log ind på dit WordPress-websted og gå til Udseende> Redaktør.

Nederst til højre på editorpanelet vil du se en styles.css fil (eller noget lignende, afhængigt af dit tema). Klik på dette for at åbne det.

Rul til bunden af arket og indsæt din pre fra MindPlay.dk:

Trin 4: Implementering af nettet

For at bruge nettet skal du blot oprette en

med klassen "gitter". Hvert område af nettet er defineret i CSS. Åbn en ny side eller post. Gå til fanen HTML for at begynde at opbygge dit net.

Her er nogle eksempler, som du kan indsætte på plads for at komme i gang:

   Venstre kolonne
  Mellemkolonne
  Højre kolonne

Sådan ser det ud i WordPress:

Gem / opdater siden og se resultaterne. I mit tilfælde er dette hjemmesiden for hjemmesiden:

Som du kan se fra ovenstående skærmbillede, har vi vores tre kolonner, og alt er rigtigt, hvor vi forventer det. Du kan tilføje så mange rækker som du vil ved blot at starte med følgende

    Venstre kolonne
  Mellemkolonne
  Højre kolonne
    Venstre række nr. 2
  Mellemrunde # 2
  Højre række # 2

Sådan ser det sådan ud:

Nu kan du tilføje billeder eller tekst, og stil hver række nøjagtigt som du vil.

Tips til tweaking

Du kan have problemer i nogle browsere, når du har mere end en række. For at omgå dette problem skal du gøre margen helt til højre (.grid-m4, i vores tilfælde) til den højde, du vil have hver række. Hvis du bruger billeder, der er 250px ved 250px, skal du gøre rækken højde i .grid-m4 at være 250px:

.grid-m4 float: left; bredde: 20px; højde: 250px;

Dette vil sikre din .grid-m1 på venstre side af den næste række flyder ikke op til rækken over den.

Hvis du vil style baggrunden for hele nettet, skal du justere højden af .gitter klasse. Så lad os sige, at du har fire rækker på dit net, hver ved 250px. Du vil gerne tilføje højde til .grid-klassen på 1000px, så alle de stylingelementer du tilføjer dækker hele netdesignet.

.gitter bredde: 450px; højde: 1000px; margen: auto;

Afhængigt af den version af MindPlay.dk-netgeneratoren, du bruger, kan webstedet ikke generere ".grid-m4" og i stedet skal du bruge .grid-m1 efter .grid-c3 for at sikre, at dit net strækker sig til det rette sted:

  Venstre kolonne
  Mellemkolonne
  Højre kolonne

Endelige resultater

Her er hvad mine endelige resultater ligner med to rækker og nogle enkle grafik:

Hav det sjovt at designe og husk at du kan style dit net på enhver måde du ønsker.

Redaktørens note: Dette indlæg er skrevet af Tara Hornor til Hongkiat.com. Tara har en grad på engelsk og skriver om markedsføring, reklame, branding, grafisk design og desktop publishing. Udover hendes skriftlige karriere nyder Tara også tid sammen med sin mand og to børn.