Всички обичаме да се отличаваме от конкуренцията и това може да стане, като демонстрираме нашите уебсайт различно. Така че може да бъде полезно да знаете как да създавате извити текстови дизайни в Divi. Този тип дизайн ще работи за създаване на персонализирани графики или специални дизайни на заглавки на Divi, без да се налага да използвате фоторедактор. Обикновено това включва по-обширни html и css задачи, но с Divi владеенето на CSS не е задължително, тъй като имате много повече вградени опции за лесно проектиране на вашия текст по уникален начин.
В този урок ще ви покажем как да създадете два шаблона за извити букви, които можете да използвате като полезен шаблон за вашите собствени нужди. В най-добрия случай можете да добавите нещо ново към вашия инструментариум за дизайн за в бъдеще.
Нека да започнем.
изследване
Ето преглед на извитите дизайни на текст, които ще проектираме в този урок.
Изтеглете необходимите файлове
За да започнете, ще трябва да изтеглите необходимите файлове, за да завършите този урок. Можете да направите това, като кликнете върху следната връзка.
За да импортирате оформлението на страницата си, просто извлечете zip файла и го плъзнете в Divi Builder.
Основната идея за създаването на извит текст в Divi
За да създадете извит текст, използвайки метода в този урок, трябва да добавите всяка буква от вашия текст в отделен текстов модул (за най-добри резултати ще искате да използвате шрифт с едно пространство). Дайте на текстовия модул определена височина. След това трябва да зададете на всеки текстов модул центрирана абсолютна позиция, така че да се подреждат един върху друг.
Това е важно, защото искаме всяка буква да се върти от една и съща централна точка. След това можете да използвате опциите за трансформиране на Divi, за да завъртите всяка буква по оста z, за да създадете извит текст (помислете дали да не използвате компас в математически клас, за да нарисувате кръг). Също така имайте предвид, че височината на всеки текстов модул определя радиуса на кръга, което също увеличава обиколката на кръга и следователно увеличава пространството между буквите.
Ето пример за 8 текстови модула, завъртени на стъпки от 45 градуса, за да се създаде перфектно оформление на кръга за текст. Добавих бяла граница около всеки модул, за да можете лесно да видите въртенето.
И, ето един пример за същите текстови модули, които се въртят на стъпки от 20 градуса.
Commencer
За да започнете, създайте нова страница в Divi. След това дайте на страницата си заглавие и разположете конструктора на Divi отпред. Изберете опцията „изграждане от нулата“. Сега сте готови!
Създаване на дизайн на крива текст
Създаване на секцията и линията
Започнете, като създадете редовен раздел с ред колона.
- Ляв градиент на фона: #1e003d
- Фон на градиент вдясно - цвят: # 121212
- Тип градиент: Радиален
- Фоново изображение: [вмъкнете изображение на лого приблизително 100 пиксела на 100 пиксела]
- Размер на фоновото изображение: Действителен размер
Запазете настройките, след това променете настройките за линията и актуализирайте следното:
- Ширина на улука: 1
- Ширина: 100%
- Минимална височина: 400px
- Височина: 40vw
- Максимална височина: 600px
- Персонализирана подложка: 0px висока, 0px надолу
След това добавете следния персонализиран CSS код към основния елемент на колоната, за да сте сигурни, че всички текстови модули ще останат центрирани хоризонтално:
Основна колона на CSS елемента:
показва шнур; оправдае-щастлив: център;
Създаване на текстови модули за всяка буква
Вече сме готови да добавим първия си текстов модул с първата си буква. За да направите това, добавете нов текстов модул към колоната на реда и актуализирайте следното:
- Съдържание:d (само буквата)
- Текстов шрифт: Ubuntu Mono (всеки моноширен шрифт ще свърши работа)
- Цвят на текстовия текст: #ffffff
- Размер на текста: 5vw (десктоп), 40px (телефон)
- Ориентация на текста: център
- Минимална височина: 200px
- Височина: 20vw
- Максимална височина: 300px
След това актуализирайте произхода на трансформацията надолу. Това ще бъде важно при определянето на мястото на въртене на текста. Искаме текстовият модул да се върти в долната му част. Въпреки че няма нужда да завъртате този първи текстов модул, важно е да го добавите тук, за да можем да пренесем тази опция, когато дублираме текстовия модул за допълнителни букви.
- Произход на трансформацията: 100% (или по-ниско)
След това добавете следния персонализиран CSS към основния елемент, за да предоставите на текстовия модул абсолютна позиция.
Създаване и завъртане на други текстови модули
За да създадем останалите букви, ще дублираме текстовия модул. След като дублираме текстовия модул, всичко, от което се нуждаем, е да актуализираме буквата и след това да увеличим въртенето с 45 градуса с всеки нов модул.
Тъй като текстовите модули ще бъдат наслагвани в началото, по-добре е да използвате режим на кабелен дисплей, за да извършите тези актуализации.
Продължете и дублирайте текстовия модул и след това актуализирайте следното:
- Съдържание: i
- Ос на въртене на трансформацията: 45 градуса
3 текстов модул
- съдържание: v
- Ос на въртене на трансформацията: 90 градуса
4 текстов модул
- съдържание: i
- Трансформация на ротацията на осите z: 135deg
5 текстов модул
- съдържание: d
- Превърнете въртенето на осите z: 180deg
6 текстов модул
- съдържание: i
- Трансформация на ротацията на осите z: 225deg
7 текстов модул
- съдържание: v
- Превърнете въртенето на осите z: 270deg
8 текстов модул
- съдържание: i
- Превърнете въртенето на осите z: 315deg
Краен резултат
Заключителни мисли
Създаването на извити текстови дизайни в Divi е доста ясен процес, след като разберете как работи. Тази статия трябва да ви помогне да разберете геометрията, свързана с конфигурирането на текстови модули за завъртане на крива. И след като настройката приключи, в допълнение към няколко фрагмента от персонализирани CSS файлове, можете да използвате вградените дизайнерски настройки на Divi, за да получите малко креативност. Надявам се това да ви даде малко вдъхновение за създаване на ваши собствени извити текстови дизайни.
