Webflow позволяет дизайнерам создавать собственные веб-сайты без написания кода. Тем не менее, пользовательский код помогает добавить дополнительный слой полировки на ваш сайт. Крошечные вкрапления кода могут создать разницу между хорошим и исключительным сайтом. Если вы сведете пользовательский код к минимуму и будете следовать рекомендациям, то преимущества явно перевешивают риски.

Обратите внимание, что для использования пользовательского кода в Webflow требуется платная учетная запись или платный план сайта.

Что такое пользовательский код в Webflow?

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

Типы пользовательского кода, доступные в Webflow, включают:

  1. HTML (язык гипертекстовой разметки) — представление структуры контента вашего веб-сайта, например абзацев, изображений, ссылок, разделов и т. д.
  2. CSS (каскадные таблицы стилей) — определение того, как будет выглядеть веб-сайт, например, цвета, интервалы, шрифты, фон, макет и т. д.
  3. JavaScript — управление поведением вашего веб-сайта, например открытие всплывающего окна, изменение содержимого или стиля в ответ на действия пользователя, проверка контактной формы, получение данных с сервера и т. д.

Как добавить собственный код в Webflow?

1. Через настройки проекта

Вы можете получить доступ к настройкам проекта с помощью гамбургер-меню в верхнем левом углу. Затем перейдите на вкладку Пользовательский код.

Настройки проекта предлагают два слота для вашего пользовательского кода — в конце элемента <head> и в конце элемента <body>:

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

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

2. Через настройки страницы

Вы можете получить доступ к настройкам страницы, щелкнув значок шестеренки выбранной страницы. Затем перейдите к разделу «Пользовательский код» в нижней части панели настроек.

Настройки страницы предлагают те же слоты <head> и <body>, что и настройки проекта:

Пользовательский код, добавленный в настройки страницы, повлияет только на одну страницу вашего веб-сайта.

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

3. Как HTML-вставка

Вы можете найти элемент HTML Embed в нижней части панели «Добавить».

Использование HTML Embed дает вам полный контроль над тем, в какое место будет добавлен пользовательский код.

Вам не нужно публиковать свой сайт — пользовательские HTML и CSS, добавленные как HTML Embed, будут сразу же видны в Дизайнере! Однако вам все равно нужно опубликовать свой сайт, чтобы увидеть эффекты пользовательского JavaScript.

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

Где размещать каждый пользовательский тип кода?

1. HTML

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

Обратите внимание, что такая интеграция иногда требует объединения небольшого количества HTML, CSS и JavaScript.

Код HTML должен быть добавлен как HTML Embed.

2. CSS

Пользовательский CSS позволяет добавлять на веб-сайт стили, официально не поддерживаемые Webflow, такие как размытый прозрачный фон, обрезание многострочного текста многоточием и т. д.

Это также дает вам доступ к расширенным селекторам, например. нацеливание на все нечетные дочерние элементы элемента, чтобы добавить полосу зебры в таблицу (дополнительную информацию о CSS-селекторах можно найти на MDN).

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

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

Обратите внимание, что размещение CSS внутри HTML Embed технически противоречит веб-стандартам, но веб-браузеры довольны этим (подробнее).

В качестве альтернативы, если вам не нужно видеть предварительный просмотр в Designer, вы можете поместить свой CSS в слот Project Settings <head>.

Наконец, не забывайте всегда оборачивать код CSS внутри элемента <style>:

<style>
  ... your CSS ...
</style>

3. JavaScript

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

Место по умолчанию для вашего пользовательского JavaScript находится в конце слота Project Settings <body>.

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

Иногда вы можете захотеть, чтобы ваш JavaScript был выполнен до отображения страницы, например. инициализация аналитики. В таких случаях поместите код в слот Project Settings <head>.

Наконец, не забывайте всегда оборачивать код JavaScript внутри элемента <script>:

<script>
  ... your JavaScript ...
</script>

Спасибо за прочтение, надеюсь, вам понравилось! Дополнительные советы по кодированию Webflow для дизайнеров см. на Webflow Sprinkles (ссылка).