Wie bekommt man das Elementor-Akkordeon geschlossen beim Start der Seite?
Elementor ist zu meinem bevorzugten visuellen Designer für WordPress geworden, und wir verwenden es sehr oft in Projekten der Kunden unseres Unternehmens. Im heutigen Post teile ich einen kleinen Trick, mit dem Sie den Akkordeons dieses Tools einen geschlossenen Look verleihen können.
Es ist sehr üblich, dass ein Kunde Sie bittet, Informationen in Akkordeons zu „setzen“. Es wird häufig für SEO-Themen verwendet. Die Seite muss eine bestimmte Anzahl von Wörtern enthalten, aber es gibt keine Möglichkeit, dass so viel Text da hinein passt.
Das Problem ist, dass in Elementor standardmäßig immer die erste Registerkarte des Akkordeons geöffnet. Und es gibt Kunden, die das hassen! Kann man das eine lösen? Natürlich, wenn Sie einfach den folgenden Code in einem HTML-Block einfügen, wo immer Sie wollen:
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script> Das ganze lässt sich auch auf mobile Geräte begrenzen. Da nervt so ein riesigen, offenes Akkordeon ja am Meisten. Wir erweitern das um ein paar Zeilen:
if (window.matchMedia(„(max-width: 480px)“).matches)
{ // der code für mobil
} else { // der andere code
}
<script>
if (window.matchMedia("(max-width: 480px)").matches)
{
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
} else {
}
</script> Fertig :-)
Also irgendwo auf der Seite einen HTML Block platzieren und den Code einfügen. Keine Angst: Er wird nicht sichtbar im Frontend sondern sorgt nur eine geschlossenes Akkordeon beim Seitenstart.
Ich wünsche gute Unterhaltung!
Nachtrag
Elementor vertical fix
Bei dieser Gelegenheit: Noch eine nervige Kleinigkeit beim Elementor : auf Mobiles kann man die ganze Seite vertikal hin und her schieben. Um das abzustellen ein schneller fix für das style.css des CHILD Themes (die passende Media Query setzt ihr selbst) =>
/*mobile fix */
html,
body{
width:100%;
overflow-x:hidden;
} Du brauchst hilfe zum Thema? Schreib mir....
Verwandte Artikel
Ersetzen von Eicons mit Font Awesome Header Elementor
Problem : Der Hamburger Icon und einige andere Elemente in Elementor benutzen Eicons. Diese sind eigentlich unnötig und kosten Ladezeit. Ich mag sie persönlich überhaupt nicht. Lösung: Ersetzten mit Font Awesome Diese Lösung
Das Kreuz mit den Schriften im Web
Regel : Benutze web safe-Fonts bzw. websichere Schriften! Natürlich! Logisch! Nichts besser als Websafe Fonts. aber wie eigentlich? Erkenntnis: Es gibt kaum noch Websafe-Fonts! Wir haben doch Google Fonts! Natürlich. Das Erscheinen der
Teilen
Super Tipp mit dem Akkordeon. Bin noch am Einarbeiten in Elementor.
Gerne – Elementor ist sehr mächtig, hat aber auch so seine Tücken.
Wie jedes Tool :-)
Bei mir kann ich nicht speichern, wenn ich den Code integriert habe. Server Error (510 Error).
Kann ich da was tun?
Halli Oliver,
Ein 510 Error besagt, daß HTML Code nicht vollständig ist und somit nicht ausgeführt werden kann. Hast Du das script komplett kopiert und in einem HTML Baustein untergebracht?
Super, genau was ich gesucht habe! Danke!
Gerne Julia -Willkommen :-)
Hey, auf dem Desktop funktioniert es bei mir super, auf dem Handy jedoch garnicht .. Woran kann das liegen?
Vielen Dank vorab.
Das HTML widget ist auch auf mobile aktiv (Erweitert -> responsive -> alle geräte aktiv)?
Hallo
einfach zu integrieren und funktioniert soweit perfekt. Bis mich jemand darauf aufmerksam gemacht hat, dass die Seite auf dem Smartphone einen Schönheitsfehler hat.
Das oberste Accordion hat eine etwas kleinere Schrift als die Anderen. Wenn man mal drauf geklickt hat wird sie gleich gross wie die Anderen. Nach einem refresh ist das Problem wieder da.
Nur ein kleiner Schönheitsfehler und ich weis nicht ob dies bei jedem zutrifft.
Das kann ich leider überhaupt nicht nachvollziehen. Der Code sollte einwandfrei NUR den obersten Tab schließen und sonst gar nix. Ich habe selbst auf. etlichen Seiten im Einsatz.
Hallo, danke für den Code! Gibt es eine Möglichkeit, dass sich bei Klicken eines Ankerlinks das entsprechende Akkordeon öffnet?
Hallo Alina,
Ja, gibt es. Aber das ist etwas zu steil in diesem Rahmen…..
Liebe Grüße!
Große Hilfe! DANKE!!!
Hi,
vielen Dank für den Code. Sehe ich das richtig, dass das Problem mit dem Umschalter Element gar nicht erst auftritt? Mir ist der Unterschied des Accordeons und des Umschalters nicht ganz bewußt…
Viele Grüße!