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.

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

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.

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”).

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.

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:

.entry-content p:first-child {

}

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

.entry-content p:first-child {
    font-size: 120%;
}

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.

.entry-content p:first-child {
    font-weight: bold;
}

Andere kleur

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

.entry-content p:first-child {
    color: #0080e2;
}

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