HTML

Расширенные настройки для продвинутых пользователей

ПОСТЫ ЭТОЙ РУБРИКИ


Как синхронизировать секции нескольких лендингов?

Как сделать одинаковую секцию на нескольких лендингах сразу и не копировать вручную, если надо её изменить? Например, сделать везде общую шапку.

У нас есть специальный скрипт!

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

Подготовили пошаговую инструкцию и записали видео, как это сделать.

Расширенные настройки иконки

С помощью HTML виджета задаем тонкие настройки иконок.

Если вы еще не знакомы с использованием HTML-виджета, читайте эту статью.

Настраиваем цвет

Добавляем HTML-виджет и устанавливаем иконку с помощью компонента “Настраиваемая иконка”:

  • Создадим компонент с названием icon1
  • Пропишем код <component name="icon1"></component>

  • Добавим переменную color и применим настройку цвета к компоненту. Далее цвет можно будет модифицировать,

Таблица цен с особой версткой

Ещё один пример использования HTML виджета – верстка таблицы цен.

Если вы еще не знакомы с использованием HTML-виджета, читайте эту статью.

Для начала пишем HTML или CSS код самой таблицы. В тех местах, где в дальше будут располагаться виджеты, оставляем шорткоды в формате “[[btn1]]”, “[[btn2]]” и т.д.

Код таблицы на JsFiddle.

Затем переходим в настройки секции во вкладку "Компоненты", удаляем

Как настроить анимацию заголовка при скролле?

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

Если вы еще не знакомы с использованием HTML виджета, вам сюда.

Допустим, у нас есть секция, собранная из виджетов, заголовок которой мы хотим анимировать. Для анимации воспользуемся библиотекой wow.js. Библиотеку нужно подключить к странице. Для этого в настройках страницы в HEAD

Редактируемый текст для HTML виджета

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

Если вы еще не знакомы с использованием HTML виджета, читайте эту статью.

Используем компонент “Редактируемый текст” для HTML виджета.

Создадим три компонента с названием: “txt1”, “txt2”, “txt3”. Пропишем созданные переменные в код HTML вместо обычного текста, например вместо заголовков

HTML виджет

Что такое HTML-виджет и как его использовать?

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

HTML-виджет позволяет изменять компоненты Платформы такие как формы, кнопки, счетчики, контейнеры для виджетов, редактируемый текст и использовать переменные внутри вашего html кода. При этом результат совмещения вашего кода с компонентами Платформы можно

Как установить свой шрифт на странице?

Если нужного шрифта нет в стандартном наборе, можно установить его с сайта Google Fonts.

Для этого нам нужен виджет “HTML-код”. Добавляем его на страницу. Переходим в меню “Дублировать” и нажимаем “Импорт”. Вставляем код и нажимаем “Сохранить”.

Код

{"className":"WidgetMetaHtml","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage":{"pack":"bg-tech","file":"//s.platformalp.ru/img/bg-tech/1.jpg","color":[0.55023297764639,