Как да създавате и редактирате целеви страници

Целевите страници са движещата сила зад генерирането на потенциални клиенти, растежа на абонатите и конверсиите с едно кликване. Независимо дали събирате имейл адреси, промотирате сезонна кампания или предлагате съобщение за благодарност след подаване на рецензия, добре изградена целева страница може да направи всичко различно.

Тази функция е малко по-напреднала от удобните за потребителя инструменти, с които сте се запознали досега. Това е така, защото използва гъвкав, базиран на компоненти конструктор, който отваря свят на персонализация, особено ако имате опит с CSS.

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

⚠️ Преди да започнете: За да използвате модула за целеви страници, вашият домейн трябва да бъде валидиран. Ако все още не сте направили това, отидете на 'Настройки' > Настройка на имейл' и завършете процеса.

Нека преминем през всяка стъпка, за да можете уверено да създадете първата си целева страница от нулата или да усъвършенствате съществуваща.

1. В приложението theMarketer, отидете на „Аудитория“ > „Целеви страници“

Тук ще видите списък с готови за използване страници по подразбиране, като Благодарност за обратна връзка, Анкета или Отписване. Те са маркирани като "система" в колоната Тип.

За да редактирате съдържанието на системна страница, кликнете върху съответната икона на писалка или кликнете върху трите точки вдясно, за да я активирате и публикувате.

За да създадете персонализирана целева страница, кликнете върху бутона „+Създаване на целева страница“ вдясно.

2. Изберете шаблон или започнете от нулата

Тази стъпка работи много подобно на създаването на бюлетин; можете да разглеждате наличните шаблони и да ги преглеждате изцяло, преди да вземете решение.

След като намерите такъв, който отговаря на вашите нужди и цели, кликнете върху „Избор“, за да започнете да го персонализирате.

Ако имате опит с инструменти за създаване на целеви страници или имате познания по CSS, не се колебайте да пропуснете шаблоните и да започнете от нулата.

3. Задайте URL адреса и заглавието на вашата целева страница

Бъдете внимателни, когато въвеждате URL адреса на вашата целева страница, защото след като е зададен, не може да бъде променен. Можете да редактирате заглавието на вашата страница по всяко време в редактора, но URL адресът е постоянен, така че се уверете, че го въвеждате правилно, преди да преминете към следващата стъпка.

дръж-го-кратко-релевантно-и-ясно-и-използвай-малки-букви-числа-и-тире-вместо-интервали

4. Редактирайте съдържанието и дизайна на вашата целева страница

На пръв поглед, редакторът на целевата страница може да изглежда подобен на редактора на имейли, но той идва с допълнителна гъвкавост и по-напреднали настройки за дизайн.

В горния ляв ъгъл на екрана ще видите заглавието на страницата, което можете да преименувате, като кликнете върху иконата на писалка, URL адреса, който можете да копирате, като кликнете върху съответната икона, и последния запазен времеви печат, който показва кога страницата ви е била последно актуализирана.

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

По-наляво ще видите иконите за отмяна, повторение и запазване, заедно с бутона „Запази и публикувай“ и бутона за изход за затваряне на редактора.

Точно както в създателя на имейли, лявата страна на екрана ви показва предварителния преглед на платното, а дясната страна съдържа три важни раздела: Съдържание, Структура и Настройки.

а. Съдържание

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

Връзка – Добавя основен текстов блок, който включва хипервръзка.
Блок за връзка – За разлика от редактора на имейли, връзките не се прилагат директно към елементите, а към техните родителски контейнери. Този блок ви позволява да поставите всяко съдържание (като бутон или изображение) вътре в клетка, която действа като кликваща връзка.

Изображение – Добавя самостоятелно изображение.
Свързано изображение – Добавя изображение, обвито в блок с връзка, позволявайки ви да пренасочите потребителите към конкретен URL, когато го кликнат.
Цитат – Вариация на текстовия блок, визуално оформена за подчертаване на препоръки или изявления.
Полета на формуляра – Подобно на изскачащите прозорци, те ви позволяват да влачите и пускате полета на формуляра (като име, имейл, телефон) за генериране на потенциални клиенти или абонаменти.
Карта – Добавя персонализируем уиджет на Google Maps. Можете да настроите адреса и визуалния стил след поставяне.

Раздели – Представя раздели с превключваеми области на съдържание (точно като разделите Съдържание, Структура и Настройки, които в момента разглеждате). Можете да поставите различни блокове във всеки раздел, за да покажете разнообразна информация.

Подсказка – Позволява интерактивни съобщения при задържане на курсора. Плъзнете и пуснете елемента за подсказка, персонализирайте текста отдясно и след това поставете съдържанието, върху което потребителите трябва да задържат курсора, вътре в него.

Typed – Добавя анимирани текстови ефекти (помислете за ефекта на пишеща машина). Можете да персонализирате скоростта, фразите и стила от раздела с настройки.

б. Структура

Този раздел работи подобно на редактора на имейли; просто плъзнете и пуснете компоненти на оформлението в платното, след това поставете вашите блокове със съдържание вътре в клетките. Това поддържа оформлението ви чисто и гарантира, че страницата ви се показва правилно на различни устройства.

в. Настройки

Разделът Настройки ви дава допълнителен контрол върху това как елементите се появяват и се държат на вашата целева страница. Ако не сте запознати с терминологията на уеб дизайна, не се притеснявайте; ще я разясним с прости обяснения и практически примери.

Общи > Дисплей – Тази настройка определя как един елемент се появява във връзка с други:

Блок: Заема пълната ширина на контейнера. Чудесен за заглавия или банери.
В редица: Държи елементите в линия с други (като хипервръзка в изречение).
Inline-block: Поддържа елементите в линия с други, като ви дава възможност да зададете ширина и височина.
Flex: Позволява усъвършенстван контрол на подравняването и оформлението (вижте настройките на Flex по-долу).
Няма: Скрива елемента. Полезно, ако искате да запазите елемент в редактора, но да не го показвате на страницата.

Общи > Плаващ – Тази настройка ви позволява да преместите елемент в лявата или дясната страна на неговия контейнер. Най-често се използва за изображения или малки икони:

Няма: По подразбиране, без плаващи.
Ляво: Текстът или съдържанието ще се увиват около него отдясно.
Дясно: Текстът или съдържанието ще се увие около него отляво.

Общи > Позиция – Помага ви да поставите елементите точно там, където искате:

Статичен: Позицията по подразбиране, без специално разположение.
Относителен: Позволява ви да изместите елемента от нормалното му място.
Абсолютно: Позиционира елемента спрямо най-близкия му контейнер.
Фиксиран: Държи елемента на място, докато потребителят превърта. Идеален за лепкави заглавки или бутони.

За всяка позиция, различна от статична, ще видите и полета, обозначени като Top, Right, Left и Bottom. Те ви позволяват да настроите точно къде трябва да се появи вашият елемент. Например, ако изберете относителна и въведете 20px в полето Top, вашият елемент ще се премести с 20 пиксела надолу от първоначалното си място.

Flex настройките ще се прилагат само когато Display е настроен на flex.

Посока на гъвкавост – Контролира посоката на елементите вътре в контейнер. Полезно е, когато искате да подредите елементи вертикално или да обърнете техния ред:

Ред: Елементите се подреждат отляво надясно (по подразбиране).
Row-reverse: Елементите се подреждат отдясно наляво.
Колона: Елементите се подреждат отгоре надолу.
Column-reverse: Елементите се подреждат отдолу нагоре.

Flex wrap – Indică elementelor dacă să rămână pe un singur rând sau să treacă pe următorul:

Nowrap: Поддържа всичко на един ред.
Обвивка: Премества елементи на следващия ред, когато пространството свърши (идеално за решетки).
Обратен обвив: Обвива елементи в обратен ред.

Подравняване на съдържанието – Подравнява елементите хоризонтално:

Flex-start: Подравнява всичко вляво.
Flex-end: Избутва всичко надясно.
Център: Центрира съдържанието.
Space-between: Разпределя елементите равномерно, без разстояние в краищата.
Space-around: Разпределя елементите с равномерни разстояния навсякъде.
Space-evenly: Задава равномерно разстояние между всички елементи.

Подравняване на елементи – Подравнява съдържанието вертикално в един ред:

Flex-start: Подравнява към горната част.
Flex-end: Подравнява към дъното.
Център: Вертикално центриране.
Базова линия: Подравнява текста с основата на близкия текст.
Разтягане: Запълва вертикалното пространство.

Подравняване на съдържанието - Подобно на подравняване на елементите, но работи през множество редове. Най-добре се използва, когато елементите се пренасят и искате да контролирате вертикалното разстояние между редовете.

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

Можете да контролирате прозрачността в секцията ‘Opacity’. Задайте я на 1 за пълна видимост или по-ниско за избледнял вид. Освен това, използвайки настройката ‘Transform’, можете да завъртате, мащабирате или премествате елементи.

5. Запазете и публикувайте вашата целева страница.

След като вашата целева страница е готова, кликнете върху бутона „Запази и публикувай“ в горната част на редактора.

Ще бъдете върнати към списъка на началната страница, където ще видите заглавието, URL адреса и статуса на публикуване на вашата страница. За да направите промени по-късно, просто кликнете върху иконата на писалка, за да отворите редактора отново. Ако трябва да премахнете страница, кликнете върху трите точки и изберете „Пауза“. След като направите това, тя вече няма да бъде достъпна чрез своя URL адрес.

И... готово си!

Знаем, че това беше по-технически модул, но сега, след като сте стигнали до края, трябва да се чувствате уверени в навигацията в редактора и създаването на целеви страници, които ви помагат да се откроите, да се ангажирате по-ефективно и да конвертирате без усилие.