Пользовательские CSS для landing page в ClickDimensions

Екатерина Козлова

Подпишитесь, чтобы получать новые статьи

  • Это поле используется для проверочных целей, его следует оставить без изменений.

Хотите расширить возможности создания landing page или использовать шаблон страницы, подключить к ней собственный CSS? Сегодня мы пошагово расскажем, как это делать.

Пожалуй, редактор Block для создания landing page в ClickDimensions подойдет для создания страниц «с нуля», но маркетологи могут нуждаться в использовании готового или шаблонного дизайна целевой страницы. В этом случае редактор FreeStyle поможет подключить свой собственный HTML и CSS на создаваемой микро-странице, посвященной, например, какой-то акции или мероприятию.

Допустим, у вас есть готовая таблица стилей CSS, само собой, вы не захотите переносить все вручную, копируя и вставляя его в заголовок между тегами <style>. Но вы можете включить свои стили в таблицу стилей своего HTML, используя тег <link>. Если вы решите пойти по этому пути, необязательно размещать ваши файлы CSS где-то снаружи, можно использовать диспетчер документов ClickDimensions для их хранения.

 Чтобы сделать это, вам понадобятся:

  • HTML вашей landing page, которые надо будет скопировать и вставить в редактор FreeStyle;
  • Ваш CSS-файл сохранен и готов к загрузке в диспетчер документов;
  • Созданная landing page с выбранным редактором FreeStyle для дальнейшей настройки в ClickDimensions.

Сначала создадим в разделе Web-контент ClickDimensions нашу landing page, настроив следующие параметры до сохранения:

Создание landing page в системе

После того, как вы сохранили запись, необходимо открыть дизайнер и в открывшемся окне редактора перейдите в меню «Source» и вставьте свой HTML:

меню «Source»

Обратите внимание: внутри тега <head> есть тег <link>, который выглядит так:

“<link href=”assets/css/main.css” rel=”stylesheet” />”

Затем вам нужно будет загрузить свой файл CSS в диспетчер документов, а после загрузки обновить этот тег, чтобы ссылаться на новое местоположение файла CSS. Самый простой способ – разместить ссылку на загруженный файл на странице временно. Нажмите еще раз кнопку Source и перейдите в режим редактирования. Нажмите кнопку настройки гиперссылки. Перейдите в открывшемся окне на вкладку FILE:

Вкладка File

Затем выберите «Загрузить файл»:

Загрузка файла в диспетчере файлов

Как только ваш файл CSS будет загружен, он должен отобразиться вместе с другими документами в соответствующей папке и нажмите кнопку вставки ссылки:

Загруженный CSS-файл

После вставки на страницу ссылки на CSS-файл вернитесь к представлению «Source», укажите в атрибуте href только что созданную ссылку (тег <a>). Затем вставьте это в атрибут href тега <link>, вызывающего стили CSS:

Внесение правок в код HTML

После копирования и вставки URL-адреса удалите ссылку, которую добавили ранее на страницу. Тег <link> должен выглядеть примерно так:

<link href=”https://app.clickdimensions.com/blob/clickdimesionscom-ajvpp/files/main.css” rel=”stylesheet” />

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

Предпросмотр после измененийЕсли необходимо посмотреть в полном размере и вне редактора landing page, сохраните ее и нажмите кнопку «Embed», выберите «Вставить как ссылку» и перейдите по ссылке:

Публикация страницы, переход по ссылке

Все готово, можно публиковать, использовать в email-рассылках и для других нужд маркетинга. Также стоит отметить, что вы можете использовать этот метод несколько раз на одном и том же микро-сайте, поэтому, если у вас верстка с сеткой, которую вы используете, и набор стандартных стилей компании, которые существуют в разных CSS-файлах, вы можете вставить оба эти файла, используя два отдельных <link>.

Читайте также нашу  статью о добавлении собственного favicon для создаваемой landing page!

#CSS#Landing page#Web-контент#Настройки#Сайт