Проектирането на отражения за изображения и текст е класическа дизайнерска техника, която може да се използва за разнообразяване на съдържанието на уеб страница. Освен това, Divi улеснява създаването на тези отражения директно от Divi Builder, без да е необходимо да използвате фоторедактор.
В този урок ще ви покажа как да проектирате отражения за изображения на Divi. Ключът към правенето на отражения е да се използва опцията за преобразуване на Divi, за да се създаде огледална версия на елемент. След това можете да добавите персонализирано наслагване, което ще ви покажа как да използвате с текстов модул.
Да започнем!
изследване
Ето преглед на дизайните, които ще изградим в този урок.
Какво трябва да започнете
За да започнете, всичко, от което се нуждаете, е Divi. Уверете се, че темата Divi е инсталирана и активна. Ще създаваме нашите дизайни от нулата, използвайки Divi Builder във фронт-енда (визуален конструктор). Ще ви трябват и няколко фиктивни изображения за този урок (фоново изображение с размери приблизително 1920px x 600px и друго изображение с размери приблизително 500px x 350px).
Когато сте готови, отидете на таблото за управление на WordPress и отидете на Pages> Add. Дайте на новата си страница заглавие и разположете Divi Builder отпред. Изберете опцията „Изграждане от нулата“. Сега сте готови!
Основната идея за създаване на изображение и отражение на текст в Divi
Основната идея за създаване на модели за отразяване в Divi включва три стъпки:
- Създайте модул с ваше изображение или текст
- Дублирайте модула и използвайте скалата за трансформиране, за да създадете огледално изображение или текст
- Добавете градиентно наслагване към огледалния елемент с помощта на разделител или абсолютно позициониран текстов модул.
Тази техника на проектиране не се ограничава до отделни модули. Всъщност можете да добавяте отражения към цели редове в Divi, използвайки този метод, който е полезен за създаване на уникални дизайни на заглавки. По-късно в този урок ще добавим размисъл към ред от нашия дизайн за отразяване на текст. Но засега нека започнем със създаването на отражение на изображението.
Как да създадете отражение на изображението
За да създадем отражение на изображението, нека започнем със създаването на нова обикновена секция с ред от една колона.
След това добавете модул за изображение към линията.
Изтеглете желаното изображение от медийната библиотека в модула за изображения. След това актуализирайте следните настройки на изображението:
Максимална ширина: 600px
Подравняване на модула: център
Персонализиран марж: 0px в долната част
Създайте огледалното изображение
За да създадем ефект на отражение, първо трябва да създадем дублирано копие на изображението точно под изображението.
За да направите това, дублирайте модула за изображения. След това актуализирайте настройките за дублирани изображения, както следва:
Непрозрачност: 40%
X ос на трансформационна скала: -100%
Свойството Transform Scale е това, което магически обръща изображението вертикално и хоризонтално, за да създаде огледална версия на изображението.
Това поддържа основен дизайн на отражение. Въпреки това, ние можем да добавим допълнително наслагване на градиент към долното ни изображение за по-реалистичен дизайн на отражение.
Добавете градиентно наслагване с помощта на текстов модул
За да добавим градиентен слой към долното изображение, можем да използваме текстов модул. Можем да зададем на текстовия модул абсолютна позиция, така че да се намира над долното изображение. След това можем да добавим градиентен фон към текстовия модул. Използването на текстов модул (вместо разделител) ще ви даде допълнителна възможност да добавяте съдържание върху отразеното изображение по-късно, ако желаете.
Продължете и създайте текстов модул под долното изображение.
Изтрийте съдържанието по подразбиране, така че текстовият модул да е празен.
След това актуализирайте настройките на текстовия модул, както следва:
Цвят на левия фон: rgba (255,255,255,0)
Цвят на градиента: #ffffff
Ширина: 100%
Височина: 50%
След това добавете следния персонализиран CSS код към основния елемент:
позиция: абсолютна! важна; отгоре: 50%;
Това абсолютно позициониране на текстовия модул наслагва текстовия модул в долната половина на реда.
Добавяне на цвят на фона
Ако не искате бял фон, можете да използвате други цветове на фона, за да създадете модел на отражение по цялата ширина.
За целта отворете настройките на реда и актуализирайте следното:
Цвят на фона: #000000
Ширина: 100%:
Макс. Ширина: 100%;
Персонализирана подложка: 0px висока, 0px надолу
Нека видим резултата сега.
Отраженията могат да изглеждат наистина страхотно, ако отделите време, за да ги проектирате правилно. За щастие, Divi разполага с инструментите, за да го осъществи. Има и други методи за извършване на CSS отражения, но за съжаление те обикновено не се поддържат от браузъра. Чертежите в този урок ще изглеждат страхотно във всички браузъри.
Открих, че отраженията изглеждат страхотно в заглавките на страници и демонстриращи изображения за елемент от портфолио. И съм сигурен, че има много други внедрения.
Това е всичко за този урок, надявам се, че ще ви позволи да добавите размисли на вашия WordPress сайт, използвайки вътрешните функции на Divi.
