Heb je ooit gekeken naar een verticale voortgangstracker in plaats van een traditionele schuifbalk? Als dat niet het geval is, bladert u door dit artikel tot het einde om erachter te komen hoe u het kunt maken met Elementor Pro.
Maar voordat we het hoofdthema aanpakken, laten we eerst eens kijken wat een voortgangsvolger is.
Een voortgangsvolger is een voortgangsindicator die de gebruiker informeert over de voortgang van een lopend proces, zoals het installeren van een applicatie, updaten, het lezen van een artikel, etc. . En er zijn twee soorten:
- le lineaire voortgangsvolger
- le circulaire voortgangsvolger
U kunt ook lezen: Elementor: Hoe maak je een effectkaart van een portfolio
In deze zelfstudie laten we u stap voor stap zien hoe u een verticale voortgangsindicator invoegt in een sectie met de postarchieven.
Een voortgangstracker maken
In het tabblad elementen vanuit het gereedschapspaneelElementor, typ in de zoekbalk Voortgangstracker. Sleep de widget vervolgens naar een sectie.
Er verschijnt dan een voortgangsindicator. Standaard is het horizontaal georiënteerd. Maar maak je geen zorgen, je zult later zien hoe je het verticaal kunt rangschikken.
De voortgangsindicator die wordt gemaakt, laten we de nodige wijzigingen aanbrengen om het gewenste resultaat te verkrijgen.
Zie ook: Elementor: Hoe maak je een effectkaart van een portfolio
Inhoud van voortgangstracker bewerken
Hier kies je het type tracker en waar deze mee te maken heeft.
De belangrijkste instellingen zijn:
- typische tracker: hier is de standaardwaarde Horizontaal. Wanneer u echter door de lijst bladert, wordt het type bouwen wordt u ook aangeboden. Bewaar de standaard.
- Voortgang ten opzichte van: kies in deze tweede instelling de waarde selector. Deze keuze zal een extra instelling oproepen: Kiezer.
- Kiezer: Dit veld is bedoeld om de identifier te ontvangen van het object waaraan de tracker zal worden gekoppeld.
Laten we het publicatiearchief selecteren, aangezien dit het element is waaraan onze tracker is gekoppeld.
Ga in het instellingenpaneel naar het tabblad Geavanceerd en vul vervolgens een waarde in het veld in CSS-ID.
Ga vervolgens terug naar het trackerpaneel en vul het Selector-veld in het menu in inhoud.
Stel ten slotte de oriëntatie van de voortgangsindicator naar rechts in.
De stijl van de voortgangstracker wijzigen
In deze stap zullen we de parameters van de voortgangsindicator configureren, evenals de achtergrond van de laatste.
Begin met het instellen van de voortgangsindicator.
Lees ook: Elementor: een afbeeldingengalerij maken
- Aanpassing voortgangskleur kunt u kiezen tussen een klassieke progressie en een gradiëntprogressie. Kies in ons voorbeeld de eerste optie. Wat de keuze ook is, het lijkt de instelling couleur.
- stel inheeft kleur met behulp van het algemene kleurenpalet of de kleurenkiezer.
- Het type rand: je hebt hier zes voorstellen (geen, vol, dubbel, gestippeld, gestippeld, groove). Kies voor een volledige border.
- breedte: Dit is om de rand van uw voortgangsindicator dikker te maken.
- De grensradius: Standaard ziet de voortgangsindicator eruit als een rechthoek. Door de straal te wijzigen, worden de uiteinden afgerond.
Stel tot slot de piste achtergrond instellingen. Je merkt dat het bijna dezelfde instellingen zijn die terugkomen. Beperk je daarom tot de eerder genoemde.
Geavanceerde opties voor voortgangsvolger wijzigen
Om ons werk te voltooien, zullen we de volgende tabbladen instellen: bewegingseffecten, transformatie en aangepaste CSS.
Laten we eerst beginnen met het tabblad Aangepaste CSS. Selecteer het en voer vervolgens de volgende code in het juiste veld in. Hiermee kunt u de breedte van de tracker definiëren. Het stelt dus de breedte in op 50% van de hoogte van het venster.
Draai vervolgens de tracker in verticale richting. Selecteer hiervoor het submenu Transformator, schakel rotatie in en typ vervolgens 90 in het lege veld. Hierdoor wordt onze widget 90 graden gedraaid en krijgt u de gewenste verticale positie.
Om onze widget op hetzelfde niveau uit te lijnen als de eerste berichten, past u een offset van 145 toe.
Als we op dit niveau door onze pagina scrollen, zul je zien dat onze voortgangsindicator verdwijnt terwijl we door onze pagina scrollen inhoud.
Om dit probleem op te lossen, opent u het tabblad Bewegingseffecten, laat dan de opdracht vallen Pin en selecteer en bas.
Als we deze keer naar beneden scrollen, zien we onze voortgangstracker geleidelijk vullen terwijl we door ons archief met berichten bladeren.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een verticale voortgangsvolger maakt.
Interactieve elementen toevoegen, zoals de verticale voortgangsindicator bij het maken van uw website kan het echt naar een hoger niveau tillen door het intuïtiever te maken. Bovendien kan het worden gekoppeld aan een hele pagina of aan de inhoud van een publicatie en zelfs van elk ander specifiek element van een pagina. Weten hoe je het moet gebruiken, zou daarom een ​​bijkomend voordeel zijn.
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.
...
