Handige Divi css codes

17 april 2021

Handige css codes die u in uw WordPress website kunt combineren met Divi

Het WordPress thema Divi van Elegant themes heeft van zichzelf al heel veel mogelijkheden voor het ontwerpen en stijlen van uw WordPress website of webshop. Soms kan het handig zijn om met behulp van een css code nog wat extra mogelijkheden te benutten. Hieronder treft u diverse css codes hiervoor aan.

Blog css codes 

Verander de kleur van verticale verdelen tussen de body en de zijbalk

Met behulp van de onderstaande css code kunt u de kleur van de verticale verdelen tussen de body en de zijbalk aanpassen. U kunt hierbij uw eigen hex code gebruiken:

/* CSS code Blog kleur verticale verdeler */
#main-content .container::before { /* ID waar deze CSS code voor is */
    background-color: #52255E; /* Achtergrondkleur */
}

Gebruik een eigen verdeler tussen uw berichten

Met behulp van de onderstaande css code kunt u een eigen verdeler (divider) tussen uw berichten plaatsen:

/* CSS code eigen verdeler tussen berichten */
.page article, .archive article, .search article {/*Class waar deze CSS code voor is */
    background: url(‘’https://nielspicard.nl/wp-content/uploads/Verdeler-600-x-40.jpg) no-repeat center bottom; /*Achtergrond kenmerken */
}

.page .et_pb_post, .archive .et_pb_post, .search .et_pb_post { /*Class waar deze CSS code voor is */
    margin-bottom: 90px; /*Margin afstand */
    padding-bottom: 120px; /*Paddding of buffer afstand */
}

Geef de rand van de uitgelichte afbeelding van een bericht een kleur

Met behulp van de onderstaande css code kunt u de rand van uw uitgelichte afbeelding van een bericht een kleur geven. U kunt de dikte en de kleur natuurlijk aanpassen:

/* CSS code voeg een gekleurde rand om de uitgelichte afbeelding */
.et_pb_post a img { /*Class waar deze CSS code voor is */
    border: 6px solid #F90707; /*Rand kenmerken */
}

Toon miniaturen naast de titels van uw berichten op de blog pagina

Met de onderstaande css codes kunt u naast de titels van uw berichten miniaturen tonen:

/*CSS code tonen  miniatuur naast titel bericht*/

.et_pb_post a img{ /*Class waar deze CSS code voor is*/
    height: 200px!important; /*Afbeelding hoogte*/
    width: 200px; /*Afbeelding breedte*/
    float: left; /*Afbeelding uitlijnen */
    left: 0; /*Afbeelding marge*/
    padding-right: 14px; /*Afbeelding padding of buffer*/
}

@media only screen and (max-width: 980px) { /*Breakpoint CSS Code voor schermen tot 980px breed*/
.et_pb_post a img{ /*Class waar deze CSS code voor is*/
    height: 200px; /*Afbeelding hoogte*/
    width: 200px; /*Afbeelding breedte*/
    float: none; /*Afbeelding uitlijnen */
}}

Tekst css codes

Hoe kun je in Divi een zin met tekst arceren?

Met behulp van de onderstaande CSS code kunt u de tekst van een hele zin arceren.

De zin zie er dan zo uit!

Als eerste geeft u de tekstmodule waarin deze tekst komt een CSS Klasse. Dit doet u via het tabblad Geavanceerd en vervolgens geeft u bij het veld CSS Klasse de volgende naam: pa-multi-line-highlight

Vervolgens bepaalt u bij welke heading u deze opmaak wilt. In dit voorbeeld heb ik de CSS code gekoppeld aan de H6 kop. U kunt dit natuurlijk aanpassen.

/* CSS code Arceer een hele zin */
.pa-multi-line-highlight h6 { *Class waar deze CSS code voor is */
    color: #ffffff/* Lettertype kleur */
    background-color: #5290c9; /* Achtergrond kleur */
    line-height: 1.7em; /* Ruimte tussen zinnen */
    padding-bottom: 0px; /* Padding of buffer afstand */
    display: inline; /* Bepaalt hoe een element wordt weergegeven */
    box-shadow: 10px 0 0px 0px #5290c9, -10px 0 0px 0px #5290c9; /* Box schaduw */
    box-decoration-break: clone; /* Hoe moet het element worden weergegeven */
}

Hoe kun je in Divi een woord in een zin arceren?

Als u in een zin een woord wilt arceren, dan kan dat door in de html code een <span> tag op te nemen met daarin een class. Vervolgens nemen we voor deze class een CSS code op.

In deze zin heeft dit woord een arcering.

De html code van deze zin ziet er als volgt uit:

In deze zin heeft dit <span class=”pa-callout”>woord </span>een arcering.

Omdat er sprake is van een <span> tag, hoeft u hier bij het tabblad Geavanceerd, bij CSS Klasse geen naam in te voeren.

U voert enkel nog de volgende CSS code in:

/* CSS Code tekst archeren */
.pa-callout { /*Class waar deze CSS code voor is */
    position: relative; /*Positie element */
    color: #ffffff; /*Lettertype kleur */
    background-color: #5290c9; /*Achtergrondkleur */
    font-size: inherit; /* Lettertype grootte */
    padding: .2em .4em; /*Padding of buffer afstand*/
    border-radius: 6px; /*Hoek rondingen */
    margin: 0 6px 0 0; /*Margin afstand */
    font-weight: normal; /*Lettertype dikte*/
}

Hoe kun je in Divi een woord deels markeren?

Als u een bepaalt woord wilt laten opvallen, dan kunt u er voor kiezen om dit te markeren. U kunt er voor kiezen om het woord gedeeltelijk te markeren of in zijn geheel.  U kunt een woord markeren door dit weer tussen een <span> tag te plaatsen met daarin een aparte class.

In deze zin is sprake van een gedeeltelijke markering van woorden .

De html code van deze zin ziet er als volgt uit:

In deze zin is sprake van <span class=”pa-color-highlight”>een gedeeltelijke markering van woorden </span>.

Omdat er sprake is van een <span> tag, hoeft u hier bij het tabblad Geavanceerd, bij CSS Klasse geen naam in te voeren.

U voert enkel nog de volgende CSS code in:

/*CSS Code Woord deels markeren*/
.pa-color-highlight { /*Class waar deze CSS code voor is */
    text-decoration: none; /* Decoratie lijnen tekst */
    box-shadow: inset 0 -.5em 0 rgba(255,166,60,0.75); /* Opmaak Box schaduw */
    color: inherit; /* Lettertype kleur */
}

U kunt een woord in zijn geheel markeren

Als u een bepaalt woord wilt laten opvallen, dan kunt u er voor kiezen om dit te markeren. U kunt er voor kiezen om het woord gedeeltelijk te markeren of in zijn geheel.  U kunt een woord markeren door dit tussen een <mark> tag te plaatsen.

In deze zin heb is sprake van markering van woorden in zijn geheel.

De html code van deze zin ziet er als volgt uit:

In deze zin heb is sprake van <mark>markering van woorden</mark> in zijn geheel.

U hoeft hier geen aparte CSS code voor op te nemen.

Hoe kunt u een zin beginnen met een opvallende hoofdletter (dropcap)?

Als u een zin of alinea wilt beginnen met een opvallende hoofdletter, dan kunt u hiervoor de dropcap shortcode van Elegant Themes gebruiken.  U plaatst dan de letter welke u wilt vergroten tussen de shortcode dropcap. Hieronder de html code, waarbij ik het woord dropcap niet in zijn geheel heb geschreven, want anders werkt deze als shortcode. U dient dus wel het gehele woord dropcap te schrijven tussen de haakjes.

[drop..]de letter [/drop..]

Deze zin start met een opvallende hoofdletter (dropcap).

 

Vervolgens bepaald u met een CSS code hoe deze hoofdletter (dropcap) eruit moet zien. In dit voorbeeld heb ik de volgende CSS code gebruikt:

/*CSS code voor Dropcap hoofdletter*/
.et-dropcap { /*Class waar deze CSS code voor is */
    font-size: 60px; /* Lettertype grootte */
    line-height: 0.7; /* Ruimte tussen zinnen */
    color: #5290c9; /* Lettertype kleur */
    font-family: Times; /* Lettertype soort */
}

Waar kunt u nog meer handige css codes vinden voor uw WordPress website?

Op de volgende websites kunt u ook veel handige css codes vinden die u kunt gebruiken in combinatie met Divi:

 

Gerelateerde berichten

Titel met animatie

Eén van de belangrijkste onderdelen van een pagina is de titel. Dit is het eerste wat mensen zien. Hieronder een voorbeeld van een titel welke extra opvalt door het toepassen van een animatie-effect.Wilt u ook werken met pagina titels met animatie, maar weet u niet...

Lees meer

Divi WooCommerce Product Pagina Layouts

In deze column beschrijf ik hoe u met behulp van de Divi Themabouwer een eigen WooCommerce productpagina kunt ontwerpen. Wilt u dit niet, dan kunt u ook gratis kant-en-klare productpagina layouts (JSON-bestanden) downloaden.

Lees meer

Blader door berichten

Pin It on Pinterest

Share This