Landing page генератор как поменять фон страницы: Изменение цвета шрифта и фона при выделении текста на странице

Лучшие шаблоны WordPress для Landing Page — 20+ тем

Сегодня, на ряду с популярностью создание сайтов на WordPress, большим спросом пользуются так называемые одностраничники (Landing Page) или посадочные страницы, и на это есть свои причины. Как пример, у них есть множество преимуществ, особенно если сравнивать их с одним сайтом. И самое яркое преимущество заключается в том, что на одностраничнике пользователь будет акцентировать свое внимание на одной идее и одном товаре. Это дает возможность пользователю ни на что не отвлекаться и изучать предложение. Поэтому мы решили отобрать лучшие темы и шаблоны WordPress для Landing Page.

Использование готовых шаблонов позволит ускорить процесс создания Landing Page и избавит от необходимости разбираться в коде. А WordPress позволит легко управлять сайтом и при необходимости быстро вносить нужные изменения, например менять цены или срок проведения акций. Главное, чтобы шаблон соответствовал требованиям технического задания. Вот несколько примеров типовых техзаданий.

Реклама: 2VtzqvSTRwm

Это интересно: Продающая структура лендинга

Ознакомьтесь с нашей подборкой, в которой представлены лучшие на наш взгляд шаблоны WordPress для Landing Page. Изучите возможности и функциональность, и выберите тот шаблон, который подходит для решения ваших задач.

1. Jupiter.

Это одновременно простой и гибкий шаблон, если дело касается настроек. Внутри него есть свыше 150 различных скинов под любое направление скинов и 18 вариантов оформления заголовка. Также шаблон отличается удобной панелью администратора, поэтому разобраться с тонкостями настройки можно будет даже новичку. Шаблон полностью адаптирован для работы с SEO.

2. Brooklyn.

В шаблоне под названием Brooklyn свыше 32 различных демо-скинов всевозможных тематик. Среди особенностей можно отметить современную стилистику категорий и страниц, отличные сочетания изображений и шрифтов, а также общий визуально приятный вид. Шаблон адаптивен, поэтому одинаково хорошо смотрится на любом устройстве.

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

3. Uncode.

Это легкий и приятный шаблон с отличными интерфейсом и типографикой. Более того, шаблон Uncode является номинантом и победителем нескольких рейтингов и конкурсов, среди которых можно отметить такие, как Awards. Тема включает в себе множество уже готовых страниц Landing Page, на которых вам останется только поменять картинки и текст. Как сам сайт, так и изображения адаптируются под различные устройства. Приятным бонусом будет, качественная и многофункциональная настройка сайта.

4. H-code.

H-code – это достаточно новый шаблон, однако он уже успел «засветиться» и показать себя с хорошей стороны. В частности, это свыше 50 готовых посадочных страниц (можно сделать из H-code многостраничник, лендинг, портфолио, блог, корпоративный сайт и еще несколько других вариантов сайта). На каждую из этих тематик есть по 3-12 различных скинов.

Помимо аккуратного стиля и визуальной красоты и эстетики, шаблон также отличается простотой имеющихся в неограниченном количестве элементов и виджетов, а также пристальным внимание к деталям. В комплекте с шаблоном идёт Revolution Slider, Visual Composer и готовые страницы для WooCommerce.

5. Cosonix.

В шаблоне под названием Cosonix каждый имеет право настроить сайт под свои личные или корпоративные потребности – шаблон способен превратиться во все, во что необходимо. К примеру, это может быть личный сайт, интернет-магазин или подписная страница для сбора базы e-mail рассылок.

Шаблон Cosonix интегрируется с MailChimp (сервис для e-mail маркетинга). Формы MailChimp уже установлены в тему и не требует дополнительных действий. При помощи Cosonix можно создавать оригинальные одностраничные сайты.

6. Kapital.

Шаблон под названием Kapital состоит из 6 различных демо-версий однастраничников, начиная от женских тематик и заканчивая вариантами для бизнеса. Шаблон Kapital является адаптивным, что отвечает современным тенденциям веб-разработки. Это объясняется тем, что при его разработке была использована система сетки из 12 колонок. По этой причине сайт всегда будет выглядеть стильно и красиво, вне зависимости от устройства и диагонали.

Шаблон способен поразить пользователей своими необычными паралакс-эффектами и видеофоном. Помимо этого, в арсенале Kapital всегда есть свыше 45+ различных шорткодов.

Отдельно стоит отметить и удобный в использовании редактор drag and drop, который понравится пользователям в процессе создании Landing Pages.

7. Scalia.

Шаблон под названием Scalia – это отличное и едва ли не идеальное решение для бизнесменов и просто деловых людей. Знающие люди смогут увидеть, что сайт был создан и проработан с повышенным вниманием к деталям, в результате чего у шаблона есть множество настраиваемых элементов.

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

К другим особенностям можно отнести диаграммы, поля для текста, строки и поля с информацией о проекте, а также команды, данные с контактами и множество других различных элементов. В целом же у шаблона Scalia свыше 150+ различных вариантов оформления, поэтому каждый сможет найти себе что-нибудь по душе.

В дополнение к этому шаблону вы получите такие плагины, как WPML, Woo Commerce, Layer_Slider и другие. Все бонусные плагины в сумме стоят 50 долларов, однако при покупке шаблоны их можно получить совершенно бесплатно.

8. Miracle.

Шаблон под названием Miracle можно называть одновременно и креативным, и аккуратным. Одностраничники, создаваемые с помощью этого шаблона, можно адаптировать практические под все возможные идеи. При приобретении этого шаблона Miracle можно отбить и получить его стоимость в виде нескольких достаточно значимых и полезных бонусов, которые идут в комплекте. К этим бонусам относятся такие, как slider revolution, visual compressor и другие.

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

9. Native.

Native не зря называют мощным по сравнению с аналогами. Часто этот шаблон применяют для раскрутки стартапов или презентации b2b сервисов. Шаблон Native включает в себя 14 настраиваемых заголовка, адаптивную вёрстку, встроенный конструктор и более 60 шорткодов.

Имеющиеся документационные и видео материалы позволят в кратчайшие сроки изучить сайт, его особенности и основные рабочие моменты. В подарок к темплейту дается несколько плагинов, среди которых есть Slider Revolution, Visual Composer и несколько других.

10.

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

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

11. Salient.

Шаблон под названием Salient — это универсальная тема с грамотно созданным, отзывчивым внешнем видом. Ее чаще других выбирают, если нужно сделать сайт-одностраничник. Здесь есть такие моменты, как parallax-эффекты, а также премиум-типографика и несколько других особенностей, помогающих усилить положительное впечатление от просмотра и изучения вашего Landing Page.

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

12. TheGem.

Еще один современный шаблон для сайтов – это шаблон под названием TheGem. Есть SEO-оптимизация и отзывчивая раскладка. Шаблон отличается быстрой загрузкой, небольшим весом и продуманным UX. Все это идет на пользу общей производительности шаблона. Дизайнерские элементы настраиваются и обновляются с помощью такого плагина, как Visual Composer.

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

13. Marketing Pro.

Этот шаблон под названием Marketing Pro, создавался для обеспечения высокой конверсии, быстрого SEO-продвижения и презентационного маркетинга. Любая дефаултная страница в шаблоне создана по технологии марктинг-кит, что гарантирует высокие продажи с сайта.

14. Jevelin.

Шаблон под названием Jevelin – это еще один шаблон с полностью адаптивным дизайном, который облегчит процесс создания сайта-одностраничника на CMS WP. Используемые в шаблоне темы помогают запустить создаваемый проект в рекордно короткие сроки.

За счет богатого количества различных инструментов и настроек, среди которых есть 9 хедеров, 40 элементов и множество других элементов, через Jevelin можно создавать уникальные сайты-одностраничники.

15. Kalium.

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

16. Navy.

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

17. Inbound.

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

Дизайнерскую настройку сайта, создаваемого по шаблону Inbound, можно выполнять при помощи специального визуального генератора. Этот генератор создает посадочные страницы, с блоком выгод для клиентов и называется он Landing Page Builder.

Темплей тоже дает возможность выделять каждый из продвигаемых элементов в свой небольшой раздел в рамках формата лэндинга на сайте.

18. One.

One – это креативная и интересная тема, при помощи которой можно создавать крутые Лендинги, в которых внимание акцентируется на создании и продвижении различных материалов и продуктов.

Фронтенд для One был произведен на bootstrap версии №3, а также на html5, поэтому к нему могут быть интегрированы такие элементы и плагины, как Contact Form 7.

19. Total.

Шаблон Total – это то, что подходим практически под любые рабочие категории сайтов-одностраничников. В процессе создания интернет-страниц на этом сайте используются такие средства, инструменты и фишки, как перетаскивание, различные схемы цветов и оттенков, а также кастомизация и оригинальные слайдеры. Среди нескольких доступных демо-сайтов для этого шаблона доступны 11 проектов из различных сфер и областей человеческой и общественной деятельности.

20. Stockholm.

Stockholm – это одна из тех тем, которая входит в список 30 самых продающихся и коммерчески успешных шаблонов класса премиум для CMS WordPress. В процессе работы с этим шаблоном и темой можно использовать любые цветовые схемы как для некоторых отдельных компонентов, так и для всего сайта в целом.

В библиотеке есть свыше 600 шрифтов Google, возможность комбинирования опций и блоков из нескольких сайтов, представленных в демоверсии.

21. Ronneby.

Шаблон Ronneby отличается производительностью и богатством опций. В темплейте есть несколько плагинов премиум-класса для создания приземляющих страничек на базе CMS WordPress. Шаблон был создан с учетом мнений и пожеланий пользователей, поэтому на любой ответ всегда есть вопрос, а внутри сайта – файлы локализации и перевода.

Добавьте страницу в закладки, чтобы не потерять лучшие шаблоны WordPress для Landing Page, а также делитесь в комментариях названием темы, которую выберите.

Полезные ссылки:

• ТОП-10 конструкторов сайтов
• Как сделать кликабельный номер телефона на сайте
• 10 лучших курсов по созданию сайтов

Как самому быстро сделать крутой лэндинг? Обзор онлайн конструктора landing page

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

Недавно в интернет я набрел на интересный сервис, который «заточен» не на создание информационных сайтов или интернет-магазинов, как таковых, а на создание лендингов, т. е. посадочных страниц.

При разработке landing page ставятся совершенно иные цели и задачи, а именно: красиво преподнести информация о товаре, услуге или компании, заинтересовать посетителя и получить от него контактные данные либо оплату. Иными словами, хорошая посадочная страница должна максимально эффективно конвертировать посетителя в клиента (покупателя).

1. Создание лендинга
2. Скачивание проекта
3. Размещение на хостинге
4. Итог

QODA.SITE является онлайн конструктором лэндингов, при помощи которого вы можете сами, абсолютно с нуля за считанные минуты создать крутую посадочную страницу, и при этом не требуется никакого программирования и знания кода. Всё очень просто:

1. создаете,
2. скачиваете,
3. размещаете на хостинге.

Видео с обзором сервиса:

Создание лендинга

Сразу после регистрации на сайте конструктора вам будет предложено выбрать один из шаблонов оформления landing page:

Я насчитал 12 уникальных шаблонов, каждый из которых имеет дизайн, соответствующий какой-то тематике: ремонт квартир, мебель на заказ, услуги фотографа, барбершоп, ведущий торжеств и пр.

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

Например, для того, чтобы изменить какой-то текст, надо кликнуть на имеющуюся заготовку («рыбу») и просто начать ввод текста с клавиатуры.

Ну а что делать, если в нужном месте шаблона нет текстовой заготовки, а вы хотите разместить пару предложений о своей компании или услугах именно там? В этом случае нажимайте на иконку с изображением пазла в левой части экрана, после чего откроется панель виджетов. Выбирайте виджет «Текст», перетаскивайте его в нужное место шаблона и после этого набирайте текст на клавиатуре.

Точно таким же образом в любое место лендинга можно произвольно добавлять:

• Картинки
• Логотипы
• Формы
• Кнопки действия и кнопки социальных сетей
• Видео
• Заголовки
• Счетчики
• Пробелы

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

При работе с изображениями вы можете загружать в конструктор свои собственные либо выбирать из имеющейся базы бесплатных изображений:

В верхней части экрана есть кнопки, при помощи которых можно:

• Перейти к выбору шаблона
• Определить общий стиль оформления заголовка, подзаголовка и текста
• Задать email, куда будут поступать заявки от клиентов, прописать SEO-теги для страницы
• Сделать предварительный просмотр лендинга на экране ПК и мобильного устройства
• Сохранить проект

Скачивание проекта

QODA. SITE имеет следующую специфику: создавать, настраивать и сохранять проект лендинга можно совершенно бесплатно.

Однако для выгрузки кода и исходных файлов понадобится выбрать один из тарифных планов:

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

Для пользователя, которому нужен одна единственная посадочная страница, использование QODA.SITE вряд ли будет целесообразным. Гораздо проще и дешевле, наверное, будет заказать её создание на одной из фриланс-бирж.

Размещение на хостинге

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

Итог

При помощи сервиса QODA. SITE вы можете создавать на базе готовых шаблонов отличные лендинги, которые будут адаптированы к мобильным устройствам, сео-оптимизированы для продвижения, иметь высокую скорость загрузки. Благодарю наличию удобного визуального редактора, для освоения сервиса не требуется знания программирования.

4 полезных приема для работы с конструктором целевых страниц MCAE (Pardot)

28 июня 2022 г.

Marketing Cloud Account Engagement (платформа, ранее известная как Pardot) и приложение Lightning зимой 2022 года.

Я придумал способ легко обучить людей, которые не умеют писать код. Я думал, что смогу делегировать больше ответственности. Я мог бы предоставлять шаблоны целевых страниц командам, и они не могли бы изменять определенные части шаблонов; и все стандарты бренда останутся неизменными НАВСЕГДА! Проектирование между мобильным и настольным компьютером было бы проще простого. Наивный? Да.

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

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

В этой статье я упомяну три компонента:

• Вкладка Настройки позволяет получить доступ к блокам кода верхнего и нижнего колонтитула целевой страницы.
• Компонент Rich Text предоставляет доступ к исходному коду.
• Компонент HTML позволяет вставлять собственный код.

Компоненты HTML и Rich Text в списке компонентов

Вкладка «Настройки»

1.

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

Чтобы избежать этого препятствия, мы можем использовать компонент Rich Text в качестве обходного пути для установки ширины изображения:

1. Перетащите компонент Rich Text.
2. Щелкните значок Добавить изображение.
3. Используйте исходный код, чтобы установить конкретную ширину изображения, в отличие от значения по умолчанию, равного 100%.

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

Примечание : Если вы замените это изображение после редактирования исходного кода, исходный код по умолчанию вернется к 100%. Ваша команда должна знать, что нельзя редактировать этот раздел вашего шаблона, или должна быть обучена редактированию исходного кода. Используйте это и в конструкторе писем!

Варианты использования:

• Поддержание единообразия значков социальных сетей.
• Сохранение логотипов в шапке статичными.

2. Настройка шаблонов для мобильных устройств и настольных компьютеров

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

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

1. Добавьте в строку два компонента Rich Text и добавьте логотип из CMS.
2. Установите ширину 300 пикселей для обоих изображений. Один из блоков будет центрирован.

3. Сохраните и перейдите в «Настройки», чтобы получить доступ к заголовку.
4. Теперь добавьте следующий CSS в текстовое поле «Введите код», как показано на рисунке, чтобы произошло волшебство.

 
<стиль>

.desktop_hide {

дисплей: нет

}

@media (максимальная ширина: 768 пикселей) {

.desktop_hide {

дисплей: блок!важно

}



.mobile_hide {

дисплей: нет

}


 
 

5. Сохраните код заголовка страницы.
6. Вернитесь в редактор и добавьте атрибуты в исходный код соответствующего блока Rich Text.

Та-да. Вы также можете использовать этот трюк, чтобы скрывать и показывать пользовательские блоки HTML!

Варианты использования:

• Переключение между навигациями, разработанными для каждого окна просмотра (например, меню-гамбургер и традиционная навигация).
• Переключение между размерами изображения заголовка или дизайном для каждого окна просмотра.

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

3. Использование разных цветов для столбцов и строк

Еще одной проблемой является установка цветов столбцов, отличных от цвета строк. В настоящее время нет способа сделать это с помощью конструктора целевых страниц, но вы можете сделать это, изменив исходный код в компоненте Rich Text.

С помощью этого трюка возможен расклад, подобный этому, с тремя картами. В этом примере цвет строки — белый, а цвет столбца — светло-серый (F0F0F0):

1. Установите цвет строки на вкладке «Стиль» редактора.
2. Разместите столбцы, а затем добавьте компоненты форматированного текста в каждый столбец.
3. Добавьте стилизованный
   вокруг

   и

   для достижения желаемого результата. Затем исходный код компонента Rich Text будет отредактирован следующим образом:

Примечание : Конечный пользователь может удалить

. Убедитесь, что ваши коллеги прошли надлежащее обучение на случай, если это произойдет при использовании вашего шаблона.

4. Стилизация компонента формы Pardot

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

Во-первых, вам нужен CSS для оформления формы Pardot. Для справки, вот отличная статья от Jenna Molby, в которой рассказывается о CSS-фреймворке и примерах Pardot Form. Для тех, кто не занимается кодированием, у Дженны также есть этот удивительный генератор стилей форм Pardot. В любом случае вам нужно стилизовать форму с помощью CSS.

Вот в чем хитрость. При создании формы нельзя полагаться на стили, выбранные на вкладке Внешний вид > Стили.

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

Мы используем стиль при создании формы, но на вкладке Внешний вид > Над формой (в частности, в исходном коде). Здесь вы можете вставить свой CSS для своей более индивидуальной формы, которая будет следовать за вашей формой в конструкторе. Опять же, мне было проще использовать конструктор для выбора цвета фона формы и положения формы.

Примечание . Если вы решите использовать этот метод, важно научить своих коллег, когда и где редактировать стили форм.

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

Если вам нужны дополнительные советы и рекомендации Pardot, ознакомьтесь с этой статьей об отчетах по Engagement Studios в Salesforce или этой статье об оценке интересов и создании динамических списков.

---

Леанна Капель , Архитектор реализации, является сертифицированным специалистом и консультантом Pardot с большим опытом работы над тем, что выглядит как магия, но на самом деле это просто закулисный навык. Она использовала свои способности внедрения во многих отраслях, включая B2B, B2C, некоммерческие организации и производство. Ей особенно нравится планировать и создавать интеграции между MCAE (Pardot) и неродными платформами.

Просмотры сообщений: 1760

Как создать индивидуальную целевую страницу за 3 шага — Incandescent Creative ✺ брендинг, дизайн + веб-сайты

Squarespace

21 мая

Автор Anika Samples

Прежде всего: что такое целевая страница?

Целевая страница – это простая веб-страница, которая предлагает вашим посетителям что-то ценное (лид-магнит, например электронную книгу, контрольный список и т.

 д.) в обмен на их информацию (как минимум, их адрес электронной почты).

Целевые страницы — важный инструмент для расширения списка адресов электронной почты.

Существует несколько способов создания целевых страниц, например с помощью поставщика услуг электронного маркетинга (Flodesk, ConvertKit, MailChimp и т. д.) или с помощью конструктора целевых страниц, например LeadPages. Тем не менее, LeadPages стоит от 25 долларов в месяц, а инструменты электронного маркетинга имеют ограниченные варианты макетов и стилей. Итак…

Вот тут-то и появляется Squarespace!

Если у вас есть веб-сайт Squarespace, вы можете легко создавать простые настраиваемые целевые страницы совершенно бесплатно. (Под бесплатным я подразумеваю, что он включен в ваш план SS.) И они уже будут соответствовать дизайну вашего сайта. Беспроигрышный.

Но, подождите…

У Squarespace есть опция для титульных страниц (их версия целевой страницы), так зачем вам создавать пользовательскую целевую страницу?

Титульные страницы не позволяют встраивать формы из вашей маркетинговой платформы электронной почты. У вас есть только возможность связать кнопку или добавить форму Squarespace. И если вы используете программное обеспечение электронной почты, отличное от MailChimp, вам нужно создать окольный способ отправки информации о подписчике в ваш список. *Кью грустный тромбон*  

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

Готовы создать свою целевую страницу?

Все, что вам нужно, это учетная запись Squarespace и несколько фрагментов кода — пусть это вас не пугает. Я дам вам точный код, который вам нужен, и скажу, куда его вставить. Все, что вам нужно сделать, это скопировать и вставить!

Примечание: это руководство было создано для Squarespace 7.0 и может не работать для всех тем.

Вот как взломать пользовательскую целевую страницу в Squarespace

1) Создайте новую страницу

Войдите в свою учетную запись Squarespace и нажмите «Страницы». новая страница, которая не будет отображаться в вашей навигации. (Вы всегда можете перетащить его в свою навигацию, если хотите, чтобы он отображался позже.) Выберите «Страница».

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

2) Создайте страницу с блоками контента

Начните создавать целевую страницу, добавляя блоки контента и вводя текст и изображения.

Чтобы добавить форму от вашего поставщика услуг электронной почты (ESP), такого как MailChimp или Flodesk, сначала создайте форму в своем ESP, а затем скопируйте код для встраивания.

Затем добавьте блок кода на целевую страницу Squarespace и вставьте в него код для встраивания.

Вот так:

Чтобы разместить форму по центру страницы, просто добавьте

перед кодом встраивания и после кода встраивания.

Нажмите «Применить».

Примечание: Squarespace отключает предварительный просмотр встроенного кода, когда вы вошли в систему и редактируете свой веб-сайт. Чтобы увидеть, как выглядит ваша форма, просто сохраните свою целевую страницу и перейдите на страницу в другой вкладке или окне, введя свое доменное имя/имя целевой страницы (например, www.mydomain.com/freebie).

3) Удалите верхний и нижний колонтитулы

Лучшей практикой для целевых страниц является удаление всего, что может отвлечь вашего зрителя от цели страницы. Это включает в себя удаление меню навигации, областей нижнего колонтитула и панелей объявлений (если они включены на вашем сайте).

Для этого вам понадобится небольшой код:

 
 
<стиль>
   #нижний колонтитул, #преднижний колонтитул {
     дисплей: нет;
   }


<стиль>
   #header {отображение: нет}
   #siteWrapper {цвет фона: # f6f7f9!важный;}
 

<стиль>
   .sqs-объявление-бар {
   отображение: нет !важно
   }
  
 

Скопируйте приведенный выше код, а затем перейдите в меню «Настройки» своей целевой страницы, щелкнув значок шестеренки рядом со своей страницей в меню слева, или сохраните свою страницу и выберите «Настройки» в меню. Параметры содержимого страницы.

В открытом меню «Настройки» нажмите «Дополнительно» и вставьте код в поле «Вставка кода заголовка страницы». Нажмите «Сохранить».

Примечание. Чтобы изменить цвет фона целевой страницы, введите шестизначный шестнадцатеричный код нужного цвета в том месте, где он говорит «цвет фона: #f6f7f9».

Отказ от ответственности: этот код может работать не со всеми темами Squarespace. Я использую тему Брайанта. Должны работать любые темы в семействе Бедфордов, в том числе темы Аня, Бедфорд, Брайант и Хейден. Если это не работает с темой вашего сайта, попробуйте найти на форуме SS «код для удаления верхнего и нижнего колонтитула с названием вашей темы».

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

Вот так:

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

No related posts.