WordPress und divi Tricks
Anleitungen um die ausgefallensten Wünsche in WordPress und DIVI zu realisieren
WordPressumzug von Lokal zum Server manuell
Hier gibt es eine Anleitung, um WordPress auf dem lokalen Server einzurichten, und später ohne Plugin auf den Server umzuziehen.
Zweispaltigkeit erhalten
Bei kleineren Breakpoints z. B. auf dem Smartphone werden aus zweispaltigen Seiten einspaltige. Hier findet man eine Anleitung, um dieses zu vermeidem. Musterseite
CSS Code
.two-columns .et_pb_column {
width: 50%!important;
}
.three-columns .et_pb_column {
width: 33.33%!important;
}
.four-columns .et_pb_column {
width: 25%!important;
}
}
Freie Spaltenbreite
Oft hat man den Wunsch die Spaltenbreite frei wählen zu können. Mit einer Zeile CSS im Modulbereich „Erweitert“ ist das ganz einfach möglich. Musterseite.
Hamburger-Menu auf Desktop
Wenn man möchte, dass auf allen Seiten das Hamburger-Menu gezeigt wird. Auch mit dem Wort „Menu“ vor den drei Streifen. Musterseite
CSS Code
.et_mobile_nav_menu:before {
content:’Menu‘;
margin-right: 10px;
font-size:28px!important;
}
/*show hamburger menu on desktop*/
@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}
.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}
Mehr lesen/weniger lesen
Ändert die Beschriftung im geöffneten Zustand des Umschalters.
mehr lesen...
Main Element…display:flex;flex-direction: column;align-items: flex-end;Toggle Title…order:2;padding-right:25px !important;Toggle Content
order:1;padding: 0px;und dieses in ein script tag
(function($) {
$(document).ready(function(){
$(‚.et-readmore-toggle .et_pb_toggle_title‘).on(‚click‘, function(e) {
if ($(e.target).closest(‚.et-readmore-toggle‘).hasClass(‚et_pb_toggle_open‘)) {
$(this).text(‚Show More‘);
} else {
$(this).text(‚Show Less‘);
}
});
});
})(jQuery);
Objekt, Bild oder Link, bei „hover oder klick“ Ton abspielen.
Kleines Script, um beim Hovern oder Klicken einen Ton abzuspielen.
Download
Mustermenus zum Downloaden
Hier sind Mustermenus zum Herunterladen.
mehr lesen...
Wenn man die Zip-Datei heruntergeladen hat, muss diese entpackt werden. Dann kann sie anschließend im Bereich „Divi-Theme-Builder“ installiert werden. Dazu ein neues Custommenu öfnen und dann die Datei hochladen. Wenn in der ZIP-Datei eine RTF-Datei mit CSS-Code enthalten ist diesen kopieren und in Custom-CSS einfügen.
Theme Customizer optimieren
css-Datei zum Runterladen, um im Theme-Customizer einzufügen, damit die Typo in allen Modulen einheitlich ist.
zum css-code
Download
Download DIVI Plugins
auf dieser Seite sind verschiedene DIVI Plugins zum herunterladen.
Divi Popup Plugin
Genial einfaches gratis Plugin für Popups
Einmalig öffnende Popups
z.B um Ferienzeiten oder Sonderaktionen anzukündigen.
Das DIVI Popup-Plugin muss installiert sein.
Mehrsprachige Websites
mit dem Plugin Polylang
Umzug Website mit Plugin
Der Umzug einer Website geht sehr einfach mit dem Plugin „All in one Migration“. Allerdings sind hier maximal 64MB möglich. Mit dem Erweiterungsplugin „all-in-one-wp-migration-file-extension“ lässt es sich auf 512MB erweitern. Wer noch mehr braucht muss in einer PHP Datei „constants.php“ Veränderungen vornehmen.
Auf keinen Fall updaten!!!!
Eigene Presets z.B von einem Modul in ein neues Projekt übertragen
Image Swap
Von Divi gibt es kein Image-Swap-Modul. Es gibt nur die Möglichkeit im Bildmodul das Bild durch hovern zu wechsel, aber nicht Bildwechsel in einem Modul wenn man über mehrere andere hovert.
Verschiedene Codesnippets, um die functions.php und die htacces zu frisieren
Es sollen keine Verknüpfungen zu Videohostern beim Öffnen der Seite geladen werden.
Fonts werden erst nach dem Öffnen der Seite geladen.
Über die htacces wird Gzip aktiviert.
Der perfekte Videoplayer
Der fv-flowplayer ist ein sehr gut zu stylender Videoplayer. Man kann den Shortcode problemlos in das DIVI-Codemodul einsetzen.
Relative Pfade
Es kann sinnvoll sein, um die Seite zu beschleunigen, relative Pfade zu benutzen. Um nicht jedes Bild einzeln einfügen zu müssen, kann man ein wenig Code in die fubktions.php des Child-Themes eingeben.
Große Bilder
Seit WP 6.0 rechnet WP hochgeladene Bilder von alleine auf maximal 2560 Pixel Breit. Will man das abschalten,kann man etwas Code n die functions.php einfügen.
Revisionen
Obwohl diese Funktion sehr nützlich sein kann, wirkt sie sich leider negativ auf die Performance deiner Website aus. Stell dir vor du hast 200 Beiträge auf deiner Website und jeder dieser Beiträge hat 10 Revisionen, dann hast du 2000 (unnötige) Einträge dieser Revisionen in deiner Datenbank. Dies kann also deine Datenbank sehr aufblähen und dadurch verlangsamen. Daher sollte man, vor allem wenn die Website schon eine Weile besteht und es noch nie gemacht wurde, die Revisionen aufräumen bzw. löschen.
Alle Bilder und andere Dateien aus der Media Library exportieren
Dieses Plugin ermöglicht es alle Bilder und andere Medien mit einem Klick zu exportieren
Animierte Schrift
Zipdateien erst auf dem Server entpacken
Du möchtest eine Zip-Datei mit Filezilla auf den Server hochladen und diese erst dort entpacken, weil das viel schneller geht?
