Tovább a tartalomhoz

Hirdetési banner widget: stílusok, rámutatási hatások és gomb

A Hirdetési banner widget nyolc stílusa, a kép, a cím, az alcím, a rámutatási stílusok, a gomb és a teljes bannerre ható animáció.

A hirdetési banner egy kép, rajta címsorral, egy rövid kiegészítő sorral és gombbal, plusz egy rámutatási hatással, amely jelzi a látogatónak, hogy kattintható. A Hirdetési banner widget ezt egyetlen elemben építi fel: kiválasztod az elrendezést, felteszed a képet és a szöveget, bekapcsolod a gombot, és megadod, hogyan reagáljon a banner az egérre.

  • A widget a Pro kiadás része. Pro kikapcsolva a widget nem jelenik meg a szerkesztőben, és az az oldal, amely már használta, semmit nem mutat a banner helyén.
  • Kapcsold be a The Plus Addons → Widgets oldalon: keress rá a widget nevére (Advertisement Banner), és kapcsold be a kapcsolóját.
  • Olyan képet válassz, amelyik fekvő tájolású, mert a cím, az alcím és a gomb a kép tetején áll.
  1. Húzd a Hirdetési banner widgetet az oldalra.
  2. A Hirdetési banner szakaszban a Stílusok alatt válassz elrendezést. Nyolc stílus van, képes csempék; alapból az első van kijelölve. Az Import Presets gomb a csempék fölött kész, szerkeszthető dizájnt tölt be.
  3. A Banner képe mezőbe tedd a képet, és a Képfelbontás mezővel válassz méretet (alapérték Teljes).
  4. A Cím mezőbe a főcímet, az Alcím mezőbe a kiegészítő sort írd.
  5. A Rámutatási stílusok mezőben válassz háttérhatást: Elmosási effektus (alap), Egyszerű, Függőleges vagy Parallax.
https://minta-bolt.hu/wp-admin/post.php?post=132&action=elementor
A Hirdetési banner Tartalom panelje

A képen a nyolc stílus csempéi, a Banner képe, a Képfelbontás, a Cím, az Alcím és a Rámutatási stílusok mező látszik.

A Rámutatási stílusok mező nem látszik, ha a 8. stílus van kiválasztva: annak saját rámutatási animációja van.

A gomb alapból ki van kapcsolva, amíg be nem kapcsolod, a beállításai rejtve maradnak.

  1. Nyisd meg a Gomb szakaszt, és kapcsold be a Gomb kapcsolót.
  2. Válassz a Gomb stílusa listából (Stílus 1 és 22. stílus között; a gyári a 7. stílus), majd add meg a Gomb szövege és a Gomb hivatkozása mezőt.
  3. A 4., 11. és 14. stílusnál a Rámutatáskor megjelenő szöveg mező is megjelenik: ez egy második felirat, amelyet a gomb rámutatási animációja használ.
  4. Ha a stílusnak van ikonja, válaszd ki az Ikonbetűkészlet mezőben a készletet, majd az ikont, és állítsd be az Ikon pozíciója, Ikon térköze és Ikon mérete értékét. Néhány stílusnál nem látszik minden ikonbeállítás.
https://minta-bolt.hu/wp-admin/post.php?post=132&action=elementor
A Gomb szakasz a 4. stílussal

A képen a Gomb stílusa, a Gomb szövege, a Rámutatáskor megjelenő szöveg, a Gomb hivatkozása és az ikonmezők látszanak.

https://minta-bolt.hu/tp-d6-banner/
A banner nyugalmi állapotban

A képen a banner képe fölött az alcím, a főcím és a gomb látszik.

  • Elmosási effektus: a háttérkép rámutatáskor elmosódik, a szöveg éles marad.
  • Függőleges: a háttérkép rámutatáskor nagyít.
  • Egyszerű: a kép változatlan marad.
  • Parallax: a banner 3D-ben megbillen, ahogy az egér mozog rajta.
https://minta-bolt.hu/tp-d6-banner/
Ugyanaz a banner rámutatáskor, elmosott háttérrel

A képen a háttérkép (a fehér kör) elmosódott éleket kap, a szöveg és a gomb éles.

A 8. stílus másképp működik: nyugalmi állapotban csak a cím és az alcím látszik alul, rámutatáskor a szöveg feljebb csúszik, és a gombot tartalmazó sáv becsúszik.

A Stílus fülön minden vizuális beállítás megvan: Cím stílusa, Alcím stílusa, Gomb stílusa (csak bekapcsolt gombnál), Animációs beállítások, Háttér beállítása (lekerekítés és háttér, Normál és rámutatásos állapotra) és On Scroll View Animation.

A teljes banner animálásához nyisd meg az Animációs beállítások szakaszt, és válassz egyet a tartalom rámutatási effektusai közül: Grow (nagyítás), Push, Bounce In, Float, Wobble Horizontal, Wobble Vertical, Float Shadow, Grow Shadow vagy Shadow Radial.

Ez az effektus az egész bannerre hat, nem csak a képre: a Grow például a képet, a címet, az alcímet és a gombot együtt nagyítja.

  • A Rámutatási stílusok csak a háttérképet mozgatja, a tartalom rámutatási effektusa az egész bannert.
  • Az 1. stílusban az alcím a cím fölött jelenik meg, bár a panelen a Cím mező van előbb.
  • A gomb alapból ki van kapcsolva.
  • A Hirdetési banner Pro nélkül nem működik: ha a Pro ki van kapcsolva, a banner eltűnik az oldalról.
  • Tiszta oldalon végzett próbán az alapértelmezett gombstílus (7. stílus) ikonja üres négyzetként jelent meg, mert nem töltődött be Font Awesome stíluslap. Az ikon törlése vagy az Ikonbetűkészlet váltása nem szüntette meg a négyzetet.
Jelenség Teendő
A gomb nyíl helyett üres négyzetet mutat. Válassz másik Gomb stílusa értéket. A próbán az 1. stílus (aláhúzott szöveg) és a 4. stílus (kitöltött tabletta) üres ikondoboz nélkül jelent meg.
Nem találom a Rámutatási stílusok mezőt. A 8. stílus van kiválasztva, amely elrejti. Válassz 1. és 7. stílus között, és a mező visszatér.
A cím és az alcím felcserélődött. Az 1. stílus így rendezi őket: az alcím a cím fölé kerül. Cseréld meg a két mező szövegét, vagy válassz másik stílust.
A banner hiányzik az éles oldalról. Ellenőrizd, hogy a Pro aktív, és az Advertisement Banner be van kapcsolva a The Plus Addons → Widgets oldalon.

Készült:

Tiszteletben tartjuk a magánszférádat

Sütiket használunk a böngészési élmény javítására és a forgalom elemzésére. Az analitika csak akkor indul, ha engeded. Adatvédelmi irányelvek, Sütitájékoztató.

Sütibeállítások