Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Potrebujete vytvoriť tlačidlo s efektom vznášania pomocou Elementor ?

Ak áno, sadnite si do tohto veľkolepého autobusu, pretože to, čo dnes dosiahneme, je v nasledujúcom videu:

Poďme vytvoriť stránku, potom ju upraviť pomocou Elementor, potom vybrať 2 stĺpcovú štruktúru. V paneli upravme novovytvorenú sekciu výberom Min. výška na ihrisku Výška a hneď Min. výška kliknime ďalej VH potom nastavte kurzor na 100.

vytvorte tlačidlo s efektom vznášania pomocou Elementor

Na karte Štýl zmeňme farbu pozadia na # 070e39.

V prvom stĺpci vypustíme miniaplikáciu Button, upravíme jej text zadaním Zobraziť podrobnosti a zarovnajme to doprava

vytvorte tlačidlo s efektom vznášania pomocou Elementor

Na karte Štýl poďme to upraviť typografie zmenou veľkosti na 15, premena sur Veľké písmená et medzery medzi písmenami sur 1.1

vytvorte tlačidlo s efektom vznášania pomocou Elementor

Na karte pokročilý, upraviť všetky okraje sur 20 a v sekcii Vlastné CSS, prilepme nasledujúci kód, ktorý k tlačidlu pridá prechod:        

selektor {

    –Btn-width: 180px;

    –Btn-height: 50px;

    –Btn-background: # 0e1538;

    – Ľavý gradient: # F803F8;

    –Pravý gradient: # 03F2FD;

}

selektor a {

  Pozícia: relatívna;

  šírka: var (–btn-width);

  výška: var (–btn-height);

}

volič a: predtým,

selektor a: po {

  šťasný: ";

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

  pozícia: absolútna;

  vložka: 0;

  prechod: 0.5s;

}

volič a: n-té dieťa (1): predtým,

selektor a: n-té dieťa (1): po {

  pozadie: lineárny gradient (45 stupňov, var (–prechod vľavo), var (–btn-pozadie), var (–btn-pozadie), var (–pravý gradient));

}

selektor a: podržte kurzor myši: pred {

  vložka: -3px;

}

selektor a: podržte kurzor myši: po {

  vložka: -3px;

  filter: rozostrenie (10px);

}

selektor a span {

  pozícia: absolútna;

  hore: 0;

  vľavo: 0;

  šírka: 100%;

  výška: 100%;

  pozadie: var (–btn-background);

  z-index: 10;

  displej: flex;

  justify-content: center;

  Zarovnať položky: stred;

  pretečenie: skryté;

}

vytvorte tlačidlo s efektom vznášania pomocou Elementor

Teraz, keď umiestnite kurzor myši na tlačidlo, objavíte nádherné efekty.

Ak chcete na tlačidlo pridať efekt lesklého skla, prilepte aj nasledujúci kód:

/ * Efekt lesklého skla * /

select a span :: pred {

  šťasný: ";

  pozícia: absolútna;

  hore: 0;

  vľavo: -50 %;

  šírka: 100%;

  výška: 100%;

  pozadie: rgba (255,255,255,0.075);

  transformácia: skosenie (160 stupňov);

}

vytvorte tlačidlo s efektom vznášania pomocou Elementor

Pozorujete nový efekt, ktorý prináša viac svetla do tlačidla.

Čítajte tiež: Ako vytvoriť sekciu členov tímu pomocou Elementor

Teraz skopírujeme toto tlačidlo a prilepíme ho do druhého stĺpca. Zmeňme zarovnanie tlačidla doľava a zmeňme text na Viac informácií.

Teraz stačí zverejniť svoju prácu alebo zobraziť jej ukážku.

Tu sú vytvorené 2 krásne gombíky.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento tutoriál, ktorý vám ukáže, ako vytvoriť tlačidlo s efektom vznášania pomocou nástroja na tvorbu stránok Elementor. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť v 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.

...

0 akcie
podiel
tweet
Registrovať