Поиск
Close this search box.
Поиск
Close this search box.

20 апреля, 2023

Подключение сторонних скриптов в Elementor

Привет, уважаемые посетители нашего блога!

Последнее время очень часто приходится использовать JS-код на страницах Elementor для расширения возможностей последнего. Мы рассмотрим несколько способов добавления своего кода на страницу. Некоторые из них не совсем правильные, но рабочие.

Первый способ добавления своего кода на страницу Elementor.

Разберем этот способ на примере подключения js-библиотеки JQuery на страницу.

Изначально, весь JS-код я добавлял только этим способом. Он не очень правильный сточки зрения веб-разработки, но, тем не менее, свою функцию выполняет.

Итак, вверху страницы, в самом начале я размещал html-виджет, в котором размещал следующий код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Этот код подключает к странице JQuery. Если вы подключите скрипт таким образом, то при просмотре кода страницы вы увидите следующее:

storonnih skriptov v elementor 001

Как видите, JQuery присутствует на странице, и теперь весь jquery-код будет работать.

Подключать скрипты и стили рекомендуется вначале страницы в пределах тегов <head>, а сам код, который работает с элементами страницы, внизу перед закрывающим тегом </body>, чтобы эти элементы успели загрузится и отобразиться.

Затем я добавлял другой html-виджет, обычно внизу страницы, куда вставлял свои скрипты. Все работало без проблем.

Второй способ добавления своего кода на страницу Elementor.

В данный момент Элементор обзавелся своим инструментом добавления своих скриптов на страницу. Для этого в консоли WordPress нужно зайти в раздел “Elementor -> Пользовательский код”.

Подключение сторонних скриптов в Elementor

Кликнуть на кнопке “ДОБАВИТЬ НОВЫЙ” вверху:

storonnih skriptov v elementor 003

Дать скрипту название (мы назовем его “Подключение JQuery”)

Подключение сторонних скриптов в Elementor

Затем в поле внизу вставить свой скрипт. Мы будем вставлять скрипт подключения jquery на страницу

Подключение сторонних скриптов в Elementor

И последнее, что нужно сделать, выше поля для вставки кода выбрать в выпадающем меню место вставки кода:

  • <head>
  • <body> – Начало
  • </body> – Конец

Нам нужно подключить скрипт в самом верху страницы, поэтому мы выберем <head>.

storonnih skriptov v elementor 006

Все, теперь сохраним изменения и посмотрим, как это будет выглядеть в коде.

storonnih skriptov v elementor 007

Как видите, JQuery подключилась перед тегом <head>, что нам и было нужно.

На этом все, мы показали, как подключить JQuery в Elementor. Cтавим лайки, если статья помогла вам.

Если Вас интересует вставка своих css-стилей, то советуем перейти сюда.

Уникальные тексты и изображения
с помощью
Искусственного Интеллекта
на русском языке.

Перейдите в Telegram и возьмите бесплатный пакет символов для тестирования сервиса
10 000 символов бесплатно!

0

Интересные статьи

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.