We kunnen nu serieuze dingen beginnen. De creatie van schuifregelaar aan Slider Revolution kan in het begin nogal vervelend zijn. Je zult je koers verliezen, omdat je wilt weten waar dit of dat element is.

Je zult Slider Revolution kwijtraken door met gewoonte te oefenen en ook deze tutorial te lezen.

Tijdens onze vorige tutorials hebben we ontdekt hoe:

• Download en installeer Slider Revolution
• Hoe de Slider Revolution Home UI te begrijpen
• Een diavoorstelling instellen voor Slider Revolution

En nu we onze schuifregelaar hebben ingesteld, gaan we de maken dia's "Of" schuif .

Aan de slag met de "Presentaties" -editor

Na het opslaan van de configuraties van een schuifregelaar hebt u in principe toegang naar een nieuwe interface die je kennis laat maken met de editor van ' dia's .

Bovenaan ziet u dezelfde werkbalk waarmee u kunt terugkeren naar de lijst met "schuifregelaars of dia's", onder andere naar de parameters van de schuifregelaar en het voorbeeld van de schuifregelaar.

Ontdek ook onze 10 WordPress-plug-ins waarmee u uw blogberichten kunt beoordelen

Onderaan hebben we een nieuwe sectie waarin we de globale lagen, de verschillende 'dia's' en de knop om een ​​nieuwe 'toe te voegen' kunnen zien glijbaan .

Als u over de knop van een dia beweegt, ziet u dat nieuwe opties worden weergegeven. Deze opties zijn vrij duidelijk en gemakkelijk te begrijpen (dupliceren, toevoegen aan de sjabloon om deze later opnieuw te gebruiken en de dia te verwijderen).

Als u de muisaanwijzer op de knop voor het toevoegen van dia's plaatst, ziet u andere opties waarmee u een lege dia kunt toevoegen, meerdere dia's kunt toevoegen, een dia uit een sjabloon kunt toevoegen (model).

Momenteel bevindt u zich op de 1-dia, daarom wordt deze gemarkeerd in de dia-lijst. Als u een nieuwe dia maakt, wordt deze gemarkeerd in plaats van de eerste dia.

Slider Revolution op dit niveau is een echt dashboard. Als ik je alles uitleg, zul je niet veel begrijpen, dus ik zal het niet hebben over functies die verwarrend en niet essentieel kunnen zijn.

Lees ons artikel op 6 WordPress-compressie-plug-ins voor uw blog

Wanneer u een dia hebt geselecteerd, kunt u beginnen met bewerken in de volgende sectie. Deze sectie bestaat uit verschillende tabbladen (7) die u toegang geven tot verschillende functies.

Hoe u een achtergrondafbeelding aan een scène kunt toevoegen

Het eerste dat u eerst wilt doen, is een achtergrond aan onze dia toevoegen. Hier heeft u de keuze tussen: Een achtergrondafbeelding (uit uw mediabibliotheek), een externe URL die naar een afbeelding verwijst, een transparante achtergrond die de kleur zal gebruiken die wordt voorgesteld door de WordPress theme, een vaste kleur, een Youtube, Vimeo of HTML5 video. We zullen een achtergrond kiezen " beeld .

Je kunt veel gratis afbeeldingen vinden op internet. Doe gewoon een zoekopdracht op Google. 

Wanneer u een afbeelding toevoegt, is dit direct van toepassing in het diavoorbeeld en in de “scène”.

Een element toevoegen aan een scène

Nu we een goed versierde scène hebben, voegen we een element toe. Elk element dat u aan een scène toevoegt, wordt als een laag of laag beschouwd. Deze laagfunctie helpt je me te geloven.

Beweeg over een item om een ​​item aan de scène toe te voegen Voeg laag toe .

U zult merken dat u verschillende elementen kunt toevoegen, waaronder: tekst / HTML, afbeeldingen, audio, video, een knop, een vorm, een object en een element importeren.

We beginnen met het toevoegen van een transparante afbeelding van Snoopy de kleine puppy.

Voeg vervolgens deze afbeelding toe aan de scène en je hebt zoiets als dit:

U zult merken dat in de vier hoeken van de afbeelding kleine vierkantjes zijn. Met deze vierkanten kunnen we de afbeeldingen vergroten of verkleinen, omdat Snoopy in dit geval veel ruimte in beslag neemt.

Resizing wordt gedaan door " slepen ". Om het formaat te wijzigen met behoud van de verhoudingen, houdt u de knop " Mei Vanaf uw toetsenbord tijdens het wijzigen van het formaat.

Zie ook onze 10 WordPress-plug-ins die je een betere Blogger maken

Nu ziet Snoopy er zo uit, het is passender. U kunt ook een afbeelding omdraaien met behulp van de indicator in de rechterbovenhoek van elke afbeelding, als volgt:

Hoe elementen te positioneren met het hulpraster

Het hulpraster is een waardevol element dat helpt de elementen beter te positioneren. U kunt het Help-rooster links onderaan het podium activeren.

Dit raster heeft tegels met verschillende groottes, hoe kleiner de maat, hoe preciezer je zult zijn in de plaatsing van het element.

Hoe voeg je animaties toe

Er zijn 3 soorten animaties op Slider Revolution: entree-animaties, animaties tijdens (het bestaan ​​van het element in de scène) En end animaties.

Zie ook onze 6 WordPress-compressie-plug-ins voor uw blog

Om een ​​animatie aan een element toe te voegen, moet u deze eerst selecteren door erop te klikken (wanneer een element is geselecteerd, wordt het omkaderd door een stippellijn met aanpasbare hoeken).

Dus klik op Snoopy, ga omhoog op de pagina en klik op het tabblad « Animatie .

In de vorige afbeelding heb ik de invoeranimaties in het blauw en de uitvoeranimaties in het rood.

Om een ​​animatie te wijzigen, klikt u op de vervolgkeuzelijst die zich achter het pictogram van de lopende man bevindt.

Je hebt dan een breed scala aan animaties tot je beschikking. Ik laat het aan jou om de animatie te kiezen die je wilt definiëren voor de invoer van een element. Van mijn kant koos ik " easeOutElastic », Om dit resultaat te krijgen:

Hier voor u onze 4 WordPress-plug-ins om de voettekst van uw blog te verbeteren

Verder naar links kun je de duur van de animatie en de animatiemodus bepalen die je moet laten staan ​​op ' Geen splitsing Omdat de andere opties alleen van toepassing zijn op tekst, niet op afbeeldingen.

Lire aussi Hoe de titels van artikelen en WordPress-pagina's te verbergen

Nu wil ik Snoopy drijven, ga daarvoor naar ' Ringleiding En kies in de vervolgkeuzelijst ' Wave ". Nu drijft Snoopy:

Hoe de zichtbaarheid van elementen te configureren

Mijn Snoopy zweeft, maar ik wil niet dat deze zichtbaar is op mobiel. Dus klik op " zichtbaarheid »En zorg ervoor dat het op het Smartphone-pictogram is gedeactiveerd:

Hoe het gedrag van elementen aan te passen

Om het laden van de schuifregelaar te optimaliseren, wilt u misschien het laden van de afbeeldingen uitstellen. Dit gebeurt op het tabblad ' gedrag Met de optie " Lazy laden ". Je kunt zelfs het reactievermogen van elementen forceren.

Hoe aangepaste triggers op een element te maken

Met Acties kunt u triggers aan specifieke acties koppelen. Klik op het tabblad om een ​​trigger toe te voegen Acties »Vervolgens op de knop« + ».

Er zijn 3-typen triggers:

• De klik, die met de muis klikt
• De muis voert het element in
• De muisuitgang boven het element

De lijst met acties is vrij lang. U kunt bijvoorbeeld een gebruiker die op Snoopy klikt doorverwijzen naar een andere pagina door de actie ' Eenvoudige Link Dat brengt nieuwe opties met zich mee.

Ontdek ook onze 10 premium WordPress-plug-ins van boeken en boeken

Hoe Slider Revolution TimeLine te gebruiken

Slider Revolution biedt onderaan een interface voor tijdbeheer. Met deze interface kun je zien waar de animatie van een element begint en waar deze eindigt.

Op de vorige afbeelding ziet u twee blauwe pijlen. De eerste aan de linkerkant geeft het begin van de invoeranimatie van een element aan en de tweede geeft het einde van de invoeranimatie aan. De donkerrode kleur geeft het leven van het item in de scène aan.

Lire aussi Hoe maak je een countdown toe te voegen op je WordPress blog

Je zult een einde vinden dat ook lijkt op het andere einde van een duur (invoeranimatie, levensduur en eindanimatie).

Met de " tijdlijn U kunt bepalen welk element eerder wordt weergegeven en welk element eerst verdwijnt. Het is een zeer praktisch hulpmiddel dat u moet beheersen om goede animatie te maken.

De tijdlijn heeft ook een speler die u kunt activeren om een ​​voorbeeld van de dia te bekijken.

Tot die tijd gaf ik je de basis om een ​​dia te maken. Sla nu uw schuifregelaar op en start het voorbeeld.

Dat is alles voor deze tutorial, in een volgende zullen we het hebben over de weergave van een schuifregelaar bij een artikel en enkele geavanceerde bewerkingen.

Ontdek ook enkele thema's en premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Disk Audio

Schijfaudio is een andere WordPress Plugin waarmee u met slechts één druk op de knop een audiospeler direct op uw website kunt weergeven. De lay-out van de audiospeler is volledig responsive, zodat mobiele gebruikers probleemloos van de functies kunnen genieten.

Bovendien biedt het vele aanpassingsopties, waaronder kleurenschema's, uiterlijken, achtergrondafbeeldingen en ondoorzichtigheid. Het heeft verschillende opties om het via een toetsenbord te bedienen kunt u ook uw afspeellijst bekijken met een instelbare schuifbalk.

Lees ook: 10 WordPress plugins om onderzoek te versterken op uw blog

Je kunt ook downloadlinks insluiten in de muziekspeler om gebruikers te laten zien waar ze de track kunnen kopen die op je website wordt afgespeeld. 

Downloaden | demonstratie | web hosting

2. Event Booking Pro

Dit is een andere WordPress Plugin 100% responsief, gemakkelijk aan te passen en toegewijd aan het beheer van reserveringen op elke website die zijn diensten aanbiedt op het gebied van evenementen.

De belangrijkste kenmerken zijn: aanpassing van tekst, kleur, randen en andere, ondersteuning voor PayPal, beheer van couponcodes en coupons, ondersteuning voor Google Maps, de ondersteuning van het beheer van e-mails,  de ondersteuning van de shortcodes, intuïtief bedieningspaneel, eenvoudig maken van evenementen, totale controle over het uiterlijk, enz.

Downloaden | demonstratie | web hosting 

3. Social Share & Locker Pro

De Social Share & Locker Pro-extensie is ontworpen om uw website beter zichtbaar te maken op sociale netwerken. Met slechts een paar klikken kunt u de positie van uw sociale pictogrammen instellen of uw inhoud vergrendelen door te delen op een van de sociale netwerken die door u worden aangeboden.

U hebt vooraf gedefinieerde 10-thema's en deze zouden de meest voorkomende wensen moeten dekken. Al haar thema's zijn Retina en werken wonderen. 

30 dingen te doen op uw blog posts na hun publicatie Ontdek ze door dit artikel te raadplegen.

Bovendien kunt u met Social Share & Locker Pro de volledige naam van sociale netwerken of alleen het pictogram weergeven. Het hangt af van uw ontwerp, de beschikbare ruimte of uw wensen.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

• Hoe word je een succesvolle blogger en verdien je geld met WordPress
• Hoe Google-formulieren integreren op WordPress
• Hoe een privacybeleid op WordPress te maken
• 6 WordPress-plug-ins om RGPD-conformiteit van een blog te garanderen

Conclusie

Alstublieft ! Dat is het voor deze gids. We hopen dat deze tutorial je de basis heeft gegeven van het maken van een diavoorstelling met Slider Revolution op een WordPress-blog of -website. Als u vragen, suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

U kunt echter ook onze ressources, 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.

Aarzel niet om deel met je vrienden op je favoriete sociale netwerken. 

...