Support » Plugins » WP+Elementor … aktiver Index

  • Hallo zusammen.
    Bei der Gestaltung meiner WebSite, suche ich für folgendes Problem einen Lösung;

    Meine Seiten sind durch viel Elemente, Bilder, etc. zu lang. Um den Seitenbesucher nicht abzuschrecken, stelle ich mir einen Index ähnlich dem „Inhaltsverzeichnis“ von Wikipedia, oder ein aktives Unter-Menü innerhalb der Seite vor.

    Weder in WP, noch in Elementor habe ich solch ein Werkzeug gefunden.
    Ist ein entsprechendes PlugIn unbedingt erforderlich?

    • Dieses Thema wurde geändert vor 4 Monate, 2 Wochen von wpseins.
    • Dieses Thema wurde geändert vor 4 Monate, 2 Wochen von wpseins.
Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • 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

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)