Как да зададете размер за иконата на бутонаElementor ? В този урок ще ви покажем как да постигнете това с персонализиран CSS

Всеки трябва да е доволен, ако има свободата/гъвкавостта да създаде нещо, защото повече гъвкавост означава повече продуктивност. Говорейки за гъвкавост, в тази статия ще ви покажем как да зададете персонализиран размер на иконата на бутон. Elementor.

Discover Как да инсталирам Elementor на WordPress

По подразбиране приспособлението за бутони Elementor може да персонализира размера на иконата. Но този избор е ограничен до пет фиксирани размера на опцията (изключително малък, малък, среден, голям и изключително голям). Не само ограничен до пет избрани опции, но настройката не е индивидуална. Това означава, че когато искате да зададете размера, това ще засегне два елемента на бутона (икона и текст).

Може би се чудите: „Възможно ли е да зададете персонализиран размер за иконата на бутона Elementor? ”. Е, всичко е възможно с Elementor. Без помощта на добавки можете да го направите лесно.

задайте персонализиран размер за иконата на елемент или бутон

Как да зададете персонализиран размер на иконата на бутона Elementor

Преди да започнем този урок, искаме да ви уведомим, че този урок ще работи с персонализирания CSS на Elementor. Персонализираната CSS функционалност е достъпна само на Elementor Pro.

Е, да започваме!

Отидете до вашия редактор на Elementor. Ще започнем всичко от нулата, така че създайте раздел само с една колона. След това изберете приспособлението за бутони от панела с приспособления, след което го плъзнете и пуснете в областта за редактиране.

Прочетете още: Elementor: Как да създадете персонализирани форми

След като добавите приспособлението за бутони, можете да редактирате и стилизирате приспособлението според вашите предпочитания. Като добавяне на икона, цвят на фона на текста и т.н.

задайте персонализиран размер за иконата на елемент или бутон

Както можете да видите от изображението по-горе, размерите на иконата и текста са еднакви. Когато искате да промените размера на иконата само като я зададете в опцията Размер на настройките на джаджи, това също ще се отрази на текста.

размер за икона на бутон

Добре, сега ще решим този проблем. В настройките на джаджа отидете до раздела напреднал -> Персонализиран CSS.

Копирайте CSS фрагмента по-долу и след това го поставете в полето Персонализиран CSS.

selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}

задайте персонализиран размер за иконата на елемент или бутон

Можете да персонализирате размера на иконата, като промените стойността на CSS фрагмента (вижте изображението по-долу).

задайте персонализиран размер за иконата на елемент или бутон
задайте персонализиран размер за иконата на елемент или бутон

Там!. Не забравяйте да запазите или публикувам вашият проект, ако желаете.

Вземете Elementor Pro сега!!!

Заключение

Тази статия ви показва как да зададете персонализиран размер на иконата на бутон Elementor с помощта на персонализиран CSS. Но ако искате по-лесен начин да персонализирате размера на иконата на вашия бутон, защото не обичате да работите с кодове, предлагаме да използвате Добавка Elementor.

Добавката Elementor, която силно препоръчваме, е JetElements от Crocoblock. JetElements има над 40 уиджета Elementor. Ще намерите изпълним модул за бутон, който ви позволява да персонализирате размера на иконата на бутона.

С джаджата бутон от JetElements, персонализирането на размера на иконата на бутона е много просто и безпроблемно.

икона на бутон elementor

Така ! Това е всичко за тази статия, която ви показва как да зададете размер за иконата на бутона на Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...

Тя ПИН на Pinterest