Искате ли да знаете как да използвате модула за икони на Divi за създаване на персонализирани икони?
Бутоните с икони се превърнаха в основен елемент в света на уеб дизайна. Иконите предоставят кратки визуални призиви за действие, които работят чудесно за мобилни устройства, защото не заемат много място. Те също така работят добре като превключващи или изскачащи бутони, които потребителите интуитивно разпознават без нужда от текст.
В днешния урок ще ви покажем как да проектирате бутони с икони Divi. Създайте бутон с икона в Divi е доста проста и забавна за правене.
Използвайки модула Икони, можем да избираме от стотици икони и да използваме безброй вградени опции за дизайн от Divi Конструктор за създаване на почти всякакъв тип бутон с икона, за който се сетите.
Надяваме се тази статия да ви помогне да започнете да създавате невероятни бутони с икони за следващия си проект.
Нека да започнем!
изследване
Ето бърз преглед на бутоните с икони, които ще създаваме в този урок.
Създайте нова страница с Divi Builder
Вижте също: Divi: Как да персонализирате кошницата и иконите за търсене на модула „Меню с пълна ширина“
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създавайте бутони с икони с модула Divi Icons
Част 1: Създаване на бутон с икона
Като начало, нека добавим ред с една колона към обикновения раздел по подразбиране.
След това добавете нов модул Икона към колоната.
Икона, URL адрес на връзката и цвят на фона
Под раздела съдържание настройките на модула за икони, актуализирайте следното:
- Икона: стрелка надясно (вижте екранната снимка)
- URL адрес на връзка към икона: # (засега само пълнител)
- Фон: #3e22ff
Граница и радиус на границата
Под раздела Дизайн, актуализирайте следното:
- Заоблени ъгли: 10px
- Ширина на рамката: 2px
- Цвят на рамката: #7272ff
Кутия за сянка
- Box Shadow: Вижте екранната снимка
- Цвят на сянката: rgba(62,34,255,0.48)
Съвпадение на пространството, върху което може да се кликне, с размера на бутона на иконата
Понастоящем модулът с икони ще обхваща цялата ширина на родителския контейнер (или колона). Това означава, че пространството, върху което може да се кликне, е по-голямо от действителния бутон на иконата.
За да съпоставим пространството, върху което може да се кликне, с размера на бутона на иконата, можем да дадем на модула максимална ширина, която е същата като ширината на бутона на иконата.
В този пример общата ширина на бутона е 94 пиксела.
Под разширения раздел добавете следния персонализиран CSS към основния елемент:
max-width: 94px
Ето резултата.
Част 2: Създайте бутон с квадратна икона
За да създадете нашия квадратен бутон с икона, дублирайте реда, съдържащ първия бутон с икона, който току-що създадохме. Това ще ни даде дублиран бутон в реда, с който да работим.
Дайте на иконата същата височина и ширина, като същевременно я държите центрирана
Голямата колекция от икони, налични за използване в модула за икони, включва както икони на Divi, така и икони на Fontawesome. Въпреки това, не всички икони ще имат еднаква височина и ширина. Това прави малко по-трудно определянето на точната ширина и височина на бутона с иконата.
За да създадем идеално квадратен бутон, който задейства иконата при задържане, можем да добавим персонализиран CSS, за да зададем височина и ширина за иконата, както и да центрираме иконата, използвайки свойството CSS Flex.
Ето как.
Първо отворете настройките на дублиращата се икона. След това актуализирайте иконата с нова от инструмента за избор на икони.
Премахнете подложката от модула с икони. Това няма да е необходимо, тъй като ще зададем височина и ширина на иконата.
Под разширения раздел добавете следния персонализиран CSS към Елемент икона :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Сега бутонът с иконата ще има височина и ширина, равни на 90 пиксела, което го прави идеален квадрат. Освен това свойството flex подравнява иконата в центъра на модула. Това ви позволява лесно да актуализирате размера на иконата в модула за икона.
За да завършим този бутон, нека му дадем градиент на фона и цвят на бяла граница, както следва:
- Градиентни стопове:
- 0%: #3e22ff
- 100%: #ff2000
- Цвят на рамката: #fff
Ето и крайния резултат.
Бутон за създаване на кръгла икона
След като бутонът на иконата е идеален квадрат, лесно е да го направите кръгъл. Но преди да ви покажем този прост трик, нека дублираме предишния ред, за да започнем да изграждаме нашия бутон с кръгла икона.
Сега отворете настройките за нашата нова дублирана икона и под раздела Дизайн, актуализирайте радиуса на границата (или заоблените ъгли), както следва:
- Заоблени ъгли: 50%
И точно така, имаме бутон с кръгла икона!
За да променим малко дизайна, нека да дадем на модула с икони различна икона и цвят на фона, както следва:
- Икона: вижте екранната снимка
- Фон: #121212
Ето резултата.
Създайте хоризонтално меню с бутон с икона
Популярна тенденция е използването на икони за създаване на меню с икони, което обикновено се състои от няколко бутона, разположени един до друг. За да направим това, можем да използваме свойството flex.
Ето как да го направите.
Първо добавете нов ред към колона на страницата.
Отворете настройките на линията и актуализирайте ширината на улука до 1.
- Ширина на улука: 1
След това отворете настройките на колоната вътре в реда и добавете следния персонализиран CSS към основния елемент на колоната:
display:flex;
align-items:center;
Добавяне на нов модул Икона към колоната.
Под раздела съдържание настройки на иконата, изберете икона и добавете URL адреса на връзката към иконата.
Под раздела Дизайн, актуализирайте следното:
- Цвят на иконата: #3e22ff
- Размер на иконата: 40px
- Поле (ляво и дясно): 10px
- Ширина на рамката: 2px
- Цвят на рамката: #3e22ff
ЗАБЕЛЕЖКА : Полето ще създаде пространство между съседни бутони, след като добавим още по-късно.
Под раздела Подробно, добавете следния персонализиран CSS в полето Елемент икона (както направихме по-рано за бутона с квадратна икона):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Сега всеки път, когато добавим нови бутони с икони, те ще се показват един до друг. За да илюстрираме това, нека дублираме съществуващия бутон с икона три пъти, за да създадем общо четири бутона с икони в хоризонталното меню.
След това можем да се върнем и да актуализираме иконите, ако е необходимо.
Ето резултата.
Добавени са ефекти при задържане на курсора на мишката върху бутона за икона
Трудно е да се говори за дизайн на бутони с икони, без да се споменават ефектите при задържане. Просто са твърде забавни, за да ги игнорирате.
Промяна на цвета на фона и цвета на иконата при задържане
Промяната на цветовете на бутоните е популярен и ефективен ефект при задържане. Например, можем да променим цвета на фона и цвета на иконата едновременно, когато потребителят задържи курсора на мишката над бутона.
За да направите това, отворете настройките на модула за икони и активирайте опциите за задържане на мишката за цвета на фона и изберете различен цвят за състоянието на задържане. След това можете да направите същото за иконата.
В този пример променяме цвета на фона от бял на син и иконата от син на бял.
Промяна на иконата при задържане
Друг ефект при задържане на мишката, който може да ви хареса, е да промените напълно иконата. За да направите това, можете да изберете различна икона за състоянието на задържане, когато изберете икона в настройките на иконата.
Мащаб на бутона на иконата при задържане
Труден за пренебрегване ефект на задържане е ефектът на мащабиране. Това увеличава или уголемява бутона с иконата. Най-добрият начин да добавите този тип ефект на задържане е да използвате опциите за трансформация на Divi. Това ще позволи на бутона да расте, без да засяга елементите около него.
За да добавите ефект на курсора на мишката върху мащаба към бутона с иконата, отворете настройките на иконата и под раздела на Дизайн, потърсете опции за трансформация. Активирайте опциите за задържане на мишката, след което задайте следния мащаб на трансформация на състоянието на задържане:
- Трансформация Y: 118%
- Трансформация X: 118%
Това ще увеличи размера на бутона с икона с 18%, когато потребителят задържи курсора на мишката върху него.
Бутон за завъртане на иконата при задържане
Въртенето на реещи се обекти винаги е забавно микровзаимодействие. За да завъртите бутон с икона при задържане, можем да използваме опцията за завъртане на трансформацията. Но преди това нека направим бутона кръгъл, така че само иконата да изглежда въртяща се.
За да направите иконата кръгла, ако приемем, че бутонът е квадрат, просто актуализирайте настройката за закръглени ъгли на 50% във всичките четири ъгъла.
След това актуализирайте опциите за трансформация, за да включите следната стойност на ротация на трансформацията в състояние на задържане:
- Трансформиране, завъртане Z: 180 градуса
Нека да разгледаме нашите 4 ефекта при задържане в действие.
Краен резултат
Нека да разгледаме крайните резултати от нашия урок.
Прочетете още: Divi: Как да маркирате модул "Blurb" при задържане и да замъглите останалите
Ето нашите три бутона с икони (стандартен, квадратен и кръгъл).
А ето и менюто с бутони с хоризонтална икона с ефекти при задържане.
Изтеглете DIVI сега!!!
Заключение
Знаете как да проектирате бутони с икони за a уеб сайт е от съществено значение. И както видяхме в този урок, не е толкова трудно с Divi. Модулът за икони на Divi има куп вградени опции, които отварят вратата към креативни дизайни на бутони за икони.
Надяваме се, че техниките в тази статия ще ви помогнат да отключите част от магията на вашите собствени дизайни на бутони с икони.
Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...