Pro každého majitele webové stránky, je poměrně často důležité vědět, že se odlišujete od konkurence. divi nabízí nespočet možností k výrobě jedinečných layoutů, ale vždy můžeme s trochou hloubání vytvořit něco unikátnějšího. Zde se pseudoprvky CSS opravdu hodí.
Co jsou to pseudo prvky CSS?
Jednoduše řečeno, pseudoelement CSS lze použít ke stylizaci konkrétních částí prvku. Existuje pět typů pseudoprvků, které dělají různé věci. Pro účely tohoto článku budeme hovořit pouze o: před a po.
Tyto dva pseudo prvky se používají k vložení něčeho před nebo za obsah prvku. To je zvláště užitečné, protože je můžeme použít k přidání dalších vizuálních prvků ke stávajícím obrázkům, textu a dalším prvkům!
Proč bychom tedy používali tyto pseudoprvky? Before and After jsou skvělé pro odemknutí možností designu, aniž byste museli přidávat další prvky nebo moduly. Podobně jsou užitečné pro přidávání dalších prvků, aniž byste se museli dotýkat hlavních html šablon nebo souborů motivů.
Jak používáte prvky před a po Divi?
Pokud se vám to zatím zdá trochu matoucí, nebojte se! Pokud bychom k zápisu kódu CSS od začátku použili :: before a :: after, vypadalo by to asi takto:
Předpokládejme, že máme řádek textu se třídou „example-text“ - CSS pro styl a přizpůsobení tohoto řádku bude:
.příklad-text {* zde přidejte svůj styl *}
Pokud byste nyní chtěli přidat a upravit prvek :: před nebo :: za, vypadal by CSS takto:
.example-text :: před {* přidejte svůj styl před prvek zde *} .example-text :: po {* přidejte svůj styl za prvek zde *}
naštěstí divi poskytuje snadný přístup k pseudoprvkům ::před a ::po s mnohem menšími problémy. Ve skutečnosti, pokud jste někdy otevřeli kartu „Pokročilé“ pro přidání vlastního CSS, již jste viděli oblasti, o kterých mluvíme.
Tyto oblasti poskytují rychlou zkratku pro přidání a přizpůsobení obsah před a po libovolném modulu divi stávající a můžeme je použít k vytvoření skutečně flexibilních a zajímavých návrhů.
přehled
V tomto tutoriálu vytvoříme následující:
Příklad 1
start
V tomto kurzu začneme v režimu Visual Builder. Když jste tedy na nové stránce, musíte kliknout na „Visual Builder“.
Nyní jsme připraveni začít!
Příklad 1: Číslované Blurb moduly používající pseudo-prvky
Prezentace je pravděpodobně jedním z nejflexibilnějších modulů Divi, které máte k dispozici. V tomto případě použijeme pseudo-prvky k přidání čísel před každou prezentací, abychom vytvořili podrobnou část „Jak to funguje“. Také přidáme tvar šipky vpravo, abychom označili postup.
Co vytvoříme:
I když tento design funguje se všemi prezentačními návrhy, vypůjčili jsme si vyhrazenou sekci pro prezentaci od webové agentury. Pokud je chcete použít jako výchozí bod, můžete se dostat na vstupní stránku webové agentury vytvořením nové stránky a přechodem na front-end builder.
Po načtení stránky máte možnost použít předdefinované rozvržení, jedno z uložených rozvržení nebo vytvořit nové sestavení. Vyberte předdefinované rozložení a pomocí vyhledávacího panelu vyhledejte rozložení „Web Agency“. Část přehledu tohoto tutoriálu je na vstupní stránce.
Po načtení je jediným rozdílem mezi předdefinovaným rozvržením a naším příkladem to, že jsme změnili pozadí každého textu, nadpis a barvu písma textu a přidali jsme malé odsazení.
Jakmile změníte toto nastavení v blundu, můžete kliknout pravým tlačítkem na modul a použít "rozšířené styly" a použít je na ostatní tři.
Nyní, když jsme přizpůsobili naše čtyři moduly Blurb tak, aby vypadaly tak, jak chceme, je čas přidat nějaký kód k vytvoření číslovaného prvku. Aby však tento design fungoval, musíme nejprve přidat řádek CSS do vlastního pole CSS hlavního prvku.
přepad: viditelný
To jednoduše umožní, aby prvky, které vytvoříme v následujících krocích, byly viditelné všude, kde se překrývají okraje našeho prezentačního modulu.
Jakmile to provedete, otevřete možnosti modulu a přejděte na kartu „Upřesnit“. V oblasti „před“ přidejte tento fragment CSS:
obsah: '1.'; / * přidejte číslo "1." před obsahem * / font-weight: bold; velikost písma: 80px; neprůhlednost: 0.7; / * číslo mírně průhledné * / barva: modrá; / * změnit barvu písma čísla * / position: absolute; z-index: 9999; vlevo: 0; / * umístit obsah na 0px zcela vlevo od obsahu * / nahoře: -20px; / * Umístí obsah 20px nad horní okraj * /
Jakmile přidáte tento fragment, uvidíte číslo, které se objeví v levé horní části modulu Blurb. Pozici čísla můžete změnit změnou řádků „left:“ a „top:“ nebo změnou barvy a velikosti písma v tomto fragmentu CSS.
Po dokončení prvního modulu přejděte ke třem novým modulům blurb a změňte řádek „content:“ na:
obsah: '2.';
obsah: „3.“;
... atd.
Nyní, když jsme vytřídili naše čísla, musíme přidat nějaké CSS, abychom vytvořili tvar šipky.
Otevřete každý modul a zadejte jej do pole After ve vlastním poli CSS:
content:''; display:block; height:60px; width:60px; position:absolute ; top:40%; right:-30px; z-index:-1; background-color:#e8e8e8; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Nyní by vaše čtyři úvodní poznámky měly vypadat takto:
To je pro tento tutoriál vše, doufám, že vám umožní lépe využívat pseudoelementy s možnostmi, které Divi nabízí.
