Бихте ли искали да добавите адаптивно лого към вашия модул на менюто с пълна ширина на Divi така че да се адаптира към изгледа на мобилно устройство?
Знаете ли, че повече от 50% от трафик Интернет идва от мобилни устройства? Това означава, че мобилната версия на вашия уеб сайт е изключително важно и дори може да бъде основният начин, по който някой ще посети вашата страница.
Уверете се, че си уеб сайт е отзивчив и удобен за мобилни устройства е важна стъпка в проектирането на a уеб сайт.
В този урок ще ви покажем как да добавите адаптивно лого към модула на менюто с пълна ширина, като използвате вградените адаптивни опции на Divi.
Това ще ви позволи да добавите по-голямо или по-сложно лого, което ще се показва на по-големи екрани, и по-малко или по-просто лого, което ще се показва на по-малки екрани.
Да започнем!
изследване
Ето предварителен преглед на това, което ще проектираме. Настолната версия на уебсайта ще има разширено лого с допълнителен текст, а мобилната версия на логото ще има само основното лого брандиране.
Какво трябва да започнете
Всички първо инсталирайте и активирайте темата Divi и се уверете, че имате най-новата версия на Divi на вашия уебсайт. След това се уверете, че имате поне две версии на вашето лого: една за настолния изглед на вашия сайт и една за мобилен изглед. Накрая изтеглете шаблона Шаблони за горен и долен колонтитул за пакета за оформление на Divi за гимназията.
Сега сте готови да започнете!
Как да добавите адаптивно лого към вашия заглавен модул с пълна ширина в Divi
Създайте модула Fullwidth Header
Прочетете още: Divi: Как да покажа модула Fullwidth Header на цял екран
Добавете секция с пълна ширина
Тъй като оригиналното меню е изградено със стандартен модул на менюто, ще трябва да променим оформлението, за да добавим модул Fullwidth Header.
Първо добавете раздел с пълна ширина (Пълна ширина) към глобалната заглавка под съществуващото меню.
В настройките на секцията с пълна ширина отидете до ПодробноИ тогава Ефекти на превъртане.
- Залепваща позиция: Придържайте се към върха
След това добавете цвета на фона.
- Фон: #f5f0eb
Добавете различен цвят за фона в лепкаво състояние.
- Фон (лепкав): #ffffff
Добавяне на модул Fullwidth Header
Сега нека добавим модула Fullwidth Header.
Отворете настройките на модула и премахнете фона.
За да възпроизведем лесно външния вид на оригиналното меню, можем да използваме функцията Copy Styles, за да копираме някои от персонализираните настройки.
Вижте също: Divi: Как да промените градиента на фон при задържане
Отворете настройките на началното меню, след което щракнете с десния бутон върху Текст от менюто и изберете Копиране на текстови стилове на менюто.
След като копирате, щракнете върху трите точки на модула Fullwidth Header, след което изберете Минали текстови стилове на менюто.
Сега ще повторим същите стъпки с настройките на падащото меню.
Повторете още веднъж за иконите.
Задайте подравняване на текста надясно.
- Подравняване на текста: дясно
Задайте максималната височина на логото под ДизайнСлед това Оразмеряване.
- Максимална височина на логото: 50px
Добавете следния CSS към раздела Меню за връзки под Персонализиран CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Накрая коригирайте горната и долната подложка.
- Подложка-отгоре: 10px
- Подложка-отдолу: 10px
Сега изтрийте оригиналния раздел на менюто.
Добавяне на адаптивно лого
Сега ще добавим адаптивното лого. За щастие Divi прави това лесно с вградени опции за реагиране.
при съдържание, отворете настройките на логото и качете настолната версия на вашето лого.
Изберете иконата на мобилен режим, за да използвате отзивчиви опции, след което заменете мобилното лого с вашето отзивчиво лого.
Създайте нова страница с предварително дефинирано оформление
За да видите менюто с пълна ширина с адаптивното лого в действие, нека създадем нова страница с предварително дефинирано оформление от библиотеката Divi.
За този дизайн ще използваме началната страница на гимназията на Пакет за оформление на гимназията за да съответстват на горния и долния колонтитул.
Добавете нова страница към уебсайта си и й дайте заглавие, след което изберете опцията Използвайте Divi Builder. Тъй като импортирахме оформлението на горния и долния колонтитул като глобален горен и долен колонтитул, използвайте оформлението по подразбиране за тази страница.
Ще използваме предварително направено оформление от библиотеката Divi за този пример, така че изберете Преглед на оформления.
Намерете и изберете оформлението Начална страница на гимназията.
Изберете Използвайте това оформление за да добавите оформлението към вашата страница.
Краен резултат
Сега нека да разгледаме нашия окончателен дизайн.
Изтеглете DIVI сега!!!
Заключение
Наличието на удобен за мобилни устройства и отзивчив уебсайт е по-важно от всякога. И благодарение на вградените отзивчиви опции на Divi, изграждането на такъв е по-лесно от всякога!
С адаптивно лого идентичността на вашата марка винаги ще бъде ясна, независимо от размера на екрана.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...