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

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

Премахване на елементи чрез тема или билдър

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

Видео

Научете се как да скриете елемент в сайта си на 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’