Как да скрия даден елемент от сайта си?

Съдържание

Симеон Ненов

Симеон Ненов

Основател на Simplfix Studio
Симеон помага на бизнесите да увеличат разпознаваемостта на своя бранд чрез дигитални решения от много години.

Всеки разработчик на уебсайт се сблъсква с предизвикателството да премахне определени елементи, като например текст, бутон или изображение. В този кратък туториал ще научите как ефективно да се справите с проблема.

Един от начините е да го изтриете от темата си или да използвате вашия билдър (Elementor, Divi, WPBakery и др.). Проблемът обаче е, че много пъти начинаещите разработчици не знаят какво генерира елемента, който искат да скрият, и затова не могат да го премахнат. За щастие има лесно решение.

Научете се как да скриете елемент в сайта си на WordPress стъпка по стъпка.

Как да скриете елемент в сайт на WordPress.

Стъпка 1: Проверка на елемента

Първото нещо, което трябва да направите, е да отворите уебсайта си на страницата, на която се намира елементът, който искате да скриете. След това маркирайте елемента, щракнете с десния бутон на мишката и щракнете върху „Inspect“ (за Chrome).

Стъпка 2: Идентифициране на елемента в кода

След това ще видите кой елемент сте избрали да инспектирате (той ще бъде маркиран). В нашия случай това е

<h2 class="elementor-heading-title elementor-size-default">...</h2>

Стъпка 3: Копиране на съответния код

Сега погледнете в горния десен ъгъл, където се виждат стиловете, които влияят на елемента (в белия правоъгълник). Единственото, което трябва да направите, е да копирате целия код. В нашия случай:

.elementor-162795 elementor-151978 .elementor-element.elementor-element-41227282 .elementor-heading-title

Стъпка 4: Персонализиране в администрацията на WordPress

След това затворете прозореца за инспектиране и кликнете върху бутона „Настройки“ в горната админ лента. За да го видите, трябва да сте влезли като администратор.

Стъпка 5: Допълнителен CSS

Щракнете върху „Additional CSS“.

Стъпка 6: Поставяне и скриване

Добавете копирания код в редактора. След това добавете този код след него:

{
display:none;
}

И готово, елементът е скрит!

Ако имате нужда от помощ при изграждането на сайта си или просто искате приятелски съвет, не се колебайте да се свържете с нас!

До следващия път!

Източници

Този туториал е създаден благодарение на реалния опит на автора. Също така са направени скрийншоти и видео за по-лесно разбиране.

Полезни ресурси

https://www.w3schools.com/css/css_display_visibility.asp – Обяснение на CSS свойството ‘display’

Social Media
Brand Identity
Web Design
Print Design
Look at you! You look beautiful today!