Lesefortschritt:

Schaltflächen im Divi-Visual Builder links gruppieren

8. September 2024 | CSS-Stylesheet, Divi-Theme

Trick # 384 | Dieser Beitrag beinhaltet 464 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Der Visual-Builder des Divi-Themas bietet am unteren Rand des Monitors eine Reihe von Schaltflächen, mit denen Sie verschiedene Aktionen durchführen können – etwa das Speichern der Seite etc. Einige dieser Schaltflächen befinden sich unten rechts auf der Seite. An dieser Stelle werden jedoch auch häufig Benachrichtigungs- und Chat-Komponenten angezeigt. Wenn Sie vermeiden möchten, dass die Schaltflächen diese Komponenten verdecken, können Sie die Steuerelemente des Visual Builders auf die linke Seite verschieben.

Im Normalfall zeigen sich die Schaltflächen im Visual Builder so:

Um die Schaltflächen von rechts nach links zu verschieben, benötigen Sie folgenden CSS-Code. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:

/* Ältere Visual Builder (Version 3.x) */
.et-fb-page-settings-bar :not(.et-fb-button-group--save-changes) > .et-fb-button--publish {
position: fixed;
left: 30px;
bottom: 75px;
}
.et-fb-page-settings-bar :not(.et-fb-button-group--save-changes) > .et-fb-button--save-draft {
position: fixed;
left: 104px;
bottom: 75px;
}

/* Aktuelle Visual Builder */
.et-fb-button-group--save-changes {
position: fixed !important;
margin-top: -70px;
left: 30px !important;
}
.et-fb-button-group--save-changes .et-fb-button--help, 
	.et-fb-button-group--save-changes .et-fb-button--quick-actions {
margin-right: 8px !important;
}

Die Visual-Builder-Schaltflächen sind nun allesamt links ausgerechtet.

Ab und an vielleicht praktisch.

Werbung

«Back to top»-Button im Divi-Theme stylen

Im Divi-Theme lässt sich ein «Back to top»-Button anzeigen. Wenn man auf einer Seite hinunterscrollt wird dieser Button unten rechts angezeigt und ermöglicht es BesucherInnen, mit einem Klick wieder bis ganz nach oben zu scrollen. Ein nettes ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.