Divi-Snippets

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;
}

5 Antworten auf Divi-Snippets

  1. Wow, das sind eine Menge cooler Tipps. Zwei Kunden setzen Divi ein. Da werde ich wohl mal nachschauen, ob da eine von den Optimierungen gut passen würde.

    Ich bin auch kein großer Fan von so großen Themes wie Divi, muss aber sagen, dass die Code-Qualität recht ordentlich ist. Ich habe bereits zwei Module für den Pagebulider gebaut und das war recht einfach, obwohl es dazu nicht wirklich gute Dokumentation von Eleganthemes gibt. Nur bei Major-Updates muss man meistens erneut ran. Als sie zuletzt alle Module auf React umgestellt haben, hat mich dann der Legacy-Mode gerettet. Dass die Module nicht mehr in der Vorschau angezeigt werden war für den Kunden eher verschmerzbar als eine komplette Neuprogrammierung zu beauftragen.

  2. Hier kann ich auch endlich mal etwas Feedback liefern: Vielen Dank für die Snippets!

    Schon beim ersten Überfliegen habe ich einige entdeckt, die ich ebenfalls gebrauchen kann. Erstaunlich, dass Divi für solch häufige Wünsche noch keine Lösung anbietet.

  3. Danke für die Snippets! Das ist einfacher als ich dachte!

  4. Hallo Torsten,

    soweit ich das sehe, hast du noch nicht irgendwo notiert, warum du dich seinerzeit für Divi und nicht für einen anderen Builder wie etwa Elementor entschieden hast. Wenn du also noch mal nach einem Artikelthema für das #Projekt26 suchst, dann wäre das also mein Vorschlag 😉

    • Das ist ziemlich unspannend. Die Entscheidung war damals für ein anstehendes Projekt die beste Wahl. Ich musste innerhalb sehr kurzer Zeit eine wichtige Website nach Designvorlage bauen und Divi brachte eine Vorlage mit, von der ich am schnellsten zum Ziel zu kommen hoffte. That’s it. 😉

      Danach habe ich dank Lifetime-Lizenz noch ein paar mehr Websites damit umgesetzt. Mit Elementor bin ich nie richtig warm geworden …

Schreibe einen Kommentar zu Bernhard Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.