Chceli by ste sa naučiť, ako priblížiť profilovú kartu pomocou doplnku na tvorbu stránok Elementor ?
V tomto novom návode Elementor, ukážeme vám, ako aplikovať efekt priblíženia na profilovú kartu, pričom odhalíme názov profilu, ako aj jeho ikony sociálnej siete.
Ak neviete, o čom dnes chceme hovoriť, pozývame vás pozrieť si nasledujúce video:
Potom sa vráťme k tomu, prečo sme tu.
Na dokončenie tohto návodu budete potrebovať verzia Elementor Pro, pretože budeme používať vlastný kód CSS, ktorý podporuje iba táto verziaElementor.
Vytvorme novú sekciu s 3 stĺpcovou štruktúrou, potom v paneli definujme Výška sur Min. výška, a potom Minimálna výška kliknime ďalej VH a nastavte posúvač na 100.
Pridajme widget Vnútorná časť v strednom stĺpci. Widget Interná sekcia je štandardne nakonfigurovaný s 2 stĺpcami, vymažme jeden z nich. Nakonfigurujme zvyšok v paneli jeho úpravou Výška sur Min. výška a Minimálna výška nastavíme kurzor na 400.
Na karte Štýl, poďme upraviť Prekrytie pozadia, Cliquez sur klasický na type pozadia a vyberte obrázok z knižnice a v nastaveniach snímky vyberte Centered Centered na pozícii Kryt na Veľkosť. Nepriehľadnosť dňa 1. a
V sekcii hranice kliknite na % a zadajte 4 pre všetky polomery obrubníkov.
V počte políčok nastavte posúvač na 0 sur HorizontálneNa 70 sur VertikálneNa 63 sur rozmazanéNa -60 sur difúzor. Pod obrázkom by ste mali vidieť krásny tieňový efekt.
V vnútorná časť posuňte sa Miniaplikácia názvu. Ako názov zadajte Steve Jobs, na karte Štýl vyberte bielu farbu #FFFFFF. V typografii vyberte Veľkosť 20.
Potom vyberte stĺpec miniaplikácie Vnútorná sekcia a na karte Štýl vyberte typ orámovania kliknutím na Plné, všetky šírky na 1 a farby na #FFFFFF.
Na karte pokročilý, zmeňte okraje na 15 a vnútorné okraje zapnuté 20.
Teraz vložte ikony sociálnych médií potiahnutím miniaplikácie Ikony sociálnych médií do sekcie Interné.
Upravte odkazy na sociálne médiá na karte Obsah kliknutím na Každá sociálna sieť. Ak chcete pridať ďalšie sociálne siete, kliknite na tlačidlo Pridaťje to prvok
V poli ikon kliknite na Knižnicu ikon a do vyhľadávacieho panela zadajte prvé písmená vašej sociálnej siete, hneď ako ju nájdete, vyberte ju a kliknite na tlačidlo Vložiť.
Potom prejdite na kartu Štýl, v časti ikona, zmeňte farbu na Personnalisé.
Prečítajte si tiež nášho sprievodcu; Ako pridať stránkovanie pomocou Elementor
O Hlavná farba, nastavte priehľadnosť na minimum.
O Sekundárna farba, vyberte farbu #FFFFFF. V časti Veľkosť zadajte 20, Interná marža zapnutá 0.4.
Teraz kliknite na kartu pokročilýa v sekcii polohovacieKliknutím na Personnalisé, na vlastná šírka, zadajte 0.
Objavte tiež Ako používať nástroj Color Picker s Elementorom
O poloha, vyberte položku absolútny, na Shifte 15Na Vertikálna orientácia choisir basA smena sur 20.
Znova vyberte Vnútorná časť a v záložke pokročilý, v časti Vlastné CSS (Ak túto sekciu nemáte, rýchlo inovujte na profesionálnu verziu Elementor a pokračujte)
Skopírujte a prilepte nasledujúci kód do tejto sekcie:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori by ste toho nemali veľa vidieť, ale ak umiestnite kurzor myši na obrázok, mali by ste vidieť priblíženie použité na obrázok.
Teraz skopírujte a prilepte nasledujúci kód za predchádzajúci kód, aby ste zobrazili alebo skryli určité prvky stĺpca:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Teraz, keď umiestnite kurzor myši na obrázok, priblíženie sa použije na obrázok a zobrazia sa názvy a ikony sociálnych sietí.
Zduplikujme tento stĺpec 2-krát a ostatné 2 stĺpce vymažte.
Zmeňte obrázok na pozadí interných sekcií, ako aj názov a odkazy sociálnych sietí.
Tu to máte, práve ste túto úlohu urobili ľahko. Stačí si zobraziť ukážku práce svojho tabletu a smartfónu a pokúsiť sa zmeniť okraje tak, aby zodpovedali každému zariadeniu.
Získajte teraz prvok Elementor!
záver
Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako použiť efekt priblíženia na kartu profilu. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
