Вероятно сте попадали на блогове, които предлагат оформления с обърнат текст. Обикновено този дизайн се използва в блогове в стил списания и е доста готин ефект, който може да се добави към Divi. В този урок ще ви покажа как да добавите обърнат текст към оформлението на Divi.
Струва си да се отбележи, че с Divi е възможно да завъртите всеки елемент на страницата си, като използвате опциите за трансформация, вградени в актуализация 3.2. Така че, нека проектираме оформление от три части, което включва примери за завъртян текст.
Преглед на крайния резултат
Използвайте наличния пакет
За да постигнете това оформление, трябва да изтеглите проекта, записан в ZIP файл. След като го изтеглите, всичко, което трябва да направите, е да го импортирате в Divi Builder. Можете да изтеглите този файл директно, като кликнете върху следната връзка за изтегляне.
Téléchager
Как да добавите завъртян текст към Divi
Като за начало ще създадем заглавка с вертикален текст. За целта ще завъртим модул за размиване, като използваме опциите за трансформация. Трябва да създадете редовен раздел с ред от две колони.
Преди да добавите модула, трябва да премахнете вътрешния и долния ръб на секцията, като актуализирате вътрешните настройки на подложките, както следва: rперсонализирано щамповане: 0px в горната част, 0px в долната част.
След това трябва да промените и параметрите на реда:
- Фоново изображение: [добавете изображение по ваш избор с ширина най-малко 1920 пиксела]
- Колона 1 Цвят на фона: #121212
- Персонализирана ширина: 100%
- Ширина на улука: 1
- Изравнете височините на колоните: ДА
- Персонализирани подложки (на работния плот): 0px в горната част, 0px в долната част
- Персонализирани подплънки (таблет): 40% вдясно
- Персонализирани подплънки (телефон): 30% вдясно
- 1 колона Персонализирани подплънки (десктоп): 200px в горната част, 200px в долната част
- Колона 1 Персонализирани подплънки (таблет): 150px в горната част, 150px в долната част
- Сянка на кутията: както на екранната снимка
- Хоризонтално положение на Сянката на кутията: 0px
- Позиция на сянката на вертикалната кутия: -100px
- Цвят на сенките: #f6454e
Добавяне на обобщен модул (замъгляване)
Следващата стъпка е сега да добавите модул за заглавката. За да направите това, добавете модул за обобщение в лявата колона на същия ред.
Актуализирайте модула, както следва:
- Заглавие: BLOG DESIGN
- Съдържание: Можете да напишете всичко.
- Използвайте иконата: ДА
- Икона: сърце
- Цвят на иконата: # f6454e
- Размер на шрифта на иконата: 32px
- Ориентация на текста: център
- Заглавие Ниво Заглавие: H1 (защото това е основното заглавие на страницата)
- Шрифт на заглавието: Muli
- Заглавие Шрифт Стил: TT
- Цвят на заглавието на текста: #ffffff
- Размер на заглавието на текста: 70px (десктоп), 50px (таблет), 36px (телефон)
- Цвят на основния текст: #cccccc
- Разстояние между буквите на тялото: 4px
- Ширина: 500px
- Подравняване на модула: център
Обърнете внимание, че тъй като ще завъртим презентационния модул, така че да е вертикален, потребителската ширина на 500 px ще съответства на височината на вертикалния модул за представяне. Ето защо е важно съдържанието да се вписва в този модул. За този пример използваме малко количество текст и преоразмеряваме заглавия шрифт на различни устройства, така че текстът да не се увива и да не нарушава дизайна.
Как да завъртите модула
За да завъртите модула за обобщение (и цялото му съдържание), актуализирайте опциите за трансформация, както следва:
- Превърнете въртенето на X-ос: -90deg
Ще трябва да въведете стойността -90deg ръчно. Това ще ви даде вертикално подравняване на съдържанието отдолу нагоре.
Добавете вертикален бутон
Сега ще добавим бутон в долната част на заглавката, за да напомним на потребителя да превърти страницата надолу. След това можем да завъртим бутона, като използваме опциите за преобразуване, както направихме за модула за обобщение.
Създайте нов ред със структура с една колона.
Преди да добавите нашия модул с бутони, актуализирайте настройките на реда, както следва:
- Цвят на фона: #f6454e
- Персонализирана ширина: 100%
- Ширина на улука: 1
- Подравняване на бутоните: център
- Използвайте персонализирани стилове за бутон: Да
- Размер на текста на бутона: 16px
- Цвят на бутона на бутона: #ffffff
- Ширина на границата на бутона: 0px
- Пространство на буквите на бутоните: 9 пиксела
- Тегло на шрифта: светлина
- Стил на шрифта: TT
- Икона на бутона: стрелка надясно
Завъртане и позициониране на бутоните
За да завъртите и позиционирате бутона, ще използваме комбинация от полета и ще преобразуваме ротацията по следния начин:
- Персонализиран марж (Desktop): -50px в горната част, 50px в долната част, -50px вляво
- Персонализиран марж (таблет): 0px отляво
- Преобразуване на ротация на ос X: 90deg
Този път копчето се завърта на 90 градуса, за да се получи вертикален дисплей отгоре надолу за текста. Това изглежда добре, тъй като искаме потребителят да превърти надолу.
