Nykypäivän internetin käyttäjillä on valinnanvaraa, ja huonosti suunniteltu verkkosivusto tuskin saa yleisön suosiota. Se on osa syytä, miksi estetiikka on yhä tärkeämpää: sinun ei tarvitse saada vierailijasi koukkuun vain erinomaisella sisällölläsi (jonka luominen on tarpeeksi vaikeaa), vaan myös sen esittämisellä.
Tässä opetusohjelmassa haluamme näyttää sinulle tavan esitellä kuvasisältösi: korttigalleria. Korttigalleria on yksinkertaisesti galleria, joka ”sekoittelee” tavallaan kuin korttipakka. Se näyttää jotakuinkin tältä:
Korttigallerian lisääminen WordPress-verkkosivustollesi on helppoa ja ilmaista, joten jos uskot sen parantavan verkkosivustoasi, ei ole syytä epäröidä. Mutta mistä tiedät, voisitko käyttää korttigalleriaa? Onko se vain esteettinen valinta, vai onko se myös toimiva sisustuselementti? Haluaisimme käsitellä näitä kysymyksiä ja vastata joihinkin kysymyksiisi, joita sinulla saattaa olla, ennen kuin käsittelemme ohjeen muttereita ja pultteja.
Puhumme tästä:
Korttigallerialla on useita käyttötarkoituksia, mutta pääasiassa se on galleria: esittely valokuville tai muille kuville vierailijasi voivat selata sitä rauhassa.
Kutakin korttigallerian kuvaa voidaan käyttää myös linkkinä toiselle sivulle. Tällä tavalla voit käytä korttigalleriaasi navigointiin muille sivustoille tai omalle verkkosivustollesi. Voit esimerkiksi luoda logoja projekteillesi, esittää ne kortteina ja linkittää ne yksittäisille projektisivuille, jolloin korttigalleriat ovat ihanteellisia portfolioita varten. Tai voit käyttää niitä tiimisivujen sijasta, jolloin vierailija voi napsauttaa jonkun työntekijäsi pikkukuvaa ja saada sen linkin hänen elämäkertasivulleen.
Vaikka korttigalleriaa ei käytettäisikään navigointiin, se on klikattava animoitu elementti. Sinun käyttäjät tuntevat olevansa sitoutuneempia kun annetaan jotain tekemistä sen sijaan, että katsoisit vain kuvia, mikä parantaa yleistä käyttökokemusta.
Kuvagallerioissa on se, että ne sisältävät välttämättä kuvia, eikä korttigalleria tietenkään ole poikkeus. Tämä tarkoittaa, että kun gallerian sisältävä sivu ladataan, sen lataaminen voi kestää huomattavasti kauemmin kuin ladata sivu ilman paljon kuvia.
Jos käytät gallerioissasi korkearesoluutioisia kuvia, tämä saattaa tarkoittaa pitkät latausajat, mikä puolestaan voi vaikuttaa haitallisesti poistumisprosenttiisi ja SERP-sijoituksiisi. Jos tämä huolestuttaa sinua, käytä grafiikkaa säästeliäästi.
Tietysti tietyt nettisivut (erityisesti taiteilijaportfoliot, tatuointisalit ja valokuvastudiot tulevat mieleen) joutuvat luonteeltaan raskaiksi kuviin. Tästä syystä sinun kannattaa harkita kuvan optimointia, jos haluat parantaa käyttökokemusta.
Näytämme sinulle, kuinka voit lisätä korttigallerian käyttämällä omaa Qi Addons for Elementor -laajennusta. Ennen kuin voit käyttää sitä, sinun on kuitenkin asennettava ja aktivoitava Elementorin visuaalisen editorin uusin versio (ilmainen versio on hyvä) ja sitten asennettava ja aktivoitava Qi-lisäosat. Qi Addons on täysin ilmainen laajennus, joten koko asennuksen ei tarvitse maksaa penniäkään.
Qi Addons for Elementor laajentaa Elementorin jo ennestään vaikuttavaa suunnitteluelementtivalikoimaa 60 upouudella ammattimaisesti suunnitellulla widgetillä. Se sisältää laajan valikoiman galleriavaihtoehtoja, ja korttigalleria-widget on vain yksi niistä. Näytämme sinulle, kuinka widget lisätään viestiin, mutta voit lisää se verkkosivustosi mille tahansa widget-valmiille alueelle. Käytämme ilmaista Qi-teemaa, mutta laajennuksen pitäisi toimia hyvin minkä tahansa käyttämäsi teeman kanssa.
Elementorin Qi-lisäosien avulla voit luoda kauniin ja toimivan korttigallerian kestää vain pari minuuttia yksinkertaisten widget-asetusten parissa. Voit katsoa kuinka se tehdään opetusvideostamme:
Mutta jos pidät oppaistasi tekstimuodossa, meillä on sinulle mahdollisuus: jatka vain lukemista.
Qi Addons -korttigallerian lisääminen WordPress-verkkosivustollesi alkaa kuten minkä tahansa muun Elementor-widgetin kohdalla: etsi se vasemmanpuoleisesta valikosta ja vedä se haluamaasi paikkaan.
Elementin oletusversio sisältää kolme paikkamerkkikuvaa. Käyttämällä Kenraali osio Sisältö -välilehdellä voit täyttää korttigalleriasi omilla kuvillasi.
Ensimmäinen vaihtoehto on Kuvan sekoitustyyli, joka on asetettu Oikein oletusarvoisesti, mikä tarkoittaa, että napsautettavat kortit ovat oikealla . Voit myös sekoittaa korttisi osoitteesta Vasen, tai Vasen ja oikea, jonka olemme valinneet.
Seuraavaksi alas löydämme Kuvakohteet -osio. Täällä voit lisätä mitä tahansa kuvia korttigalleriaasi. Widgetin oletusversio sisältää kolme kuvaa, ja juuri sen verran tarvitsemme, mutta voit lisätä lisää klikkaamalla + Lisää kohde -painiketta.
Voit lisätä kuvan Tuote, Klikkaa sitä. An Tuote siinä on kaksi säädintä: Linkki ja Tuotteen kuva. The Linkki -kenttää voidaan käyttää linkittämiseen sivulle, kun kohdetta napsautetaan. Asetamme omamme arvoksi #, linkittämällä samalle sivulle, jolla elementti on, jotta näet, miltä se näyttää ja käyttäytyy linkitettäessä. Sen jättäminen tyhjäksi tarkoittaa, että sivukohde ei linkitä mihinkään.
Lisää kuva napsauttamalla Tuotteen kuva laatikko. The Valitse Kuva -painikkeen pitäisi olla näkyvissä hiiren osoitin.
Voit valita kuvan mediakirjastostasi tai ladata uuden. Kun olet valinnut kuvan, napsauta Aseta media.
Olemme syöttäneet #-merkin Linkki kenttään ja valitsi jokaiselle kuvan Tuote. Viimeinen ohjausobjekti Kenraali jakso on Kuvan mittasuhteet valikosta. Tämä säätelee kaikkien kohteiden kuvan kokoa ja mittasuhteita. Voit valita Pikkukuva, neliö, maisema, muotokuvaja useita muita vaihtoehtoja. Olemme menneet mukaan Alkuperäinen, säilyttäen kuviemme koon.
Siirrytään kohtaan Tyyli -välilehti, huomaat, että liukusäätimiä on vain kaksi. Ensimmäinen ylös on Skaalausvaihe. Voit käyttää tätä liukusäädintä pienentääksesi passiivisia (napsautettavia) kuvia tiettyyn prosenttiosuuteen niiden alkuperäisestä koosta. Tämän liukusäätimen asettaminen asentoon 0 säilyttää kuvien alkuperäisen koon. Olemme valinneet 0.19 mittakaava-asetuksellemme, jolloin ei-aktiiviset kuvat ovat 81 % niiden alkuperäisestä koosta.
The Offset-askel liukusäädintä käytetään siirtämään passiiviset kuvat suhteessa aktiiviseen eli kuinka suuri osa ei-aktiivisesta (napsautettavasta) kuvasta näkyy. Tämän liukusäätimen asettaminen arvoon 0 piilottaisi ne kokonaan, jolloin niistä ei voi klikata ja koko widgetistä tulee hyödytön. Olemme asettaneet omamme 37:ään.
Siinä se on, yksinkertainen, tyylikäs ja tehokas animoitu korttigalleria, joka valmistuu minuuteissa.
Tiivistettynä
Kuten näet, Qi Addons for Elementor -sovelluksella voit lisätä kauniin, silmiinpistävän ja mukaansatempaavan widgetin WordPress-verkkosivustollesi muutamassa minuutissa ja täysin ilmaiseksi. Jos suunnittelemasi verkkosivusto voi hyötyä tästä pysäyttävästä esittelystä, se on nyt osa WordPress-työkalupakkiasi. Ja jos tämä on ensimmäinen kerta, kun kohtaat Qi-lisäosat Elementorille, huomaa, että tämä on vain yksi sen monista mahdollisista käyttötavoista.
Tue työtämme ❤️
Jos pidit tästä artikkelista, harkitse tipin antamista, jotta voimme jatkaa laadukkaan sisällön julkaisemista.
