[Ad_1]
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
Kancelář
Mobilní aplikace
Stáhněte si rozvržení ZDARMA
Chcete-li získat bezplatné rozložení, musíte si jej nejprve stáhnout pomocí tlačítka níže. Pro přístup ke stažení se budete muset přihlásit k odběru našeho e-mailového seznamu Divi Daily pomocí formulář níže. Jako nový předplatitel obdržíte každé pondělí ještě více dobrot Divi a balíček Divi Layout zdarma! Pokud jste již na seznamu, zadejte níže svou e-mailovou adresu a klikněte na tlačítko Stáhnout. Nebudete „obnoveni“ ani nebudete dostávat další e-maily.
1. Vytvořte strukturu prvku
Přidejte novou sekci
Barva pozadí
Tento tutoriál zahájíme vytvořením struktury prvků na stránce Divi. Přidejte novou sekci a použijte pro ni bílou barvu pozadí.
- Barva pozadí: #ffffff
vzdálenost
Přejděte na kartu Návrh řezu a změňte nastavení mezer následujícím způsobem:
- Horní výplň: 80px
- Spodní výplň: 0px
Přidat nový řádek
Struktura kolony
Pokračujte v přidávání nového řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a změňte maximální šířku v nastavení velikosti.
vzdálenost
Poté odstraňte všechny výchozí horní a dolní polstrování.
- Horní výplň: 0px
- Spodní výplň: 0px
Přidejte modul obrázku do sloupce 1
Stáhnout obrázek
Pojďme moduly, počínaje modulem obrázku ve sloupci 1. Nahrajte obrázek podle vašeho výběru.
Přidání odkazu
Poté přidejte odkaz na modul obrázku.
Stupnice nadjezdu
Poté přejděte na kartu Návrh a změňte nastavení měřítka přechodu na modul.
CSS třídy
Dokončete parametry modulu použitím následující třídy CSS na kartě Upřesnit:
Do sloupce 1 přidejte textový modul # 1
Přidat obsah H3
Přejděme k dalšímu modulu, kterým je textový modul obsahující obsah H3 dle vašeho výběru.
Nastavení textu H3
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu H3:
- Hlava 3 Policie: Herec
- Nadpis 3 Barva textu: # 000000
- Nadpis 3 Velikost textu:
- Desktop: 35px
- Tablet: 28px
- Telefon: 22px
- Název 3 Výška řádku: 1,4em
vzdálenost
Pak přidejte spodní okraj.
Do sloupce 2 přidejte textový modul # 1
Přidat obsah
Potom přidejte další textový modul těsně pod předchozí s a obsah popis dle vašeho výběru.
Nastavení textu
Změňte nastavení textu modulu následujícím způsobem:
- Písmo textu: herec
- Barva textu: # 75baff
- Velikost textu:
- Desktop: 22px
- Tablet: 18px
- Telefon: 15px
- Rozteč písmen textu: 0.5px
- Výška řádku dopisu: 2
Přidejte sloupcový modul do sloupce 1
Přidat kopii
Další a poslední modul, který v tomto sloupci potřebujeme, je tlačítkový modul. Přidejte kopii podle vašeho výběru.
Nastavení tlačítek
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení tlačítek:
- Pro tlačítko použijte vlastní styly: Ano
- Barva textu tlačítka: # 000000
- Šířka okraje tlačítka: 0px
- Poloměr ohraničení tlačítka: 1px
- Písmo tlačítka: herec
- Zobrazit ikonu tlačítka: Ano
- Umístění ikony tlačítka: Vlevo
- Zobrazit pouze ikonu při najetí myší na tlačítko: Ne
vzdálenost
Přidejte také vlastní hodnoty mezer.
- Dolní okraj: 80px
- Spodní výplň: 20px
- Pravá výplň: 30px
Stínová krabička
A dokončete nastavení modulu pomocí následujícího nastavení stínu pole:
- Horizontální poloha stínu rámečku: 0px
- Poloha svislého stínu pole: 2px
- Barva stínu: # 000000
Smazat sloupec 2
Jakmile dokončíte první sloupec a všechny moduly v něm, odeberte druhý prázdný sloupec z řádku.
Klonovat sloupec 1
A znovu použijte první sloupec klonováním jednou.
Naklonujte celý řádek
Pokračujte klonováním celého řádku jednou.
Upravte veškerý duplicitní obsah, obrázky a odkazy
Pak nezapomeňte upravit všechny obsah, obrázky a odkazy v každém z duplicitních sloupců.
2. Přidejte kurzor
Přidejte nový řádek do sekce
Struktura kolony
Nyní, když máme strukturu prvků na místě, je čas vytvořit design posuvníku. K tomu přidáme do naší sekce nový řádek pomocí následující struktury sloupců:
vzdálenost
Otevřete nastavení řádků a odeberte všechny výchozí horní a dolní polstrování.
- Horní výplň: 0px
- Spodní výplň: 0px
Přidejte textový modul kurzoru do nového sloupce řádku
Přidat obsah
Poté na nový řádek přidejte textový modul. Tento textový modul bude věnován vytvoření designu kurzoru. Přidejte kopii podle vašeho výběru do oblasti obsahu.
Barva pozadí
Poté přidejte barvu pozadí.
- Barva pozadí: # 47669b
Nastavení textu
Přepněte na kartu Návrh a odpovídajícím způsobem upravte text:
- Písmo textu: herec
- Tloušťka písma textu: Tučné
- Styl písma textu: velká písmena
- Barva textu: #ffffff
- Rozteč písmen textu: 2px
- Zarovnání textu: střed
dimenzování
Pak přidejte hodnotu šířky a výšky k parametrům dimenzování.
- Šířka: 150px
- Výška: 150px
hraniční
Změníme tento modul na kruh změnou nastavení ohraničení.
Stínová krabička
Přidáme také jemný stín rámečku.
- Síla rozmazání stínu: 0px
- Síla šíření stínu rámečku: 20px
- Barva stínu: rgba (7,213,255,0.14)
CSS třídy
Dále dáme našemu modulu třídu CSS.
Hlavní prvek CSS
Do hlavního prvku modulu také přidáváme řádky kódu CSS.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Pozice
Parametry modulu doplníme změnou polohy na kartě Upřesnit:
- Pozice: pevná
- Umístění: vlevo nahoře
- Z index: 2
Přidejte modul kódu pod textový modul
Nyní, když jsme navrhli náš posuvník, je čas nechat tuto funkci fungovat. K tomu přidáme nový modul kódu těsně pod modul textového kurzoru.
Přidejte styl a značky skriptu
Přidejte do modulu kódu značky stylu a skriptu.
Přidejte kód CSS
Mezi značky stylu vložte následující řádky kódu CSS:
.hide-cursor {
cursor: none;
}
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
Přidejte kód JQuery
Mezi značkami skriptu použijte následující řádky kódu JQuery:
jQuery(document).ready(function($){
var cursor = $('.cursor');
$('.image-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.image-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Kancelář
Mobilní aplikace
Závěrečné myšlenky
V tomto kurzu jsme si ukázali, jak přidat další interakci s klikatelnými prvky na vaší stránce. Konkrétně jsme vám ukázali, jak spustit kurzorové tlačítko, když někdo umístí kurzor na položku podle vašeho výběru. To přidává do vaší stránky další interakci a může pomoci zvýšit míru prokliku! Také jste si mohli stáhnout soubor JSON zdarma. Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.
Pokud se chcete o Divi dozvědět více a získat více dárků Divi, nezapomeňte Přihlásit se k odběru novinek et Youtube kanál Budete tedy vždy jedním z prvních lidí, kteří tento bezplatný obsah znají a užívají si ho.
[Ad_2]
