Kako koristiti widget Slika u Elementoru

Trebate znati kako koristiti widget Image u Elementoru?

Kao što se kaže. "Slika vrijedi tisuću riječi". Ponekad je puno lakše prenijeti poruku putem slike.

Također se odnosi na web dizajn. Gotovo je nemoguće dizajnirati web stranicu bez uključivanja elementa slike. Budući da je alat koji naglašava dizajn, Elementor omogućuje vam jednostavno dodavanje slike u svoj dizajn pružajući widget Image. Možete jednostavno povući widget Slika u okvir za uređivanje da biste dodali element slike.

Ne samo da možete dodati statičnu sliku, već u Elementor možete dodati i dinamičnu sliku. Ova je značajka (mogućnost dodavanja dinamičke slike) posebno korisna za stvaranje prilagođenog predloška poput prilagođene jedinstvene poruke, stranice prilagođene kategorije, prilagođenog zaglavlja itd. ... - pomoću Elementarovog graditelja tema.

Sam widget Image dostupan je u obje verzije Elementara, ali da biste dodali dinamičnu sliku, morate koristiti pro verziju.

Kako dodati sliku u Elementor

Prije nego što nastavimo dalje, pretpostavljamo da već znate kako koristiti Elementor. 

U uređivaču Elementara samo povucite widget Slika s lijeve ploče na okvir za uređivanje, a zatim kliknite birač slika da biste odabrali sliku koju želite koristiti.

Dodavanje dinamičke slike

Da biste dodali dinamičku sliku, možete zadržite pokazivač miša iznad birača slika, kliknite ikonu baze podataka i između dostupnih opcija odaberite vrstu dinamičke slike koju želite dodati.

Zatim možete kliknuti ikonu francuskog ključa za odabir spašavanja. Sam rezervni sadržaj zadani je sadržaj koji se prikazuje kada dinamički sadržaj nije dostupan. U ovom slučaju, Fallback je zadana slika koja se prikazuje kada Elementor ne može pronaći dinamičku sliku.

Prilagođavanje slike

Da biste personalizirali sliku, možete joj pristupiti kartici Stil s ploče s postavkama (ploča s lijeve strane). Prije odlaska u kartica Stil, možete postaviti veličinu slike, poravnanje slike i dodati vezu na sliku u bloku Slika ispod kartice Sadržaj. 

Pročitajte također: Kako upravljati prijavama obrazaca u Elementoru

Ispod kartice Stil, možete postaviti radijus obruba, primijeniti CSS filtre, postaviti prilagođenu veličinu, neprozirnost i primijeniti sjenu područja.

• Definicija prilagođene veličine

U bloku Slika ispod kartice Sadržaj, možete postaviti veličinu svoje slike. Ako želite postaviti prilagođenu veličinu, na bloku možete samo postaviti vrijednost širine i vrijednost visine Slika pod kartici Stil. Možete koristiti postotnu jedinicu, piksel ili širinu prozora zaslona (VW).

• Postavljanje neprozirnosti slike

Da biste postavili razinu neprozirnosti slike, jednostavno povucite klizač iz Opcija neprozirnosti ispod kartice Stil. Možete unijeti razinu neprozirnosti od 0 do 1.

• Primjena CSS filtara

Ako želite, na sliku možete primijeniti CSS filtre kako biste dodali neke efekte slike. Možete primijeniti 5 opcija filtra: zamagljivanje, svjetlina, kontrast, zasićenost i nijansa. Samo kliknite ikonu olovke u opciji CSS filtri i postavite željene vrijednosti CSS filtra povlačenjem klizača.

• Definicija granice

Da biste svoju sliku učinili privlačnijom, također možete postaviti granice. Da biste dodali obrub, prvo odaberite vrstu obruba u opciji Vrsta granice. Zatim možete postaviti širinu obruba, boju obruba i radijus obruba.

Usput, radijus obruba je razina nagiba bočnih kutova slike (gore desno, gore lijevo, dolje desno, dolje lijevo). Što je veća vrijednost radijusa obruba, to će vaša slika biti zaobljenija.

 

• Primjena sjene okvira

Da biste primijenili sjenu okvira, jednostavno kliknite ikonu olovke u opciji Sjena kutije. Odaberite boju sjene i postavite vrijednost vodoravne orijentacije, okomite orijentacije, razine zamućenja i razine širenja.

Napredne postavke

Da biste izvršili neke napredne postavke na slici, morate otvoriti karticu napredan na ploči s postavkama. Iz nje možete definirati stvari poput margine i dodavanja, unosne animacije, prilagođeni CSS itd.

• Definiranje margine i popunjavanja

Da biste postavili marginu i popunu slike, morate otvoriti blok Napredna.

• Primjena ulazne animacije

Da biste svoju sliku učinili uvjerljivijom, možete primijeniti ulaznu animaciju. Da biste to učinili, možete otvoriti blok Efekti pokreta. Iz ovog bloka možete postaviti efekte pomicanja, efekt miša i ljepljivu opciju.

Da biste primijenili ulaznu animaciju, potreban vam je samo stil ulazne animacije u opciji Animacija ulaza.

• Dodavanje prilagođenog CSS-a

Ako imate CSS znanje, u widget Image možete dodati i prilagođeni CSS. Da biste dodali prilagođeni CSS, jednostavno otvorite blok Prilagođena CSS i zalijepite svoj CSS kôd na dostupno polje.

• Sakrij sliku na određenoj vrsti uređaja

U Elementoru možete koristiti različite postavke na određenom widgetu za različite vrste uređaja. Osim toga, možete postaviti onemogućavanje widgeta na određenoj vrsti uređaja.

Na primjer, možete isključiti widget Image na tabletu. Da biste to učinili, možete otvoriti blok Osjetljivi. Povucite gumbe da biste sakrili widget na određenom uređaju.

• Definiranje prilagođenog položaja

Kada dodate sliku u Elementor, zadani položaj postavljen je na statički (Par défaut). Postoje dvije druge mogućnosti položaja koje možete postaviti na: Popravi et absolu.

- Ispravljeno: Ako odaberete ovu opciju, slika će se postaviti u odnosu na korisnički zaslon

- absolu : Ako odaberete ovu opciju, slika će biti postavljena apsolutno na prvo postavljenom roditelju.

Da biste postavili prilagođeni položaj, možete otvoriti blok namještanje ispod kartice Napredna. Odaberite prilagođeni položaj koji želite postaviti u opciji Položaj i postavite pomak horizontalne i vertikalne orijentacije.

Ukratko

Slika je važan dio dizajna. Sigurno možete dizajnirati stranicu bez slike, ali vaš dizajn bit će neukusan. Pomoću widgeta Image možete dodati element slike vašem dizajnu Elementor, bilo da se radi o predlošku dizajna stranice ili temi.

Elementor omogućuje dodavanje statičke i dinamičke slike (samo pro verzija). Pored widgeta Image, postoji i widget Image Box za dodavanje elementa slike s tekstualnim sadržajem. Ovaj posljednji spomenuti widget prikladniji je za određene potrebe, poput stvaranja odjeljka člana tima, odjeljka popisa značajki i ostalih odjeljaka koji uključuju sadržaj slike i teksta.

Nabavite Elementor Pro odmah!

2. Pomaknite sliku zumiranja

Ovaj vam dodatak omogućuje jednostavno dodavanje značajke pan zumiranja za slike na vašem WordPress blog putem kratkog koda. Na primjer, možete ga integrirati u svoj članak ili stranicu.

Kao funkcionalnosti, između ostalog imat ćete: panoramski zum na jednoj slici ili galeriju s neograničenim slikama, položaj kontrolne trake može biti gornji, desni, donji i lijevi, dno spremnika može biti tamno, svijetlo i ništa od toga; pregled uživo na nadzornoj ploči, primjer višestrukog panoramskog zumiranja na istoj stranici itd.

Otkrijte i naše 5 shortcodes premium WordPress dodataka

Preuzmite | demo | Web hosting

3. Automatizacija marketinga

Ce WordPress plugin premium pruža jednostavno i fleksibilno korisničko sučelje, čija će svrha biti da pomoći vam da lako stvorite snažan bilten na svojoj web stranici. Njegova fleksibilnost omogućit će vam upravljanje širokim rasponom događaja, uvjeta i radnji - tako da možete lako konfigurirati svoju marketinšku strategiju e-pošte za slanje, praćenje i zaradu od nje.

Njegove su glavne funkcionalnosti: mogućnost primjene uvjetne logike zasnovane na reakciji i ponašanju posjetitelja, praćenje radnji posjetitelja web stranice, savršeno za sve programe vjernosti, izvrsno za marketinške strategije koje se klade na nagradama, intuitivna nadzorna ploča, segmentacija posjetitelja web stranice, mogućnost provođenja anketa, sms obavijesti i putem e-pošte, skočnih prozora koji se temelje na ponašanju posjetitelja, reklama s natpisima koja se temelje na ponašanju posjetitelja i još mnogo toga.

Preuzmite | demo | Web hosting

• 10 WooCommerce dodaci stvaraju dinamično cijene
• Kako moderirati komentare u WordPressu
• 6 WordPress dodataka za dodavanje Autize.Net na svoju web stranicu
• Neki WordPress pluginovi da se uključe posjetitelja