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:

/* Blog kleur verticale verdeler */

#main-content .container::before {background-color: #52255E;}

Gebruik een eigen verdeler tussen uw berichten

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

/* gebruik een eigen verdeler tussen uw berichten */
.page article,
.archive article,
.search article {background: url(‘https://quiroz.co/wp-content/uploads/2015/06/divider_custom.png’) no-repeat center bottom;}

.page .et_pb_post,
.archive .et_pb_post,
.search .et_pb_post {margin-bottom: 90px; padding-bottom: 120px;}

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:

/* voeg een gekleurde rand om de uitgelichte afbeelding */
.et_pb_post a img {border: 6px solid #F90707;}

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:

/*toon miniaturen naast de titels van uw berichten op uw blog pagina*/

.et_pb_post a img{
  height: 200px!important;
  float: left;
  width: 200px;
  left: 0;
  padding-right: 14px;}

@media only screen and (max-width: 980px) {
.et_pb_post a img{
  float:none;
  width:200px;
  height:200px;}}

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:

 

Reacties zijn welkom

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Gerelateerde berichten

Divi header & footer layouts

WordPress is het meest gebruikte Content Management Systeem (CMS) voor het maken van een website of webshop. In combinatie met een pagebuilder ontwerpt u vervolgens super gemakkelijk de mooiste berichten en pagina's. Het WordPress thema Divi van Elegant Themes is...

Lees meer

Blader door berichten

Pin It on Pinterest

Share This