Elementor: Jak zvětšit profilovou kartu

Chtěli byste zjistit, jak přiblížit profilovou kartu pomocí pluginu pro tvorbu stránek Elementor ?

V tomto novém tutoriálu Elementor, ukážeme vám, jak na kartu profilu použít efekt přiblížení a zároveň odhalit název profilu a také ikony jeho sociální sítě.

Pokud nevíte, o čem chceme dnes mluvit, zveme vás ke shlédnutí následujícího videa:

Pak se vraťme k tomu, proč jsme tady.

K dokončení tohoto tutoriálu budete potřebovat Pro verzi Elementor, protože budeme používat vlastní kód CSS, který je podporován pouze touto verzíElementor.

Vytvořme novou sekci se 3 sloupcovou strukturou, pak v panelu definujme výška z Min. výška, a pak Minimální výška klikneme na VH a nastavte posuvník na 100.

Přidáme widget Vnitřní část ve středním sloupci. Widget Vnitřní sekce je standardně nakonfigurován se 2 sloupci, pojďme jeden z nich odstranit. Pojďme nakonfigurovat zbytek v panelu úpravou jeho výška z Min. výška a Minimální výška nastavíme kurzor na 400.

Na kartě Styl, pojďme upravit Překrytí pozadí, Klikněte na klasický na typu pozadí a vyberte obrázek z knihovny a v nastavení obrázku vyberte Vystředěno Vystředěno na pozici Pokrýt na Velikost. neprůhlednost na 1 a

V sekci hranice klikněte na % a vstoupit 4 pro všechny poloměry obrubníku.

V počtu polí nastavte posuvník na 0 z Horizontální, Chcete-li 70 z Vertikální, Chcete-li 63 z rozmazané, Chcete-li -60 z difuzor. Pod obrázkem byste měli vidět krásný stínový efekt.

V vnitřní sekce posuňte Titulkový widget. Jako název zadejte Steve Jobs, na kartě Styl vyberte bílou barvu #FFFFFF. V typografii vyberte Velikost 20.

Poté vyberte sloupec widgetu Vnitřní řez a na kartě Styl vyberte typ ohraničení kliknutím na Plné, všechny šířky na 1 a barvy na #FFFFFF.

Na kartě pokročilý, změňte okraje na 15 a vnitřní okraje zapnuty 20.

Nyní vložte ikony sociálních médií přetažením widgetu Ikony sociálních sítí do sekce Interní.

Upravte odkazy na sociální sítě na kartě Obsah kliknutím na Každá sociální síť. Pokud chcete přidat další sociální sítě, klikněte na tlačítko Přidatje to prvek

V poli ikon klikněte na Knihovnu ikon a do vyhledávacího řádku zadejte první písmena vaší sociální sítě, jakmile ji najdete, vyberte ji a klikněte na tlačítko Vložit.

Poté přejděte na kartu Styl, v sekci ikona, změňte barvu na Personnalisé.

Přečtěte si také našeho průvodce na; Jak přidat stránkování pomocí Elementor

na Hlavní barva, nastavte průhlednost na minimum.

na Sekundární barva, vyberte barvu #FFFFFF. Do pole Velikost zadejte 20, Vnitřní marže zapnuta 0.4.

Nyní klikněte na záložku pokročilýa v sekci polohovacíKliknutím na Personnalisé, na vlastní šířka, vstoupit 0.

Objevte také Jak používat nástroj Color Picker s Elementorem

na Pozice, vyberte absolutní, na Shift 15Na Vertikální orientace zvolit Bas, A směna z 20.

Vyberte znovu Vnitřní část a v záložce pokročilý, v sekci Vlastní CSS (Pokud tuto sekci nemáte, rychle upgradujte na profesionální verzi Elementor a pokračujte)

Zkopírujte a vložte následující kód do této sekce:

/*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 byste toho neměli moc vidět, ale když najedete na obrázek, měli byste vidět přiblížení aplikované na obrázek.

Nyní zkopírujte a vložte následující kód za předchozí kód, abyste zobrazili nebo skryli určité prvky sloupce:

/*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;
}

Nyní, jakmile najedete na obrázek, přiblížení se použije na obrázek a zobrazí se názvy a ikony sociálních sítí.

Zduplikujme tento sloupec 2x a zbylé 2 sloupce vymažte.

Změňte obrázek na pozadí vnitřních sekcí a také název a odkazy sociálních sítí.

Tady to máte, právě jste tento úkol snadno provedli. Stačí si prohlédnout práci svého tabletu a smartphonu a pokusit se změnit okraje tak, aby odpovídaly každému zařízení.

Získejte nyní prvek Elementor Pro!

Proč investovat do čističky vzduchu?

Tak ! To je vše pro tento článek, který vám ukáže, jak aplikovat efekt přiblížení na kartu profilu. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...