Ich habe seit einem Jahr ein paar Websites mit Divi umgesetzt. Und auch wenn ich ein großer Verfechter von schnellen, schlanken Websites bin, so ist der Komfort dieser Lösungen schon enorm. Die Übersetzung des Divi Builder ist leider zum Teil haarsträubend, aber davon abgesehen ist die Qualität hervorragend. Ich kann selbst komplexe Layouts sehr schnell umsetzen und die Möglichkeiten sind deutlich größer als beim Gutenberg-Editor. Da ich aber immer wieder dieselben (CSS-)Probleme umsetze kommt heute mal eine Snippetsammlung für das Divi-Theme:

#1 Den Portfolio-Slug übersetzen bzw. anpassen

Für ein Portfolio bietet Divi praktischerweise direkt einen eigenen Custom Post Type an. Übersetzbar ist er leider nicht. Zumindest nicht via User Interface, aber mit diesem kleinen Snippet kann man den Slug ändern und so zum Beispiel auf projekt ändern.

/**
 * Change project slug
 */
function change_custom_post_name() {
	return array(
		'feeds'      => true,
		'slug'       => 'projekt',
		'with_front' => false,
	);
}
add_filter( 'et_project_posttype_rewrite_args', 'change_custom_post_name' );

***

#2 Google Maps Vorschaubild von Borlabs Cookies für Full-Width-Maps anpassen

In einem meiner Projekte habe ich die Google Map wie ein Headerbild über die Gesamtbreite laufen lassen. Das verträgt sich nur leider nicht mit der Map-Vorschau, wenn Borlabs die Karte blockiert und einen Platzhalter einblendet. Das Bild muss dann ausgeblendet und stattdessen als Hintergrundbild an den Wrapper geheftet werden, dann wird es gekachelt. Problem gelöst!

/* +--------------------
 * | Borlabs - Full Width Maps
 * +--------------------
 */

._brlbs-thumbnail {
    visibility: hidden;
}

._brlbs-embed._brlbs-google-maps {
    width: 100%;
    background-image: url('https://example.org/wp-content/plugins/borlabs-cookie/images/cb-maps.png');
}

***

#3a Mobilmenü im Footer deaktivieren

Standardmäßig macht Divi aus jedem Menü auch eine mobile Variante bei entsprechend kleinem Viewport. Für das über einen globalen Footer angelegtes Menü in dem nur ein Impressums- und Datenschutzlink drin stehen ist das nicht nötig. Daher blende ich das Mobilmenü immer aus und das normale Menü immer ein. Natürlich nur im Footer und nur, wenn das Mobilmenü angezeigt werden würde.

/* +--------------------
 * | Hide Mobile Menu in Footer
 * +--------------------
 */

@media only screen and (max-width: 980px) {
	
	footer .et_pb_menu__menu {
    	display: block !important;
	}

 	footer #et_mobile_nav_menu, footer .et_mobile_nav_menu { 
		display: none !important;
	}

}

***

#3b Mobiles Menü über gesamte Breite laufen lassen

Standardmäßig hat Divi links und rechts beim Mobilmenü noch einen Rand. Gerade bei komplizierteren, langen, deutschen Wörtern kann das in der schmalen Mobilansicht etwas Platzverschwendung sein. Mit diesem CSS-Code nutzt man die gesamte Breite aus.

/* +--------------------
 * | Full Width Mobile Menu
 * +--------------------
 */

.et_mobile_menu {
    width: 100vw !important;
    margin-left: -12.5%;
}

***

#4 Reihenfolge in Blog-Modul ändern

Um die Reihenfolge von Meta-Angaben (Datum, Kategorie, Autor), Titel und Inhalt beim Blog-Modul zu ändern, kann via CSS und Flex einfach die Reihenfolge angegeben werden.

Quelle: https://divi.help/threads/blog-module-how-to-place-date-post-meta-above-title.4278/

/* +--------------------
 * | Change order in blog module
 * +--------------------
 */

.et_pb_module .et_pb_post {
    display: flex;
    flex-direction: column;
}
.et_pb_module .et_pb_post .post-meta {
    order: 1;
}
.et_pb_module .et_pb_post .entry-title {
    order: 2;
}
.et_pb_module .et_pb_post .post-content {
    order: 3;
}

***

#5 WP-PageNavi stylen

Divi empfiehlt für eine Paginierung das Plugin WP-PageNavi. Nur leider sieht das erst einaml nicht so schön aus. Mit ein wenig CSS wird das Ganze besser lesbar und passt sich besser in das Divi-Design ein.

Quelle: https://divibooster.com/styling-wp-pagenavi-pagination-in-divi/

/* +--------------------
 * | Style WP-PageNavi Pagination
 * +--------------------
 */


/* Add a border */
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child { 
    border: 1px solid #bbb !important; 
    padding: 6px 12px; 
    margin: 0;  
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }

/* Style the default text */
.wp-pagenavi span, .wp-pagenavi a { 
    font-weight: bold !important; 
    color: #999 !important
}

/* Style the current / hovered page link */
.wp-pagenavi span.current,
.wp-pagenavi a:hover { 
    color: #666 !important; 
    background-color: #ddd !important; 
}

/* Style the page count text */
.wp-pagenavi :first-child { color: #666 !important; }

/* Add text to the "next" link */
.wp-pagenavi .nextpostslink:before { content: 'Weiter '; }
.wp-pagenavi .previouspostslink:after { content: ' Zurück'; }

***

#6 Seiten ohne Divi-Builder haben keinen Abstand nach unten

Nicht immer wird der Divi-Builder benötigt. Zum Beispiel für die Impressumseite oder die Datenschutzerklärung. Nur leider fehlt dann ein Abstand nach unten zum Footer. Mit ein wenig CSS-Magie kann der einfach für solche Seiten hinzugefügt werden.

/* Margin Fix für Seite ohne Divi */
body:not(.et-tb) #main-content .container, 
body:not(.et-tb-has-header) #main-content .container {
    padding-bottom: 58px;
}

***

#7 Zähler mit eigener Einheit

Standardmäßig hat das Zähler-Modul das Prozentzeichen als Einheit. Die einzige Anpassungsmöglichkeit ist es auszublenden. Ein Ersatz mit einer eigenen Einheit ist nicht vorgesehen. Aber mit ein wenig CSS ist auch das möglich. In meinem Fall sollte Quadratmeter benutzt werden. Dafür musste ich dem Modul eine eigene CSS-Klasse geben. Also zum Beispiel quadratmeter. So kann das Prozentzeichen ausgeblendet werden und durch eine eigene Einheit ersetzt werden.

/* +--------------------
 * | Zähler individuell anpassen
 * +--------------------
 */

.quadratmeter .percent-sign {
  display: none;
}

.quadratmeter .percent-value:after {
	content: 'm²';
	padding-left: 5px;
}

***

#8 Menü über gesamte Breite laufen lassen

Mit den neuen Möglichkeiten von CSS kann via Flexbox das Menü so konfiguriert werden, dass es sich immer über die gesamte Breite verteilt (egal wie viele Menüpunkte vorhanden sind). Ehrlich gesagt bin ich beim Thema Flexbox noch nicht so richtig im Thema. Es funktioniert zwar, aber es ob es so richtig korrekt ist, weiß ich nicht. Vielleicht können ja ein paar Flexbox-Expertinnen und -Experten dazu nochmal kommentieren! 🙂

.et_pb_fullwidth_menu .et_pb_menu__menu {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul {
    justify-content: space-between;
}

.et_pb_fullwidth_menu .et_pb_menu__menu, 
.et_pb_fullwidth_menu .et_pb_menu__menu > nav, 
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul, 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu > nav, 
.et_pb_menu .et_pb_menu__menu > nav > ul {
  flex-grow: 1;
}

***

#9 „Zurück nach oben“-Button stylen

Das Aussehen von den meisten Modulen lässt sich ja hervorragend individuell anpassen, aber der „Zurück nach oben“-Pfeil sieht immer gleich aus. Das lässt sich nur per CSS ändern. Mit einem individuellen Icon, einer anderen Form, einer eigenen Farbe, einem kleinen Schatten und einer kleinen Animation ist das Ganze gleich viel schicker.

Unten findet ihr meine erweiterte Variante.

Quelle: https://joshhall.co/how-to-customize-the-back-to-top-button-in-divi/

/* +--------------------
 * | Custom Back To Top Button
 * +--------------------
 */
 
.et_pb_scroll_top.et-visible {
    opacity: 1;
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
 
.et_pb_scroll_top.et-pb-icon {
    right: 30px;
    bottom: 30px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 1);
    padding: 10px;
    color: #00264B;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
}
 
 
.et_pb_scroll_top.et-pb-icon:hover {
    background: #fff;
}
 
.et_pb_scroll_top:before {
    content: "\32";
    font-weight: bold;
}

***

#10 iFrame über die gesamte Breite laufen lassen

Im Auslieferzustand setzt Divi iFrames nicht auf die Gesamtbreite. Damit externe iFrames responsiv eingebunden werden, reicht diese kleine CSS-Ergänzung.

/* +--------------------
 * | Responsive iFrames
 * +--------------------
 */

iframe {
  width: 100%;
}

***

#11 Contact Form 7 stylen

Die Möglichkeiten des Contact Form Modul in Divi sind sehr eingeschränkt. Sobald etwas mehr Anpassungen erforderlich sind, macht es eigentlich immer Sinn ein richtiges Formular-Plugin zu nutzen. Nur leider sehen die Formulare standardmäßig nicht so aus, wie die von Divi. Mit ein wenig CSS kann das aber einfach nachgebaut werden.

Quelle: https://protostern.de/contact-form-7-wie-divi-stylen/

/* +--------------------
 * | Contact Form 7 stylen
 * +--------------------
 */

.wpcf7-form {
  margin-left: 25px; margin-right: 25px; margin-top: 25px;
}

.wpcf7-text, .wpcf7-textarea, .wpcf7-date, .wpcf7-number, .wpcf7-captchar {
  background-color: #eee !important; 
  border: none !important; 
  width: 100% !important; 
  -moz-border-radius: 0 !important; 
  -webkit-border-radius: 0 !important; 
  border-radius: 0 !important; 
  font-size: 14px; 
  color: #999 !important; 
  padding: 16px !important; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 

.wpcf7-submit {
  color: #2EA3F2 !important; 
  margin: 8px auto 0; 
  cursor: pointer; 
  font-size: 20px; 
  font-weight: 500; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  border-radius: 3px; 
  padding: 6px 20px; 
  line-height: 1.7em; 
  background: transparent; 
  border: 2px solid; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  -moz-transition: all 0.2s; 
  -webkit-transition: all 0.2s; 
  transition: all 0.2s; 
}

.wpcf7-textarea {
  width: 85% !important;
}

***

#12 Sektionen/Abschnitte abwechselnd einfärben

Um Abschnitte schneller erfassbar zu machen, macht es Sinn sie verschiedenfarbig auszuzeichnen. Ändern sich die Inhalte häufiger ist es allerdings sehr aufwändig alle Abschnitte einzeln umzufärben. Mit ein wenig CSS kann dies Arbeit vermieden werden. Das CSS übernimmt die Arbeit und wechselt die Hintergrundfarbe für jede zweite Sektion. Der nötige Offset (hier 4) kommt darauf an, wie die Seite gebaut genau gebaut ist. Für den Header, das Headerbild und die erste Sektion soll ja noch nichts geändert werden.

/* +-------------------
 * | Background Color for Sections
 * +-------------------
 */

.et_pb_section:nth-of-type(2n+4) {
    background: #f0f0f0;
}