Eenvoudige CSS-rasterlay-outs integreren in WordPress

Het verkrijgen van een consistente, solide rasterlay-out in WordPress kan een pijnloos proces zijn als u de juiste hulpmiddelen gebruikt. In deze zelfstudie leert u stap voor stap hoe u snel een rastersysteem kunt instellen in WordPress dat zeer licht van gewicht is en gemakkelijk kan worden gewijzigd. We zullen het ontwerp eenvoudig houden, zodat we ons kunnen concentreren op het gebruik van de juiste hulpmiddelen voor het opzetten van uw raster, maar houd er rekening mee dat u het raster zelf kunt opmaken als dat nodig is.

Ik gebruik een standaard poolthema in WordPress voor deze tutorial om u een "start from scratch" -aanpak te laten zien om de rasters precies goed te krijgen.

Stap 1: Bepaal uw rasterbreedte

Voordat u aan de slag gaat, moet u bepalen hoe breed uw raster moet zijn. Voor mijn WordPress-site kan ik zien dat de breedte van mijn hoofdkolom 450 px is door de "Inspect Element" -functie van Google Chrome te gebruiken wanneer je met de rechtermuisknop op een object klikt. Dit is de snelste manier die ik heb gevonden die snel de breedte en hoogte van een object op een webpagina kan bepalen.

Stap 2: Grid Designer

In plaats van met de hand een raster te bouwen, wat je kunt doen als je wilt, raad ik aan te gaan met een van de vele beschikbare hulpmiddelen voor het genereren van rasters. Voor deze tutorial gebruik ik de grid-generator van MindPlay. Het is een heel eenvoudige en lichtgridgenerator.

Ik wil een weergave met drie kolommen en ik moet ervoor zorgen dat mijn pixels op 450 staan. Dus pas deze aan en ga naar het tabblad "Exporteren". We gaan niet over de *typografie functies in deze zelfstudie, hoewel dit zeker de moeite van het verkennen waard is.

Gebruik in het tabblad Exporteren het bovenste frame van de stijlpagina en scrol omlaag totdat u de opmerking "Raster" ziet. Je kopieert alles van de opmerking tot aan de onderkant van dit frame. Het zou maar ongeveer 30 regels moeten zijn

Stap 3: Uw WordPress-stylesheet bijwerken

Rechtsonder in het venster Editor ziet u een styles.css bestand (of iets dergelijks, afhankelijk van uw thema). Klik hierop om het te openen.

Scroll naar de onderkant van het blad en plak je pre van MindPlay.dk:

Stap 4: Implementatie van het raster

Als u het raster wilt gebruiken, maakt u eenvoudig een

met de klasse "raster". Elk gebied van het raster wordt gedefinieerd in de CSS. Open een nieuwe pagina of post. Ga naar het tabblad HTML om te beginnen met het bouwen van uw raster.

Hier is een voorbeeld van een pre die je op zijn plaats kunt plakken om aan de slag te gaan:

   Linker kolom
  Middelste kolom
  Rechterkolom

Hier is hoe het eruit ziet in WordPress:

Bewaar / update de pagina en bekijk de resultaten. In mijn geval is dit de startpagina van de site:

Zoals je kunt zien aan de bovenstaande schermafbeelding, hebben we onze drie kolommen en is alles precies zoals we verwachten. U kunt zoveel rijen toevoegen als u wilt door eenvoudigweg met het volgende te beginnen

    Linker kolom
  Middelste kolom
  Rechterkolom
    Linker rij # 2
  Middelste rij # 2
  Rechter rij # 2

Zo ziet het er zo ver uit:

Nu kunt u afbeeldingen of tekst toevoegen en elke rij precies zoals u wilt opmaken.

Tips voor tweaken

Mogelijk hebt u problemen in sommige browsers wanneer u meer dan één rij hebt. Om dit probleem te omzeilen, moet je de marge aan de rechterkant (.roostervormige m4, in ons geval) tot de hoogte die u wilt dat elke rij is. Als u afbeeldingen gebruikt die 250 px bij 250 px zijn, maakt u de rijhoogte in de .roostervormige m4 om 250px te zijn:

.grid-m4 float: left; breedte: 20px; hoogte: 250 px;

Dit zal ervoor zorgen dat je .roostervormige m1 aan de linkerkant van de volgende rij zweeft niet naar de rij erboven.

Als u de achtergrond van het gehele raster wilt opmaken, moet u de hoogte van het raster aanpassen .rooster klasse. Dus laten we zeggen dat je vier rijen op je rooster hebt, elk op 250 px. U wilt hoogte aan de .grid-klasse toevoegen op 1000px, zodat alle opmaakelementen die u toevoegt, het volledige rasterontwerp zullen dekken.

.raster width: 450px; hoogte: 1000 px; marge: automatisch;

Afhankelijk van de versie van de netwerkgenerator van MindPlay.dk die u gebruikt, genereert de site mogelijk niet de ".grid-m4" en moet u in plaats daarvan .roostervormige m1 na .roostervormige c3 om ervoor te zorgen dat uw raster zich naar de juiste plaats uitstrekt:

  Linker kolom
  Middelste kolom
  Rechterkolom

Eind resultaat

Dit is hoe mijn eindresultaten er uitzien met twee rijen en enkele eenvoudige afbeeldingen:

Veel plezier met ontwerpen en onthouden dat je je grid op elke gewenste manier kunt stylen.

Opmerking van de uitgever: Dit bericht is geschreven door Tara Hornor voor Hongkiat.com. Tara heeft een diploma in het Engels en schrijft over marketing, reclame, branding, grafisch ontwerp en desktop publishing. Naast haar schrijfcarrière geniet Tara ervan om tijd door te brengen met haar man en twee kinderen.