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
Nicht so ganz. Eigentlich viel einfacher.
Zur nachfolgenden Erklärung hier ein Bsp:
Wikipedia: WordPress
Wie bereits beschrieben, stehen auf einer WP-Seite „WordPress“ mehrere Elemente untereinander;
„Geschichte“
„Funktionen“
etc.
Schnell wird diese Ansicht zu unübersichtlich, da der User zu viel scrolen muss.
Zur bequemen Abhilfe wird hier ein Index/“Inhaltsverzeichnis“ oben eingefügt.
Lösung1:
Klar kann man so etwas mit Elementor/Tabs aufbauen, finde ich aber zu unflexibel.
Lösung2:
Noch deutlicher wird mein Ziel folgend;
Eine WP-Seite mit Elementor edetieren – unten links auf „Navigator“ klicken!
Genau solch ein „Navigator“-Fenster in die WP-Seite/oben integrieren – Abschnitte verständlich beschriften – FERTIG!
Gelernt habe ich, dass ich ggfl. PlugIns unbedingt in der Elementor-Welt suchen muss. Gewiss habe ich einige Ansätze auf DVD und im Net gefunden, beziehen sich aber nicht auf Elementor.
Schön. Dann ist die Frage ja beantwortet?
Thread als „gelöst“ markiert.
Ich weis gerade nicht, was du Bego als „gelöst“ ansiehst – eine Lösung steht oben nirgend wo!
Vieleicht hat jemand Anderes aus diesem Forum tatsächlich eine neue Idee oder Lösung — einfach abwarten.
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.
Guten Morgen!
Das ist ein Bsp. zur optischen Verdeulichung, meines Ziels.
Dieses von mir beschriebene „Navigations-Fenster“ ist nur für den Admin zur Seitenbearbeitung, aber leider kein Widget.
Danke bis hier her, werde weiterhin im Angebots-Nebel stochern.
Irgendswann ist die Lösung sooooo einfach.
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 Hans-Gerd.
Dank dir für den Tip
https://atomicblocks.com/blocks/accordion-block/
Geht auf jeden Fall in meine Richtung.
Könntest du mir einen Link zu Ansicht deiner CSS-Programmierungs-Lösung schicken?
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