Искате ли да знаете как да персонализирате количката и иконите за търсене на модула Divi Fullwidth Menu?
Менюто на вашето уеб сайт е една от най-важните части на вашия уеб сайт поради прякото въздействие, което може да има върху начина, по който потребителите навигират във вашия съдържание.
Една добре проектирана лента с менюта може да направи голяма разлика чрез опростяване на навигацията, подчертаване на ключови страници и подобряване на цялостното потребителско изживяване.
Модулът "Fullwidth Menu" на Divi предлага голяма гъвкавост, като ви позволява да персонализирате пазарската количка и иконите за търсене, както сметнете за добре.
В този урок ще ви покажем три различни дизайна за модула „Меню с пълна ширина“ с различен стил за пазарска количка и икони за търсене.
Нека да започнем!
изследване
Ето предварителен преглед на това, което ще проектираме.
Първи дизайн
За първия дизайн поставяме една от иконите отляво, а другата отдясно, като избираме центрирана структура на менюто. Ще променим и цвета при задържане.
Втори дизайн
За втория дизайн поставяме двете икони от дясната страна и променяме цвета при задържане.
Трети дизайн
За третия дизайн използваме допълнителен CSS, за да персонализираме иконите.
Прочетете още: Divi: Как да персонализирате модула „Таймер за обратно отброяване“ с GIF
Персонализиране на пазарската количка и иконите за търсене на модула "Fullwidth Menu" на Divi
Създайте глобалната заглавка
За всеки от трите дизайна на менюто ще започнем с отваряне на конструктора на теми на Диви.
За да направите това, от таблото за управление на WordPress отидете на Divi > Създател на теми
След това кликнете Добавете глобален колонтитул
След това изберете Изградете глобален заглавие
Вмъкнете нов раздел с пълна ширина.
След това изтрийте предишния раздел.
Поставете модула Меню с пълна ширина.
Качете вашето лого от менюто.
Вече сме готови да продължим.
Първи дизайн
Първият ни дизайн ще включва вградените ефекти на курсора на Divi за промяна на цвета на текста и иконите при задържане. Да започваме.
Вижте също: Divi: Как да добавите икона на хамбургер към модула на менюто
Започнете, като отворите настройките на модула и добавите фон.
- Фон: #fbf9f4
Отидете на раздела Дизайн и изберете оформлението на логото.
- Стил: Вградено центрирано лого
Сега нека променим някои от настройките на текста на менюто.
- Цвят на активната връзка: #09148c
- Шрифт на менюто: Ruby
- Дебелина на шрифта на менюто: Получер
- Стил на шрифта: TT и U (С главни букви и подчертано)
След това задайте цвета на текста на менюто, размера на текста и разстоянието между буквите.
- Цвят на текста на менюто: #000000
- Размер на текста на менюто: 21px
- Разстояние между буквите: 1px
Искаме да добавим ефекти при задържане на мишката към това меню, така че променете цвета на текста на менюто при задържане. Задайте различен цвят на текста на менюто при задържане.
- Цвят на текста на менюто (задръжте курсора): #b70018
След това отидете на настройките Падащо меню под раздела Дизайн.
- Цвят на фона на падащото меню: #fbf9f4
- Цвят на линията на падащото меню: #b70018
- Цвят на текста на менюто: #000000
Искаме цветът на текста на падащото меню също да се променя при задържане на мишката, така че изберете опциите за задържане на мишката за тази настройка и задайте различен цвят на текста.
- Цвят на текста на падащото меню (задръжте курсора): #b70018
- Цвят на активната връзка в падащото меню: #b70018
- Цвят на фона на мобилното меню: #fbf9f4
- Цвят на текста на мобилното меню: #000000
Отново искаме цветът на текста на мобилното меню да се променя при задържане на мишката. Изберете опциите за задържане на мишката за тази настройка, след което задайте различен цвят на текста при задържане.
- Цвят на текста на мобилното меню (задръжте курсора): #b70018
Персонализиране на пазарска количка и икона за търсене
Сега нека добавим и персонализираме иконите за пазарска количка и търсене. Под раздела съдържание, отидете на Елементи и активирайте иконата на пазарската количка и иконата за търсене.
- Показване на иконата на пазарската количка: ДА
- Показване на иконата за търсене: ДА
Върнете се в раздела Дизайн и отворете настройките на иконите. Всяка от нашите икони ще бъде черна и червена при задържане. Първо задайте черния цвят.
- Цвят на иконата на количката за пазаруване: #000000
- Цвят на иконата за търсене: #000000
- Цвят на иконата на менюто за хамбургер: #000000
След това изберете иконата за задържане и добавете цвета при задържане.
- Цвят на иконата на пазарската количка (задръжте курсора): #b70018
- Цвят на иконата за търсене (задръжте курсора): #b70018
- Цвят на иконата на менюто за хамбургер (задръжте курсора): #b70018
Задайте размер на иконата.
- Размер на шрифта на иконата на пазарската количка: 25 px
- Размер на шрифта на иконата за търсене: 25 px
Отидете в раздела Отстояние, след което задайте горната и долната подложка.
- Подложка (отгоре и отдолу): 5px
Накрая ще добавим граница в горната и долната част на модула на менюто. Отворете настройките за граници.
- Ширина на горната граница: 3px
- Ширина на долната граница: 3px
Окончателен дизайн
И ето нашия окончателен дизайн.
Втори дизайн
Вторият ни дизайн ще използва вградените ефекти на курсора на мишката на Divi, за да промени размера на иконите на менюто и текста при задържане. Да започваме.
Първо, ще добавим фонов градиент към модула на менюто. Градиентът има три спирки, настройките са както следва:
- Градиентни стопове:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Задайте типа градиент и позицията на градиента.
- Тип градиент: Коничен
- Позиция на градиента: отдолу
След това отидете в раздела Дизайн и задайте оформлението (оформление).
- Стил: Центриран
Отидете в раздела Текст от менюто за персонализиране на дизайна на текста на менюто.
- Цвят на активната връзка: #FFFFFF
- Меню за шрифтове: Syne
- Тегло на шрифта: получер
- Стил на шрифта на менюто: TT (главни букви)
- Меню за цвят на текста: #FFFFFF
Сега задайте размера на текста на менюто и разстоянието между буквите.
- Размер на текста на менюто: 20px
- Разстояние между буквите на менюто: 2px
Тъй като искаме размерът на текста на нашето меню да се увеличава при задържане, изберете опцията за задържане.
- Размер на текста на менюто: 22px
След това променете настройките на дизайна от падащото меню.
- Цвят на фона на падащото меню: #fcda90
- Цвят на линията на падащото меню: #FFFFFF
- Меню за цвят на текста: #FFFFFF
- Цвят на активната връзка в падащото меню: #FFFFFF
Задайте фона на мобилното меню и цвета на текста.
- Цвят на фона на мобилното меню: #fcda90
- Цвят на текста на мобилното меню: #FFFFFF
Персонализиране на пазарска количка и икона за търсене
Сега нека започнем да персонализираме нашите икони на менюто. Отидете на Елементи под раздела съдържание и активирайте иконата на пазарската количка и иконата за търсене.
- Икона на пазарска количка Sow: ДА
- Показване на иконата за търсене: ДА
Върнете се в раздела Дизайн и отворете настройките на иконата.
- Цвят на иконата на пазарската количка: #ffffff
- Цвят на иконата за търсене: #ffffff
- Цвят на иконата на менюто за хамбургери: #ffffff
Иконите ще имат тъмно оранжев цвят при задържане. Изберете опцията за покритие и задайте цвета.
- Цвят на иконата на пазарската количка (задръжте курсора): #fcac00
- Цвят на иконата за търсене (задръжте курсора): #fcac00
- Цвят на иконата на менюто за хамбургер (задръжте курсора): #fcac00
След това задайте размера на шрифта за пазарската количка и иконите за търсене.
- Размер на шрифта на иконата на пазарската количка: 25 px
- Размер на шрифта на иконата за търсене: 25 px
За да увеличите размера на иконата при задържане, изберете опцията за задържане.
- Размер на шрифта на иконата на количката за пазаруване (задръжте курсора на мишката): 30 px
- Размер на шрифта на иконата за търсене (Hover): 30 px
Накрая отидете в секцията Отстояние и задайте горната и долната подложка.
- Подложка (отгоре и отдолу): 5px
Окончателен дизайн
Ето окончателния дизайн на второто ни оформление на менюто.
Трети дизайн
За окончателния ни дизайн ще добавим фонов кръг зад иконите на количката, като използваме персонализиран CSS.
Прочетете още: Divi: Как да създадете лепкаво и разширяемо меню при задържане
Нека да започнем.
Първо добавете фонов цвят към модула.
- Фон: #efb6ac
След това отидете в раздела Дизайн и отворете опцията Текст от менюто.
- Цвят на активната връзка: #e84322
- Шрифт на менюто: Cinzel
- Меню за тегло на шрифта: Ultra Bold
Искаме цветът на текста на менюто да се променя при задържане. Първо задайте цвета на текста на менюто.
- Меню за цвят на текста (работен плот): #e7644a
Щракнете върху иконата за задържане и задайте цвета на текста при задържане.
- Цвят на текста на менюто (задръжте курсора): #e84322
След това задайте размера на текста на менюто и разстоянието между буквите.
- Размер на текста на менюто: 21px
- Разстояние между буквите на менюто: 1px
Също така искаме разстоянието между буквите да се разширява при задържане, така че изберете опцията за задържане за настройки.
- Разстояние между буквите на менюто: 2px
Задайте подравняване на текста вляво.
- Подравняване на текста: ляво
След това променете следните настройки от падащото меню.
- Цвят на фона на падащото меню: #efb6ac
- Цвят на линията на падащото меню: #e7644a
Прочетете още: Divi: Как да създадете раздел Препоръки под формата на мрежа
- Цвят на текста на падащото меню
- Работен плот: #e7644a
- Задръжте: #e84322
- Цвят на активната връзка в падащото меню: #e84322
Задайте фона на мобилното меню и цвета на текста.
- Цвят на фона на мобилното меню: #efb6ac
- Цвят на текста на мобилното меню:
- Работен плот: #e7644a
- Задръжте: #e84322
Персонализиране на пазарска количка и икона за търсене
Първо отидете на Елементи под раздела съдържание и активирайте иконата на пазарската количка и иконата за търсене.
- Показване на иконата на пазарската количка: ДА
- Показване на икона за пазаруване: ДА
След това се върнете към раздела Дизайн и отворете настройките на иконата. Задайте цвета на иконата.
- Цвят на иконата на количката за пазаруване: #e7644a
- Цвят на иконата за търсене: #e7644a
- Цвят на иконата на менюто за хамбургери: #e7644a
Цветът на тези икони ще се промени при задържане. Активирайте опциите за задържане и задайте цвета.
- Цвят на иконата на пазарската количка (задръжте курсора): #e84322
- Цвят на иконата за търсене (Hover): #e84322
- Цвят на иконата на менюто за хамбургер (задръжте курсора): #e84322
Също така искаме размерът на иконата да се увеличава при задържане. Първо задайте размера на шрифта на иконата.
- Размер на шрифта на иконата на пазарската количка: 22 px
- Размер на шрифта на иконата за търсене: 22 px
След това задайте размера на шрифта на иконата при задържане.
- Размер на шрифта на иконата на количката за пазаруване (задръжте курсора на мишката): 26 px
- Размер на шрифта на иконата за търсене (Hover): 26 px
След това отидете в раздела Отстояние и добавете горна и долна подложка.
- Подложка (отгоре и отдолу): 5px
И накрая, можем да добавим персонализиран CSS към глобалната заглавка, за да добавим кръговете зад пазарската количка и иконата за търсене.
Можете да персонализирате този CSS, както желаете, за да съответства на дизайна на вашия модул на менюто.
Отворете настройките на шаблона на заглавката, след което отидете в раздела Подробно и вмъкнете следния персонализиран CSS.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Окончателен дизайн
Това завършва дизайна на нашето трето и последно оформление на менюто.
Краен резултат
Сега нека да разгледаме окончателния дизайн на трите различни менюта.
Първи дизайн
Изтеглете DIVI сега!!!
Втори дизайн
Трети дизайн
Изтеглете DIVI сега!!!
Заключение
Модулът на менюто на Divi и иконите за количка и търсене са лесни за персонализиране, за да създадете уникални оформления и дизайни за вашия уеб сайт.
Можете лесно да подобрите външния вид на вашите модули на менюто, като използвате вградени настройки на Divi, като ефекти при задържане и персонализиран CSS.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...