Elementor Free. Добавляем свой CSS/Javascript

Elementor Free. Добавляем свой CSS/Javascript

Используете бесплатную версию Elementor и хотите добавить свой стиль CSS или js скрипт, то у вас не получится — это функция доступна в PRO версии. В Elementor Free, при раскрытии  пункта меню “Пользовательские CSS” вы увидите, что нужно перейти на расширенную версию для редактирования прямо в редакторе.

Elementor Free. Добавляем свой CSS/Javascript

И что делать? Обновить версию Elementor Free до PRO? Если вы можете, то рекомендую это сделать. Elementor PRO стоит своих денег.

Однако, если вы не хотите приобретать Elementor PRO, а хотите просто добавить стиль CSS или небольшой скрипт, то читайте дальше и я вам покажу, как это сделать.

Добавление пользовательского CSS в Elementor Free.

Открываем статью в редакторе Elementor. В консоле выбираем Элемент и находим HTML элемент, как показано на картинке. Найденный элемент переносим на страницу.

Elementor Free. Добавляем свой CSS/Javascript

На странице HTML элемент будет выглядеть вот так.

Elementor Free. Добавляем свой CSS/Javascript

Элемент выглядит не привлекательно. Но вам не стоит беспокоиться об этом. На опубликованной странице элемент не будет виден (страница, которую видит посетитель сайта).

Для того чтобы появилась иконка редактирования HTML элемента, нужно навести на него курсором мышки.

Elementor Free. Добавляем свой CSS/Javascript

Нажимаем на иконку и в левой части экрана в консоле появится поле для редактирования HTML  элемента.

Elementor Free. Добавляем свой CSS/Javascript

Это поля для ввода HTML-кода, но никто вам не мешает ввести туда код CSS.

Для понимания, как это работает, введи туда такой код.

<style> body p { color: red; } </style>

И если у вас на странице есть простой текст, то он станет красным. Для тестирования вы можете создать простую страницу с текстом и протестировать на ней.

Смотрите также:  Как увеличить посещаемость сайта

Вот этот код сделает все ссылки на странице синими и при наведении будет появляться подчеркивание.

<style> body a { color: #1D67A4; text-decoration: none;}
   a:hover { text-decoration: underline;  }
</style>

Вместо #1D67A4 вы можете вставить другой цвет. Подобрать его можно на сайте ColorScheme и скопировать от туда код цвета. Код должен быть вместе с решеткой «#».

Elementor Free. Добавляем свой CSS/Javascript

Также в этот блок можно добавить и текст js скрипта.

В видео показываю наглядно как это делать и как это выглядит.

Напишите в комментарии, что у вас получилось.

 

Хотите научиться создавать свои сайты с помощью редактора Elementor,
тогда вам сюда »Генератор сайтов на WordPress и Elementor

 

Понравилась статья? Поделитесь с друзьями!