Kuidas WordPressis interaktiivseid pilte luua. Kuidas luua WordPressis interaktiivseid pilte Interaktiivsete piltide loomine WordPressis

Interaktiivne pilt võimaldab teil valida, linkida ja animeerida pildi teatud alasid. Selles artiklis näitame teile, kuidas WordPressis interaktiivseid pilte luua.

Mis on interaktiivne pilt

Interaktiivsel pildil on levialad, lingid, värvid ja palju muud. See erineb lihtsast pildist, mille WordPressis üles laadite. Interaktiivsed pildid meelitavad kasutajaid oma detailidega. Saate lisada pildi erinevatele osadele kirjeldusi, lisada linke lehtedele, esile tõsta jaotisi.

Sellel pildil näete puuvilja kirjeldust, kui asetate hiirekursori teatud veerule. Saate kasutada neid interaktiivseid pilte, et suurendada kasutajate seotust ja saidil veedetud aega.

Vaatame, kuidas saate interaktiivsete piltidega oma külastajate tähelepanu köita.

Interaktiivsete piltide loomine WordPressis

Esimene asi, mida teha, on pistikprogrammi installimine ja aktiveerimine Tähelepanu tõmbama.

Pärast aktiveerimist näete oma WordPressi administraatorialal uut kohandatud postituse tüüpi. Interaktiivse pildi loomiseks peate minema lehele Pöörake tähelepanu » Lisa uus lehel.

Alustuseks lisage sellele uuele interaktiivsele pildile pealkiri, et saaksite selle hõlpsalt salvestada. Sellel lehel saate luua interaktiivse kujunduse uutele või varem üles laaditud piltidele. Saate lisada uue pildi, klõpsates üleslaaditud piltide ikoonil, või valida pildi WordPressi meediumiteegist.

Seejärel peate vajutama nuppu " avaldada(avaldada).

Pärast avaldamist võimaldab pistikprogramm pilti redigeerida ja konkreetseid piirkondi esile tõsta, värve, linke lisada, levialasid joonistada ja palju muud. Saate kerida lehte jaotiseni " Levialad» (levialad) ja laiendage eelvaate kuvamiseks vaateporti.

Lihtsalt liigutage hiirt ja tehke pildile klõpsud. Saate leviala piirkondi hõlpsalt valida ja valiku loomiseks laiendada.

Pärast "kuumade kohtade" ala kirjeldamist peate kerima alla jaotiseni " tegevust» (Toiming) ja valige pildil valitud ala jaoks toiming. Kui valite "Näita rohkem teavet", saate lisada kirjelduse, mis selgitab pildi "kuumade kohtade" ala. Valitud alale saate lisada lingi kasutades " Minge URL-ile».

Samuti saate hallata üldsätteid ja stiili lingile, toimingule, tekstile, teabetaustale ja muule. Need seaded võivad muuta pildi interaktiivsemaks.

Seejärel peate klõpsama nuppu " värskendada» (Uuendage) ja kopeerige lühikood ning lisage see oma WordPressi postitusele või lehele.

Pistikprogramm võimaldab teil luua nii palju interaktiivseid pilte, kui soovite, kasutades varem üles laaditud või uusi pilte.

Interaktiivsete piltide import ja eksport

Kui töötate mitmel saidil ja soovite importida/eksportida interaktiivseid pilte, nõuab see mõlemal saidil sama Draw Attention pistikprogrammi.

Esimesel saidil peate külastama lehte "" ja märkima pildid, mida soovite eksportida. Seejärel klõpsake nuppu " Looge ekspordikood» (Generate Export Code) ja kopeerige kood.

Pärast seda minge järgmisele veebisaidile ja veenduge, et pistikprogramm Draw Attention oleks lubatud. Seejärel minge lehele " Pöörake tähelepanu » Import / eksport» WordPressi administraatorilt ja kleepige kood impordikasti.

Klõpsake nuppu Import» (Impordi), imporditakse teie pildid ja kõik varem lisatud interaktiivsed üksikasjad.

Need klikitavad pildid sobivad hästi WordPressi SEO jaoks ja toovad teie saidile rohkem külastajaid. Siiski soovitame saidi jõudluse parandamiseks pilte enne nende üleslaadimist tihendada.

Loodame, et see artikkel aitas teil õppida, kuidas WordPressis interaktiivseid pilte luua.

Hea päev kõigile praeguse väljaande lugejatele. Tänane artikkel on pühendatud teemale "Interaktiivsed pildid". See on üsna huvitav tehnoloogia, mis muudab veebisaidi kujunduse mitmekesiseks ja dünaamiliseks. Ja see on lihtsalt suurepärane lahendus kasutajate tähelepanu tõmbamiseks teie teenusele.

Seetõttu räägin teile, mis on interaktiivsed pildid, kus neid tavaliselt kasutatakse ja kuidas saate luua oma sarnase pildi. Alustame!

Oih, midagi liigub!

Niisiis, mida tähendab mõiste "interaktiivne pilt"? See on pilt, mida kasutaja toimingutega suhtlemisel teatud viisil muudetakse.

Tegelikult kohtame interaktiivseid pilte sõna otseses mõttes iga päev. Korraga olid nad sotsiaalvõrgustikes väga populaarsed. Nad saadeti aastavahetuseks sõpradele ja tuttavatele, õnnitledes neid nii sünnipäevade kui ka muude tähtpäevade puhul.

Lisaks antakse lastele välja lihtsad mängud teatud stseenis olevate objektide, liikuvate objektide jms otsimisega, mis samuti kuuluvad kirjeldatud jaotisesse.

Esitluste jaoks on hea kasutada muutuvaid pilte, kuna need suudavad arusaadavalt selgitada näiteks mõningaid arendatava projekti detaile.

Teine huvitav kasutusjuht seda tüüpi kujutiste jaoks on Apple'i arendamine. Nad otsustasid oma telefonidesse liikuvad pildid töölauale panna. Ja iOS 7 väljalaskmisega on see mehhanism ainult paranenud. Nüüd kasutab iPhone 7 interaktiivset kihti, mis rakendab nutitelefoni kallutamisel kvaliteetset sügavat parallaksi efekti.

Huvitavad on "", mis voldib foto ebatavaliselt kokku, kui hõljutate kursorit selle kohal ( demo näide), « Pealkirihõljumamõju”, mis kuvab teavet piltide ja paljude teiste kohta. Kõik näited leiate ülaltoodud veebisaidilt.

Lisaks tuleb rakendada muid täiendusi hõljumamõjusid jQuery teegis. Näiteks lisandmoodul pildi põhitausta hägustamisega teatud kohtades (nii realiseerub "häguga spoiler", pildil oleva suurendusklaasi efekt määratud objekti sees jne).

Paljud neist on jagatud, nii et peate lihtsalt leidma õige efekti ja ühendama selle oma projektiga. Tahan teile nõu anda veebisait. See sisaldab palju pistikprogramme ja õpetusi.

Testjuhtum

Noh, nüüd on aeg ise interaktiivne pilt rakendada. Selleks kasutasin suurepärast pistikprogrammi " Hõljutage kursorit ja klõpsake ringikujuliste elementide käivitamisel". Paremaks õppimiseks vaadake ametlikku artiklit, klõpsates nuppu link.

Noh, ma tahan teile tutvustada oma koodi, mis on minu maitse järgi täiustatud.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

klõpsa

/* edaspidiseks pistikprogrammiga töötamiseks peate lisama selle skripti, määrates faili tee src-s */

klõpsa

Nagu näete, on kõik väga lihtne ja näeb suurepärane välja. See on aga alles ettevalmistav etapp. Lisand ise on palju võimsam. Selle rakendamiseks peate lisama stiilid:

1 2 3 4 5 6

.pic-circle-hover( box-shadow: sisestus 0 0 0 0 rgba(0,0,0,0,6), sisestus 0 0 0 17px #FFA07A, 0 0 9px rgba(0,0,0,0,9); )

Pic-circle-hover (kast-vari: sisestus 0 0 0 0 rgba(0,0,0,0,6), sisestus 0 0 0 17px #FFA07A, 0 0 9px rgba(0,0,0,0,9); )

Ja pärast skriptide ühendamist kleepige jQuery kood, mis on esitatud ülaloleval lingil plugina kirjelduse lehel. Skript rakendab kursori muutmise kursoriks, kui hõljutab kursorit pildi kohal, ja käsitleb pildil klõpsamist.

Otsustasin jQuery koodi mitte dubleerida, nii et saate selle ametlikult saidilt kopeerida. Kuid sellele funktsioonile tasub tähelepanu pöörata, kuna klasside nimesid on muudetud.

1 2 3 4 5 6 7 8 9 10 11

$("#circle").circlemouse(( onMouseEnter: function(el) ( el.addClass("pic-circle-hover"); ), onMouseLeave: function(el) ( el.removeClass("pic-circle-hover "); ), onClick: function(el) ( alert("klõpsatud"); ) ));

$("#circle").circlemouse(( onMouseEnter: function(el) ( el.addClass("pic-circle-hover"); ), onMouseLeave: function(el) ( el.removeClass("pic-circle-hover "); ), onClick: function(el) ( alert("klõpsatud"); ) ));

Ja oma loo lõpus tahan soovitada Jevgeni Popovi õpetlikku kursust Javascript + jQuery algajatele. Kõik on üksikasjalik, samm-sammult, arusaadav, ühesõnaga mannekeenide jaoks.

Tervitused Webtooni saidi lugejatele. Olen juba mitu päeva teile rääkimas ühest huvitavast teenusest, kuid kahjuks ajapuudusel lükkasin selle hilisemaks. Ja lõpuks olid mul vabad minutid. Täna räägime teenusest nimega , mis võimaldab teil luua interaktiivsed pildid, nimelt saate lisada pealkirju, linke, helisid, videoid, värelevaid pilte oma saidi mis tahes pildi mis tahes punkti.

See toimib järgmiselt:
Saidile lisatakse väike skript. Pildi vasakus ülanurgas küljele ilmuvad punktid, mis näitavad siltide olemasolu (kasutajatele) ja/või võimalust neid lisada (pildi omanikule). Kui liigutate kursorit pildi kohal, kuvatakse tööriistariba ja pildile juba lisatud sildid, mida tähistavad punktid. Kui hiir pildilt eemaldada, siis jäävad alles ülemisse vasakusse nurka olevad täpid, ülejäänud liialdused kaovad. Iga silt võib sisaldada pealkirja ja (valikuliselt) linki. Vaikimisi saab silte lisada igaüks, ainult teie ise. Selleks ava järgmisel vahekaardil Thinglinki teenus ja logi sisse. Soovi korral saate avada igaühe jaoks konkreetse pildi märgistamise võimaluse.

Nüüd ma ütlen teile ja näitan teile selgelt kuidas luua interaktiivset pilti või foto ja avaldage see hiljem saidil.
Selle teenuse kasutamiseks tuleb registreeruda, vähemalt tuletatakse seda meelde pärast pildi üleslaadimist. Saate registreerida käsitsi, läbides tavapärase registreerimisprotsessi. No mina eelistasin autoriseerimist enda jaoks läbi facebooki konto, nii on lihtsam ja kiirem.

Pärast autoriseerimist näete, et saate pildi üles laadida kolmel viisil.

1. Muidugi saab arvutist pildi üles laadida.
Kuid pidage meeles, et piltide hoidmise koht on orgaaniline. Algselt saab Thinglinki üles laadida maksimaalselt 10 pilti. Üleslaaditud piltide limiiti on võimalik suurendada. On olemas nn suunamisprogramm.
Kui keegi registreerub teenusesse, klõpsates teie pildil, saate üles laadida veel 10 pilti ja nii edasi.

2. Lisage pilt Flickerist.
Saate importida mis tahes Flickri kasutaja uusimaid avalikke pilte. Selleks sisestage lihtsalt oma kasutajanimi ja näete 20 kõige värskema pildi loendit. Saate valida Thinglinki importimiseks ühe või mitu pilti.

Seda piltide üleslaadimise meetodit kasutades pole piltide arvul piiranguid.

3. Laadige alla kolmanda osapoole serverist või veebisaidilt.
Kõik, mida pead tegema, on kleepida pildi URL väljale ja klõpsata nuppu "Märgista see pilt".

Kõige tavalisemad toetatud pilditüübid on PNG, JPEG, GIF ja BMP. Maksimaalne pildi suurus on 5 MB. Pilte, mis on suuremad kui 1280x1280, on skaleeritud.

Proovime koos luua interaktiivse foto.
Näiteks kasutan fotot sellest imelisest kassist.

Kasutan ülalkirjeldatud kolmandat meetodit või pigem salvestatakse pilt saidile.
Kleepige pildi URL väljale ja klõpsake nuppu "Märgista see pilt"

Redigeerimiseks saame järgmise akna:

Siltide loomiseks klõpsake mis tahes pildil. Näiteks lisasin viis silti. Lõpus klõpsake rohelist nuppu "Valmis".

Märgistamisel pange tähele, et olemas on suur hulk integratsiooniteenuseid.

Kui kasutad integreerimis- ja teenindusvõimalusi, saad pildile lisada ka muusikafaili! Nii saate luua muusikalise postkaardi või jätta sõnalisi kommentaare.

Oma pildi seadetes saad anda külastajatele õiguse sellele oma jäljed jätta.

Pärast seda, kui olete piltidele märgid ära märkinud. (Kui olete veebihaldur) Peaksite oma veebisaidi malli sisestama sellise koodi:

Selleks, et interaktiivsed pildid töötaksid teie saidi kõigil lehtedel, on soovitatav sisestada see kood märgendi ette
Kui teil on ajaveeb Wordpressis, Bloggeris või Tumblris, saate kasutada valmis pluginat.

Suvandi "manusta pilt" abil saavad inimesed teie interaktiivset pilti oma saidile lisada. Kes soovib, saab seda sõpradega jagada kasutades "jaga pilti".

See pole veel kõik. Oma kontole sisse logides leiate, et seal on ka statistikajaotis, kus näete oma pildi vaatamiste arvu või siltidel tehtud klikkide arvu. Arvan, et saate statistikast aru ka ilma minu abita.

Selles artiklis räägin teile kõige huvitavamast ja ebatavalisest pistikprogrammist, mis võimaldab teil interaktiivset pilti teha. Lisan ka, et see plugin on täiesti tasuta ja stabiilne.

Interaktiivne pilt on pilt, millel on mitu leviala, millel klõpsamine (või hiirekursori hõljutamine) käivitab sündmuse, näiteks lingil klõpsamise või vihjeteate kuvamise.

Kuidas WordPressis interaktiivset pilti luua

Niisiis, laadige alla ja installige oma saidile pistikprogramm ImageLinks Lite. Plugina saate alla laadida allolevalt lingilt.

Alustuseks räägin ainult interaktiivse pildi loomisest. Ja siis analüüsin kõiki pistikprogrammi sätteid.

Avage konsooli üksus "ImageLinks", mis ilmus pärast pistikprogrammi aktiveerimist, ja seejärel alamüksusesse "Lisa uus". Sisestage ülemisele väljale oma interaktiivse foto nimi.

Kerige veidi alla ja klõpsake nuppu "Määra pilt".

Teie ees avaneb sisseehitatud WordPressi meedia üleslaadija, milles saate valida juba üles laetud või laadida arvutist uue pildi, mida soovite interaktiivseks muuta. Ja valitud pilt ilmub kohe eelvaates veidi kõrgemale.

Nüüd teeme sellest pildist interaktiivse pildi. Selleks minge eelvaate alt vahekaardile "Levialad" ja klõpsake pildile uue leviala lisamiseks plussikooni.

Seejärel naaske eelvaatesse. Näete, et vasakus ülanurgas ilmub punkt.

Haara see hiirega kinni ja liiguta pildil kohta, kus peaks olema esimene interaktiivne punkt.

Pärast seda minge uuesti eelvaate all olevate valikute juurde, et määrata punkti parameetrid. Siin vajate jaotist "Leviala seaded". Avage see ja täitke väli "Lingi URL", kus peate interaktiivsel pildil sellel punktil klõpsates määrama lingi, millele üleminek toimub. Vajadusel saate lubada valiku "Ava link uues aknas", et link avaneb uuel vahelehel.

Nüüd pöörake tähelepanu seadeteplokile "Hüpiku sätted". Siin saate määrata kohtspikri, mis kuvatakse, kui hõljutate kursorit interaktiivse punkti kohal. Alustamiseks lubage valik "Näita hüpikakna". Ja siis allpool toimetajas täitke vihje sisu.

Nüüd minge tagasi eelvaatesse ja klõpsake nuppu "Eelvaade", et näha, kuidas see praktikas välja näeb.

Näete oma juba töötavat interaktiivset pilti, kus saate kontrollida loodud vihjet ja linki.

Nüüd sai selgeks, kuidas pildile interaktiivseid punkte lisada. Teise punkti lisamiseks klõpsake plussmärgiga nuppu.

Saate lisada pildile suvalise arvu punkte.

Kui kõik punktid on lisatud, klõpsake muudatuste salvestamiseks nuppu Avalda ja kasutage selle interaktiivse pildi avaldamiseks oma saidil, postitustes ja lehtedel lühikoodi.

ImageLinks Lite pistikprogrammi seaded

Nüüd, kui teate üldiselt, kuidas interaktiivset pilti teha, vaatan teisi pistikprogrammi sätteid ja funktsioone. Nagu olete märganud, on kõik valikud jagatud kaheks vahekaardile "Üldised" ja "Levialad". Alustan esimese vahekaardi jaotistega:

• Pildi URL. Esitatakse link interaktiivsele pildile. Saate määrata pildi teisest allikast, mitte oma saidilt.
• pildi suurus. Pildi suurus.
• Punktinõuannete jaoks saate valida teema.
• mobiilianimatsioon. Lülitab mobiilseadmetes punkt-animatsiooni sisse ja välja.
• Popoveri seaded. Sätted punktide kohtspikrite kuvamiseks.
• kohandatud css. Siin saate lisada kohandatud stiili.

Vahekaart "Levialad" sisaldab valikuid iga leviala jaoks. Vasakpoolses servas on loodud punktide loend, kus on nupud nendega tehtavate toimingute tegemiseks - lisamine, kustutamine, kopeerimine ja teisaldamine.

Tähelepanu tõmbamine on müügivalemi üks komponente.

A-tähelepanu

Mina – Huvi – Huvi

D – soov – soov

A – tegu – tegevus

Esiteks peame püüdma tähelepanu, siis äratama huvi ja soovi ning lõpuks kutsuma tegutsema. Kuna kõik siin maailmas on nii või teisiti seotud müügiga, peame iga päev tõmbama teiste inimeste tähelepanu endale, oma loovusele, tootele, ärile. Et teada saada, kuidas seda paremini teha, kasutame sõprade ja kolleegide nõuandeid, vaatame internetist, õpime Meistritelt, rakendame oma praktilisi kogemusi.

Teatavasti muutub elu kiiresti ja igapäevaselt ning vaevalt jõuame üksinda jälgida kõiki moodsamaid viise ja meetodeid tähelepanu tõmbamiseks. “Vihjekastis” on täna lugejatele suurepärane uudis - interaktiivse fotograafia abil saate kasutada kõiki oma reklaami kanaleid.

Miks ja kes vajab interaktiivseid pilte

Asjaolu, et fotod hoiavad tähelepanu ning originaalsed, huvitavad ja ebatavalised fotod hoia veel rohkem tähelepanu, tuttav fakt. Proovige lisada fotole, pildile või pildile aktiivseid linke ja seda tehes muudate need teabeüksusteks. Ei tea kuidas? ma küsin.

Selle jaoks on suurepärane teenus. Thinglink.com Selle teenuse abil saate pildile paigutada kõik oma aktiivsed lingid.

Vastame kõigepealt küsimusele, kellele seda vaja on? Loomulikult mitte kõik. Kunstnikud, muusikud, kuulsad ja populaarsed isiksused, veebipoed, ettevõtete veebisaidid kasutavad seda teenust väga edukalt. Suures plaanis kõik need, kes soovivad end avalikult väljendada. Kokkuvõttes on see korralik nimekiri.

Kui teil on midagi näidata ja teil on vaja sellest rääkida, siis see on teie jaoks. Nagu näete, on kõik geniaalne lihtne: saate teha mis tahes pildi, manustada linke, videot, heli, oma sotsiaalseid linke ja muuta need interaktiivseks.

ThingLink muudab teie foto interaktiivseks

Selleks minge ThingLinki teenusesse, laadige üles soovitud pilt ning sisestage lingid ja sildid (kirjeldus). Muide, just sildid võivad muuta teie pildi atraktiivsemaks ja seega ka kasutajate poolt aktiivsemaks. Seega, mida huvitavam on iga lingi kirjeldus, seda rohkem inimesi soovib sellel klõpsata. Plaanin oma silte redigeerida, loodan, et tekib huvitavaid ideid.

Sellest teenusest saate kasutada minimaalselt või maksimaalselt võimalusi, nii palju kui vajate. Loomulikult saate saadud ebatavalise foto oma saidile manustada mis tahes platvormiga. Seal on rakendus, millega saab Facebookis vahekaarte teha ja mis veelgi parem – sellest saab lugeda teenindusblogi ja vaadake vajalikke meetodeid töös.

Ma ei usu, et teenuse uurimine võtab palju aega, loojad püüdsid muuta ebatavalise foto ja pildi loomise tööriista mugavaks ja juurdepääsetavaks. Täiesti võimalik, et avastan enda jaoks mõne hetke, millest olen ilma jäänud. Kuid isegi täna saan end avalikult teada anda saidil asuva ebatavalise foto abil ja teie vaated kajastuvad koheselt statistikas. Klikkide ja linkidel tehtud klikkide arv kasvab väga kiiresti. Mis mulle kui saidi autorile kahtlemata meeldib.

Mida saate interaktiivsest fotost?

Kolleegid, saate kasutada seda suurepärast võimalust end reklaamida ebatavalise foto abil. Teie külastajad ja lugejad avaldavad muljet!

IN Tööde galeriist leiate näiteid enda teostuseks.

D Oma saidil linkide ja siltide muutmiseks, lisamiseks ja redigeerimiseks peate oma saidile installima ThingLinki.

IN Tasuta versiooniga saab üles laadida 50 pilti. Mõne jaoks sellest ei piisa, kuid paljudele meist arvan, et alustamiseks piisab.

M Saate oma saidile manustada mis tahes teise inimese pildi või foto.

H ja grupifotol saab sel viisil tähistada erinevaid inimesi.

Nõustuge, sõbrad, et see interaktiivne tehnoloogia on hämmastav! See võimaldab veelgi rohkem levitada teavet meie, meie huvide, võimete, annete, eelistuste kohta. Ebatavaline foto on meie jaoks suurepärane vahend brändi reklaamimiseks ja mitte ainult. Oluline on, nagu alati, mõõta. Ühes näites nägin lakoonilist linki suurele fotole, kuid see viis täpselt sinna, kuhu vajasin rohkem tähelepanu.

P.S. Viip. Vajaliku teabe leiate kiiresti minu blogist

Kokkuvõtteks - näide sellest, kuidas saab huvitavalt rääkida millestki, mis selle tulemusena kindlasti paljude tähelepanu köidab.