Als u lange inhoud publiceert, helpt het toevoegen van een inhoudsopgave zowel zoekmachines als bezoekers mensen om door uw inhoud te navigeren en deze te begrijpen.
Met de widget Inhoudsopgave widget voor WordPress, kunt u eenvoudig een inhoudsopgave toevoegen aan uw website die automatisch zijn inhoud genereert op basis van de hiërarchie van titeltags in uw inhoud.
Bijvoorbeeld:
Als je deze widget gebruikt met de visuele themabouwer van Elementor Pro, u kunt automatisch een inhoudsopgave aan al uw inhoud toevoegen zonder een vinger uit te steken. Wanneer een bezoeker op een link in de inhoudsopgave klikt, fungeert deze als anker en brengt hem naar dat gedeelte van de pagina.
In dit bericht laten we je precies zien hoe je de widget configureert Inhoudsopgave widget voor WordPress avec Elementor Thema-bouwer.
Maar laten we eerst samen ontdekken Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog.
Ga dan terug naar waarom we hier zijn.
Hoe u een inhoudsopgave toevoegt met Elementor
Allereerst moeten we opmerken dat je deze widget ook op een eenvoudige manier kunt gebruiken. In deze zelfstudie concentreren we ons echter op het automatisch toevoegen van de inhoudsopgave aan alle (of sommige) inhoud met behulp van Elementor Themabouwer en unieke berichtsjablonen.
Hier is hoe het te doen.
1. Maak of wijzig een enkele postsjabloon
Gebruik Elementor Theme Builder om aan de slag te gaan om een ​​nieuwe unieke postsjabloon te maken of om een ​​van uw bestaande unieke postsjablonen te bewerken waaraan u de inhoudsopgave wilt toevoegen.
Je kunt je sjabloon toepassen op elk type bericht (blog, pagina, aangepast berichttype), maar we zullen ons concentreren op blogberichten.
2. Voeg de widget Inhoudsopgave toe
Nadat u uw unieke postsjabloon heeft geopend, voegt u de widget toe Inhoudsopgave waar u uw inhoudsopgave wilt weergeven. Het bevindt zich in de categorie Uniek, met de widgets voor de titel van het bericht en de inhoud van het bericht:
Nadat je de widget hebt toegevoegd, zou je automatisch een lijst moeten zien met alle titels die in het bericht aanwezig zijn.
Nu is het tijd om de instellingen van deze widget te configureren.
3. Configureer de widgettabel
Zorg ervoor dat u de instellingen voor de widget Inhoudsopgave opent. Gebruik dan het tabblad Content om de inhoud te configureren die in uw inhoudsopgave verschijnt.
Voeg eerst de titel toe, bijvoorbeeld "Inhoudsopgave". Dit is statische tekst die verschijnt boven de lijst met ankerkoppelingen die de widget automatisch genereert.
Kies vervolgens de inhoud die u wilt opnemen. Op het tabblad Omvatten, Je kan binnenkomen :
- HTML-tag. U kunt bijvoorbeeld opnemen en, maar niet minder. U moet uw title-tags definiëren in de WordPress-editor.
- containers. U kunt ook ankerlinks naar andere containers buiten uw berichtinhoud toevoegen. Bijvoorbeeld je voet teen. Dit is een geavanceerde functie.
Als u het tabblad opent Uitsluiten, je kunt specifieke headers uit je bericht uitsluiten met een CSS-selector. Als u bijvoorbeeld één titel wilt uitsluiten , je kunt een speciale CSS-klasse toevoegen " negeren Aan die koptekst met behulp van de WordPress-editor en sluit deze vervolgens uit met behulp van de regel Ankers door Selector :
Vervolgens kunt u de parameter gebruiken Markeerweergave om te kiezen tussen cijfers en opsommingstekens in uw inhoudsopgave. Als jij kiest " kogels ", kunt u kiezen uit elk Font Awesome-pictogram.
Ten slotte kunt u de sectie gebruiken Extra opties om andere parameters te regelen:
Word Wrap - of de elementen meerdere regels kunnen hebben of niet.
Minimaliseer Box - als de bezoekers kan de inhoudsopgave wel of niet verkleinen. Als u deze optie inschakelt, kunt u ook aangepaste pictogrammen kiezen en responsief gedrag instellen. U kunt deze inhoudsopgave bijvoorbeeld automatisch samenvouwen voor bezoekers op mobiel.
Hiërarchische weergave - indien ingeschakeld, worden subkoppen ingesprongen onder bovenliggende koppen. Indien uitgeschakeld, wordt alles weergegeven in een enkele lijst zonder inspringing.
4. Configureer stijlinstellingen
Navigeer vervolgens naar het tabblad Stijl om uw inhoudsopgaveontwerp te configureren. U kunt alle kleuren en typografie wijzigen om een ​​gebruiksvriendelijke ervaring te creëren en bij de rest van uw ontwerp te passen. website :
5. Configureer geavanceerde instellingen
Ga naar het tabblad om de zaken af ​​te ronden Geavanceerd om nog een paar instellingen te configureren voor hoe uw inhoudsopgave werkt.
Als u bijvoorbeeld instelt Breedte gelijk aan Eigen et Positie gelijk aan vast in de sectie Positioneringkunt u ervoor zorgen dat de inhoudsopgave op dezelfde positie blijft, zelfs als gebruikers beginnen met scrollen op de pagina.
Als u gebruik maken van Positionering om uw inhoudsopgave bovenop een ander element weer te geven (zoals uw koptekst), kunt u ook de Z-index verhogen om deze bovenaan te laten verschijnen:
En dat is alles ! U hebt zojuist geleerd hoe u automatisch een inhoudsopgave aan uw inhoud toevoegt met behulp van de Elementor Visual Theme Builder en de inhoudsopgave-widget.
Koop om te beginnen Elementor Pro vandaag nog en maak uw inhoudsopgave in Elementor-themabouwer.
