Vi kan nu starte alvorlige ting. Oprettelsen af ​​skyderen på Slider revolution kan være ganske kedelig i starten. Du mister dine lejer, fordi du vil vide, hvor er dette eller det pågældende element.

Du vil slippe af med Slider Revolution ved at øve med vane og også læse denne tutorial.

Under vores tidligere tutorials opdagede vi, hvordan:

Og nu, når vi har konfigureret vores skyderen, vil vi oprette dias "Af" skyderen '.

Sådan kommer du i gang med "Slides" -editoren

I princippet får du adgang til, når du har gemt en skyderkonfiguration til en ny grænseflade, der introducerer dig til redaktøren af ​​" dias '.

redaktør-in-slide-revolution-skyderen

Du vil bemærke øverst den samme værktøjslinje, der giver dig mulighed for at vende tilbage til listen over "glider eller dias" til parametrene for skyderen og forhåndsvisningen af ​​skyderen blandt andre.

Oplev også vores 10 WordPress-plugins, der giver dig mulighed for at bedømme dine blogindlæg

Revolution-slider-bar doutil-udgave-af-slide

Nederst har vi et nyt afsnit, der giver os mulighed for at se, de globale lag, de forskellige "dias" og knappen for at tilføje et nyt " glide '.

skabelse-of-slide-knap-slider-revolution

Ved at holde musen hen over knappen på et lysbillede, vil du bemærke, at nye indstillinger vises. Disse indstillinger er ret klare og lette at forstå (duplikat, tilføj til skabelonen for at genbruge den senere og slette diaset).

skyderen muligheder-creation-slide-revolution

Ved at holde musen hen over knappen til tilføjelse af dias, vil du bemærke andre indstillinger, der giver dig mulighed for at tilføje et tomt lysbillede, tilføje flere dias, tilføje et dias fra en skabelon (model).

skabelse-of-slide-option-revolution-slider

I øjeblikket er du på diaset 1, hvorfor det er fremhævet på diaslisten. Hvis du opretter en ny dias, fremhæves det i stedet for det første dias.

anden-slide-creation-dun-slider-slider-revolution

Slider Revolution på dette niveau er et ægte instrumentbræt. Hvis jeg forklarer dig alt, forstår du ikke meget, så jeg undgår at tale om funktioner, der kan være forvirrende og ikke væsentlige.

Læs vores artikel om 6 WordPress-billedkomprimerings plugins til din blog

Når du har valgt et dias, kan du begynde at redigere i det følgende afsnit. Dette afsnit består af flere faner (7), der giver dig adgang til forskellige funktioner.

Sådan tilføjes et baggrundsbillede til en scene

Den første ting, du skal gøre først, er at tilføje en baggrund til vores dias. Her har du valget mellem: Et baggrundsbillede (fra dit mediebibliotek), en ekstern URL, der peger på et billede, en gennemsigtig baggrund, som vil bruge den farve, der foreslås af WordPress tema, en fast farve, en Youtube-, Vimeo- eller HTML5-video. Vi vælger en baggrund" billede '.

BAGGRUND billede-eksempel

Du kan finde mange gratis billeder på nettet. Bare søg på Google. 

Billede-back plan-revolution-skyderen

Når du tilføjer et billede, gælder dette straks i diaseksemplet og i "scenen".

szene-revolution-slider

Sådan tilføjes et element i en scene

Nu hvor vi har en velindrettet scene, tilføjer vi et element. Hvert element, du tilføjer til en scene, betragtes som et lag eller lag. Denne lagfunktion hjælper dig med at tro mig.

Hold musen over for at tilføje et element til scenen Tilføj lag '.

fly-add-lag-slider-revolution

Du vil bemærke, at du kan tilføje flere forskellige elementer, herunder: tekst / HTML, billeder, lyd, video, en knap, en figur, et objekt og importere et element.

Vi starter med at tilføje et gennemsigtigt billede af den lille hvalp af Snoopy.

funny-snoopy-png

Tilføj derefter dette billede i scenen, så får du noget lignende:

eksempel-skyderen-skyderen-revolution

Du vil bemærke, at der i de fire hjørner af billedet er små firkanter. Disse firkanter tillader os at ændre størrelsen på billederne, da Snoopy i dette tilfælde optager meget plads.

Ændring af størrelse ændres af " Træk ". For at ændre størrelsen mens du holder proportioner, skal du holde " Maj Fra dit tastatur, mens du ændrer størrelse.

Se også vores 10 WordPress plugins, der vil gøre dig til en bedre Blogger

ny-repræsentationen-snoopy-revolution-skyderen

Nu ser Snoopy sådan ud, det er mere passende. Du kan også vende et billede ved hjælp af indikatoren øverst til højre på hvert billede på denne måde:

rotation-DiMAGE-revolution-skyderen

Sådan placeres elementer med hjælpenettet

Hjælpenettet er et værdifuldt element, der hjælper med at placere elementerne bedre. Du kan aktivere hjælpenettet nederst til venstre på scenen.

brødrister daide-revolution-slider

Dette gitter har fliser med forskellige størrelser, jo mindre størrelse, jo mere præcis vil du være i placeringen af ​​elementet.

Investering-of-billeder

Hvordan at tilføje animation

Der er 3 typer animationer på Slider Revolution: indgangsanimationer, animationer under (eksistensen af ​​elementet i scenen) Og ende animationer.

Se også vores 6 WordPress-billedkomprimerings plugins til din blog

For at føje en animation til et element skal du først vælge den ved at klikke på det (når et element vælges, indrammes det af en stiplet linje med størrelsesordener hjørner).

Så klik på Snoopy, gå op på siden og klik på fanen « Animation '.

animeret-slider-revolution

I det forrige billede har jeg input-animationerne i blåt og output-animationerne i rødt.

For at ændre en animation skal du klikke på rullelisten efter ikonet for den kørende mand.

ikon-animeret-slider-revolution

Derefter har du en bred vifte af animationer til din rådighed. Jeg overlader det til dig at vælge den animation, du vil definere for indtastningen af ​​et element. For min del valgte jeg " easeOutElastic »For at få dette resultat:

Animation-entree-snoopy

Her for dig vores 4 WordPress-plugins for at øge sidefoden til din blog

Længere til venstre kan du bestemme varigheden af ​​animationen og den animationstilstand, du har brug for at forlade på " ingen split Fordi de andre indstillinger kun gælder for tekst, ikke billeder.

konfiguration-klit-animeret-skyderen-revolution

Lire aussi Sådan skjules titlerne på artikler og WordPress-sider

Nu vil jeg gerne flyde Snoopy, for det, gå til " Loop Og vælg "på rullemenuen" Wave ". Nu flyder Snoopy:

snoppy flydende

Sådan konfigureres elementernes synlighed

Min Snoopy flyder, men jeg vil ikke have, at den skal være synlig på mobilen. Så klik på " synlighed »Og på Smartphone-ikonet skal du sørge for, at det er deaktiveret:

synlighed-elementer-revolution-skyderen

Sådan justeres elementernes opførsel

For at optimere indlæsningen af ​​skyderen skal du muligvis forsinke indlæsningen af ​​billederne. Dette gøres under fanen " adfærd Med indstillingen " Lazy Loading ". Du kan endda tvinge elementers lydhørhed.

adfærd-element-revolution-skyderen

Sådan opretter du brugerdefinerede triggere på et element

Handlinger giver dig mulighed for at knytte triggere til specifikke handlinger. Klik på fanen for at tilføje en trigger handlinger »Derefter på knappen« + ».

add-en-udløserknappen

Der er 3 typer af triggere:

  • Den klik er den handling at klikke med musen
  • Musen indtastes over elementet
  • Musens udgang over elementet

Listen over handlinger er ret lang. For eksempel kan du omdirigere en bruger, der klikker på Snoopy til en anden side ved at vælge handlingen " enkelt link Hvilket giver nye muligheder.

Oplev også vores 10 premium WordPress plugins fra Booking og Booking

Ledelse-af-triggere-revolution-skyderen

Sådan bruges Slider Revolution TimeLine

Slider Revolution tilbyder en tidsstyringsgrænseflade i bunden. Denne grænseflade giver dig mulighed for at se, hvor animationen af ​​et element starter, og hvor det slutter.

begynder-og-end-klit-film-om-slider-revolution

På det forrige billede vil du bemærke to blå pile. Den første til venstre angiver begyndelsen på input-animationen til et element, og den anden angiver slutningen af ​​input-animationen. Den mørkerøde farve angiver produktets levetid i scenen.

Lire aussi Hvordan at tilføje en nedtælling på din WordPress blog

Du vil finde en ende, der også ligner den anden ende af en varighed (input-animation, levetid og slutanimation).

Med " tidslinje Du vil være i stand til at kontrollere, hvilket element der vises før, og hvilket element forsvinder først. Det er et meget praktisk værktøj, som du har brug for at mestre for at lave god animation.

Tidslinjen har også en afspiller, som du kan aktivere for at få vist et objektbillede.

Animation-tidslinje-revolution-slider

Indtil da gav jeg dig det grundlæggende at oprette et dias. Gem nu skyderen, og start forhåndsvisningen.

Backup-og-previsulisation

Det er alt sammen til denne tutorial, i et næste skal vi tale om visningen af ​​en skyder på en artikel og nogle avancerede operationer.

Oplev også nogle temaer og premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. Disk Audio

Disk Audio er en anden WordPress plugin som vil hjælpe dig med at vise en lydafspiller direkte på din hjemmeside med blot et tryk på en knap. Lydafspillerens layout er fuldstændig responsivt, så mobile brugere vil være i stand til at nyde dens funktioner uden besvær.

Disk-lydafspiller premium wordpress-plugins tilføjer lydafspiller

Derudover tilbyder den mange tilpasningsmuligheder, herunder farveskemaer, udseende, baggrundsbilleder og opacitet. Det har flere muligheder for at kontrollere det ved hjælp af tastaturet og det giver dig også mulighed for at se din afspilningsliste med en justerbar rullepanel.

Læs også: 10 WordPress plugins til at forbedre søgningen på din blog

Du kan også integrere downloadlink på musikafspilleren for at vise brugere, hvor de kan gå for at købe det nummer, der spilles på dit websted. 

Downloade | demo | Web-hosting

2. Begivenhed Booking Pro

Dette er en anden WordPress plugin 100% responsiv, nem at tilpasse og dedikeret til håndtering af reservationer på enhver hjemmeside, som tilbyder sine tjenester inden for begivenheder.

Eventbooking pro

Dets vigtigste funktioner inkluderer: tilpasning af tekst, farve, rammer og andre, support til PayPal, styring af kuponkoder og kuponer, support til Google Maps, støtte til styring af e-mails,  understøttelse af kortkoder, intuitivt kontrolpanel, nem oprettelse af begivenheder, total kontrol over udseendet osv.

Downloade | demo | Web-hosting 

3. Social Share & Locker Pro

Social Share & Locker Pro-udvidelsen er designet til at hjælpe dit websted med at blive mere synligt på sociale netværk. Med blot et par klik kan du enten indstille placeringen af ​​dine sociale ikoner eller låse dit indhold ved at kræve deling på et af de sociale netværk, du tilbyder.

social share locker pro wordpress plugin

Du har 10 foruddefinerede temaer, og dette skal dække de mest almindelige ønsker. Alle hendes temaer er nethinde og arbejder vidundere. 

30 ting at gøre på dine blogindlæg efter deres offentliggørelse Oplev dem ved at læse denne artikel.

Også med Social Share & Locker Pro kan du vise det fulde navn på sociale netværk eller bare ikonet. Det afhænger af dit design, den ledige plads eller dine ønsker.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.

Konklusion

Her er ! Det er det til denne guide. Vi håber, at denne vejledning har givet dig det grundlæggende i at oprette et lysbilledshow med Slider Revolution på en WordPress-blog eller et websted. Hvis du har spørgsmål, forslag eller kommentarer, skal du lade dem stå i vores afsnit kommentarer.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Tøv ikke med at del med dine venner på dine foretrukne sociale netværk

...