Tipps und Tricks für Vergessliche
Manchmal ist es nicht wirklich die Vergesslichkeit, sondern einfach die Fülle der Informationen, die man im Griff haben sollte.
Für die Arbeit mit DIVI gibt es viele nützliche Kniffs und Tricks. Einmal angewendet, vergisst man jedoch oft, wie man es umgesetzt hat. Diese Liste hilft.
Diese wachsende Sammlung von nützlichen Blogartikeln und kurzen YouTube-Tutorials hilft auch Dir, wertvolles Wissen schnell wiederzufinden. Hier findest du die besten Links, um gezielt Antworten auf deine Fragen zu finden und dein DIVI-Erlebnis nachhaltig zu verbessern – egal, ob du gerade an einem neuen Projekt arbeitest oder nur einige Anpassungen vornehmen möchtest.
Getestete Tutorials
Und das Beste: Wir haben es getestet und für hilfreich befunden.
Anker & Sprungmarken setzen
Ankerlinks verleihen deiner Website eine klare Struktur, die den Nutzern eine gezielte Navigation ermöglicht. Sie sind ideal für One-Page-Seiten und Verkaufsseiten, da sie die Nutzer direkt zu den gewünschten Abschnitten führen. Besonders auf umfangreichen Seiten erleichtert ein Inhaltsverzeichnis mit Sprungmarken das Durchsuchen langer Texte und steigert die Benutzerfreundlichkeit deiner Inhalte.
Anleitung von Karin Zeilinger: Divi: Anker / Sprungmarke Link setzen
So fügst Du Divi Anker-Links zu Buttons hinzu
Links erleichtern die Navigation auf Webseiten. Neben externen und internen Links sind Ankerlinks besonders nützlich, da sie innerhalb einer langen Seite zu bestimmten Abschnitten springen. In Divi kannst du Ankerlinks gezielt über das Button-Modul einfügen, um Buttons direkt zu bestimmten Inhalten auf derselben Seite zu verlinken und die Benutzerfreundlichkeit zu verbessern.
DIVI Carousel ohne Plugin
Tipp: Du kannst ein schlankes Divi-Carousel ohne Plugin erstellen, indem du eine einspaltige Zeile mit Modulen baust, spezielle CSS-Klassen hinzufügst und das kostenlose Slick.js-Framework direkt auf der Seite einbindest. So bleibt dein Website-Performance erhalten, da die Ressourcen nur auf der jeweiligen Seite geladen werden.
Hier findest du die vollständige Anleitung: divilife.com
DIVI Bars / Promo-Leisten
Mit Divi Bars kannst Du wunderschöne einschiebbare Promo-Leisten, Benachrichtigungsleisten, Optin-Leisten und vieles mehr erstellen, indem Du die Leistung und Flexibilität des Divi Builders nutzt!
Bewirb jeden Inhalt, zu jeder Zeit und auf jeder Seite Deiner Website. Entferne Dich von den typischen Promo-Balken, die Deine Besucher gewohnt sind zu sehen, und entfessle stattdessen Deine Kreativität mit Divi Bars; und füge alles ein, was Du Dir mit dem Divi Builder vorstellen kannst. Kombiniere außerdem mit Divi Popup, um Deine Reichweite für Promotions und Benachrichtigungen zu erhöhen.
Hier gibt es das kostenpflichtige Plugin: https://divilife.com/downloads/divi-bars/
Du kannst eine einfachere Leiste aber auch kostenlos erstellen mit dieser Anleitung.
Horizontales Scrollen auf dem Smartphone deaktivieren
Horizontal Scrollen deaktivieren auf dem Smartphone
Jeder kennt vielleicht das Gefühl oder hat es gesehen, wenn sich eine Website auf dem Smartphone nach links und rechts verschieben lässt und dadurch die Bedienung sich nicht gut anfühlt. Viele sagen auch das die Website dann sozusagen „Schwimmt“. Dieses Problem tritt auf, wenn Text oder ein Bild aus dem Content ragt.
Die schnellste Lösung ist dann einfach dieser CCS-Befehl:
Für DIVI:
#page-container {
overflow-x: hidden;
}
Für Elementor:
@media (max-width: 786px){
body{
overflow-x:hidden!important;
}
}
Nach einer Displaybreite von 786px wird nun das horizontale Scrollen unterbunden.
Fix für blinkenden, ungestylten Inhalt beim Laden der Seite
Du stellst fest, dass jedes Mal, wenn eine Seite geladen wird, sie kurzzeitig ungestylt zu sehen ist, bevor Sie wieder zum gewünschten Erscheinungsbild wechselt.
Das nennt man Flash von ungestyltem Inhalt. Das Standard-Styling des Browsers wird kurz vor dem Laden Deines Stylesheets angezeigt. Dies sieht nicht sehr professionell aus und kann sowohl für Dich als auch für den Benutzer sehr ärgerlich sein.
Um dies zu verhindern, fügen wir einige Codezeilen hinzu.
Hinzufügen des Code Snippet
Platziere das folgende CSS-Snippet in Deinem untergeordneten Themen Stylesheet oder – wenn Du kein untergeordnetes Thema verwendest – geh zu Divi > Themenoptionen > Integration > Füge dem < -Kopf > Deines Blogs Code hinzu
Platzieren Sie den folgenden Code-Snippet.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>
Das Hinzufügen dieses Code-Snippets sollte Deine Probleme sofort beheben. Beachte, dass Du möglicherweise Deine Website und den Browser-Cache löschen musst, um die Änderungen zu bemerken.
Ein Dankeschön für den Tipp geht an digitalrefresh.uk
0 Kommentare