Искате ли да създадете раздел Препоръки под формата на мрежа на вашата уеб страница с модула за препоръки на Divi ?
Мрежовите оформления са идеални за съдържание които трябва да се държат заедно. Препоръките са чудесен пример за това. в Divi, препоръките се създават с нов модул за всяка препоръка. Но за щастие, показването им в мрежа е лесно.
В тази статия ще видим как да подредите препоръките под формата на решетка с модула Отзиви de Divi. Ще видим две различни оформления, така че можете да изберете този, който най-добре отговаря на вашите нужди.
Нека да започнем!
изследване
Ето преглед на това, което ще правим в този урок.
Оформление на мрежата
Алтернативно подреждане
Дизайн на първия лейаут с Divi
Ще покажем подробностите и на двете оформления, но второто оформление ще използва модулите от първото.
Създайте линия
Първо създайте нов ред и изберете a Оформление на 3 колони.
След това отворете параметри на линията като щракнете върху иконата му на зъбно колело.
Изберете раздела Дизайн и активирайте Използвайте персонализирана ширина на улука и го задайте на 1.
- Използване на персонализирана ширина на улука: Да
- Ширина на улука: 1
След това превъртете надолу до Отстояние и променете настройките за разстояние, както следва. Затворете реда. Ще създадем втори ред, но първо ще завършим този и след това ще го клонираме.
- Подложка (отгоре и отдолу): 0px
Добавете модул „Препоръки“.
След това добавете a модул за препоръки в лявата колона.
Настройки на съдържанието на модула
След това добавете съдържание на свидетелските показания. Това включва името на автора, длъжността, името на фирмата, съдържание на тялото и снимката на лицето, което дава показания.
- Автор: име на автора
- Длъжност: Заемана длъжност в компанията
- Компания: име на фирма
- Основно съдържание: препоръка
- Изображение: избраното изображение
Параметри на дизайна на модула
След това изберете раздела Дизайн.
Икона за цитат
Променете настройките на иконата. Цветът на иконата ще се използва и за името на лицето. Това ще бъде еднакво за всички модули.
- Цвят на иконата за цитат: #fd335a
- Цвят на фона на иконата за цитат: #ffffff
Изображение
След това превъртете надолу до Изображение и променете следните настройки:
- Ширина на рамката на картината: 4 пиксела
- Цвят на рамката на изображението: #000645
Основен текст
След това превъртете надолу до основен текст и сменете шрифта
- Основен шрифт: Roboto Mono
AuthorText
След това превъртете надолу до AuthorText.
- Авторски шрифт: Oswald
- Тегло на шрифта: Полудебел
- Стил на шрифта: TT
- Цвят на текста: #fd335a
Текст на позицията
След това превъртете надолу до Текст на позицията (заглавието на длъжността) и променете шрифта.
- Позиция на шрифта: Roboto Mono
Фирмен текст
След това превъртете надолу до Фирмен текст и също така сменете шрифта.
- Фирмен шрифт: Roboto Mono
Граница
Накрая превъртете надолу до Граница и променете границата, както следва:
- Ширина на рамката: 24px
- Цвят на рамката: #000645
Дублирайте модула за препоръки
след това дублирайте модула два пъти и плъзнете двата клонирани модула към другите колони в реда.
Персонализирайте втория модул за препоръки
Отворете ги настройки на втория модул за препоръки и да промените съдържанието.
Изображение
След това изберете раздела дизайн и превъртете до Изображение. Променете цвета на рамката.
- Цвят на рамката на изображението: #acf8f5
Граница
Накрая превъртете надолу до Граница и сменете цвета.
- Цвят на рамката: #acf8f5
Персонализирайте третия модул за препоръки
Отворете ги настройки на третия модул за препоръки и редактирайте съдържанието.
Изображение
След това отидете в раздела Дизайн, превъртете до Изображение и променете цвета на рамката.
- Цвят на рамката на изображението: #fccaa0
Граница
Накрая превъртете надолу до Граница и променете цвета на рамката, за да съответства на рамката на изображението. Затворете настройките на модула.
- Цвят на рамката: #fccaa0
Дублиран ред
след това дублирайте линията като щракнете върху опцията за дублиране, която се появява, когато задържите курсора на мишката върху линията. Тъй като добавихме 0px към горната и долната подложка, този нов ред автоматично докосва линията над него. Ще отворим всеки модул във втория раздел, за да променим съдържанието и цветовете му.
Персонализирайте четвъртия модул за препоръки
Отворете ги настройки на втория модул за препоръки и да промените съдържанието.
Изображение
След това превъртете надолу до Изображение и променете цвета на рамката на #6eea9d.
- Цвят на рамката на изображението: #6eea9d
граница
Накрая превъртете надолу до Граница и променете цвета на рамката на #6eea9d, за да съответства на рамката на изображението. Затворете настройките на модула.
- Цвят на рамката: #6eea9d
Персонализирайте петия модул за препоръки
Отворете ги настройки на петия модул за препоръки и да промени съдържанието му.
Изображение
След това превъртете надолу до Изображение и променете цвета на рамката на #fff67f.
- Цвят на рамката на изображението: #fff67f
Граница
Накрая превъртете надолу до Граница и променете цвета на рамката, за да съответства на рамката на изображението. Затворете настройките на модула.
- Цвят на рамката: #fff67f
Персонализирайте шестия модул за препоръки
Накрая отворете настройки на шестия модул за препоръки и заменете съдържанието.
Изображение
След това превъртете надолу до Изображение и променете цвета на рамката на #593a94.
- Цвят на изображението на рамката: #593a94
Граница
Накрая превъртете надолу до Граница и променете цвета, за да съответства на рамката на изображението. Затворете настройките на модула.
- Цвят на рамката: #593a94
резултат
Ето резултата, който имаме до момента.
Дизайн на второто оформление с Divi
Решетката с препоръки, която създадохме, работи чудесно, ако препоръките са с приблизително еднакъв размер.
Ами ако имате кратки и дълги препоръки? За това а решетка с различни размери за колоните е идеална. Можем да поставим препоръките с най-много информация в големите колони.
За този пример. ще създадем нови колони със същите настройки за разстояние и ще използваме същите препоръки както преди, но с различни количества текст.
Създайте алтернативните линии
Първо, добавете ред към 2 колони с колона 1/3 наляво и a колона 2/3 вдясно.
След това отворете настройките на линията, отидете на раздела на Дизайн, превъртете до Оразмеряване и изберете Използвайте персонализирана ширина на улука. Променете ширината на улука на 1.
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
След това превъртете надолу до Отстояние.
- Подложка (отгоре и отдолу): 0px
след това, дубликат линия.
Изберете опциите, оформление на втори ред и изберете оформлението с Остават 2/3 et 1/3 вдясно.
Добавете четири модула за препоръки
Enfin, създайте или плъзнете своите модули за препоръки към линиите. Използваме същите модули като в предишния пример, но съдържанието е променено, за да създаде различни размери.
Модулите се адаптират към ширината на своите колони, както направиха в предишния пример, но всеки има различна височина поради съдържанието на тялото си. Това създава неудобно разстояние в мрежата. За щастие е лесно да се поправи.
Отворете настройките на първия модул и отидете на раздела Дизайн. Превъртете до Оразмеряване и въведете 100% за „Височина“.
Повторете това за всеки модул .
- Височина: 100%
Крайни резултати
Оформление на мрежата
Ето един поглед към оформлението на нашата мрежа. Това работи чудесно, ако препоръките са с еднакъв размер.
Алтернативно подреждане
Ето алтернативното оформление. Идеален е за препоръки с различни размери.
Изтеглете DIVI сега!!!
Заключение
Това е нашият поглед към това как да създадете раздел с препоръки в мрежов формат с модула Отзиви от Divi. Настройките на Divi за редове и модули работят перфектно заедно, за да създадат мрежа от множество редове и колони.
Примерите, които показахме тук, могат лесно да бъдат разширени, за да създадат още по-големи мрежи. Концепциите работят и с други видове модули Divi.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...