WP+Elementor … aktiver Index

Wir hatten hier neulich eine Anfrage, bei der ein Benutzer in der Sidebar ein Menü nur mit Unterseiten anzeigen lassen wollten. Dabei hatte ich das Plugin Advanced Sidebar Menu vorgeschlagen, dass bei Ansicht einer Elternseite alle Unterseiten mit Link aufführt.

Wenn du den Thread nachlesen möchtest:

https://de.wordpress.org/support/topic/abhaengiges-menue

Schön. Dann ist die Frage ja beantwortet?

Thread als „gelöst“ markiert.

Genau solch ein „Navigator“-Fenster in die WP-Seite/oben integrieren – Abschnitte verständlich beschriften – FERTIG!

Gelernt habe ich, …

Das habe ich als „Problem für mich gelöst“ interpretiert.
Scheinbar ist „FERTIG!“ für dich nicht … fertig. Ich habe den Status „gelöst“ wieder entfernt und wünsche dir viel Erfolg bei der Lösung deines Problems.

Hallo,
vielleicht hilft Dir diese Lösung (Accordion) oder das hier.
Ich habe auf einer Seite eine sehr einfache und effektive Lösung mit reinem CSS erstellt, die ich hier als Beispiel posten kann, wenn es Dich interessiert.
Ob das aber mit Elementor funktioniert, weiß ich nicht …
Viele Grüße
Hans-Gerd

Hallo,
hier die CSS-Regeln, die Du in Desgin > Customizer > Individuelles CSS packen solltest (oder in die style.css des childtheme). Diese Regeln müssen ggfs. angepasst werden, wenn Dein theme optisch nicht einwandfrei reagieren sollte. Ein Teil der Regeln ist auskommentiert, weil ich diese Regeln nicht nutze. Ich habe sie aber drin gelassen, damit Du ggfs. diese Regeln verwenden kannst:

/* Start Accordion 
* {
    box-sizing: border-box;
}

img {
   max-width: 100%;
}
*/
.details-wrapper {
   width: 75vw;
   margin: 0 auto;
   background-color: #999999;
   /* box-shadow:0 0 1px 2px #E5E5E5;*/ 	
}

summary:hover {
  background-color: #008000; 
}

summary:focus {
	 background-color: #008000;
}

details {
   padding: .5rem;
   font: 1rem/1.2 sans-serif;
}

summary {
   padding: .25rem 1rem;
   font: bold 1.25rem/2 sans-serif;
   background-color: #999999;
   /*   border: none;
   border-radius: 3px;
   box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5); */
   color:floralwhite; 
   cursor: pointer;	
}

summary::before {
   padding-right: .25rem;
}

/*
details[open] summary::before {
  padding-right: .25rem; 
  font-style: italic; 
	funktioniert nicht 
	transition: 0.5s;  
}

details[open] summary {
   font-style: italic; 
   border-radius: 3px 3px 0 0;
}

.details-content {
   margin: 0;
   padding: .25rem 1rem;
   background-color: floralwhite;
   border-radius: 0 0 3px 3px;
   box-shadow: 0 1px 1px 1px rgba(0,0,0,0.5);
   color: steelblue;
}

.details-content div {
   font: 1.125rem/1.5 sans-serif;
	 transition: 0.5s; 	
}

div.accordion {
	line-height:1.5; 
	transition: all 0.35s;
}

div.accordion:checked {
	transition: 0.5s; 
}
*/
/* Ende Accordion */

Der folgende Code kommt in die Seite und zwar als HTML-Code (z. B. „Text“ im CLassic Editor):

<details>
<summary>Einkaufswagen</summary>
<div class="accordion">Bei uns stehen Ihnen Einkaufswagen zum Ausleihen zur Verfügung. Für 2,00 € pro Tag können Sie einen Einkaufswagen an der Kasse ausleihen. Selbstverständlich können Sie auch ihren eigenen Einkaufswagen von zuhause mitbringen.</div>
</details>
<details>
<summary>Gutscheine</summary>
<div class="accordion">Ein Gutschein ist eine gute Idee. Damit kann man viel mehr einkaufen als man will.</div>
</details>

Wie gesagt, das funktioniert auf einer Webseite – bietet aber keinen optischen Schnickschnack. Einen Link kann ich Dir leider nicht senden, weil die Seite noch in der Entwicklung ist. Aber wenn Du das so auf einer Testseite einbaust, wie ich das beschrieben habe, sollte das an sich reichen, um sich ein Bild zu machen.

Viele Grüße
Hans-Gerd

• Diese Antwort wurde geändert vor 5 Jahren von Hans-Gerd Gerhards.