Lesefortschritt:

Toolbar im Divi-Texteditor jederzeit zur Hand und im Blickfeld halten

8. Januar 2023 | CSS-Stylesheet, Divi-Theme, functions.php

Trick # 197 | Dieser Beitrag beinhaltet 700 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Wer längere Texte im Divi-Theme bearbeitet, kennt das Problem: Die Toolbar verschwindet nach oben und man muss ständig wieder hochscrollen um eine bestimmte Funktion zu aktivieren – etwa Zwischentitel setzen, BulletPoint-Listen erstellen, Texte zentrieren. Mit einem wirklich einfachen Trick ist aber die Editor-Toolbar immer sichtbar.

Sobald der Inhalt eines Divi-Textmoduls länger wird, verschwinden standardmässig die gewohnten Formatierungsicons der Toolbar. Das ist reichlich nervig, wenn man etwa Listenpunkte, Blockquotes, Links oder anderes einfügen möchte.

Doch die Toolbar lässt sich mit einem (bzw. zwei) kleinen Hacks in allen Texteditoren des Divi-Themes standardmässig als «sticky» – also immer sichtbar – definieren..

1. Editor-Toolbox im Divi-Visual-Builder als «sticky» festlegen

Für den Visual-Builder genügen ein paar Zeilen CSS-Code. Kopieren Sie den nachfolgenden Blocck in das CSS-Stylesheet Ihrer Word­Press-Installation – unter Design/Customizer/Zusätzliches CSS:

.mce-top-part {
    position: sticky!important;
    top: -60px;
}

Das funktioniert nun schon mal im Visual-Buildler. Wenn Sie jedoch auch im Backend Texte bearbeiten (und das tun die meisten mindestens ab und an) kommt noch eine Petitesse hinzu:

2. Editor-Toolbox im Divi-Builder des Backends als «sticky» festlegen

Da kommen Sie mit CSS leider weniger weit. Aber simpel bleibt’s trotzdem: Den folgenden Code in die Datei functions.php Ihrer Word­Press-Installation (Design/Theme-Editor) kopieren und gut ist:

add_action('admin_head', 'divi_wp_admin_css');
function divi_wp_admin_css(){
    echo '<style>
        .mce-top-part {
            position: sticky!important;
            top: -60px;
        }
    </style>';
}

Nun sieht das Editor-Fenster im Divi-Textmdul auch bei längeren Texten so aus.

Alles nötige ist zur Hand.

Werbung

Styling-Ideen für das Divi-Blurb-Modul

Vor Wochenfrist haben wir einen Beitrag zum Blurb-Modul des Divi-Themes veröffentlicht, in dessen Folge zahlreiche Anfragen für besondere Stylings eingetroffen sind. Darum schieben wir heute eine Serie Stylingideen zum Informationstext-Modul ...

Werbung

 

Pin It on Pinterest

Share This