Съвременният уеб дизайн винаги е свързан с разчупване на решетката. Това се постига чрез изместване на елементи и поставяне на акценти на позиции, които нарушават нормалната структура на мрежата. Можете да ги видите приложени в дизайни с разчупена мрежа в зашеметяващите оформления на Divi. Това обикновено включва преместване на модули извън колона или ред, така че те да се простират извън контейнер или да се припокриват с други елементи на страницата. Но може би не сте се замисляли за преместването на колоната.
В този урок ще ви покажа как да мащабирате колони и модули на Divi за уникални дизайни с разбита мрежа. С новините опции на колоната на Divi, можете лесно да местите колони, както и модулите, които те съдържат. Това ви позволява да проектирате както модула, така и колоната с уникални стилове за креативен дизайн с разчупена мрежа.
Да започнем!
изследване
Ето преглед на примерите за дизайн, които ще изградим в този урок.
Какво трябва да започнете
За да започнете, се нуждаете от следното:
- Le Тема на Divi инсталиран и активен
- Нова страница, създадена за изграждане от нулата на предния край (визуален конструктор)
- Някои изображения за използване съдържание фиктивна
След това ще имате празно платно, за да започнете да проектирате в Divi.
Стагнация на колони и модули за създаване на уникален счупен дизайн на решетката в Divi
Започнете със създаването на нов редовен раздел с ред от две колони.
След това добавете повикване към модула за действие в колона 1.
След това актуализирайте модула с тъмен цвят на фона, след което редактирайте заглавия текст, както следва:
Цвят на фона: #333333
Подравняване на текст: отляво
Заглавие на шрифта: горчив
Размер на текста на заглавието: 50px
Заглавие Разстояние между буквите: 2px
Размер на текста на бутона: 16px
Цвят на текста на бутона: #333333
Цвят на фона на бутона: Цвят на
граница на бутона: #ffffff
Радиус на границата на бутона: 25px
Разстояние между буквите на бутоните: 2px
Шрифт на бутона: Размер на Raleway на
Шрифт на бутони: Bold
Основен стил на шрифта: TT
След това копирайте модула и поставете дубликата в колоната 2, така че да имате същото повикване към модула за действие във всяка колона.
Актуализиране на разстоянието между редовете
Сега добавете някои горни и долни полета, за да направите място за дизайна.
Марж: 20% нагоре, 20% надолу
Добавете фонови изображения на колона
Въпреки че все още няма да можем да ги видим, ще добавим фонови изображения към всяка от колоните. Те ще станат видими, след като преместим нашия модул от контейнера на колоната с преобразуване на преобразуване.
Върви напред, отвори настройките в колоната 1 и добави фоново изображение.
Добавете поле за сянка към всяка колона
Отворете настройките за колона 1 и добавете сянката на следното поле:
Box Shadow: вижте екранната снимка
Кутия Сянка Хоризонтална позиция: 0px
Кръгла вертикална позиция на сянка: 0px
Разпространение на сянката на кутията: 100px
Цвят на сянка: rgba (151, 178, 193, 0.21)
След това добавете същия стил на сянка на кутията в колоната 2. За да ускорите нещата, можете да използвате опциите с десния бутон на мишката, за да копирате стиловете на сенките на кутията в колоната 1 и след това да ги поставите в стиловете на сенките на кутията в колоната 2.
Ще забележите, че сенките в полето ще се припокриват. Използването на полупрозрачен цвят омбре ще помогне да се създаде суперслоен ефект. Това е основното предимство на използването на сенки за кутии в дизайна. За разлика от границите, можете да добавите големи сенки, които изглеждат като граници, но не влияят на действителното разстояние на оформлението.
Покрийте колони с помощта на Transform Translate
На този етап сме готови да преместим колоните и модулите, за да завършим дизайна на прекъснатата мрежа. Първо, трябва да преместим колоните до външния ръб на страницата. След това можем да преместим модулите в центъра по-късно.
Колумбирана колона 1
Отворете параметъра на колоната 1 и добавете следното свойство за преобразуване на превода.
Ос за трансформиране на транслат: 25%
Трансформирайте транслиране на оста Y: -25% (десктоп), -5% (таблет)
Колумбирана колона 2
За колоната 2 добавете следното свойство за преобразуване на преобразуване.
Ос за трансформиране на транслиране: -25%
Трансформирайте преобразуване на оста Y: 25% (десктоп), 5% (таблет)
Офсетни модули, използващи Transform Translate
Вече сме готови да разпространяваме нашите модули, като ги преместваме от контейнера на колоната. Това ще изложи фоновото изображение на колоната и ще ни позволи да добавим още една сянка на областта към модула за допълнителен припокриващ се елемент на дизайна.
Отместете 1 модула
Отворете настройките за призив към действие на колоната 1 и актуализирайте следното:
Ос за трансформиране на транслиране: -60%
Трансформирайте преобразуване на оста Y: 50% (десктоп), 10% (таблет)
Добавете сянка на кутията към модула 1
След това добавете сянката на следното поле към модула за повикване на действие в колона 1:
Box Shadow: вижте екранната снимка
Кутия Сянка Хоризонтална позиция: 0px
Кръгла вертикална позиция на сянка: 0px
Разпространение на сянката на кутията: 100px
Цвят на сянката: rgba (151,178,193,0.21)
Разстояние между модулите 2
За да преместите модула в колоната 2, актуализирайте следното:
Преобразуване на превод X ос: 60%
Преобразуване на превода Y ос: -50% (десктоп), -10% (таблет)
Добавете сянка на кутията към модула 2
След това можем да добавим сянка на кутия към модула с призив за действие в колона 2. Трябва да направим тази сянка на кутия почти напълно прозрачна, защото ще припокрие модул 1 и не искаме да затрудняваме четенето на съдържание.
Box Shadow: вижте екранната снимка
Кутия Сянка Хоризонтална позиция: 0px
Кръгла вертикална позиция на сянка: 0px
Разпространение на сянката на кутията: 100px
Цвят на сянката: rgba (151,178,193,0.09)
Добавете рамка за сянка
За да завършите дизайна, добавете зонална сянка към линията, която служи като елемент за дизайн на рамката на заден план.
Box Shadow: вижте екранната снимка
Вертикална позиция на сянката на кутията: 0px
Цвят на сенките: #97b2c1
Заключителни мисли
Надявам се този урок да ви даде малка представа за това как можете да компенсирате Divi колони и модули, за да създадете свой собствен счупен дизайн на мрежата. Техниката е много проста. Той включва главно някои свойства за преобразуване на преобразуване, за да компенсира колони и модули, както и сенки на полета, за да създаде единичния счупен шаблон. Чувствайте се свободни да разгледате повече цветови опции и да въведете повече модове, за да видите къде може да ви отведе дизайна.
Надявам се да се чуем от вас в коментарите.
