Добавянето на бутон с подканваща фраза към менюто за навигация води до повече кликвания и по-добри проценти на реализация. Затова е важно да разясните на посетителите „този бутон е предназначен да бъде щракнат и е ценен“. Влетящата анимация е чудесен начин да привлечете вниманието към бутон на вашия уебсайт. За просто действие „влитане“ върху бутон на заглавката, всичко, от което се нуждаете, е малко CSS.

бутон

Вижте нашето пълно ръководство за създаване на CTA бутони в заглавното меню, с 5 безплатни фрагмента за дизайн на бутони, които можете да пуснете за бързо настройване на CTA на менюто си.

За този урок ще научите прост бит CSS за създаване на добавяне на входяща анимация към вашия бутон с подканваща фраза и настройка да се показва само на началната страница на вашия сайт. Ще добавим бутон „пазаруване“ с персонализирани стилове. В този пример можете да видите, че бутонът действително се появява от лявата сцена, докато превъртате страницата надолу.

Тъй като горната ни секция е посветена на зоната на магазина на сайта, избрах да активирам този елемент от менюто само след като потребителят възнамерява да премине покрай него. Тази техника използва WordPress & Divi функции за постигане на този ефект.

Насочване само към началната страница

Префикс на селектора за създаване с клас .home. Това ще добави вашия персонализиран стил към която и страница да е зададена като начална на вашия WordPress сайт.

Анимация, случваща се „при превъртане“

Divi добавя клас .et-fixed-header към # main-header ID при превъртане. Ето как можете да използвате инструмента за персонализиране, за да накарате фиксирания ви заглавие да се държи по различен начин, след като превъртите (по подразбиране той просто се свива малко). Можете да хакнете тази функция, за да създадете състояния „преди превъртане“ и „след превъртане“ за новия си бутон на CTA.

Създаване на стилове на бутоните

Този код ще приложи стиловете на вашите бутони към първия елемент в менюто за навигация. Можете да регулирате цвета на фона и подложката, но не забравяйте да направите отрицателното поле равно на горната подложка, за да не компенсирате други елементи от менюто.

Преди превъртане

Този бит код добавя бутона вляво и го прави невидим, така че когато превъртате, изглежда да лети отляво.

След превъртане

Сега използвайте този фрагмент, за да направите бутона отново видим, като го върнете обратно в първоначалната позиция. Обърнете внимание на появата на класа ‘.et-fixed-header’.

Това е! Три сладки бита CSS, които създават плавна анимация на елемент от менюто. Използвахме псевдокласа от първо дете за насочване към първия елемент, но лесно можете да използвате идентификатора на елемента от менюто или псевдокласа „последно дете“, за да влезете от дясната страна.

Научете повече за CTA бутоните в блога и вземете много безплатни CSS кодове за стилизиране на кодове от безплатната библиотека Divi Snippets. Бързо трансформирайте стила на вашия сайт с ощипвания на копиране и поставяне на код. Това е доста страхотно. И както винаги, не забравяйте да ни изпратите съобщение в коментарите по-долу, ако имате някакви коментари или въпроси.