Hi,
er zijn verschillende opties voor Elementor, aangezien Elementor zijn eigen editor-interface heeft:
1. Aangepaste CSS in Elementor Instellingen (Makkelijkste)
Ga naar Elementor → Custom CSS (in de linker zijbalk tijdens het bewerken) en voeg toe:
/* Dit heeft alleen effect op de Elementor editor preview */
body.elementor-editor-active {
background-color: #333333;
}
Dit werkt echter mogelijk niet voor alle schermengebieden.
Voor alle editing panels:
2. Admin CSS voor Elementor Editor
Voeg dit toe aan het functions.php bestand van je thema
function elementor_editor_custom_styles() {
if (isset($_GET['action']) && $_GET['action'] == 'elementor') {
echo '<style>
#elementor-preview-iframe {
background-color: #2c3e50;
}
.elementor-editor-section-settings,
.elementor-panel,
#elementor-preview {
background-color: #2c3e50 !important;
}
/* Voor het canvas gebied waar je aan het bewerken bent */
body.elementor-page {
background-color: #2c3e50 !important;
}
</style>';
}
}
add_action('admin_head', 'elementor_editor_custom_styles');
3. Code voor specifiek de Preview
Daar waar je daadwerkelijk je content ziet tijdens het bewerken:
function elementor_preview_styles() {
echo '<style>
body.elementor-page {
background-color: #1e1e1e !important;
}
</style>';
}
add_action('wp_head', 'elementor_preview_styles');
4. Gebruik Elementor’s Thema Stijl
Je kunt ook een tijdelijke achtergrondkleur instellen in Elementor → Site Settings → Global Colors en deze toepassen op je secties tijdens het bewerken, en deze vervolgens verwijderen voordat je publiceert.
De uitdaging met Elementor is dat het een iframe gebruikt voor de preview, dus je moet mogelijk zowel de editor-interface ALS het preview frame targeten. Probeer eerst methode #2 omdat deze beide gebieden dekt.
Zorg ervoor dat je een test of staging site hebt zodat je daar eventuele code kan toevoegen en wijzigen, en testen of het naar behoren werkt.
