WPLounge
Home » Tutorials » Eerste alinea een andere opmaak geven in WordPress

Eerste alinea een andere opmaak geven in WordPress

Tijdschriften en kranten doen het al langer; ze geven de eerste alinea van een artikel een speciale layout. Ook op websites kan dit er erg mooi uit zien. Zeker als je je online magazine een exclusieve look wilt geven kan het handig zijn.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Let op: Om dit tutorial te volgen heb je basiskennis nodig van CSS.

Eerste Alinea andere layout in WordPress
Op de website van Voetbal International is de eerste alinea van ieder artikel iets groter dan de rest van de tekst.

Eerste alinea een andere opmaak geven

Om de eerste alinea van ieder artikel op je WordPress-website een andere opmaak te geven, volg je de volgende stappen.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.

Allereerst ga je naar een willekeurig artikel of blogbericht op je WordPress-website. Selecteer het eerste woord van je artikel (dus niet de titel of datum, maar van de tekst zelf) en klik op je rechter muisknop. Klik vervolgens op “Inspect Element” (of “inspecteer element”).

Inspect Element (klik voor groter)
Inspect Element (klik voor groter)

Wanneer je Chrome of Firefox gebruikt, zal er nu onderin je browser een venster openen waarin je HTML-code ziet. Gebruik deze code om de “class” van de tekst van je artikel te achterhalen.

De class van ons artikel is "entry-content"
De class van ons artikel is “entry-content”

Hierboven zie je het resultaat wanneer ik dat bij deze website doe. De “class” van de <div> waarin het artikel zich bevindt heet entry-content.

CSS toevoegen

Vervolgens ga je voor die entry-content (of de class op jouw website) speciale CSS toevoegen, maar alléén voor de eerste alinea (paragraph). Dit doe je door het style.css-bestand van je thema aan te passen. Sommige Premium WordPress Themes staan je ook toe om “custom CSS” toe te voegen in het theme options-paneel.

Voeg het volgende stuk CSS-code toe aan je CSS-bestand of in het theme options-paneel:

Zoals je ziet begint mijn CSS met .entry-content. Wanneer de “class” bij jou anders heet, vervang je entry-content met de class die jouw website gebruikt. Het stukje p:first-child laat je gewoon staan; die klopt bijna altijd. Hiermee geef je aan dat je de <p> (paragraph; alinea) een bepaalde stijl wilt meegeven, maar dan alléén de eerste alinea (first-child).

Voorbeelden

Een aantal voorbeelden van CSS-code die je vervolgens kunt toevoegen.

Grotere tekst

De code hierboven zal de tekst 20 procent groter maken in de eerste alinea.

Dikgedrukte tekst

De  volgende code zorgt ervoor dat je tekst in de eerste alinea dikgedrukt wordt.

Andere kleur

Met deze code geef je de tekst in je eerste alinea automatisch een andere kleur.

Achter het hekje (#)  zie je een code van zes cijfers. Dit is de kleurcode. Om zo’n code bij een bepaalde kleur te achterhalen kun je een website gebruiken als ColorPicker.com.

Beoordeel dit artikel

(Nog geen ratings)

Wouter Postma

Oprichter WPLounge. Blogt ook in het Engels op WPLounge.org.

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

Reageer

Advertenties

SEO scan door kiesling.nl

Blijf op de hoogte!

Scroll Up Skip to content