Elementor Section ausblenden und Ausgabe im Frontend verhindern
Elementor ist ein leistungsfähiger Page Builder, der es Benutzern ermöglicht, ihre Website auf eine intuitive, effiziente Weise und ganz neu dank Elementor AI mittels künstlicher Intelligenz anzupassen und zu gestalten. In der Verwendung von Elementor kann es jedoch vorkommen, dass man bestimmte Abschnitte, die man zuvor erstellt hat, vorübergehend ausblenden möchte.
Grundsätzlich bietet Elementor bereits die Möglichkeit über die Responsiv-Funktion unter „Erweitert“, einzelne Abschnitte zu verstecken. Diese Funktion ist jedoch nicht ausreichend, wenn Sie Abschnitte wirklich ausblenden wollen, da die versteckten Abschnitte immer noch im HTML Ihrer Website im Frontend ausgegeben werden und potenziell immer noch sichtbar sind.
In diesem Blog-Beitrag werden Sie erfahren, wie Sie dieses Problem lösen können und wie Sie versteckte Abschnitte wirklich verstecken können.
Zugriff auf die Funktions-Datei Ihres Child-Themes von WordPress
Damit Sie den notwendigen PHP-Code zum Hinzufügen der neuen Funktion in Elementor auch implementieren können, benötigen Sie Zugriff auf die functions.php Datei Ihres Child-Theme. Es gibt mehrere Möglichkeiten, auf die functions.php Datei von WordPress zuzugreifen:
- Über das WordPress-Backend: Sie können auf die functions.php Datei zugreifen, indem Sie sich in Ihre WordPress-Installation einloggen und zu „Design“ -> „Editor“ navigieren. Hier können Sie die functions.php Datei direkt bearbeiten.
- FTP-Zugriff: Sie können auf die functions.php Datei zugreifen, indem Sie sich mit einem FTP-Client (wie z.B. FileZilla) auf Ihren Server verbinden und die Datei direkt auf dem Server bearbeiten.
- File Manager Ihres Hosting: Einige Hosting-Anbieter bieten einen File Manager in Ihrem Hosting-Dashboard, über den Sie auf Ihre Dateien und Ordner auf dem Server zugreifen können und somit auch die functions.php Datei bearbeiten können
Es ist wichtig zu beachten, dass jede Änderung an der functions.php Datei Ihrer Website direkt Auswirkung haben könnte. Daher empfiehlt es sich vor jede Änderung ein Backup zu machen oder den Vorgang lokal zu testen. Wenn Sie dieser Anleitung aufmerksam folgen sollte es jedoch keine Probleme geben.
Code-Snippet zur Aktivierung der Verstecken-Funktion
Der unten stehende Code-Schnipsel stammt aus einem GitHub-Beitrag und ermöglicht es, die Funktionalität von Elementor so zu erweitern, dass einzelne Abschnitte auf einfache Weise vollständig versteckt bzw. deaktiviert werden können. Dies wird durch die Verwendung von verschiedenen Hooks von Elementor erreicht, die es ermöglichen, die Funktionalität des Plugins zu erweitern und an die individuellen Anforderungen anzupassen.
Fügen Sie folgenden Code am Ende Ihrer functions.php Datei ein:
/**
* Class Elementor_Disable_Section
*/
class Elementor_Disable_Section {
public function __construct() {
// Add hooks only if elementor is loaded
add_action( 'elementor/init', [ $this, 'add_hooks' ] );
}
public function add_hooks() {
// Add our custom control section to Section panel
add_action( 'elementor/element/section/section_typo/after_section_end', [ $this, 'add_section_controls' ], 10, 2 );
// Filter if the section was set as disabled
add_filter( 'elementor/frontend/section/should_render', [ $this, 'should_render' ], 10, 2 );
}
/**
* should_render
*
* This is the magic method that actually disables the section
* render if it was set as disabled.
*
* @param bool $should_render
* @param object $section
* @return void
*/
public function should_render( $should_render, $section ) {
$is_disabled = $section->get_settings( 'is_disabled' );
if ( ! empty( $is_disabled ) && 'yes' === $is_disabled ) {
return false;
}
return $should_render;
}
/**
* add_section_controls
*
* Used to add our "Disable" control to section panel
*
* @param object $section
* @param array $args
* @return void
*/
public function add_section_controls( $section, $args ) {
$section->start_controls_section(
'section_disable',
[
'label' => 'Disable Section',
'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
]
);
$section->add_control(
'is_disabled',
[
'label' => 'Disable',
'type' => \Elementor\Controls_Manager::SWITCHER,
]
);
$section->end_controls_section();
}
};
new Elementor_Disable_Section();
Nach erfolgreicher Implementierung des oben genannten Codes, sollten Sie im Editor von Elementor eine neue Option im Bereich „Erweitert“ bei jedem Abschnitt vorfinden, die als „Disable Section“ bezeichnet wird. Durch die Aktivierung dieser Funktion wird der betreffende Abschnitt nicht gelöscht, jedoch die Ausgabe im Frontend Ihrer Website unterbunden. Das bedeutet, dass Besucher Ihrer Website diesen Abschnitt nicht im HTML Ihrer Website vorfinden können.
Wann ist es sinnvoll einen Elementor Abschnitt vollständig zu verstecken?
Eines der wichtigsten Anwendungsfelder für das vollständige Verstecken von Abschnitten in Elementor ist die Möglichkeit, Inhalte während der Entwicklungsphase zu schützen. Dies beinhaltet das Verhindern, dass Abschnitte von Benutzern oder Suchmaschinen gesehen werden, bevor sie vollständig aufgebaut und bereit sind, veröffentlicht zu werden. Es ermöglicht auch die Möglichkeit, Inhalte auf bestehenden Seiten hinzuzufügen und diese erst zu einem späteren Zeitpunkt zu veröffentlichen. Durch das Verstecken von Abschnitten während der Entwicklungsphase kann sichergestellt werden, dass nur relevante und abgeschlossene Inhalte auf der Website angezeigt werden, was zu einer positiven Nutzererfahrung beiträgt.
