С модовете WooCommerce В Divi има тонове дизайни, които можете да направите. В този урок за Divi ще се опитаме да ви вдъхновим с друга дизайнерска идея, която можете да постигнете, използвайки само вградените опции на Divi. По-конкретно, ще ви покажем как да рамкирате продукт във фоновото си изображение. Резултатът зависи изцяло от фоновото ви изображение, но ако следвате този урок, ще знаете какви стъпки да предприемете, за да персонализирате техниката според вашите собствени предпочитания. уеб сайт! Също така ще можете да изтеглите безплатно JSON файла с урока!
изследване
Преди да се потопим в урока, нека да разгледаме резултата при различни размери на екрана.
1. Конфигурирайте раздела с адаптивно фоново изображение
Добавете нов раздел
Адаптивно фоново изображение
Първата стъпка в рамкирането на продукт във фоновото изображение е да добавите нов раздел към страницата, върху която работите. Отворете настройките на раздела и изтеглете отзивчиви фонови изображения. Можете да намерите двете изображения, които използвахме, в папката, която успяхте да изтеглите в началото на тази статия.
- Фоново изображение: пейзаж
- Размер на фоновото изображение: Побира се
- Позиция на фоновото изображение: отгоре в центъра
- Фоново изображение: квадрат
разстояние
Отидете в раздела за дизайн и добавете персонализирани горни и долни подложки за различни размери на екрана.
- Горна подложка: 3vw (десктоп), 0vw (таблет и телефон)
- Подложка отдолу: 3vw (бюро), 7vw (таблет), 18vw (телефон)
граница
Попълнете параметрите на секцията, като добавите рамка.
- Ширина на границата: 2vw
- Цвят на границата: #ffffff
2. Добавете различни елементи на рамката към колоната
Добавете нов ред
Структура на колоната
Както можете да видите на фоновото изображение, продуктът се намира от дясната страна на фоновото изображение. Ще изберем съответна структура на колона за нов ред в нашия раздел. В този случай това е следната структура на колоната:
оразмеряване
Без да добавяте модули все още, отворете параметрите на реда и променете съответно параметрите за оразмеряване:
- Използвайте персонализирана ширина на улука: Да
- Ширина на улука: 1
- Изравнете височините на колоните: Да
- Ширина: 100%
- Максимална ширина: 100%
разстояние
Попълнете параметрите на линията, като добавите персонализирани ляво и дясно подплънки.
- Ляв подплънки: 5vw
- Десен подплънки: 5vw
Добавете текстов модул в колоната 2
Оставете областта на съдържанието празна
Време е да започнете да добавяте модули! За да позволим на продукта да се покаже, ще използваме празен текстов модул.
разстояние
След това ще увеличим височината на модула в настройките за разстояние.
- Горна подложка: 22vw (десктоп), 39vw (таблет), 35vw (телефон)
- Подложка отдолу: 15vw (бюро), 39vw (таблет), 35vw (телефон)
граница
И ние също ще добавим граница.
- Ширина на границата: 3vw
- Ширина на долната граница: 1vw
- Цвят на границата: rgba (255,255,255,0,7)
Добавете модула заглавие на Woo в колона 2
Динамично съдържание
Нека да преминем към следващия модул, който е модул за заглавие на Woo. Изберете продукт по ваш избор.
- Продукт: Търсене в списъка
Цвят на фона
Използвайте следния цвят на фона:
- Цвят на фона: rgba (255,255,255,0,7)
Настройки за текст на заглавието
Преминете към раздела за проектиране на модула и променете съответно настройките на текста H3:
- Ниво на заглавието: H3
- Шрифт на заглавието: Work Sans
- Размер на текста на заглавието: 2.5vw (десктоп), 5vw (таблет), 6vw (телефон)
разстояние
Също така добавете персонализирани стойности за запълване
- Горна подложка: 1vw
- Подложка отдолу: 1vw
- Ляв подплънки: 3vw
- Десен подплънки: 3vw
Добавете модула за описание на Woo в колона 2
Динамично съдържание
Следващият модул, от който се нуждаем, е модул за описание на Woo. Изберете продукт по ваш избор.
- Продукт: Търсене в списъка
- Тип описание: Кратко описание
Цвят на фона
Променете съответно цвета на фона на модула:
- Цвят на фона: rgba (255,255,255,0,7)
Текстови настройки
Отидете в раздела за дизайн на модула и променете настройките на текста, както следва:
- Шрифт на текст: Open Sans
- Размер на текста: 0.9vw (десктоп), 2.2vw (таблет), 2.8vw (телефон)
- Височина на заглавния ред: 2,2 em
разстояние
Завършете параметрите на модула, като добавите персонализирани стойности за запълване.
- Горна подложка: 1vw
- Подложка отдолу: 1vw
- Ляв подплънки: 3vw
- Десен подплънки: 3vw
Добавете текстовия модул Woo Price към колона 2
Динамично съдържание
След това имаме текстов модул за цената на Woo. Изберете продукт по ваш избор.
- Продукт: Търсене в списъка
Цвят на фона
Променете цвета на фона.
- Цвят на фона: rgba (255,255,255,0,7)
Настройки за текстови цени
Преминете към раздела за проектиране на модула и променете съответно настройките на ценовия текст:
- Ценова политика: Работни Sans
- Цвят на текста на цената: # 000000
- Цена Размер на текста: 2vw (десктоп), 4vw (таблет), 5vw (телефон)
разстояние
Завършете параметрите на модула, като добавите персонализирани стойности за запълване.
- Горна подложка: 2vw
- Подложка отдолу: 2vw
- Ляв подплънки: 3vw
- Десен подплънки: 3vw
Добави Woo Добави в кошницата Модул в колона 2
Динамично съдържание
Нека да преминем към следващия и последен модул, който е модулът Woo Add To Cart! Изберете продукт по ваш избор.
- Продукт: Търсене в списъка
Цвят на фона
Променете цвета на фона.
- Цвят на фона: rgba (255,255,255,0,7)
Настройки на полето
Също така променете параметрите на полетата на модула.
- Цвят на фона на полетата: #ffffff
- Цвят на текста на полето: # 000000
- Шрифт на полето: Open Sans
- Ширина на долната граница на полетата: 1px
- Цвят на долната граница на полетата: # 000000
Настройки на бутона
Продължете, като стилизирате бутона, както следва:
- Използвайте персонализирани стилове за бутона: Да
- Размер на текста на бутона: 1.1vw (десктоп), 2.5vw (таблет), 3.5vw (телефон)
- Цвят на бутона на бутона: #ffffff
- Цвят на фона на бутона: # 000000
- Ширина на рамката на бутона: 0px
- Радиус на рамката на бутона: 10vw
- Шрифт на бутона: Отваряне без
- Горна подложка: 1vw (десктоп), 2vw (таблет), 4vw (телефон)
- Подложка отдолу: 1vw (бюро), 2vw (таблет), 4vw (телефон)
- Ляв подплънки: 4vw (десктоп), 6vw (таблет), 10vw (телефон)
- Дясно подплънки: 4vw (бюро), 6vw (таблет), 10vw (телефон)
разстояние
И завършете параметрите на модула, като добавите персонализирани стойности на марджин и подплънки.
- Долен марж: 2vw
- Горна подложка: 3vw
- Подложка отдолу: 3vw
- Ляв подплънки: 3vw
- Десен подплънки: 3vw
3. колона за стил, оразмеряване и препозициониране
Променете параметрите на колона 2
Градиентен фон
Сега последната част на този урок ни позволява да обединим различните модули. Отворете настройките за колона 2 и използвайте следния градиен фон:
- 1 цвят: rgba (43,135,218,0)
- Цвят 2: #ffffff
- Тип градиент: линеен
- Начална позиция: 39%
граница
Добавете и заоблени ъгли.
- Всички ъгли: 1vw
Кутия за сянка
Ние създаваме дълбочина, като добавяме фина сянка на кутията.
- Сила на размазване на кутията: 100px
- Цвят на сенките: rgba (0,0,0,0,24)
Transformer Translate
И ние ще завършим настройките на колоната, като променим стойностите за преобразуване на преобразуване на различни размери на екрана. Тази стъпка ни позволява да преместваме колоната, както желаем. Когато използвате собствено фоново изображение, определено ще оцените тази опция!
- Вдясно: 0px (офис), 9vw (таблет и телефон)
- Отдолу: -5vw (офис), 0vw (таблет и телефон)
изследване
След като преминахме през всички стъпки, нека да разгледаме окончателно как изглежда на различни размери на екрана.
Заключителни мисли
В тази статия ви показахме как да рамкирате продукт във вашето фоново изображение с помощта на вградените опции и модули на Divi. WooCommerce включени в Divi Builder. Подходът, който предприемате, зависи от фоновото изображение, което използвате, но четенето на този урок ще ви помогне да разберете цялостния подход. Можете също така да изтеглите JSON файла на оформлението безплатно! Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в секцията за коментари по-долу.
