Как использовать элемент кода для вставки в Weebly?

«Код для вставки» – один из важных элементов редактора сайта Weebly, относящийся к категории «Базовый». Он используется для встраивания любого кода HTML, CSS или JavaScript для добавления дополнительных функций на ваш сайт, таких как подписка на информационный бюллетень, призыв к действию, настраиваемые кнопки и т. Д. Существует несколько способов использования элемента встроенного кода, и всем пользователям Weebly необходимо понимать, чтобы сайт загружался быстро.

Компоненты функций

Для добавления новых функций или изменения существующей функции необходимы три компонента:

Некоторые виджеты могут иметь только HTML-код, в то время как другим функциям может потребоваться сложный CSS и JavaScript. Поскольку Weebly использует редактор сайта WYSIWYG, вы можете увидеть результат внедрения кодов HTML / CSS в редактор, не публикуя сайт.

Использование автономного элемента кода внедрения

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

Не рекомендуется использовать отдельный элемент кода для встраивания, если у вас есть сценарии и более крупные коды CSS.

Функции уровня страницы

Вставка огромного количества кода внутрь элемента встроенного кода резко снизит скорость загрузки страницы. Также функциональность может работать не так, как ожидалось, поскольку все части кода помещаются внутри тела HTML-страницы. Настоятельно рекомендуется размещать код следующим образом:

  • HTML-коды внутри тела страницы с использованием элемента встроенного кода
  • CSS в заголовок страницы, используя раздел «Код заголовка» страницы.
  • Скрипты непосредственно перед закрытием тела с использованием раздела «Код нижнего колонтитула» страницы

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

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

Функции на уровне сайта

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

  • Вставьте CSS и скрипты в раздел кода верхнего и нижнего колонтитула настроек сайта соответственно.
  • Вставьте CSS в файл «main_style.css» или загрузите файлы CSS и свяжите их в разделе кода заголовка настроек сайта.
  • Загрузите файлы сценариев и свяжите их в разделе кода нижнего колонтитула настроек сайта.
Редактор сайта Weebly выполнит код, вставленный в файл «main_style.css», на экране, но загруженные скрипты не будут работать в редакторе. Вам необходимо опубликовать страницу, чтобы увидеть результат работы кода.

Полная структура страницы

Структура страницы должна быть такой, как показано ниже, для быстрой загрузки, поэтому вставьте коды, как описано выше, в соответствующие места.

<html>
<head>
Linked external CSS under header code section uploaded in code editor
Embed CSS within <style>…</style> tags
</head>
<body>
.
.
.
Embed HTML code using embed code element.
.
.
.
Linked external scripts under footer code section uploaded in code editor
Embed scripts using <script>…</script> tags.
</body>
</html>

Параметры настройки для элемента встроенного кода

Нажав на элемент кода внедрения, вы увидите только один вариант размещения, как показано ниже.

Элемент кода Weebly Embed

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

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

Хотя встроенный элемент кода предлагает неограниченные возможности, его активное использование на вашем сайте Weebly сопряжено с определенными рисками.

  • Иногда это может повлиять на другие функции Weebly по умолчанию. Как правило, скрипты jQuery могут конфликтовать с другими скриптами по умолчанию на Weebly.
  • Служба поддержки Weebly не поможет решить проблемы, вызванные встроенным на ваш сайт пользовательским кодом, поскольку устранение неполадок проводится в большом объеме.
  • Каждый фрагмент встроенного кода на вашем сайте напрямую влияет на скорость загрузки страницы. Это, в свою очередь, повлияет на рейтинг в поисковых системах и взаимодействие с пользователем.

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

Элемент «Код внедрения» ранее назывался элементом «Пользовательский HTML».

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *