DIVI-Theme – merkenswerte Links

13. Januar 2020

Nach einiger Zeit in der ich WordPress Themes verwende und unterschiedliche Page-Builder ausprobiert habe bin ich nun auf das DIVI-Theme gestoßen.

Der DIVI-Page-Builder ist der erste – der ein richtiger WYSIWYG-Builder ist. WYSIWYG steht für What-You-See-Is-What-You-Get.

Man kann im Frontend arbeiten und dabei mit dem Mauszeiger Abstände einstellen und Textbereiche verschieben per Drag-&-Drop (=anklicken und fallen lassen).

In dieser intuitiven und gut funktionierenden Form habe ich das Page-Design noch bei keinem anderen Theme und Page-Builder erlebt.


DIVI – Nützliche Links:

An dieser Stelle merke ich mir noch einige Links, zu Fragen, die bei der neuen Arbeit mit DIVI aufgetreten sind:

Hamburger-Menu: Farbe einstellen

Bei einem Kunden konnte ich die Farbe der 3 Linien (geschrumpftes Menü in der mobilen Ansicht – auch Hamburger-Menu genannt, da es aussieht wie ein Hamburger) nicht einstellen. Im folgenden Blog wird erklärt wo es einzustellen ist – leider geht es scheinbar nur über einen Code-Schnipsel im Bereich wo man das Custom-CSS bearbeitet:

span.mobile_menu_bar:before{
  color:#ffffff;
}

https://www.mrkwp.com/2017/04/changing-your-hamburger-menu-colour-in-divi-wordpress/


Reihenfolge von Spalten in Mobilansicht umdrehen

Ein spannendes Layout-Element auf PC-Webseiten ist das abwechseln von Bild-Text-Spalten, mal ist das Bild links, der Text rechts, dann wieder Bild rechts und der Text links.

Bild – Text
Text – Bild
Bild – Text

Das bringt eine schöne Dynamik, wird aber zum Problem, wenn ich diese Spalten dann auf Mobil anschaue – hier kommt es dann dazu, dass die Seite wie folgt verkleinert wird

Bild
Text
Text
Bild
Bild
Text

Um die Reihenfolge auch auf Mobil in der gewünschten Reihenfolge darzustellen:

Bild
Text
Bild
Text
Bild
Text

…muss man wiederum CSS ins Custom-CSS hinzufügen und dann die Spalten entsprechend mit CSS-Code („first-on-mobile“ oder „second-on-mobile“) versehen:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
 
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
 
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
 
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
 
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
 
}

Die Step-by-Step-Anleitung hierzu findet ihr in der richtig guten Dokumentation von DIVI-Themes:

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies zu. Datenschutzerklärung

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen