Moet een inhoudsopgave maken of toevoegen in Elementor ?

Bij het schrijven van een lang artikel, zoals een lijst met gereedschappen of plaatsen, kunt u een inhoudsopgave toevoegen. In WordPress zijn er een aantal plug-ins die u kunt gebruiken om maak een inhoudsopgave op je artikel.

Maar met Elementor, hoeft u geen inhoudsopgave-plug-in te installeren als u een inhoudsopgave wilt toevoegen. Elementor heeft een standaardwidget waarmee u een inhoudsopgave aan uw lange artikel kunt toevoegen. We gaan het hier bespreken.

Inhoudsopgave is onlangs een nieuwe widget geïntroduceerd door Elementor. Met deze widget kunt u extra paginanavigatie bieden voor uw lange artikel, zodat uw bezoekers spring eenvoudig tussen secties van uw artikel.

Met de widget Inhoudsopgave van Elementor kunt u de exacte header-tags kiezen die u in uw inhoudsopgave wilt weergeven. U kunt ook kopteksten van een specifieke container op de pagina gebruiken.

Let op: Inhoudsopgave is een professionele widget. Je moet de pro-versie van Elementor installeren om het te gebruiken.

Hoe gebruik je de Inhoudsopgave widget in Elementor

Er zijn twee ideale manieren om de widget Inhoudsopgave in Elementor te gebruiken. Allereerst kun je het gebruiken op pagina's en berichten (pagina's en berichten die volledig met Elementor zijn gemaakt). Als alternatief kunt u de widget Inhoudsopgave maken op uw unieke berichtsjabloon. website WordPress.

Lees ook: Een formulier voor het uploaden van bestanden maken in Elementor

Natuurlijk moet het unieke postsjabloon met Elementor worden gedaan. Door de inhoudsopgave-widget op de sjabloon voor één bericht te implementeren, wordt automatisch een inhoudsopgave voor uw bericht gegenereerd, zolang het bericht de header-tags bevat op basis van de koptekstniveaus die u instelt op de inhoudsopgave-widget.

Voeg de inhoudsopgave-widget toe aan een enkele postsjabloon

In dit artikel laten we u zien hoe u de widget Inhoudsopgave kunt toevoegen aan een enkele postsjabloon. U kunt een nieuw sjabloon voor een enkel bericht maken of het bestaande sjabloon bewerken. In dit voorbeeld maken we een nieuw sjabloon voor een enkele post.

Om te beginnen logt u in op uw WordPress-dashboard en navigeert u naar Sjablonen -> Themabouwer. Navigeer op de Theme Builder-pagina naar: Enkele tab en klik op de knop EEN ENKEL TOEVOEGEN om een ​​sjabloon te maken.

In de sectie Selecteer de sectie soort modellen, kiezen Los bericht. Geef je model een naam en klik op de knop MAAK EEN MODEL.

We zullen de single post-sjabloon helemaal opnieuw maken; sluit de sjabloonbibliotheek.

Zie ook: Hoe reCAPTCHA aan uw Elementor-formulier toe te voegen

Voeg een nieuwe sectie toe door op de plusknop in het invoervak ​​van Elementor te klikken en de structuur met drie kolommen te selecteren.

Stel de breedte van de kolommen in met een vergelijking van ongeveer 28%: 61%: 10%.

Een inhoudsopgave toevoegen in Elementor

Voeg gemeenschappelijke elementen zoals berichttitel, berichtinfo en berichtinhoud toe aan de tweede kolom en pas dienovereenkomstig aan. Als u klaar bent, voegt u de widget Inhoudsopgave toe aan de eerste kolom.

Definieer de titel van uw inhoudsopgave in de sectie Titel en stel de koptekstniveaus in die u in de sectie wilt opnemen Ankers Door Tags.

Als je kennis hebt van CSS, kun je CSS-kiezers uitsluiten om te voorkomen dat ze in de inhoudslijst verschijnen.

Lees ook: Hoe een scheidingslijn toe te voegen om een ​​sectie te maken in Elementor

In de sectie Markeerweergave, kunt u de markering voor inhoudsitems (opsommingstekens of cijfers) instellen. Als u opsommingstekens selecteert, kunt u het pictogram instellen vanuit de pictogrambibliotheek.

open Extra Opties om andere instelopties weer te geven en de gewenste instellingen te selecteren.

Een inhoudsopgave toevoegen in Elementor

Ga nu naar het tabblad Style om uw inhoudsopgave aan te passen. U kunt de achtergrondkleur, randkleur, randbreedte en randradius in de sectie instellen Box.

Terwijl u de kopkleur, kopteksttypografie en koptekst wilt instellen, kunt u naar sectie gaan: Header.

In de sectie Lijst, U kunt de tekstkleur van het actieve element instellen, de tekstkleur van het element wanneer u er met de muis over beweegt en de tekstkleur van de elementen in de normale modus. U kunt hier ook de markeringskleur en de typografie van de inhoudselementen instellen.

Zie ook: Hoe Elementor op WordPress te installeren

Om uw inhoudsopgave nuttiger te maken, kunt u deze zichtbaar maken wanneer uw bezoekers scrol met de muis naar beneden. Open hiervoor het tabblad vergevorderd en toegang tot de optie Bewegingseffect. Bepalen de kleverige bovenop en stel de offset in op ongeveer 80. Als je wilt, kun je de invoeranimatie ook instellen in de sectie Entree animatie.

Je kunt met het linkerpaneel spelen totdat je tevreden bent met je inhoudsopgave. Als je klaar bent, klik je op de knop pUBLICEREN en stel de weergavevoorwaarde in.

Hier is een voorbeeld van een inhoudsopgave die we hebben gemaakt.

Een inhoudsopgave toevoegen in Elementor

Als u de weergavevoorwaarde van de sjabloon voor één bericht die u hierboven hebt gemaakt, instelt op: allemaal enkelvoud, u krijgt automatisch een inhoudsopgave elke keer dat u een lang artikel schrijft dat de header-tags bevat volgens het header-niveau dat u hebt opgegeven.

Op het einde

Het toevoegen van een inhoudsopgave aan een lang artikel levert een beste gebruikerservaring aan jouw bezoekers. Ze kunnen eenvoudig van de ene sectie van uw artikel naar de andere gaan door op items in de inhoudsopgave te klikken. Met de nieuwe widget van Elementor hoeft u geen extra plug-in te installeren om een ​​inhoudsopgave aan een artikel toe te voegen.

U kunt de widget Inhoudsopgave gebruiken tijdens het maken van een pagina of bericht met Elementor. Als alternatief kunt u ook de widget Inhoudsopgave toevoegen aan uw enkele berichtsjabloon website WordPress zodat wanneer u een lang bericht met header-tags schrijft, de inhoudsopgave automatisch wordt gegenereerd.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een inhoudsopgave kunt toevoegen in Elementor. Als u zich zorgen maakt over hoe er te komen flaat het ons weten in de commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...