Искате ли да създадете адаптивно мрежово оформление на изображение с ДИВИ ?
Строителят Divi има фантастични вградени модули, които използват мрежови изгледи,
Но понякога може да искате да създадете свое собствено персонализирано оформление на решетка с изображения с CTA връзки. Това ви дава повече контрол върху дизайна и съдържание които искате да показвате за всеки елемент от мрежата, без да се налага да прибягвате до плъгин.
Днес ще ви покажем как да създадете адаптивно мрежово оформление на изображение с CTA връзки, като използвате вградените опции за дизайн на Divi.
Нека да започнем!
изследване
Ето кратък преглед на резултата, който ще получим в края на този урок.
Създайте страница с Divi Theme Builder
От таблото за управление на WordPress създайте нова уеб страница, като отидете на Страници >> Добавяне
Вижте също: Как да създадете плъзгащо се и натискащо меню в DIVI?
След това дайте заглавие на вашата страница, след което щракнете върху " Използвайте Divi Builder ".
След това щракнете върху " започнете да строите«
Създаване на оформление на специална секция
Добавете нов раздел "Специалност". ляво оформление на страничната лента една трета две трети.
Изберете оформлението на колоните, както е показано на екранната снимка по-долу:
Изтрийте раздела по подразбиране, така че да остане само новият специализиран раздел.
Отворете настройките на секцията и променете цвета на фона, както следва:
- Фон: #84dbda
Под раздела Стил, актуализирайте следните опции:
- Изравняване на височините на колоните: ДА
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Вътрешна ширина: 100%
Прочетете още: Как да плавам публикации в блогове в DIVI?
- Максимална вътрешна ширина: 1px (десктоп), 080px (таблет и телефон)
- Вътрешен марж (отгоре и отдолу): 12vh
- Подпълване на колона 1 (отгоре и отдолу): 0px
С поставените стилове на раздела добавете ред с една колона към раздела.
Настройки на линията
Актуализирайте параметрите на линията, както следва:
- Използвайте персонализирана ширина на улука: ДА
- Разстояние между колоните: 1
- Хармонизиране на височините на колоните: ДА
- Вътрешно поле (отгоре и отдолу): 0px
Създайте втори ред, като дублирате първия.
След това променете дублирания ред на оформление с две колони.
Добавяне на изображения като фонови изображения на колони
Сега, когато всички редове и колони са на мястото си, ние сме готови да добавим нашите изображения към нашето оформление на мрежата.
За да гарантираме, че изображенията реагират в оформлението на мрежата, ние ще добавим всяко от нашите изображения като фонови изображения към всяка от четирите колони в раздела.
Тъй като всяко фоново изображение ще има размер на фона от " Покрийте ", изображението винаги ще запълва цялата колона, когато коригирате размера на браузъра.
Фоново изображение на колона в горния ред
За да започнете, отворете настройките на колоната в горния ред.
След това добавете фоново изображение към колоната.
Фонови изображения на колона в долен ред
След това отворете настройките за колона 1 във втория (долния) ред и също така добавете фоново изображение към тази колона.
След това добавете фоново изображение към колона 2 на същия ред.
Фоново изображение на колона 1 на раздел
И накрая, отворете настройките на раздела "специалност" и добавете фоново изображение към колона 1.
Добавяне на модул "Призив към действие", насложен върху изображенията към всяка колона
Сега, след като нашите фонови изображения са добавени към всяка колона на оформлението на решетката, ще добавим модул „Призив към действие“ към всяка колона.
Използването на наслагване на модул „Призив за действие“ върху фоновото изображение на колоната ще ви позволи лесно да добавяте персонализирани стилове на наслагване на фона и ефекти при задържане на мишката към фоновото изображение на колоната.
За този пример просто ще използваме елемента бутон от модула Action Call, но можете лесно да добавите към съдържание на заглавието или тялото над бутона.
Ще добавим първия модул „Призив към действие“ в колоната на горния ред.
Съдържание
Актуализирайте настройките на модула "Призив към действие", както следва:
- премахнете текста на заглавието
- изтриване на основния текст
- URL адрес на връзката към бутона: #
ЗАБЕЛЕЖКА : Добавянето на "#" за URL адреса на връзката на бутона е само пълнител за момента, за да може бутонът да се показва. Добавянето на полупрозрачен фонов цвят при задържане на мишката ще ви даде хубав персонализиран цвят на наслагването, когато задържите курсора на мишката над модула (и изображението зад него).
- Цвят на фона: прозрачен (десктоп), rgba (255,235,77,0.5) (при задържане на мишката)
Стилове на бутони
Отидете в раздела Стил и променете настройките на бутоните на модула "Призив към действие", както следва:
- Използвайте персонализирани стилове за бутон: ДА
- Размер на текста на бутона: 22px
- Цвят на текста на бутона: #ffeb4d
- Бутон за фон: #000000 (десктоп), #ec5f00 (задръжте)
Вижте също: Как да създадете плъзгащо се и натискащо меню в DIVI
- Ширина на рамката на бутона: 0 пиксела
- Радиус на границата на бутона: 100 px
- Шрифт на бутона: плаващ пясък
- Бутон за приглушена светлина: Полудебел
- Бутон за подложка: 0,5 em отгоре, 0,5 em отдолу, 2 em отляво, 2 em отдясно
Размер, подплата и кант
След това трябва да се уверим, че нашият модул има определена височина, за да изложи фоновото изображение на колоната зад него.
За да направим това, ще добавим вътрешни полета (отгоре и отдолу) към модула.
Също така ще добавим фина граница към модула, за да го отделим малко от другите изображения в оформлението на мрежата.
Приложете следните настройки:
- Ширина: 100%
- Вътрешен марж (отгоре и отдолу): 15vh
- Ширина на долната граница: 5px
- Ширина на лявата граница: 5px
- Цвят на рамката: rgba (255,255,255,0.5)
ЗАБЕЛЕЖКА : Използването на единицата за дължина vh за подложка ще направи стойността на подложката спрямо височината на прозореца за изглед на браузъра. Така вашите елементи на решетката на изображението ще растат и ще се свиват на височина пропорционално на прозореца на браузъра.
Вертикално центриране на съдържанието на модул "Call to action".
За да се гарантира, че съдържание на модула „Action Call“ остава вертикално центриран, можем да добавим малък фрагмент от персонализиран CSS, като използваме свойството flex.
Под разширения раздел добавете следния CSS към основния елемент:
display:flex;
flex-direction:column;
justify-content:center;
Добавено наслагване с призив за действие към други колони
Сега, когато първият модул „Призив за действие“ е персонализиран, копирайте и поставете модула в другите 3 колони на оформлението, включително 2 колони в долния ред и колона 1 в раздела.
За да сте сигурни, че модулът "Призив към действие" покрива цялата височина на колона 1 в специализирания раздел, задайте минималната височина на 100%.
- Минимална височина: 100%
Свърши се ! Да видим крайния резултат.
Краен резултат
Ето крайния резултат от оформлението на решетката на адаптивното изображение на уеб страница с ефектите на задържане.
Ето как мрежата реагира при коригиране на размера на браузъра.
Изтеглете DIVI сега!!!
Заключение
Отзивчивите оформления на мрежата на изображения продължават да бъдат популярен аспект на много уебсайтове. Визуалната привлекателност, осигурена от фоновото изображение, комбинирано с наслагването с призив за действие, наистина може да извади тези важни навигационни връзки.
Също така, отзивчивият характер на оформлението на решетката на изображението ще изглежда страхотно на всички устройства, което винаги е задължително.
Надяваме се, че това ръководство ще ви бъде полезно в бъдещите ви проекти за създаване уеб сайт. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси ако имате нужда от повече елементи, за да завършите вашите проекти за създаване на уебсайт.
Можете също да следвате нашето ръководство на Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...