Как создать лендинг страницу: Как и где создать лендинг, одностраничный сайт — Tilda Publishing

Как создать лендинг-страницу на Ucraft

Возможно, вы не знаете точного определения лендинг-страницы, но вы наверняка не раз её видели. Лендинг (или целевая страница) – это веб-страница, созданная специально для маркетинговых и рекламных предложений. Это первая страница, на которую вы заходите, когда переходите по ссылке. Обычно у таких страниц одна цель – конвертировать посетителей в лиды, то есть сделать так, чтобы они отреагировали на ваш CTA (call to action — призыв к действию). Таким призывом может быть, например, заполнение анкеты, покупка товара или услуги, регистрация и так далее. Для сравнения, обычные сайты, как правило, имеют больше целей и их дизайн не создан для преобразования трафика из маркетинговой кампании. 

 

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

Такая страница будет содержать:

 

Единственный фокус – тарифный план

 

Единственный мотив — побудить людей совершить покупку /зарегистрироваться

 

CTA — например, «попробуйте прямо сейчас»

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

 

• Продавать отдельный продукт/услугу
• Получать лиды от пользователей, заполнивших форму
• Просить посетителей связаться с организацией
• Мотивировать пользователей подписаться на что-либо (например, на блог или рассылку)
• Помочь пользователям зарегистрироваться на мероприятие
• Собирать пожертвования для отдельных случаев

Теперь у вас может возникнуть логичный вопрос– почему лендинги так распространены и важны? Ведь маркетологи могут просто разместить кампанию на основном сайте или продвигать через социальные сети, верно? 

 

Дело в том, что целевые страницы намного лучше увеличивают коэффициент конверсии (процент пользователей, которые выполнили необходимое действие) и снижают CPA (cost per acquisition — цена за приобретение),то есть стоимость одного выполненного действия.

 

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

 

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

 

Различные виды лендингов

 

Хотя целевые страницы обычно похожи, они, как правило, различаются по своей природе, дизайну и даже количеству слов — все зависит от вашего предложения и целевой аудитории.

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

 

Лендинг-страница для клика

 

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

Ленгдиг с описанием функций 

 

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

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

 

Лендинг «Скоро» с анонсом чего-либо 

 

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

Лидогенерирующий лендинг

 

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

Продажи и рекламные акции

 

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

Пожертвования/Взносы

 

Помимо продаж, целевые страницы также часто используются в благотворительных целях или для сбора пожертвований. Вы часто увидеть такие страницы в сфере с различных благотворительных организаций или среди предприятий малого бизнеса, которые ищут финансовую поддержку. CTA для целевой страницы пожертвования довольно очевиден — пожертвуйте сейчас! Эти типы страниц — хороший способ собрать деньги для конкретной и/или неотложной задачи. 

Регистрация на мероприятия 

 

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

   

Лендинг платной рекламы 

 

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

Видео-лендинг 

 

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

Лендинг-страница «Спасибо» 

 

Страницы «Спасибо» предназначены для специфичной цели: выразить благодарность своим пользователям.

Тем не менее, вы все равно можете включить CTA, поощряя пользователей совершать дальнейшие покупки или подписываться, по сути, совмещая полезное с приятным. 

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

Заголовок

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

Подзаголовок

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

Описание

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

Визуальное оформление

 

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

Подтверждения качества и популярности

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

Форма для сбора лидов

 

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

Качественный, оптимизированный контент

 

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

 

Еще один фактор, который необходимо учитывать при создании контента для вашей целевой страницы, — это SEO (поисковая оптимизация). Поисковые системы также имеют важное значение, когда речь идет о привлечении трафика на вашу страницу и увеличении конверсий. Вы ведь хотите, чтобы ваше предложение отображалось на верхних позициях поисковиков. Для этого необходимо писать четкие и краткие мета-заголовки и мета-описания, а также оптимизировать контент вашей страницы с помощью необходимых ключевых слов.

 

Есть несколько очень удобных инструментов для изучения ключевых слов, например, Google Keyword Planner, Ahrefs и SEMrush, которые помогут вам выбрать наиболее релевантные ключевые слова для вашего предложения и целевой аудитории. Здесь очень важно не переборщить – используйте ключевые слова в меру и только в контексте.

 

Также постарайтесь не добавлять дополнительные ссылки на ваш лендинг — они будут только отвлекать пользователей и перенаправлять их на другие страницы. Цель вашего лендинга — быть отдельной страницей, которая удержит внимание посетителя от начала до конца. Если это все же необходимо, добавляйте только самые важные ссылки.

Создайте целевую страницу, используя конструктор сайтов.

 

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

Конструктор позаботится обо всем остальном за вас. Мы рекомендуем ознакомиться с наши конструктором лендингов, так как его легко освоить и он не требует предварительных знаний.

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

 

Наймите веб-дизайнера 

 

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

Создайте страницу сами

 

Ок, возможно, мы недооценили вас. Вполне возможно, что вы предприниматель, у которого есть опыт в программировании и дизайне. В этом случае вы можете взять дело в свои руки и создать свою собственную целевую страницу. Тем не менее, мы бы рекомендовали показать готовый проект другому веб-дизайнеру, чтобы быть на 100% уверенным, что все идет гладко. Мнение со стороны всегда полезно.

                       

Как эффективно провести A/B тестирование вашего ленгдинга

 

Как только первая версия вашей целевой страницы будет готова, необходимо провести A/B-тестирование, чтобы выяснить, является ли ваш лендинг самым эффективным из возможных с точки зрения конверсий. Необходимо тестировать две разные версии целевой страницы, меняя по одному элементу каждый раз, чтобы определить оптимальный контент и макет для максимальной конверсии. Одним из лучших инструментов для A/B-тестирования является Google Optimize, который позволяет вам протестировать две разные версии лендинга и посмотреть, какая из них работает лучше.

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

               

 

-Макет

-Предложение (оффер)

-Заголовок

-Призыв к действию (сам текст и его расположение на странице)

-Описание

После того, как мы определили, что именно будем тестировать, приступаем к самому тестированию:

 

Изучите поведение пользователя

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

Создайте свою версию «B»

Итак, у вас есть версия «А» вашей целевой страницы. Теперь определитесь с элементом, который вы хотите первым протестировать (см. выше), и внесите соответствующее изменение.

Протестируйте каждый элемент

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

Определите продолжительность тестирования

Вы можете сделать это до начала A/B-тестирования, но поменять запланированное время в процессе самого теста.

 

Проанализируйте окончательные результаты

Узнайте, какие изменения привели к лучшему результату в версии «B», а какие – к плохому. Оставьте ту версию, которая принесла наибольшее число конверсий, просмотров и т.д.

Как продвигать свою лендинг-страницу

Поздравляем! Вы создали свой лендинг и нашли лучшую версию из возможных с помощью A/B-тестирования. Теперь пришло время для продвижения, которое можно осуществить через несколько каналов:

Оценка эффективности вашего лендинга

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

 

 Просмотры: 

Помимо конверсий, вам необходимо знать, сколько людей фактически посетили вашу целевую страницу. Найдите эти данные в Google Analytics, выбрав Поведение> Содержимое сайта> Все страницы> URL вашей целевой страницы.

 

Источники трафика: 

Кроме того, полезно знать, откуда поступает ваш трафик, особенно если вы активно продвигали свою целевую страницу. Чтобы получить доступ к этим метрикам, перейдите в Google Analytics и нажмите Поведение > Содержимое сайта > Все страницы > URL вашей целевой страницы. Добавьте дополнительный параметр для Источника, который добавит столбец, показывающий, откуда поступают просмотры вашей целевой страницы.

 

Конверсии: 

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

 

Чтобы получить доступ к этим показателям, вам нужно настроить Цели в Google Analytics и подключить их к странице с благодарностью, которая будет появляться после того, как пользователь совершить необходимое действие. После этого перейдите в раздел Конверсии > Цели > Обзор, где вы сможете увидеть общее количество выполненных целей.

 Среднее время на странице и показатель отказов: 

Еще одна важная метрика, которая скажет вам, был ли интересен дизайн и содержание вашей целевой страницы. Снова перейдите в Google Analytics: Поведение > Содержание сайта > Все страницы > URL вашей целевой страницы. Здесь вы увидите среднее время, проведенное посетителями на вашей странице, а также показатель отказов (процент посетителей, которые уходят с вашего сайта после просмотра одной страницы).

Наверх

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

 

Мы надеемся, что эта статья была полезна для вас. Оставайтесь с нами, чтобы узнать больше с Академией Ucraft!!

Создание лендинга — Видео. Заходи!

В этой транскрибации видео мы поговорим про создание лендинга.

Давайте сначала поговорим о том, что такое лендинг

Что такое лендинг?

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

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

Страница приземления сконцентрирована вокруг кнопки заказа или формы заявки.

Давайте посмотрим, какие бывают лендинги

1.Созданный на конструкторе

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

2. Созданный в веб студии

Также вот перед вами дизайнерский лендинг, его создавали в специальной веб студии, Mark Weber, очень вроде хорошая студия, но есть недостатки. Во-первых, такой дизайнерский лендинг стоит дорого, у данной студии он может доходить до 40-50 тысяч, и еще один недостаток, для меня существенный, — это время, т.е. такой лендинг может изготавливаться месяц: сначала надо дизайнеру нарисовать лендинг, потом его утвердить у заказчика – нравится, не нравится, и только уже потом отдается верстальщику, который тоже тратит время на его создание.

Итак, давайте продолжим.

Какие важные части должны быть при создании лендинга?

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

Следующая важная часть – это заголовок. Некоторые люди про нее забывают. Заголовок говорит посетителю, что мы, собственно, предлагаем посетителю, чтобы посетитель сразу понял, куда он попал. Если он не понимает, то скорее всего, он сразу закроет данную страницу. Здесь предлагается Египет из Казани, а здесь предлагается Йога-тур. Все, в принципе, понятно.

И третья важная вещь – это преимущества. Почему посетитель должен воспользоваться именно вашими услугами или вашим товаром, чем вы лучше других. Например, это может быть цена, если она конкурентная. Кстати, она не обязательно должна быть самая дешевая, она может быть наоборот – высокая, просто это что-то отличает вас от других. Еще это называется УТП – уникальное торговое предложение – почему посетитель сайта/лендинга должен заказать именно у вас.

Вот тут есть преимущества, цены. Люди скорее всего, даже не знают, какой уровень цен на туры. Поэтому для них первое время цена не является точной характеристикой. Вот тут у нас есть отзывы, т.е. это тоже относится к преимуществам. У этого агентства уже заказывали, что говорит о том, что с ними можно работать. Также есть адрес.

Также и здесь можно посмотреть преимущества, например, сколько клиентов, сколько актуальных предложений.

Вот из таких вещей и состоит лендинг.

Что необходимо для создания лендинга?

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

Во-вторых, контент — немаловажная вещь. Должны быть какие-то изображения товаров, отзывы покупателей, какие-то технические характеристики товара.

В-третьих, не очень важная вещь – это домен и хостинг. Можно лендинг создать даже без домена и хостинга, например, если воспользуетесь конструктором для создания лендинга.

Плюсы и минусы конструктора лэндинга здесь

[alert class=»alert yellow»]Имейте в виду, что у конструкторов более громоздкий код по сравнению с самописными страницами приземления. Что может повлиять на скорость загрузки сайта.[/alert]

Быстрое создание — это конструктор

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

Итак, для быстрого создания лендинга, как раз об этом мы с вами дальше будем разговаривать, и я буду вместе с вами его делать.

• У меня есть Товар – мы будем делать вот такой лендинг – очень быстрый и легкий. Я предлагаю товар —  Туры в Египет от турагентства Tico Travel.
• У меня есть Контент: у меня есть группа ВК, где я могу отзывы взять, у меня есть сайт, где я например, логотип могу взять, просто сохранить, также у меня есть адрес и телефон.
• И еще у меня есть аккаунт в конструкторе лендингов.

Вы можете перейти по ссылке в этой презентации, или набрать в поисковой строке https://platformalp.ru/reg/ROHPIECU и вы попадете на такую страницу, где вам предлагается создать лендинг прямо сейчас. Заполните эту форму, и вы на 14 дней получите бесплатный доступ и сможете посмотреть, как внутри выглядит админка. Здесь есть видео, вы увидите, как примерно создаются лендинги. И вместе со мной в моих видео вы дальше увидите, как это делается.

[button url=»https://rek9.ru/pllp» class=»btn btn-success» target=»_blank»]Перейти на сайт конструктора[/button]

Нажмите на кнопку, чтобы перейти

Все очень просто, 14 дней бесплатный период, здесь есть внутри CRM, т. е. видно контакты, кто заполнил формы, и с ними можно уже работать. Например, этот обработан контакт, этот еще не обработан,  вот так это все делается.  Есть примеры лендингов, и есть два тарифа – эконом и стандарт. Отличаются они по количеству доменов (1 и 5), количеству страниц (5 и 25), и количеству СМС (100 и 300). СМСки отправляются, например, при заполнении формы заявки. Есть еще такой момент – в Экономе нет А/В тестирования. Но вам пока это неважно, вы, например, 14 дней можете просто попробовать, если вам понравится, то уже оплатить.

Этапы создания лендинга

И мы поговорим сейчас об этапах создания лендингов.

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

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

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

Потом – создание лендинга, собственно заполнение контентом.

И потом уже, после того как мы сделали лендинг, мы его немножко подкорректируем, подправим.

И уже собственно запуск.

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

А дальше, на примере этого лендинга буду создавать новые серии видео, в которых я буду показывать, как я настраиваю рекламную кампанию в Директ и АдВордс уже на вот этот лендинг, который мы создадим. Лендинг получится у нас вот такой. Если вы хотите смотреть, как я создаю быстро лендинги, то, пожалуйста, подписывайтесь, заходите в этот раздел https://rek9. ru/category/secret/ и мы увидимся уже с вами в следующем видео.

[button url=»https://rek9.ru/category/secret/» class=»btn btn-danger» target=»_self»]Перейти в раздел для подписчиков[/button]

↓ Презентация

как создать целевую страницу для веб-сайта Squarespace (2023)

Содержание

1. Обзор целевых страниц
2. Прежде чем начать
3. Использование экрана блокировки в качестве целевой страницы

• • Установить пароль для всего сайта

• Настройте свой экран блокировки

Формирование страницы, которая станет вашим лендингом

• • Односекционная страница макета

• • Обложка

• Макет страницы

Советы по SEO: что нужно знать

Обзор целевых страниц

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

• Скоро раздел
• 404 страницы ошибок
• Обратный отсчет запуска продукта
• Любые другие важные объявления

Приступим к формированию вашей первой целевой страницы.

Перед началом работы

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

Использование экрана блокировки в качестве целевой страницы

Если вы используете пароль для всего сайта, посетители вашего сайта увидят экран отсутствия. Этот можно использовать как целевую страницу. Стиль по умолчанию — светло-серый с минимальным текстом, но его можно настроить в соответствии с дизайном вашего бренда. Эта конкретная страница будет работать как лендинг для пользователей с паролями — после ввода пароля они получат возможность просматривать другие страницы сайта. Опция бесплатна для платных и пробных аккаунтов. Это означает, что это отличная возможность создать свой собственный раздел «Скоро» или «В разработке» без дополнительных затрат, пока вы создаете остальную часть веб-сайта. Чтобы создать экран блокировки, вам необходимо выполнить следующие действия.

Установить пароль для всего сайта

Чтобы сделать это на рабочем столе, выполните следующие простые шаги:

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

Вы также можете рассмотреть возможность установки пароля с помощью приложения Squarespace:

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

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

Настройка экрана блокировки

Вы можете настроить экран так, как он лучше всего подходит для вас. Но вы можете рассмотреть следующие методы, чтобы он выглядел красиво и выполнял свою работу. Не усложняй Экран блокировки может быть первым, что видит пользователь при открытии вашего сайта. А его существование сводится к тому, что пользователь вводит пароль. Поэтому делайте его простым и не усложняйте его дизайн — он должен работать быстро. Не используйте несколько экранов блокировки Все защищенные паролем области вашего сайта должны иметь один экран блокировки. Вы не можете настроить его для каждой страницы. Нет блоков В отличие от остальной части Squarespace, экраны блокировки работают и ведут себя по-другому. Самое главное, они не строятся с помощью секций или блоков. Вы получите предварительно стилизованный макет, чтобы настроить его позже.

Формирование страницы, которая станет вашим лендингом

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

Страница макета из одной секции

Если у вас есть сайт Squarespace версии 7.1, вы можете создать страницу макета с одним разделом, который может обозначать привлекательную целевую страницу. Чтобы сделать это, выполните следующие простые шаги:

1. Перейдите в главное меню, нажмите «Страницы», а затем нажмите «+».
2. Выберите «Пустая страница», затем выберите «Редактировать» на странице.
3. Нажмите + и выберите Добавить пустой +.
4. Прикрепите текст к текстовому блоку. Или добавьте больше блоков, если это необходимо.
5. Выберите значок карандаша.
6. Выберите «Фон», если вы хотите добавить фоновое изображение или видео, или нажмите «Цвета», чтобы установить цвет фона.
7. Перейдите к Готово и нажмите Сохранить.
8. Перейдите на платную услугу, если вы еще этого не сделали.
9. В разделе «Доступность сайта» нажмите «Общедоступный», чтобы опубликовать страницу.

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

• Нажмите «Изменить» на странице, а затем перейдите к заголовку, где вам нужно нажать «Изменить заголовок сайта».
• Выберите Элементы и выключите переключатели для кнопок, социальных ссылок и корзины.
• Перейдите к Готово и нажмите Сохранить.
• На панели страниц переместите все свои страницы в раздел «Не связанные», включая только что созданную целевую страницу. Теперь они не будут отображаться как навигационные ссылки.

Руководство по версии 7.0

Обложка

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

• Нажмите «Страницы» в главном меню, затем нажмите «+».
• Добавить титульную страницу.
• Если вы еще не перешли на платный план, сделайте это сейчас.
• Отметьте свою страницу как общедоступную в разделе «Доступность сайта».

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

Страница макета

Это базовые страницы, которые можно создавать с помощью блоков. Они хороши для страниц «О нас», страниц контактов и для любых других типов страниц на большинстве веб-сайтов. Чтобы создать целевую страницу с использованием этого типа страницы, вам необходимо:

• Перейдите в главное меню, нажмите «Страницы», а затем нажмите «+».
• Щелкните Пусто, а затем выберите Изменить на странице.
• Добавить текст в текстовый блок.
• Вставьте свой пользовательский контент, например плагин Squarespace Google Reviews.
• При необходимости добавьте больше блоков.
• Нажмите «Сохранить» после добавления содержимого.
• Если вы еще этого не сделали, перейдите на платную услугу.
• Выберите «Общедоступный» в разделе «Доступность сайта», если вы еще этого не сделали.

Советы по SEO: что нужно знать

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

Как создать целевую страницу с помощью ChatGPT (от первой подсказки до опубликованной страницы)

Зачем кому-то это делать?
Подумайте о следующих вариантах использования:

• Копирайтер, который хочет, чтобы контент просматривался на веб-странице
• Маркетолог без навыков программирования, который хочет создать прототип веб-страницы
• Любой веб-создатель, которому не хватает навыков кодирования
• Разработчик или дизайнер, который хочет быстро продемонстрировать, как может выглядеть страница

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

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

Поехали!

А также видеоверсия поста в блоге

Некрасивый первый набросок страницы

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

Обратите внимание, что ChatGPT не отображает веб-страницу. Вместо этого он предоставляет страницу в виде HTML.

Вставка HTML в онлайн-редактор HTML

Для этого существует множество инструментов; один инструмент, который мне нравится для этого, — Codepen.

Вы можете пользоваться сервисом бесплатно, даже без учетной записи (конечно, она вам нужна, если вы хотите сохранить свое творение)

Вы можете открыть Codepen, вставить HTML-код из ChatGPT и получить мгновенный предварительный просмотр страницы.

Это уродливый первый черновик веб-страницы на Codepen:

Результат HTML, сгенерированный ChatGPT на Codepen

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

Обновить контент и улучшить дизайн

У меня есть несколько идей, как улучшить копию и дизайн страницы. Поэтому я заново создал HTML и предоставил дополнительную информацию по первоначальному запросу.

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

Вторая попытка, с более подробной информацией о дизайне и макете

Это уже дало мне гораздо лучший результат в первом HTML. Это выглядело так:

HTML-код, сгенерированный из ChatGPT в предварительном просмотре на Codepen

Расширение страницы разделом отзывов

Общеизвестно — целевые страницы с отзывами работают лучше.
Итак, я добавляю цитаты из отзывов, а ChatGPT создает HTML для добавления на страницу.

Снова и снова, я хочу убедиться, что он имеет тот же стиль и что ширина нового раздела соответствует ширине двух столбцов выше.

Запрос ChatGPT на создание раздела HTML для отзывов

Опять же, я скопировал HTML из ChatGPT в Codepen.

Прототип целевой страницы информационного бюллетеня с отзывами о Codepen

Сделать веб-страницу адаптивной

Это могло быть в первоначальном запросе к ChatGPT, но это также работает на более позднем этапе.

Я прошу ChatGPT изменить HTML/CSS, чтобы страница реагировала на любое устройство.

Добавление необходимого CSS/HTML, чтобы сделать страницу адаптивной

И это работает, как вы можете видеть на этой короткой записи экрана. Страница теперь работает на всех устройствах.

Пример страницы в адаптивном режиме.

Бонус: публикация HTML-страницы в Интернете

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

Для этого примера я попробовал Netlify. Он предлагает функцию под названием Netlify Drop. Вы можете выбрать папку, которая мгновенно появится в сети в качестве веб-сайта.

Во-первых, вы должны сохранить HTML в виде файла. Скопируйте сгенерированный HTML-код из ChatGPT в текстовый редактор и сохраните файл как index.html в новую папку.

Используйте любой текстовый редактор, чтобы сохранить HTML-код в виде файла.

Затем создайте бесплатную учетную запись Netlify. После этого создайте новый сайт и выберите «ручное развертывание».

Вы окажетесь на этой странице.

Netlify Drop: простой способ публикации статического HTML-файла.

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

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

Для этой демонстрации я подключил свой домен rolfhq.com.

Скриншот опубликованной страницы на Netlify, подключенной к личному домену.

Бонус: Заставьте форму работать

Вы заметили форму на демо-странице. Пока он не подключается к службе рассылки новостей. Но ChatGPT даже поможет с этим:

Изменение необходимого HTML для подключения к Mailchimp

Дополнительные сведения

ChatGPT часто не может предоставить полный HTML. Я решил это, запустив новый чат и часто просил обновить только части HTML.

Очень часто ChatGPT не мог сгенерировать полный HTML

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

Если вы хотите обновить только текстовый контент, вы можете попросить ChatGPT обновить конкретную вещь.