HET WORDPRESS ZONDER GEDOE STUDIEPAKKET

Transcriptie

1 X Theme revolution slider HET WORDPRESS ZONDER GEDOE STUDIEPAKKET De Instructie E-Books om zonder gedoe zelf je WordPress website te maken

2 INHOUD P 1 P P 3 P 4 P 5 P 6 X Theme Revolution Slider Introductie Revolution Slider Main Slider Settings Voorbeeld Slide Afbeelding(en) toevoegen Slide activeren P 1 Edit Slides P General Slide Settings 1 P 3 General Slide Settings P 4 General Slide Settings 3 P 5 Slider Main Image/Background 1 P 6 Slider Main Image/Background P 7 Edit Slider P 8 General Settings P 9 Position P 10 Appearance / Background Image Options P 11 Spinner P 1 Navigation P 13 Bullets/Thumbnail Position P 14 Left Arrow Position P 15 Thumbnails P 16 Mobile Touch P 17 Mobile Visibility P 18 Single Slide P 19 Alternative First Slide P 0 Global Overwrites P 7 Slide P 8 Add Layer P 9 Insert Button P 30 Align / Final Rotation P 31 Layer Animation / Start Transition P 3 End Transition / Loop Animation P 33 Add Layer: Image P 34 Add Layer: Video P 35 Layers Timing & Sorting P 36 Wordt vervolgd! X Theme revolution slider

3 X Theme Revolution Slider Je hebt bij ons een Doe het zelf Website besteld en daar horen onze E-Books bij. Je bent aangekomen bij deel vijf: X revolution slider. Met dit E-book ga je leren om een revolution slider te maken. Succes! X Theme revolution slider 1

4 Introductie Revolution Slider 1 De Revolution Slider heeft veel mogelijkheden en kan op elke pagina geactiveerd worden. Iedere pagina kan een andere slider tonen. Je hebt de keuze uit verschillende layouts, teksten toevoegen etc. Ik ga veel van deze mogelijkheden uitleggen van deze mooie slider. Je zal merken dat ik sommige opties oversla omdat deze voor nu niet belangrijk zijn. Wil je meer weten over een bepaalde instelling? Stuur dan een mail met je vraag naar support@wpacademy.nl. 1. Revolution Slider Open in het menu van WordPress de Revolution Slider.. Create New Slider Klik op deze knop om een nieuwe slider te maken. X Theme revolution slider

5 1. Main Slider Settings Slider Title: De naam van je Slider ingeven. Slider Alias: De naam van je Slider zonder hoofdletter ingeven. Source Type: In dit E-book ga ik uit van de Gallery optie! Slider Layout: Kies hier voor Auto Responsive. Hij schaalt nu automatisch mee met andere beeldscherm formaten. De volgende opties op Off laten. Grid Settings: Grid Width: De breedte aangeven van de Grid. Binnen dit grid blijven de layers die je kunt plaatsen in de Slider. Grid Height: De hoogte van de Slider aangeven. Layout: Voorbeeld van de Slider layout binnen de pagina van je website.. Bewaren Aan de onderkant van deze instellingen staan diverse knoppen. Klik op de groene knop Save Settings. X Theme revolution slider 3

6 Voorbeeld Slide Voordat ik verder ga met het beschrijven van de instellingen die rechts staan van de Main Slider Settings, gaan we eerst een voorbeeld slider maken. 1 Zo kan je meteen de verschillende instellingen uitproberen en zien wat er gebeurt in je website. Zorg daarom dat je, naast je admin, ook je website hiernaast open hebt staan in je browser. Bij elke veranderde instelling die je bewaard hebt kan je naar je website gaan, refreshen, en meteen zien wat er gebeurt. Anders blijft het een droge opsomming van feiten en wanneer je actief ermee bezig bent snap je ook eerder wat het allemaal doet binnen je slider. 1. Klik op Edit Slides.. In het venster wat nu verschijnt klik je op +New Slide. X Theme revolution slider 4

7 3 Afbeelding(en) toevoegen 1. Mediabibliotheek Maak hier de keuze welke afbeelding(en) je in de slider wilt tonen. Of voeg nieuwe bestanden toe via het tabblad ernaast Bestanden uploaden.. Insert Klik Insert om je afbeelding(en) toe te voegen. 3. Edit Slides: Home Je afbeelding(en) staan nu in de Slides List. X Theme revolution slider 5

8 3 1 Slide activeren Nu gaan we de Slider activeren op de gewenste plaats in de website. Bij mij komt hij in de Home pagina onder de navigatiebalk. 1. Ga in het WordPress menu naar pagina s en kies de pagina waar je de slider wilt tonen. In mijn geval de Home pagina. Scroll naar beneden naar Sliders settings: Below Mast head.. Kies hier de slider die je net gemaakt hebt. 3. Klik op Bijwerken. Kijk maar eens hoe je slider eruit ziet in je website! X Theme revolution slider 6

9 Edit Slider 1. We gaan nu weer terug naar het Revolution Slider menu. Klik op de titel van je slider. Je komt dan terug bij Edit Slider waar ook de Main Slider Settings staan (P3). Vanaf de volgende pagina s ga ik de instellingen bespreken die aan de rechterkant van dit venster staan. X Theme revolution slider 7

10 1. General Settings Delay De tijd ingeven dat één slide zichtbaar is in milliseconden. Shuffle Mode De slides willekeurig tonen. Lazy Load Dit versnelt de laadtijd. Use Multi Language Niet van toepassing. Enable Static Layers Wanneer je deze aan zet kan je 1 vaste laag tonen in slides. Stop Slider Zet Stop Slider uit of aan. Bij aan: Stop After Loops Geef aan na hoeveel volledige vertoningen van je slider hij moet stoppen. Stop At Slide Geef aan bij welke slide hij moet stoppen.. Wanneer je met de muis over een instelling gaat krijg je een pop-up venster met uitleg. X Theme revolution slider 8

11 1. Position Position on the page Bepaal de positie van je slider in de pagina. Margin Top Geef een extra ruimte in voor de bovenkant van de slider. Margin Bottom Geef een extra ruimte in voor de onderkant van de slider. Margin Left Geef een extra ruimte in voor de linkerkant van de slider.. Margin Right Geef een extra ruimte in voor de rechterkant van de slider. X Theme revolution slider 9

12 . Appearance 1 Shadow Type Bepaal welke of geen schaduw voor je slider. Show Timer Line De tijdlijn boven of onder je slider tonen of verbergen. Padding (border) De dikte voor een kader rond je slider aangeven, wanneer je deze niet wilt op 0 laten staan.. Background Image Options (Deze instellingen gebruiken bij transparante slides) Background color Typ de gewenste achtergrondkleur in, laat deze leeg als je de transparantie wilt behouden! Dotted Overlay Size Kies voor een gespikkeld patroon over de slider of geen. Show Background Image Wel of geen achtergrondafbeelding. Wanneer je slides afbeeldingen bevatten van bijv.. vrijstaande.png s, dan kan je kiezen voor deze optie. Background Image Url Plaats hier de URL van de achtergrondafbeelding. Zie ook de uitleg in ons E-book X custumizer P6 punt hoe je aan deze URL komt. In dit geval gaat het om het plaatsen van de favicon maar het principe is hetzelfde. Background Fit Opties voor hoe de achtergrond moet passen. Background Repeat Opties achtergrond herhaling of geen. Background Position Opties voor de positie van de achtergrond. X Theme revolution slider 10

13 1. Spinner Choose Spinner Maak een keuze uit welke Spinner je wilt voor de slider. Een spinner is een weergave die je ziet tijdens het laden van de slider. Spinner Color Kies een kleur voor de spinner. Deze krijg je alleen bij optie 1 t/m 4. X Theme revolution slider 11

14 1. Navigation Stop On Hover Kies aan of uit om het afspelen van de slider te stoppen wanneer je er met je muis overheen gaat. Keyboard Navigation Kies aan of uit om te navigeren met een toetsenbord. Navigation Style Kies een stijl voor de navigatie. Bullet Typ Kies een bullet voor de navigatie. Navigation Arrows Kies een navigatie pijl Always Show Navigation Ja: Navigatie altijd zichtbaar. Nee: Navigatie alleen zichtbaar bij een mousse-over. Hide Navigation After Wanneer je nee hebt gekozen bij de vorige instelling geef je hier een tijd in milliseconden aan wanneer de navigatie weer verdwijnt als je met de muis van de slider af gaat. X Theme revolution slider 1

15 1. Bullets/Thumbnail Position Navigation Horizontal Align Kies de horizontale plaats van de navigatie: links, in het midden of rechts. Navigation Vertical Align Kies de verticale plaats van de navigatie: bovenin, in het midden of onderaan. Navigation Horizontal Offset Verplaats de navigatie horizontaal gerekend vanaf de standaard locatie in pixels. Navigation Vertical Offset Verplaats de navigatie verticaal gerekend vanaf de standaard locatie in pixels. X Theme revolution slider 13

16 1. Left Arrow Position Left Arrow Horizontal Align Kies de horizontale plaats van de linker pijl: links, in het midden of rechts. Left Arrow Vertical Align Kies de verticale plaats van de linker pijl: bovenin, in het midden of onderaan. Left Arrow Horizontal Offset Verplaats de linker pijl horizontaal gerekend vanaf de huidige locatie in pixels. Left Arrow Vertical Offset Verplaats de linker pijl verticaal gerekend vanaf de huidige locatie in pixels.. Right Arrow Position Hier krijg je dezelfde instellingen als voor de linker pijl maar dan voor de rechter pijl. X Theme revolution slider 14

17 1. Thumbnails Deze instellingen alleen invullen wanneer je thumbnails hebt gekozen voor je navigatie. Thumb Width Kies de breedte van de thumbnail. Thumb Height Kies de hoogte van de thumbnail. Thumb Amount Kies hoeveel thumbnails er tegelijkertijd getoond moeten worden. X Theme revolution slider 15

18 1. Mobile Touch Touch Enabled Zet de Swipe functie aan of uit voor mobiele apparaten. Swipe Velocity (0-1) Kies de gevoeligheid van de swipe. Hoe lager hoe gevoeliger. Swipe Min Touches Kies het minimale aantal vingers voor de swipe. Swipe Max Touches Kies het maximale aantal vingers voor de swipe. Drag Block Vertical Blokkade aan of uit tegen een verticale scroll tijdens de swipe. X Theme revolution slider 16

19 1. Mobile Visibility Disable Slider on Mobile Zet de slider aan of uit voor op de mobiel. Hide Slider Under Width Verberg de slider onder een bepaalde breedte. Werkt alleen bij Responsive en niet bij Fullwidth. Hide Defined Layers Under Width Wanneer je veel lagen hebt in een slide kan je hier aangeven hoeveel hij er moet verbergen onder een bepaalde breedte. Hide All Layers Under Width Verberg alle lagen onder een bepaalde breedte. Hide Arrows on Mobile Verberg de pijlen. Hide Bullets on Mobile Verberg de bullets. Hide Thumbnails on Mobile Verberg de thumbnails. Hide Thumbs Under Width Verberg de thumbnails onder een bepaalde breedte. Hide Mobile Nav After Geef de tijd aan wanneer de mobiele navigatie verborgen moet worden. X Theme revolution slider 17

20 1. Single Slide Loop Slide Wanneer je maar één slide hebt in de slider kan je kiezen om de loop aan of uit te zetten. X Theme revolution slider 18

21 1 1. Alternative First Slide Start With Slide Verander hier de slide die je als eerste wilt tonen als deze anders is dan de nr.1 in de slider. First Transition Active Activeer deze als je een andere transitie wilt kiezen voor de eerste slide. First Transition Type Kies hier het soort transitie voor de eerste slide. First Transition Duration Stel de tijd in hoelang de transitie moet duren. First Transition Slot Amount Bij sommige transities wordt de afbeelding verdeeld (bijv. de optie Slide Slots). Geef hier de gewenste verdeling aan. X Theme revolution slider 19

22 3 1. Global Overwrites 1 Reset Transitions In de Slide Settings kan je per slide een andere transitie kiezen. (zie P) Reset hier dezelfde transitie voor alle slides die in de slider staan. Reset Transition Duration Reset de duur van een transitie voor alle slides in je slider.. Transitions Wanneer je op het venster naast Reset Transitions klikt, krijg je een lijst met transities waaruit je kan kiezen. 3. Edit Slides De meeste instellingen van de slider zijn besproken. Vanaf de volgende pagina ga ik de verschillende instellingen uitleggen van de slides zelf. Klik daarom op Edit Slides en ga naar de volgende pagina! X Theme revolution slider 0

23 3 4 5 Edit Slides Edit Slide De slide bewerken.. Delete Verwijder de slide. 3. Duplicate Maak een kopie van de slide. 4. Copy/Move Verplaats/kopieer de slide naar een andere slider. 5. Versleep knop Versleep de slides onderling. 6. New Slide Maak een nieuwe slide. 7. New Transparent Slide Maak een nieuwe transparante slide. 8. Close Sluit dit venster. 9. Slider Settings Ga naar de slider settings. Klik nu op Edit Slide en ga naar de volgende pagina! X Theme revolution slider 1

24 General Slide Settings 1 1. Slide Title: Typ hier de titel van de slide in.. State: Kies hier wel of niet gepubliceerd voor de slide. 3. Visible from: Klik op het venster en bepaal via de kalender die dan verschijnt vanaf wanneer de slide actief moet zijn. 4. Visible until: Klik op het venster en bepaal via de kalender die dan verschijnt tot wanneer de slide actief moet zijn. 5. Transitions: Klik op dit venster en maak een keuze uit een grote hoeveelheid transities voor de slide. Probeer ze uit en bekijk wat ze doen in de preview. Zie punt Preview Klik op het vergrootglas om een preview van de slide(s) te zien. 7. Update Slide Sneltoets om je slide instellingen te bewaren. X Theme revolution slider

25 General Slide Settings Slot Amount: Het aantal verdelingen aangeven van vierkantjes of reepjes van de slide.. Rotation: Slide roteren (-70 - > 70, 999 = standaard) Alleen voor simpele transities. 3. Transition Duration: De duur van de transitie ingeven. (standaard: 300, min: 100, max: 000) 4. Delay: Een vertraging ingeven voor de slide. Wanneer je deze niet invult wordt de waarde gebruikt die je hebt ingegeven bij General Settings (zie P8) X Theme revolution slider 3

26 General Slide Settings 3 1. Enable Link: Kies hier wel of geen link voor de slide. Bij Enable krijg je onderstaande instellingen.. Link Type: Kies voor normaal. 3. Slide Link: In dit geval een link naar een Blog artikel. 4. Link Open In: Open de link in hetzelfde venster of in een nieuw venster in de browser. 5. Link To Slide: N.v.t. 6. Link Position: Kies de positie voor of achter voor de link wanneer je lagen hebt in de slide. 7. Thumbnail: Upload hier een thumbnail. Laat dit leeg en er wordt een thumbnail gemaakt n.a.v. de afbeelding van de slide. X Theme revolution slider 4

27 3 Slider Main Image/Background 1 1. Background Source: Kies een soort achtergrond. Image Bg Klik op de knop Change Image om een andere afbeelding te plaatsen. Transparent Klik deze aan wanneer je een transparante achtergrond wilt hebben. Deze kan je bijv. gebruiken wanneer je hier lagen overheen gaat plaatsen met teksten of vrijstaande afbeeldingen.. Solid Colored: Klik aan wanneer je een gekleurde achtergrond wilt hebben voor je lagen. 3. Background Settings: Verschillende opties voor je achtergrond. Deze spreken voor zich. Probeer ze eens uit om te zien wat ze doen in je website! X Theme revolution slider 5

28 Slider Main Image/Background 1. Kern Burns / Pan Zoom settings: Kies Aan of Uit voor dit effect voor de slide.. Background Geef hier aan hoe je dit effect wilt tonen op je slide. Probeer de verschillende opties uit in je slide om te zien wat al deze opties doen! X Theme revolution slider 6

29 Slide 1. Helper Grid: Kies de grootte van het grid die je hier instelt. Dit kan handig zijn om de plaats te bepalen wanneer je meerdere lagen gaat maken. Of laat deze uitgeschakeld (Disabled) staan. Snap to: Laat de lagen aansluiten tegen hulplijnen, de lagen tegen elkaar of kies geen. X Theme revolution slider 7

30 Add Layer Je wilt één of meerdere tekst lagen in je slide? Klik dan op Add Layer.. Layer General Parameters Klik deze open voor de volgende opties: 3. Style Klik op het grijze vlakje met het witte pijltje. Er opent een uitklapvenster met diverse stijlen voor de tekst. 4. Text Typ in dit venster de tekst die je in de slide wilt. Dit kan ook een zin zijn. In de preview kan je de laag roteren (5) en/of verslepen in de juiste positie. X Theme revolution slider 8

31 Insert Button Een button toevoegen met bijv. Meer Info inclusief link? Klik dan op Insert Button.. Insert Button Kies in het venster dat verschijnt de Button. 3. Tekstveld In dit venster staat nu de code van de button: <a href= # class= tp-button red small >Red Button</a>. Zorg ervoor dat er een spatie staat tussen het woord (zin) en de button code! 4. Button Tekst Op de afbeelding zie je een Voorbeeld: # is vervangen voor de url: Red Button is vervangen voor de tekst Meer info. X Theme revolution slider 9

32 1. Align, Position & Styling In plaats van je laag verslepen in de preview kan je er ook voor kiezen om je laag op de pixel nauwkeurig te plaatsen binnen je slide.. Final Rotation Als bovenstaand maar dan voor de rotatie van de laag. X Theme revolution slider 30

33 3 1. Layer Animation Klik deze open voor de animatie opties:. Preview Voorvertoning van de animatie zoals je hem hebt ingesteld n.a.v. de onderstaande instellingen. 3. Start Transition Instellingen start animatie. Start Animation Kies in dit uitklapvenster het start effect van de animatie. Start Easing Verschillende opties voor de animatie. Probeer ze uit om de verschillen te zien. Start Duration Geef de duur aan. Hoe lager hoe sneller. Split Text per Bepaal bij een zin of je hem (deels) in woorden wilt splitsen of niet. Split Delay Vertragingstijd van het splitsen. X Theme revolution slider 31

34 1. End Transition Wanneer je dit wilt kan je hier aangeven hoe je de animatie wilt laten eindigen. End Animation Kies in dit uitklapvenster welk effect je wilt. End Easing Zie Start Easing vorige pagina. End Duration Geef de tijdsduur aan. Split Text per Een zin (deels) in woorden splitsen of niet. End Split Delay Vertragingstijd van het splitsen.. Loop Animation Een doorlopende animatie kiezen. Klik het venster open en kies (wanneer je dit wilt) één van de loops. Bij elke loop komen er verschillende instellingen tevoorschijn. X Theme revolution slider 3

35 Add Layer: Image Je kan bijv. een vrijstaande afbeelding (.png) plaatsen over je afbeelding.. Kader Met deze punten in het kader kan je de afbeelding verkleinen of vergroten.. Instellingen De instellingen voor de lagen blijven gelijk als bij Add Layer. De tekstinstellingen zijn hier niet van toepassing. X Theme revolution slider 33

36 Add Layer: Video Wanneer je op deze optie klikt krijg je dit venster. Ik kies voor een YouTube film.. Delen Selecteer bij YouTube een film en vervolgens Delen. Kopieer je het laatste deel van de URL op deze plek. 3. Search Klik op Search en er komen instellingen tevoorschijn. Vul deze naar wens in en klik op Add This Video (4). X Theme revolution slider 34

37 Layers Timing & Sorting Ga met je muis over de icoontjes om een infolabel te krijgen met uitleg.. Layer Klik op een laag om de desbetreffende instellingen te krijgen, te verwijderen (3) of te verplaatsen: Ga met je muis over de dubbele pijltjes en je krijgt een anker, sleep de laag op de juiste plek. X Theme revolution slider 35

38 Wordt vervolgd! Is de Revolution Slider duidelijk geworden? Kom je ergens niet uit? Wij helpen je graag! Mail je vraag naar: Je krijgt binnen 4 uur antwoord van ons. In dit E-book heb ik veel uitgelegd. Maar er is meer! Wil je graag (nog) meer weten? Via deze link krijg je een uitgebreide handleiding: In ons volgende E-book ga je leren hoe je een Contactformulier kan maken! X Theme revolution slider 36