За всеки собственик на уебсайт, доста често е важно да знаете, че се отличавате от конкуренцията. Divi предлага безброй възможности за създаване на уникални оформления, но винаги можем, като копаем малко по-дълбоко, да създадем нещо по-уникално. Това е мястото, където CSS псевдоелементите наистина са полезни.
Какво представляват CSS псевдоелементите?
Най-просто казано, CSS псевдоелемент може да се използва за стилизиране на определени части на елемент. Има пет вида псевдоелементи, които правят различни неща. За целите на тази статия ще говорим само за: преди и: след.
Тези два псевдо елемента се използват за вмъкване на нещо преди или след съдържание на елемент. Това е особено полезно, защото можем да ги използваме за добавяне на допълнителни визуални елементи към съществуващи изображения, текст и други елементи!
И така, защо бихме използвали тези псевдоелементи? Преди и след са чудесни за отключване на дизайнерските възможности, без да е необходимо да добавяте повече елементи или модули. По същия начин те са полезни за добавяне на допълнителни елементи, без да се налага да докосвате основните html шаблони или файлове с теми.
Как използвате елементите преди и след с Divi?
Ако досега всичко изглежда малко объркващо, не се притеснявайте! Ако трябваше да използваме :: before и :: after, за да напишем CSS кода от нулата, би изглеждало малко по следния начин:
Да предположим, че имаме ред текст с класа "example-text" - CSS за оформяне и персонализиране на този ред ще бъде:
.example-text {* добавете стила си тук *}
Сега, ако искате да добавите и стилизирате елемент :: преди или :: after, CSS ще изглежда така:
.example-text :: преди {* добавете стила си преди елемента тук *} .example-text :: след {* добавете вашия стил след елемента тук *}
За щастие, Divi предлага лесен достъп до псевдоелементи ::before и ::after с много по-малко караница. Всъщност, ако някога сте отваряли раздела „Разширени“, за да добавите персонализиран CSS код, вече сте виждали областите, които имаме предвид.
изследване
Ето какво ще създадем в този урок:
Пример 1
начало
За този урок ще започнем в режим Visual Builder. Следователно трябва да кликнете върху „Visual Builder“, когато сте на нова страница.
Пример 1: Номерирани модули Blurb, използващи псевдоелементи
Blurb е може би един от най-гъвкавите Divi модули, налични за вас. В този случай ще използваме псевдоелементи, за да добавяме числа преди всяка презентация, за да създадем подробен раздел „Как работи“. Също така ще добавим форма на стрелка отдясно, за да посочим процеса.
Какво ще създадем:
Когато страницата ви се зареди, имате възможност да използвате предварително дефинирано оформление, едно от запазените си оформления или да създадете нова компилация. Изберете предварително дефинираното оформление и използвайте лентата за търсене, за да намерите оформления на „Уеб агенция“. Разделът за преглед на този урок е на целевата страница.
Веднъж зареден, единствената разлика между предварително зададеното оформление и нашия пример е, че сме променили фона на всеки текст на презентацията, заглавието и цвета на шрифта на текста и добавихме малко подплънки.
След като промените тези настройки на размазване, можете да щракнете с десния бутон върху модула и да използвате "разширените стилове", за да ги приложите към останалите три.
преливане: видимо
Това просто ще позволи елементите, които създаваме в следващите стъпки, да бъдат видими, където и да се припокриват краищата на нашия модул за представяне.
След като приключите с това, отворете опциите на модула и отидете в раздела „Разширени“. В областта "преди" добавете този CSS фрагмент:
съдържание: „1.“; / * добавете числото "1." преди съдържанието * / font-weight: bold; размер на шрифта: 80px; непрозрачност: 0.7; / * направете номера леко прозрачен * / цвят: син; / * промяна на цвета на шрифта на числото * / позиция: абсолютна; z-индекс: 9999; ляво: 0; / * поставете съдържанието на 0px вляво от съдържанието * / отгоре: -20px; / * Позиционира съдържанието 20px над горната граница * /
След като добавите този фрагмент, ще видите, че номерът се появява горе вляво на шушулката Blurb. Можете да промените позицията на номера, като промените редовете „наляво“ и „отгоре:“ или да промените цвета и размера на шрифта в този CSS фрагмент.
След като завършите това за първия модул, отидете на трите нови модула за размиване и променете реда "content:" на:
съдържание: '2.';
съдържание: „3.“;
... и т.н.
Сега, когато сме подредили номерата си, трябва да добавим малко CSS, за да създадем формата на стрелката.
Отворете всеки модул и го въведете в полето After на персонализираното 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);
