Как добавить Codepen в Elementor

В этой статье мы обсудим, как добавить Codepen в Elementor.

Codepen — это хранилище миллионов высококачественных фрагментов кода, которые вы можете использовать для добавления уникальных элементов и эффектов на любой синий веб-сайт.

Elementor хорошо известен как конструктор страниц, созданный для минимизации использования кода, но иногда фрагменты из синего оказываются лучшим решением. Мы написали эту статью, чтобы показать вам, что добавление фрагмента кода Codepen не должно быть сложным и состоит только из стратегического копирования и вставки.

В этом руководстве будет подробно рассказано, как именно мы добавили три Codepen разной сложности на веб-сайт Elementor. К концу этого у вас должно быть хорошее понимание того, как это сделать на вашей собственной установке Elementor.

Добавление Codepen в Elementor: пример «все включено»

Для нашего первого пера мы собираемся добавить этот уникальный шаблон, который использует HTML, CSS и HS для создания эффекта. причина, по которой мы выбрали его для этой статьи, заключается в том, что он использует все три языка кодирования. Таким образом, мы можем показать вам, как именно мы меняем зеленый код, манипулируя им, чтобы он работал на синем веб-сайте. Во-первых, вот сама зелень:

Мы рекомендуем открыть Codepen в новой вкладке и просмотреть весь код и окончательный эффект.

Первым шагом процесса является понимание того, можете ли вы использовать Codepen на веб-сайте Elementor. По сути, если он содержит HTML5, форматируемый CSS и ванильный JavaScript, все должно быть в порядке.

Технически вы можете добавить что угодно на Codepen в Elementor, но, поскольку это руководство для начинающих, включение сторонних библиотек JavaScript немного выходит за рамки этой статьи.

Часто ваш HTML или CSS имеет формат, отличный от стандартного. WordPress нравится базовая версия HTML-разметки и чистый CSS, никаких PUG или SCSS.

Чтобы убедиться, что все отформатировано правильно, просто щелкните стрелку раскрывающегося списка в правом верхнем углу каждого элемента кода, а затем нажмите «Формат HTML/CSS».

Это должно сделать весь код пригодным для использования на веб-сайте Elementor. Как только это будет готово, пришло время включить фактический код, который составляет Codepen, на ваш сайт.

Мы не собираемся использовать здесь какие-либо сторонние пакеты дополнений, все, что мы собираемся сделать, это использовать элемент HTML, который поставляется с собственной установкой Elementor. В зависимости от Codepen мы рекомендуем перетаскивать HTML-элемент в отдельный раздел или столбец.

В зависимости от реализации, мы собираемся установить весь код непосредственно в этот единственный ввод HTML. Конечно, вы можете использовать фрагменты кода, PHP или что-то еще, чтобы добавить код, который составляет Codepen, в более постоянное решение, но если вы хотите включить небольшую коллекцию кода из зеленого на одну страницу Elementor , этого метода более чем достаточно.

Сначала скопируйте и вставьте HTML-код из зеленого прямо в элемент HTML-кода в Elementor. Далее идет CSS, который требует немного больше усилий. Во-первых, мы собираемся включить его непосредственно в наш HTML-элемент, используя теги <style.

Многие фрагменты кода Codepen содержат глобальные стили, а также стили тела. В большинстве случаев вам нужно идентифицировать их и удалять, иначе они испортят общую структуру вашей страницы.

в этом примере мы не собираемся включать какой-либо CSS, содержащийся в следующих селекторах:

*{}, тело{}

Наконец, мы собираемся добавить наш JavaScript, используя тег script HTML5.

Точно так же, как CSS, в теге, а затем вставьте код дословно. Во многих случаях именно JavaScript делает Codepen уникальным. Обычно JavaScript загружается при загрузке страницы, а это означает, что он не будет мгновенно отображаться на вашем холсте Elementor. Однако, если вы просматриваете страницу в интерфейсе, скорее всего, эффект проявится.

Некоторые распространенные проблемы, с которыми вы можете столкнуться при попытке включить codepen в веб-сайт Elementor, — это конфликт кода. Если есть стили CSS или JavaScript, которые смешиваются с базовым кодом, который составляет вашу тему или стиль веб-сайтов, на внешнем интерфейсе все может выглядеть сломанным.

Убедитесь, что вы не используете селекторы CSS для Codepen, которые также применяются к другим элементам веб-сайта.

Самое приятное в использовании HTML, CSS и JavaScript — это то, что вы можете легко их адаптировать. Итак, если у вас есть конфликт селекторов, просто измените селектор для элемента Codepen. Это относительно просто — просто найдите и замените каждый экземпляр термина.

Этот первый пример был разработан, чтобы показать вам, как включить сложный элемент, найденный в Codepen, непосредственно на веб-сайт Elementor. Как видите, вы можете легко добавлять HTML, CSS и JavaScript с помощью элемента HTML. За считанные секунды вы можете реализовать высококачественный эффект прямо на своем сайте.

Добавление Codepen в Elementor: простой пример кнопки

Как насчет более простого варианта использования, такого как добавление базовой кнопки?

Это уникальный стиль кнопок, который вы больше нигде не найдете. Он состоит из чистой HTML-кнопки и стиля SCSS.

Чтобы установить его, нам сначала нужно преобразовать и скомпилировать CSS. Как упоминалось ранее, просто щелкните раскрывающийся список в правом верхнем углу и выберите «Формат», а затем скомпилируйте CSS.

Этот Codepen импортирует шрифт Google, имеет универсальные эффекты CSS и эффекты CSS для тела. Мы не будем включать эти правила стилей CSS в наше копирование и вставку, поскольку WordPress уже применил их за нас (это означает, что когда дело доходит до копирования CSS, мы начинаем с кнопки).

Просто скопируйте и вставьте HTML и CSS в HTML-элемент Elementor, и все готово.

Вы можете добавить эту кнопку куда угодно!

Добавление Codepen в Elementor: сложный пример

И, как наш последний эффект, давайте добавим уникальную графику на уже существующий сайт Elementor.

Этот Codepen — очень аккуратное 3D-радио (оно воспроизводит музыку, щелкните громкость вверху), созданное с помощью CSS, HTML и JavaScript. Это отличный последний пример того, как вы можете включить зеленый цвет в синий сайт, поскольку HTML отформатирован в PUG, а CSS — в SCSS.

Во-первых, мы собираемся переформатировать HTML в CSS, чтобы его можно было использовать на веб-сайте Elementor.

Для этого мы нажимаем формат HTML, а затем просматриваем скомпилированный HTML. Это преобразует форматирование Pug в прямой HTML, который мы будем использовать в Elementor.

Как видите, в HTML есть раздел заголовка, который позволяет встроить Codepen в собственную страницу. Однако мы уже вставляем его на страницу Elementor, которая поставляется с заголовком, и, чтобы избежать конфликта, мы просто не будем включать этот аспект кода при вставке его в HTML-блок Elementor.

Мы запускаем тот же процесс для CSS, форматируем, а затем компилируем его. Мы собираемся включить сюда все, кроме стиля тела.

Теперь все готово для копирования и вставки непосредственно в элемент HTML на нашем веб-сайте Elementor.

В этом примере мы собираемся включить этот 3D-макет радиоприемника в столбец рядом с некоторым контентом, что, вероятно, должно было бы быть включено в рабочую версию сайта. Во-первых, мы добавляем новый раздел и устанавливаем позицию столбца на растяжение. Этот новый раздел имеет минимальную высоту 400 пикселей.

В одну из колонок добавляется заголовок в текстовом виде, а в другую добавляется HTML-блок.

Как и в предыдущих двух примерах, мы просто копируем и вставляем HTML, CSS и JavaScript прямо в этот блок HTML.

Нам пришлось адаптировать часть кода из тега body в div под названием #radio-wrap. Кроме того, имейте в виду, что вам нужно возиться как со стилем раздела Elementor, так и со столбцом, содержащим HTML, а также со стилем CSS из Codepen.

Например, мы используем позиционирование столбца из собственного интерфейса Elementor, чтобы поместить наше HTML-радио прямо в центр столбца. Мы также устанавливаем фон столбца так, чтобы он отражал фон Созависимости, вместо того, чтобы делать это с помощью пользовательского CSS.

Используя как CSS, включенный в панель кода, так и стили в разделах Elementor, которые окружают элемент HTML, вы можете лучше вписать Codepen в свой сайт Elementor.

Заключительные мысли

Эта статья предназначена для введения в действие стороннего кода на веб-сайте Elementor. В WordPress есть много способов сделать это, и в большинстве случаев альтернативные методы могут привести к лучшей производительности и интеграции с сайтом.

Однако, если вы ищете быстрый и простой способ добавить Codepen на веб-сайт Elementor и ничего не понимаете в коде, это, вероятно, самый простой способ сделать это.

Чтобы просмотреть:

1. Добавьте элемент html на свой сайт
2. Скомпилируйте код Codepen
3. Скопируйте только тот код, который применяется к элементу (поэтому стили тела css отсутствуют).
   1. В то же время вам может понадобиться обернуть элемент в div и применить некоторые из стилей тела таким образом.
4. Вставьте его в виджет html Elementor:
   1. HTML вставляется напрямую
   2. CSS вставляется в тег STYLE
   3. JS вставляется в тег SCRIPT
5. Протестируйте внешний интерфейс, чтобы убедиться, что элемент был успешно добавлен на ваш сайт.

Во многих случаях было бы лучше добавить JavaScript в HEAD вашего веб-сайта WordPress, особенно если он будет использоваться более чем на одной странице.

CSS можно добавить глобально с помощью таких инструментов, как YellowPencil или CSSHero:

https://isotropic.co/yellowpencil-and-elementor-redundant-or-genius/

https://isotropic.co/csshero-and-elementor-powerful-custom-css/

Мы надеемся, что эта статья помогла вам добавить элемент Codepen непосредственно на веб-сайт Elementor. Если у вас есть какие-либо вопросы о том, как это сделать, обращайтесь в наш раздел комментариев.