Vi kan nå starte alvorlige ting. Opprettelsen av glidebryteren på Slider Revolution kan være ganske kjedelig med det første. Du vil miste lagrene, fordi du vil vite hvor er dette eller det elementet.

Du vil bli kvitt Slider Revolution ved å øve med vane og også lese denne opplæringen.

Under våre forrige opplæringsprogrammer oppdaget vi hvordan:

Og nå som vi har satt opp glidebryteren vår, skal vi lage lysbilder "Av" glidebryter '.

Hvordan komme i gang med "Slides" -redigereren

Når du har lagret konfigurasjonene til en glidebryter, får du i prinsippet tilgang til et nytt grensesnitt som introduserer deg for redaktøren av " lysbilder '.

Editor-in-slide-omdreining-glideren

Du vil merke helt øverst på den samme verktøylinjen som lar deg gå tilbake til listen over "glidebrytere eller lysbilder", til parametrene til glidebryteren og forhåndsvisningen av glidebryteren blant andre.

Oppdag også vår 10 WordPress-plugins som lar deg rangere blogginnleggene dine

Revolution-glidebryteren doutil-utgave-av-lysbilde

Nederst har vi en ny seksjon som lar oss se, de globale lagene, de forskjellige "lysbildene" og knappen for å legge til en ny " lysbilde '.

opprettelse-av-slide-knapp-glideren omdreining

Ved å holde musepekeren over knappen på et lysbilde, vil du merke at nye alternativer vises. Disse alternativene er ganske klare og enkle å forstå (duplikat, legg til i malen for å bruke den senere og slette lysbildet).

alternativer-creation-slide-revolusjon skyve

Ved å holde musepekeren over lysbildetillegg-knappen, vil du legge merke til andre alternativer som lar deg legge til et tomt lysbilde, legge til flere lysbilder, legge til et lysbilde fra en mal (modell).

creation-of-slide-alternativ-revolusjon-skyve

For øyeblikket er du på 1-lysbildet, og det er derfor det blir fremhevet på lysbildelisten. Hvis du oppretter et nytt lysbilde, blir det markert i stedet for det første lysbildet.

sekund-slide-creation-dun-skyve-skyve-omdreining

Slider Revolution på dette nivået er et virkelig instrumentpanel. Hvis jeg forklarer alt for deg, vil du ikke forstå mye, så jeg vil unngå å snakke om funksjoner som kan være forvirrende og ikke essensielle.

Les artikkelen vår om 6 WordPress-bildekomprimeringsplugger for bloggen din

Når du har valgt et lysbilde, kan du begynne å redigere i følgende avsnitt. Denne delen består av flere faner (7) som gir deg tilgang til forskjellige funksjoner.

Hvordan legge til et bakgrunnsbilde til en scene

Det første du vil gjøre først er å legge til en bakgrunn til lysbildet vårt. Her har du valget mellom: Et bakgrunnsbilde (fra mediebiblioteket ditt), en ekstern URL som peker til et bilde, en gjennomsiktig bakgrunn som vil bruke fargen foreslått av WordPress tema, en fast farge, en Youtube-, Vimeo- eller HTML5-video. Vi velger en bakgrunn" bilde '.

BAKGRUNN bilde f.eks

Du kan finne mange gratis bilder på nettet. Bare søk på Google. 

Bilde-back plan-revolusjon-skyve

Når du legger til et bilde, gjelder dette umiddelbart i forhåndsvisningen av lysbildet og i "scenen".

szene-omdreining-glideren

Hvordan legge til et element i en scene

Nå som vi har en godt dekorert scene, vil vi legge til et element. Hvert element du legger til en scene regnes som et lag eller lag. Denne lagfunksjonen vil hjelpe deg å tro meg.

Hold markøren over for å legge til et element til scenen Legg Layer '.

fly-add-lags-glideren omdreining

Du vil legge merke til at du kan legge til flere forskjellige elementer, inkludert: tekst / HTML, bilder, lyd, video, en knapp, en figur, et objekt og importere et element.

Vi vil begynne med å legge til et gjennomsiktig bilde av den lille valpen Snoopy.

morsom-snoopy-png

Legg deretter til dette bildet i scenen, så vil du ha noe slikt:

eksempel-skyve-skyve-omdreining

Du vil merke at i de fire hjørnene av bildet er små firkanter. Disse rutene lar oss endre størrelsen på bildene, siden i dette tilfellet Snoopy opptar mye plass.

Endring av størrelse gjøres av " drag ". Hvis du vil endre størrelsen mens du holder proporsjonene, holder du nede " Mai Fra tastaturet mens du endrer størrelse.

Se også vår 10 WordPress plugins som gir deg en bedre Blogger

ny-representasjon-snoopy-omdreining-glideren

Nå ser Snoopy slik ut, det er mer passende. Du kan også snu et bilde ved å bruke indikatoren øverst til høyre på hvert bilde slik:

rotasjon-DIMAGE-omdreining-glideren

Slik plasserer du elementer med hjelpenettet

Hjelpenettet er et verdifullt element som bidrar til å plassere elementene bedre. Du kan aktivere hjelpenettet nederst til venstre på scenen.

grid daide-omdreining-glideren

Dette rutenettet har fliser med forskjellige størrelser, jo mindre størrelse, jo mer presis vil du være når det gjelder plassering av element.

Investment-of-bilder

Hvordan legge til animasjon

Det er tre typer animasjoner på Slider Revolution: inngangsanimasjoner, animasjoner under (eksistensen av elementet i scenen) Og slutt animasjoner.

Se også vår 6 WordPress-bildekomprimeringsplugger for bloggen din

For å legge til en animasjon til et element, må du først velge den ved å klikke på den (Når et element er valgt, blir det innrammet av en stiplet linje med hjørner som kan endres).

Så klikk på Snoopy, gå opp på siden og klikk på fanen « animasjon '.

animerte-glideren omdreining

I forrige bilde har jeg input-animasjonene i blått og output-animasjonene i rødt.

For å endre en animasjon, klikk på rullegardinlisten etter ikonet til den løpende mannen.

icon-animerte-glidebryteren-revolusjon

Du har da et bredt utvalg av animasjoner til disposisjon. Jeg overlater det til deg å velge animasjonen du vil definere for oppføringen til et element. For min del valgte jeg " easeOutElastic », For å få dette resultatet:

Animasjon-Tree-snoopy

Her for deg vår 4 WordPress-plugins for å øke bunnteksten på bloggen din

Lengre til venstre kan du bestemme varigheten av animasjonen og animasjonsmodusen du trenger å la være på " Ingen split Fordi de andre alternativene bare gjelder tekst, ikke bilder.

konfigurasjon-sanddyne-animerte-glideren omdreining

Lire australier Hvordan skjule titlene på artikler og WordPress-sider

Nå vil jeg flyte Snoopy, for det, gå til " Loop Og på rullegardinmenyen velger du " Wave ". Nå flyter Snoopy:

Snoppy-flytende

Slik konfigurerer du synligheten til elementer

Min Snoopy flyter, men jeg vil ikke at den skal være synlig på mobil. Så klikk på " synlighet »Og på Smartphone-ikonet, sørg for at det er deaktivert:

sikt-elements-omdreining-glideren

Hvordan justere oppførselen til elementer

For å optimalisere lastingen av glidebryteren, kan det være lurt å utsette lastingen av bildene. Dette gjøres i fanen " oppførsel Med alternativet " Lazy Loading ". Du kan til og med tvinge elementers reaksjonsevne.

adferd-element-omdreining-glideren

Hvordan lage egendefinerte triggere på et element

Handlinger lar deg knytte triggere til spesifikke handlinger. For å legge til en trigger, klikk på fanen handlinger »Så på knappen« + ».

add-a-utløserknappen

Det er 3 typer triggere:

  • Klikket er det lov å klikke med musen
  • Musen legger inn elementet
  • Musen går ut over elementet

Handlingslisten er ganske lang. Du kan for eksempel omdirigere en bruker som klikker på Snoopy til en annen side ved å velge handlingen " enkelt Link Som vil bringe opp nye alternativer.

Oppdag også vår 10 premium WordPress plugins fra Booking og Booking

Ledelse-of-triggere-revolusjon-skyve

Hvordan bruke Slider Revolution TimeLine

Slider Revolution tilbyr et tidsstyringsgrensesnitt nederst. Dette grensesnittet lar deg se hvor animasjonen til et element starter og hvor det slutter.

begynner-og-end-dune-film-på-glidebryteren-revolusjon

På forrige bilde vil du legge merke til to blå piler. Den første til venstre indikerer begynnelsen på input-animasjonen til et element, og den andre indikerer slutten av input-animasjonen. Den mørkerøde fargen indikerer levetiden til elementet i scenen.

Lire australier Hvordan legge til en nedtelling på din WordPress blog

Du vil finne en slutt som også ligner den andre enden av en varighet (input-animasjon, levetid og sluttanimasjon).

Med " tidslinje Du vil kunne kontrollere hvilket element som vises før og hvilket element som forsvinner først. Det er et veldig praktisk verktøy som du trenger å mestre for å lage god animasjon.

Tidslinjen har også en spiller som du kan aktivere for å forhåndsvise lysbildet.

Animasjon-tidslinje-omdreining-glideren

Inntil da ga jeg deg det grunnleggende for å lage et lysbilde. Lagre glidebryteren og start forhåndsvisningen.

Backup-og-previsulisation

Det er alt for denne opplæringen, i en neste gang skal vi snakke om visningen av en glidebryter på en artikkel og noen avanserte operasjoner.

Oppdag også noen temaer og premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. Disk Audio

Disk Audio er en annen WordPress Plugin som vil hjelpe deg å vise en lydspiller rett på nettstedet ditt med bare et knappetrykk. Utformingen av lydspilleren er fullstendig responsiv, slik at mobilbrukere vil kunne nyte funksjonene uten problemer.

Disk lydspiller premium wordpress plugins legger til lydspiller

I tillegg tilbyr den mange tilpasningsalternativer, inkludert fargevalg, utseende, bakgrunnsbilder og opasitet. Den har flere alternativer for å kontrollere det med tastatur og det lar deg også se spillelisten din med en justerbar rullefelt.

Les også: 10 WordPress plugins for å forbedre søket på bloggen din

Du kan også legge til nedlastingslenker på musikkspilleren for å vise brukere hvor de kan gå for å kjøpe sporet som spilles av på nettstedet ditt. 

Last ned | dEMO | Webhotell

2. Event Booking Pro

Dette er en annen WordPress Plugin 100% responsiv, enkel å tilpasse og dedikert til håndtering av reservasjoner på ethvert nettsted, som tilbyr sine tjenester innen arrangementer.

Arrangement booking pro

Hovedfunksjonene inkluderer: tilpasning av tekst, farge, grenser og andre, støtte for PayPal, administrasjon av kupongkoder og kuponger, støtte for Google Maps, støtte fra håndtering av e-post,  støtte fra kortkodene, intuitivt kontrollpanel, enkel opprettelse av hendelser, total kontroll over utseendet, etc.

Last ned | dEMO | Webhotell 

3. Social Share & Locker Pro

Social Share & Locker Pro-utvidelsen er designet for å hjelpe nettstedet ditt å bli mer synlig på sosiale nettverk. Med bare noen få klikk kan du enten angi posisjonen til dine sosiale ikoner eller låse innholdet ditt ved å kreve deling på et av de sosiale nettverkene du tilbyr.

Plug -in for social share locker pro wordpress

Du har 10 forhåndsdefinerte temaer, og dette skal dekke de vanligste ønsker. Alle temaene hennes er netthinne og arbeid underverker. 

30 ting å gjøre på blogginnleggene etter offentliggjørelsen Oppdag dem ved å lese denne artikkelen.

Med Social Share & Locker Pro vil du også kunne vise det fulle navnet på sosiale nettverk eller bare ikonet. Det vil avhenge av design, ledig plass eller dine ønsker.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

konklusjonen

Her er ! Det er det for denne guiden. Vi håper denne opplæringen har gitt deg det grunnleggende om å lage en lysbildefremvisning med Slider Revolution på en WordPress-blogg eller et nettsted. Hvis du har spørsmål, forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk

...