Sima átmenet

A Sima átmenet az oldalak közötti váltást animálja. A hatás a felhasználói élményt javítja: ha az átmeneti elemnek a tartalom burkolóelemét adod meg, a fejléc és a lábléc nem változik, a lapozás mégis folyamatos és látványos marad.

A megoldás nem ajax, hanem a böngésző saját oldalbetöltése. Ezért az URL megváltozik, és a keresőoptimalizálást (SEO) sem érinti.

A sima átmenet korábbi funkció, alapból ki van kapcsolva. A Dynamic Content for Elementor → Funkciók oldalon kell bekapcsolni, utána jelenik meg a szerkesztőben. A WordPress 5.6-os jQuery-frissítése óta előfordulhat, hogy nem működik megfelelően, ezért éles oldalon használat előtt próbáld ki. Az egész webhelyre érvényes, egyes oldalakra külön nem állítható.

Hol találod?

A beállítás a teljes webhelyre vonatkozik, ezért az Elementor szerkesztőjében, a Dynamic.ooo panelen éred el, a Sima átmenet szakaszban. A Sima átmenet kapcsolóval kapcsolod be, utána megadod a burkolóelem szelektorát.

https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor

Burkolóelem szelektora

A legfontosabb beállítás a Burkolóelem szelektora: annak a burkolóelemnek a CSS-szelektora (.osztály vagy #azonosító), amelyet az oldalváltáskor animálni kell. Hogy a témádban mi ez az elem, az a téma HTML-szerkezetétől függ.

• Csak egyetlen szelektort adhatsz meg, többet egyelőre nem.
• Ha a szelektorhoz nincs találat az oldalon, nincs eredmény. Ilyenkor a mező mellett a No matches felirat látszik.
• Ha talál elemet, a felirat zöld Detected lesz, és megjelennek a további beállítások.
• A szelektornak ponttal vagy kettőskereszttel kell kezdődnie.

Cél [a href] osztálya

A Cél [a href] osztálya azoknak a linkeknek a szelektora, amelyekre a sima átmenet rákattintáskor lefut. Megadhatsz csak egyet is, például .smoothtransition, ekkor a szelektor a.smoothtransition.

Ha az alapértéken hagyod, az összes link részt vesz az átmenetben, kivéve ezeket:

• target="_blank" linkek,
• # horgonylinkek,
• üres hivatkozások,
• uploads útvonalra mutatók,
• mailto: és tel: linkek.

Ezen kívül az átmenetből kimaradnak azok a linkek, amelyeken ezek az osztályok vannak: no-transition, gallery-lightbox, ocean-lightbox, elementor-clickable, elementor-icon, is-lightbox.

Az alapérték:

a:not([target="_blank"]):not([href=""]):not([href^="uploads"]):not([href^="#"]):not([href^="mailto"]):not([href^="tel"]):not(.no-transition):not(.gallery-lightbox):not(.elementor-clickable):not(.oceanwp-lightbox):not(.is-lightbox):not(.elementor-icon)

A mezőt bármikor módosíthatod, ha más linkeket szeretnél bevonni vagy kizárni.

Animációk

https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor

A Kilépési animáció az oldal elhagyásakor, a Belépési animáció az új oldal betöltődésekor játszódik le. Mindkettőnek három beállítása van:

Beállítás	Mit csinál	Alapérték
Kilépési átmenet stílusa / Belépési átmenet stílusa	Az animáció stílusa: Nincs, Halványítás, Bal, Jobb, Felül, Alul, Távolodó nagyítás, Közelítő nagyítás, Átfordítás balra, Átfordítás jobbra, Átfordítás felfelé, Átfordítás lefelé.	Halványítás
Kilépési sebesség / Belépési sebesség	Az animáció hossza ezredmásodpercben (0 és 2000 között).	500
Kilépési időzítési függvény / Belépési időzítési függvény	A gyorsulási görbe: Lineáris, Ease, Fokozatos gyorsulás, Fokozatos lassulás, Ease In Out és az easeIn/easeOut/easeInOut változatok (Quint, Circ, Expo, Back).	Ease In Out

Átfedési hatás

Az átfedés egy rétegként húzódik végig az oldalon, és függönyszerűen tárja fel a tartalmat. Az Átfedés használata kapcsolóval kapcsolod be.

Beállítás	Mit csinál
Átfedés stílusa	Az irány: Bal, Felül vagy Alul.
Fedvény színe	Az átfedés színe.
Átfedő kép	Szín helyett kép is lehet az átfedés.

Más stílusok (átlós, kör, hullám, kettős) a leírás szerint még fejlesztés alatt állnak, ezért nem érhetők el.

https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor

Forgó betöltésjelző

A betöltésjelző az oldalváltás közben látszik. Beállításai:

Beállítás	Mit csinál
Betöltés engedélyezése szerkesztő módban	A szerkesztőben is megjeleníti a betöltésjelzőt, hogy a kinézetét be tudd állítani. Beállítás után kapcsold vissza.
Betöltési mód	Kör (forgó kör), Kép (animált kép) vagy Nincs.
Kör színe, A kör folyamatjelzőjének színe	A kör és a folyamatjelző színe (Kör módban).
Méret	A jelző mérete (alapérték 32 px).
Kör vonalvastagsága	A kör vonalvastagsága (alapérték 5).

Eszközök

A Sima átmenet alkalmazása itt mezőben választod ki, mely eszközökön legyen aktív az átmenet: desktop, tablet, mobile. A reszponzív működés csak az előnézetben vagy az éles oldalon érvényesül, a szerkesztőben nem.