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:

 

Gerelateerde berichten

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