Fără smoching

Cum să faceți un înainte/după pe site-ul dvs. pentru a compara două fotografii ?

Creați un înainte după pe blogul dvs.

Cu siguranță ați întâlnit deja înainte/după pe web! Arată o piesă înainte și după muncă, o față înainte și după machiaj, o fotografie înainte și după retușare, corpul său înainte și după o transformare fizică ... Dar cum se face cu ușurință un înainte/după pe blogul său ?

În acest tutorial, vă voi arăta cum să utilizați JuxtaposeJS, un instrument online foarte ușor de învățat pentru a crea un înainte/după pe un site.

Pregătiți-vă fotografiile înainte/după

Succesul unui voucher înainte/după depinde în parte de alegerea fotografiilor !

Faceți fotografia potrivită

Înainte/după care au cel mai mare impact sunt adesea cele în care se află fotografiile luate din același unghi.

De exemplu, dacă doriți să arătați o față înainte și după machiaj, este mai bine să faceți fotografia cu aceeași expresie, cu aceeași luminozitate și același unghi. Astfel, diferențele dintre cele două fotografii se vor remarca cu atât mai mult.

Același lucru pentru un loc, puteți folosi destul de mult un trepied pentru a face fotografia în același loc în două momente diferite.

Odată ce ați reținut două fotografii similare, le vom pune online.

Încarcă fotografii

JuxtaposeJS, instrumentul de care vom folosi, are nevoie recupera link-ul fotografiilor tale. Poate face acest lucru fie din Dropbox dacă aveți un cont și fotografia dvs. este stocată pe Dropbox, fie de pe un site web.

Sigur WordPress, du-te la Meniu media> Adăugare și trimiteți cele două fotografii.

Vă recomandăm apoi să faceți clic pe linkul „Editați” pentru fiecare fotografie și să completați titlul acesteia și câmpul „Text alternativ” cu o descriere a imaginii.

În coloana din dreapta, veți găsi link-ul foto. Copiați linkul celor două fotografii și păstrați-l deoparte (de exemplu, pe Notepad).

Dacă aveți un blog pe Blogger, accesați secțiunea „Articole”, apăsați butonul „+” pentru a crea un articol nou, apoi faceți clic pe „Inserați o imagine”. Apoi alegeți „import de pe computer” și încărcați cele două imagini.

Acestea vor fi inserate automat în articol. Faceți clic pe fiecare imagine, alegeți „editați” și apoi setați dimensiunea imaginii la „Dimensiune originală”. Apoi du-te la editorul HTML făcând clic pe butonul „Vizualizare HTML” din partea dreaptă sus a ecranului.

Copiați linkul celor două imagini:

Se află imediat după o parte numită "src ="
Începe cu https și se termină cu .jpg dacă imaginile dvs. sunt în format JPG

Acum suntem gata să trecem la crearea corectă înainte/după !

JuxtaposeJS, un instrument gratuit pentru a face un înainte/după

Funcționarea JuxtaposeJS este foarte simplă. Pe site, începeți prin a copia în stânga linkul imaginii reprezentând situația „Înainte” și, în dreapta, linkul imaginii corespunzătoare „După”, astfel:

Puteți apoi, pentru fiecare imagine, să indicați o legendă, cum ar fi o dată de exemplu („Etichetă”), precum și un credit.

Apoi, vă puteți personaliza înainte/după cu mai multe opțiuni:

Poziția de start a cursorului - Aceasta este defalcarea procentuală dintre cele două fotografii. Dacă plecați la 50%, vom vedea jumătate din fotografia Before și jumătate din fotografia After.
Afișați etichete și afișați credite - Aceste opțiuni vă permit să afișați sau nu subtitrarea și creditul celor două fotografii.
Anima - Această opțiune animă automat înainte și după.
Faceți răspuns - Vă sfătuiesc să bifați această casetă care vă permite să vă adaptați înainte/după dvs. la smartphone-uri și tablete.
Vertical - Dacă fotografia dvs. necesită o verticală înainte/după, puteți bifa această casetă pentru ao obține.

Puteți previzualiza în timp real redarea glisorului înainte/după.

După ce sunteți gata, faceți clic pe „Publicați” pentru a prelua codul glisor.

Publicați înainte/după pe blogul dvs.

Pentru a vă publica înainte/după pe blogul dvs., trebuie pur și simplu copiați codul care apare în zona „Încorporați” de JuxtaposeJS:

Când îți scrii articolul, comutați la editorul HTML. Pe Blogger, v-am arătat puțin mai sus cum să faceți.

Pe WordPress, acest lucru se întâmplă la acest buton dacă utilizați editorul clasic:

Și dacă folosești editorul Gutenberg al WordPress, va trebui să faceți clic pe cele trei puncte din partea dreaptă sus a ecranului, apoi să alegeți „Editor de cod” în meniu.

Unde vrei să apară înainte și după, copiați codul din JuxtaposeJS.

Clarificare utilă pentru utilizatorii Blogger: dacă faceți o „Previzualizare” a postării dvs., înainte și după nu vor funcționa în previzualizare ... dar odată ce ați publicat, funcționează bine pe blog.

Iată redarea, obișnuiam să testez instrumentul o fotografie cu Winchester în Anglia ... înainte și după retușare:

Înainte/după a dat naștere unor proiecte foarte creative, precum Back To The Future, de Irina Werning, care i-a încurajat pe adulți să-și recreeze fotografiile din copilărie. Depinde de voi să vă imaginați viziunea asupra lucrurilor !

Buna ! Eu, sunt Marlene. Consultant SEO în viață, vă împărtășesc sfaturi pentru a crea un blog și a vă dezvolta vizibilitatea pe web. Dacă aveți o întrebare sau doriți să răspundeți după ce ați citit acest articol, nu ezitați să postați un comentariu !