Лендинг размеры блоков: выбираем оптимальный первый экран для Landing page

Содержание

выбираем оптимальный первый экран для Landing page

Экраны лендинга

Главный экран любого лендинга включает заголовок, изображение, УТП и призыв к действию. Этот экран должен заинтересовать пользователя, заставить его двигаться дальше по сайту.

Главный экран лендинга

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

Вторая часть лендинга

Таким образом, схема построения лендинга выглядит так:

Экраны лендинга

Некоторые трудности может вызвать адаптация макета сайта для разных разрешений экранов. Запомните, что ориентироваться вам нужно не на разрешение, а на размер окна браузера. Так, например, вы знаете, что средний размер экрана монитора — 1024×768 пикселей. В таком случае высота макета НЕ должна составлять 768 пикселей в высоту. Она должна соответствовать высоте окна браузера. То же касается мобильных версий макетов.

Какого размера делать лендинг

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

Основную сложность представляет разработка дизайна первого экрана лендинга. Практика показывает, что для десктопа разработчики чаще всего выбирают ширину в 1000px и высоту в 680px. Причина этого в том, что настроить дизайн сразу под 4 устройства (монитор ПК, ноутбук, планшет и смартфон) довольно сложно. Дополнительная проблема — окно браузера, размер которого пользователи могут менять как угодно.

Зависимость размеров от изменения размера окна браузера

Оптимальная высота лендинга для десктопных браузеров — в районе 600-800px, а для мобильных устройств — 400-500px. Далее расскажем, почему лучшими считаются именно эти варианты.

Сначала рассчитывается усредненная высота всех устройств. Для упрощения задачи нужно сократить количество возможных вариантов. Самый часто встречающийся размер больших экранов (монитора ПК, ноутбука или планшета) — 1000–1200px, маленьких экранов — 320–360px (имейте в виду, что экраны смартфонов Apple имеют высоту 375px).

Получив приблизительные данные, рассчитываем идеальный размер. Большим экранам оптимально будет присвоить 600–800px, а маленьким — 400–500px.

Еще один популярный вариант — использовать в CSS единицы измерения vw (ширина вьюпорта) и vh (высота вьюпорта). Если вы зададите высоту блоку width 100vh, то на любом экране он будет равняться 100 % высоты вьюпорта. В этом случае вам не придется задавать размеры под каждый экран индивидуально, а результат будет хорошо отображаться на большинстве устройств.

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

Если с высотой разобраться сложнее ввиду неодинаковых размеров окошек различных браузеров, то с шириной все гораздо проще. Мы выяснили, что разрешение экрана, например, ноутбука — 1024×768 пикселей. Оптимальной высотой мы обозначили 600px, остальная часть уйдет под меню браузера и строку меню операционной системы. Для ширины достаточно 1000px.

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

Примеры идеального первого экрана

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

Однако начнем с лендинга, оформленного неправильно.

Плохой пример оформления лендинга

На этом сайте главного экрана нет как такового. Мы видим фотографию и длинный сплошной текст до конца страницы. Мобильная версия выглядит не лучше:

Отображение лендинга в мобильной версии

Здесь нет ничего, кроме текста. Найти контакты сложно, форма заявки отсутствует, нет УТП и корректных заголовков.

Теперь обратите внимание на следующий пример:

Пример удачного оформления первого экрана лендинга

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

Взгляните на пример лендинга компании, занимающейся доставкой полезной еды:

Пример лендинга по доставке еды

Здесь мы видим яркий первый экран с формой заявки и основным преимуществом. Далее следует остальная часть с дополнительной информацией:

Оформление второго экрана лендинга по доставке еды

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

размер лендинг страницы — учимся делать landing page в фотошопе

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

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

Как делать лендинг пейдж в фотошопе

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

[lpgen]

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

Размеры landing page в фотошопе

Можно посоветовать универсальный способ – создавать макет таким образом, что бы размеры лендинга в пикселях были 960 пикселей в ширину, а высота – 1500-2500 пикселей. Дело в том, что размер в 1000 пикселей – это разрешение среднестатестического экрана пользователя. Но, опять же, мобильные устройства не попадают под эту планку и для этих девайсов подходят только адаптивные (мобильные) версии интернет – ресурсов.

Дизайн лендинга в фотошопе

Для того, что бы наглядно ознакомиться с тем, как создавать собственный landing page в графическом редакторе, следует ознакомиться с уроками дизайна лендинга в фотошопе в сети Интернет. Благо, что подобных видеогайдов в сети хватает с лихвой, стоит лишь ввести корректный запрос в поисковике.

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

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

Размер лендинга | ЗЕКСЛЕР

Размер первого экрана

Первый экран – это то, что видит пользователь при открытии страницы. Здесь стоит задача – заинтересовать потенциального клиента. Первый экран соответствует высоте экранов устройств пользователей. Экраны бывают совершенно разных размеров, но чаще встречается высота в 700-1000 пикселей. Поэтому первый экран лендинга следует разрабатывать в соответствии со среднестатистическим разрешением. Отметим, что сегодня большинство людей пользуются мобильными устройствами, поэтому лучше сделать лендинг, подстраивающийся под любое разрешение экрана.

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

Шрифты для лендинга

Правильное восприятие информации лендинга зависит от подобранного шрифта. Для основного текста наиболее подходят шрифты с засечками или рубленные шрифты. Размер должен быть не менее 12 пунктов, лучшим вариантом является – 14 и 16 пунктов. Заголовки можно увеличить от 18 и до 32 пунктов. Посетитель лучше воспринимает крупные буквы, мелкие и непонятные шрифты вызывают раздражение.

Оптимальная структура лендинг-пейдж

Структура успешного лендинга выглядит следующим образом:

первый экран;
«тело» лендинга или основные экраны;
последний экран.

Внутри предыдущих блоков лендинги должны иметь следующие элементы:

Дескриптор.
Контакты.
Уникальное торговое предложение.
Визуальное представление товара.
Форма для отправки контактных данных посетителей сайта.
Преимущества.

Также в лендинг могут добавляться следующие элементы:

принципы работы компании;
акции с обратным отсчетом и формой отправки контактов;
полный блок с контактами фирмы;
портфолио с примерами выполненных работ;
награды, сертификаты, грамоты.

Настройка элементов лендинга

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

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

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

Визуализация товара – демонстрация товара/услуги с использованием фото- или видеоматериалов. Здесь стоит задача позволить будущему клиенту прочувствовать продукт, представить его в личном пользовании.

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

Преимущества – описываются достоинства компании и основные отличия от конкурентов.

Необходимо уделить внимание следующим деталям лендинга, расположенным чаще всего на первом экране:

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

Лендинги на главной — QIWI

Шаблоны
Чек-лист
Подготовка к разработке
Изображения
Структура
Баннеры
Типографика

Шаблоны

Скачать шаблон лендингов на главной странице.

Чек-лист

1. Используйте фотореалистичные изображения в стиле QIWI в качестве Key Visual.
2. Выбирайте для фона обложки градиент от #FFF до #E6E6E6.
3. Располагайте Brand Button в размере Accent в нижней части экрана горизонтально по центру.
4. Размещайте в промо-карточках иллюстрации в стиле QIWI.
5. Используйте на промо-карточках Simple Button в размере Normal.

Подготовка к разработке

Размер артбордов

Учитывайте мобильную и планшетную версию при создании дизайна. Готовьте макеты для следующих разрешений:
— 1280px;
— 600px;
— 400px;
— 360px.

Область изображения

Важно!
Растровые картинки для баннеров предоставляются в формате png, векторные иллюстрации — в формате svg .

Подготавливайте изображения в трех размерах — 1x, 2x, 3x.

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

Размер области под изображение:
— на заставке — 1180×264px или 580×372px;
— на горизонтальном баннере 1180×200px — 280×200px;
— на баннере 580×400px — 216×308px или 492×144px.

Изображения

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

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

Структура

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

Обложка

Композиция обложки может выравниваться:
— по центру;
— по левому краю;
— по правому краю.

Конентная область

В нижней части страницы располагаются баннеры. Баннеры располагаются в белых интерфейсных блоках.

Баннеры

Размер баннеров на лендинге зависит от разрешения устройства.

1280px, 1440px, 1920px

Для десктопных разрешений предусмотрено 2 размера баннеров:
— 1180×200px;
— 580×400px.

Размещайте на баннерах Simple Button в размере Normal.
Для заголовка баннеров используйте уровень h3 (Desktop).
Для основного текста — Body M 300 (Normal) в черном цвете.

1024px

Для разрешения 1024px предусмотрено 2 размера баннеров:
— 944×200px;
— 464×524px.

Для заголовка баннеров используйте уровень h3 (Mobile).
Для основного текста — Body M 300 (Normal) в черном цвете.

600px

Для разрешения 600px предусмотрен один размер баннера с фиксированной шириной — 560px, высота баннера зависит от контента.
Используйте для мобильной версии те же стили текста, что и для разрешения 1024px.

400px

Для разрешения 400px предусмотрен один размер баннера с фиксированной шириной — 360px, высота баннера зависит от контента.

320px

Для разрешения 320px предусмотрен один размер баннера с фиксированной шириной — 288px, высота баннера зависит от контента.Используйте те же стили и размеры, что и для разрешения экрана 400px.

Типографика

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

Десктопная версия

Параметр	Шрифт Museo Sans	Размер текста, px	Высота строки, px
Title 1	900	48	56
Title 2	900	40	48
h4	900	24	28
h5	700	20	24
Body L	300	20	24
Body M	300	16	24

Мобильная версия

Параметр	Шрифт Museo Sans	Размер текста, px	Высота строки, px
h2 Mobile	900	28	32
h3 Mobile	900	26	32
h4 Mobile	900	22	28
h5 Mobile	500	18	24
Body L	300	20	24
Body M	300	16	24

Далее «UI-kit и шаблоны»

15 основных ошибок в дизайне современных лендинг пейдж | DesigNonstop

15 основных ошибок в дизайне современных лендинг пейдж

2

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

1. Контент не разбит на логические блоки
Если использовать маленькие отступы между блоками, то содержимое лендинга трудно усваивается и неясно, какой текст должен идти с каким блоком. Для пользователя легче, когда информация сгруппирована логически. Устанавливайте значение padding в диапазоне 120 px-180 px и разделяйте блоки с текстом с помощью цветного бэкграунда.

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

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

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

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

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

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

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

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

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

11. Двойственный смысл одного элемента
Иногда возможны ситуации, когла один логический элемент в дизайне приобретает два смысла. Например, в данном случае полноэкранное изображение после текста напоминает отдельный независимый блок. Хотя по сути это галерея с картинками. Если же вокруг галереи добавить отступы, то вся композиция будет выглядеть цельной за счет единого заднего фона.

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

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

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

15. Перегруженное меню
Люди посещают сайты, чтобы найти решения их проблем. Помогите им! Используйте меню, чтобы помочь людям ориентироваться на сайте и найти то, что им нужно быстро и легко. Не перегружайте их лишней информацией. Достаточно иметь 5-7 пунктов меню.

Источник: tilda.cc

Как должен выглядеть лендинг для криптовалюты

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

Основные блоки информации

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

Блок 1. Первый экран — Название и описание

Содержит название криптовалюты и УТП – уникальное торговое предложение. Эта страница должна привлечь читателя, заставить его листать дальше.

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

Пример с сайта Dash:

УТП, или оффер. Торговое предложение рекомендуется делать коротким, не более 7-10 слов. Оно должно выгодно выделять продукт на фоне конкурентов, заставляя выбрать именно ваш продукт.

Шаблон сайта для приложения платежей от Ucraft:

Блок 2. Рассказ о проекте, боли клиентов

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

Пример с сайта Crex24. Здесь используются интерактивные элементы. Внизу написана краткая история биржи.

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

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

Блок 3. Выгоды

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

Пример с сайта Crex24. Темное оформление не режет глаз при просмотре ночью, в отличие от белого. Но и днем смотрится стильно.

Сайт Exmo:

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

Блок 4. Принципы работы сайта

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

Вариант сокращения этого раздела на Kraken:

Пошаговые блоки на Changelly:

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

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

Блок 5. Платформы для работы

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

Пример с биржи Binance:

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

Дополнительные блоки

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

Блок курса валют

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

Пример с сайта Exmo:

Преимуществом будет рассчитанная динамика изменения валюты за определенный период. На примере указаны данные за 24 часа.

Платежные системы

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

Пример с сайта Exmo:

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

Блоки доверия

Экраны лендинга, признанные увеличить доверие к бренду. Это могут быть:

— Сертификаты

— Награды

— Отзывы

— Гарантии

— Партнеры

— Статистические данные

— Другие преимущества перед конкурентами

Пример с сайта Exmo. Преимущества представлены в виде фактов:

Блок доверия на бирже Kuna:

А вот пример оформления раздела Партнеры в бизнес-шаблоне Ucraft:

Дополнительная информация от Vechain:

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

Видео

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

Пример встроенного в лендинг видео на New York Сoin:

Пример использования кнопки на Kuna:

Интерактивные блоки

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

Регистрация

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

Регистрация как отдельная форма на Kuna.

Регистрация в виде кнопки призыва к действию на Exmo.

Калькулятор валют

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

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

Кнопка призыва к действию

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

Призыв к переходу на более подробный раздел по теме на Kraken:

Призыв связаться с офисом на финансовом шаблоне сайта Ucraft:

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

Общие рекомендации по оформлению

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

Структура, фон

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

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

Пример с сайта Exmo. Выбраны контрастные цвета, но стилистически это обосновано.

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

Пример с сайта Сhangelly:

Отдельные секции или экраны можно сделать другого цвета, это привлекает внимание к содержимому конкретно этой страницы.

Шрифт

Каждый раздел должен иметь свое название. Заголовки должны быть все одного размера, написаны одним шрифтом. Цвет может быть разный в зависимости от цвета фона или, если нужно выделить раздел. Главное в оформлении заголовка – легкое восприятие читателем.

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

Секции

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

Например, сайт Kraken разделил экраны цветом и расположением текста с разных сторон.

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

Иерархия информации

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

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

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

Контрастные элементы на экране

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

Кнопки с призывов написать с сайта Kuna.

Первый экран лендинга

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

Фон

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

Пример с картинкой с сайта New York Сoin.

Контрастное оформление на Binance.

Логотип

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

Пример расположения логотипа для шаблона сайта от Ucraft:

Кнопки или формы ввода

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

Пример оформления на шаблоне лендинга Ucraft:

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

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

Getresponse шаг за шагом: создаем лендинг

Мы уже немного писали о лендингах и их пользе для email-маркетинга — сравнивали сервисы для создания landing page и исследовали их популярность. Гетреспонс предлагает своим пользователям функцию создания лендингов и даже утверждает, что их конструктор целевых страниц самый удобный. Давайте проверим.

В конструкторе Гетреспонс можно создать 500 настраиваемых целевых страниц. Данная услуга тарифицируется дополнительно.

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

Все лендинги в Гетреспонс адаптивные, т.е. они автоматически подстраиваются под разные устройства. На них можно размещать формы подписки, вебинары, рекламировать товар или услугу, проводить A/B тестирование (до 10 вариантов страницы), устанавливать Яндекс Метрику и Google Analytics, интегрировать кучу разных сервисов и многое-многое другое. Подробное описание.

Для создания страницы в верхнем меню выбираем Целевые страницы >> Создать.

Мы попадем в меню выбора шаблонов:

Выбираем шаблон

Шаблоны поделены по категориям:

Страницы подписки. Используются для сбора заявок и подписчиков на рассылку.
Продающие страницы. Главная цель таких страниц — продать товары и услуги.
Промо страницы. На таких страницах можно размещать специальные условия для подписчиков — купоны и скидки, мотивирующие покупку.
Страницы загрузки. Пригодятся для дистрибуции контента — книг, руководств и отчетов.
Страницы о компании. Расскажите на этой странице все о вашей персоне или компании.
Видео страницы. Страница «заточенная» под размещение видео — о вас, вашем продукте и т.п.
Страницы благодарности. Поблагодарите клиента за его действие — заполнил опросник, совершил покупку, зарегистрировался на вебинар или подписался на рассылку.
Страницы вебинаров. Эти страницы используются для сбора регистраций на будущие вебинары, встречи тет-а-тет и семинары.
Праздничные страницы. Проводите акцию к празднику или сезону? Используйте готовый шаблон, оформленный в стиле нужного повода: отпуск, хэллоуин, черная пятница, кибер понедельник, Рождество, Пасха и другие.

После выбора шаблона попадаем в конструктор.

Познакомимся с конструктором

Конструктор целевых страниц Гетреспонс

История – просмотр внесенных изменений и откат к предыдущей версии.
A/B тест — просмотр всех версий страницы для теста.
Страница благодарности — настройки страницы благодарности.
Переключатель сетки – вкл./вык. разметки страницы.
Предпросмотр страницы – проверьте отображение страницы на ПК и мобильных устройствах.
Просмотр кода HTML — исходный код страницы, можно править, но не факт, что после этого можно будет редактировать через редактор.
Настройки SEO и соцсетей — можно прописать название (META тэг title) и описание страниц, включить уведомление о куки, загрузить фавикон и иконку для Facebook.
Сохранить и выйти — для сохранения страницы и выхода из конструктора.
Перейти к настройкам публикации.
Доступные блоки — разместите на странице текст, форму, картинки, видео, кнопку оплаты, вебинар и т.д.
Активированные сетки.

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

Доступные блоки

Фоном можно установить цвет, градиент и изображение, а вот видео нет.

Порадовало наличие встроенного редактора изображений. Картинки можно загружать свои или использовать встроенные (теже, что доступны при создании письма).

Видео можно добавлять с YouTube, Vimeo, Wistia, Vidyard и Vine — просто вставьте ссылку на видео. Есть возможность скрыть панель управления проигрывателя.

Доступные к добавлению кнопки для расшаривания в соцсетях: Facebook, Twitter, Pinterest, G+, Linkedin.

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

Удобно менять размеры блоков, просто потянув за рамку.

Расширенные настройки формы позволят создать форму на любой вкус:

Настройки формы

Если нажать один раз на блок, в правом верхнем углу блока появится небольшое меню с кнопками:

Управление блоком

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

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

Разместить страницу можно на бесплатном, настраиваемом поддомене Getresponse или на своем домене (сменив DNS или прописав CNAME запись).

Я не могу назвать этот конструктор самым удобным. Если только для редактирования готовых шаблонов под себя. Для создания страницы с нуля я знаю более удобные конструкторы. Ну и все-таки это не основная функция сервиса, а дополнительная. Не будем сильно строго судить.

Лучше разберемся с еще одной функцией — вебинары. Это уже в следующей статье цикла о Getrespons.

Найдите свой путь в редакторе блоков целевой страницы — Поддержка ClickDimensions

Выберите макет

После создания целевой страницы и нажатия кнопки «Сохранить» появится редактор блоков.

Чтобы выбрать макет, нажмите кнопку Layouts на верхней панели инструментов.

Откроется новое окно под названием «Диалог макетов».

Есть 9 макетов на выбор, но вы всегда можете добавлять, вычитать, перемещать и редактировать блоки после того, как вы выбрали один, и он был вставлен на вашу страницу.Макеты №8 и 9 — это специальные макеты, где большой блок слева и справа соответственно позволит вам размещать блоки внутри большого так, чтобы они росли в высоту независимо от блоков рядом с ним. В других макетах по мере того, как один блок подряд растет в высоту, растут и другие. Выберите один и нажмите Create . Ваш макет появится в режиме просмотра дизайна. Теперь вы готовы приступить к редактированию целевой страницы.

Меню правого клика

Содержимое может быть добавлено к блокам в макете, щелкнув блок правой кнопкой мыши.Откроется следующее меню:

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

Параметр, который вы выбираете на этом экране, влияет на тип содержимого, которое может быть добавлено в блок. Только текст позволяет добавлять текст в блок, Только изображение позволяет добавлять изображение, Изображение сверху / снизу / слева / справа позволяет добавлять изображение и текст в один блок с разной ориентацией , HTML позволяет добавлять текст, изображения или собственный HTML-контент, а Form или Survey позволяет легко встраивать любую форму ClickDimensions или опрос, который вы создали, как iframe.

Главное меню

Сохранить : не забудьте нажать эту кнопку сохранения, чтобы сохранить свою работу.

Макеты : открывает диалоговое окно Макеты.

Контейнер : Контейнером называется прямоугольник по краю всего макета, за исключением блоков Microsite и Unsubscribe (описанных ниже). Доступны следующие варианты:

Ширина: Ширина страницы. По умолчанию 800 пикселей.

Граница: Граница для всего контейнера.

Расстояние между блоками: Расстояние между каждым блоком в пикселях.

Фон: Цвет фона или изображение контейнера. Это не переопределит цвет фона или изображение блока.

Изменить размер фонового изображения: Измените ширину фонового изображения, при этом высота изменится, чтобы сохранить те же пропорции.

Удалить фоновое изображение: Удаляет фоновое изображение со страницы.

Страница : страница относится ко всему окну. Доступны следующие варианты:

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

Фон: Цвет фона или изображение всей страницы, всего в окне.

Удалить фоновое изображение: Удаляет фоновое изображение со страницы.

Добавить внешние ресурсы: Позволяет добавлять верхний и / или нижний колонтитул.

Отменить: Отменить последнее сделанное вами действие.

Повторить: Повторить последнее отмененное действие.

Встроить: Предоставляет URL-адрес и HTML-код iframe для этой целевой страницы.

На этом изображении контейнер зеленый, а страница вокруг него белая:

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

Выберите макет

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

Чтобы выбрать макет, нажмите кнопку Layouts на верхней панели инструментов.

Откроется новое окно под названием «Диалог макетов».

Есть 9 макетов на выбор, но вы всегда можете добавлять, вычитать, перемещать и редактировать блоки после того, как вы выбрали один, и он был вставлен на вашу страницу. Макеты №8 и 9 — это специальные макеты, в которых большой блок слева и справа соответственно позволит вам размещать блоки внутри большого так, чтобы они росли в высоту независимо от блоков рядом с ним.В других макетах по мере того, как один блок подряд растет в высоту, растут и другие. Вот пример макета № 9:

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

Главное меню

Сохранить : не забудьте нажать эту кнопку сохранения, чтобы сохранить свою работу. Макеты : открывает диалоговое окно Макеты. Контейнер : Контейнером называется прямоугольник по краю всего макета, за исключением блоков «Микросайт» и «Отказаться от подписки» (описанных ниже).Доступны следующие варианты:

Ширина: Ширина страницы. По умолчанию 800 пикселей.

Граница: Граница для всего контейнера.

Расстояние между блоками: Расстояние между каждым блоком в пикселях.

Фон: Цвет фона или изображение контейнера. Это не переопределит цвет фона или изображение блока.

Удалить фоновое изображение: Удаляет фоновое изображение со страницы.

Страница : страница относится ко всему окну. Доступны следующие варианты:

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

Фон: Цвет фона или изображение всей страницы, всего в окне.

Удалить фоновое изображение: Удаляет фоновое изображение со страницы.

Добавить внешние ресурсы: Позволяет добавлять верхний и / или нижний колонтитул.

Отменить: Отменить последнее сделанное вами действие. Повторить: Повторить последнее отмененное действие. Встроить: Предоставляет URL-адрес и HTML-код iframe для этой целевой страницы. На этом изображении контейнер серый, а страница вокруг него белая:

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

Столбцы	Рекомендуемая ширина изображения
Полноразмерные изображения раздела	564px
2 изображения раздела столбца	264px	пикселей

Настройки блока содержимого	Рекомендуемая ширина изображения
От края до края	564px

— Документация по веб-шаблонам — Веб-редактирование — Веб-разработка — ИТ-решения — Государственный университет Миннесоты, Манкато

Чтобы просмотреть действующие примеры нашего шаблона целевой страницы, посетите Уровень 2 — Целевые страницы.

Ряд 1

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

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

При создании целевой страницы все разделяется

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

Ячейки в каждой строке состоят из двух разных

s. Неполные блоки изображения:

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

Адаптивный слайдер

Весь слайдер заключен в три тега

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

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

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

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

, чтобы вставить все. Первые

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

.
Важно отметить, что поля содержимого имеют два разных класса. Это может быть class = «medium-12 large-4 columns» или class = «medium-4 columns» . Разница между ними заключается в том, как они будут иметь размер в окне просмотра размером с планшет. В представлении планшета class = «medium-12 large-4 columns» выскочит из своей строки и станет на всю ширину пространства, а затем уменьшится оттуда. class = «medium-4 columns» останется в меньшем размере до тех пор, пока не попадет в окно просмотра мобильного размера, где каждый блок будет иметь одинаковый размер в одном столбце.
Основное сообщение
На каждой целевой странице должен быть один из блоков, являющийся «основным блоком сообщения». Это сделано для того, чтобы дать вам место специально для указания того, кого представляет ваша страница. Чтобы проиллюстрировать это, вы можете видеть на изображении слева, что на заднем плане есть пламя MSU для дополнительного эффекта. Его можно использовать для дополнительного контента, который вы хотите, но это то, для чего он предназначен. Чтобы узнать, где они размещены в текущем шаблоне, см. Уровень 2 — Целевые страницы и параметры ниже.

Чтобы блок появился с пламенем позади него, id = "core" и core-panel класса должны быть связаны с внутренним

для блока. Тогда код блока будет выглядеть так:
.

Это пример заголовка Это пример текста

Широкая коробка
Чтобы добавить немного больше настроек к целевым страницам, вы также можете объединить два блока столбцов в одной строке в один.Таким образом получается одно пространство большего размера вместо двух меньших. Если у вас есть информация, которую вы хотели бы разместить на своей целевой странице, но она немного длинна для размещения в более мелких блоках, тогда это отличный вариант для решения этой проблемы.
Чтобы создать такой блок, внешний
должен иметь один из связанных классов large-8 . Это сделает его шириной в два столбца в браузере размером с настольный компьютер. Пример того, как это будет выглядеть:

Это пример заголовка Это пример текста

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

Параметр кнопки

Классы CSS
строка — определяет строку блоков
ползунок — определяет отзывчивый ползунок
rslides — определяет порядок списка изображений в ползунке
caption — определяет заголовок изображения в ползунке
большой -4 — определяет небольшой размер блока в браузере размером с настольный компьютер
large-8 — определяет средний размер блока в браузере с размером рабочего стола
средний-4 — определяет небольшой размер блока в браузере размером с планшет
medium-8 — определяет блок среднего размера в браузере размером с планшет
medium-12 — определяет блок большого размера в браузере размером с планшет
main-panel — определяет блок, который используется для изображения
core-panel — определяет блок с пламенем на заднем плане
panel — определяет нормальный блок
row1-box — определяет блок, находящийся в первой строке
content-box 9 0010 — определяет блок, находящийся во второй строке под строкой row1-box
rox3-box — определяет блок, находящийся в третьей строке под строкой content-box
columns — определяет заполнение внутри блока для создания столбцов content
subheader — определяет стиль для заголовка в блоке
msu-button — определяет стили для кнопки MSU
титульных страниц — Справка Squarespace
Разделы
Титульные страницы представляют информацию на одной полужирной странице.Титульные страницы отлично подходят для показа страницы «В разработке», объявления о выпуске продукта или сбора адресов электронной почты посетителей.
титульных страниц доступны на любом тарифном плане для веб-сайтов и магазинов версии 7.0. Если вы в настоящее время пользуетесь автономным тарифным планом для титульной страницы, ваша страница будет работать до тех пор, пока активен ваш биллинг. После перехода на полноценный сайт вернуться к плану титульной страницы больше нельзя.
Титульные страницы недоступны в версии 7.1.
Посмотреть видео
Добавить титульную страницу
Выполните следующие действия, чтобы добавить титульную страницу и настроить ее содержимое:
В главном меню щелкните Pages , щелкните + , затем выберите Cover Page . Для получения дополнительной помощи посетите Добавление страниц в вашу навигацию.
Выберите макет.
Добавьте брендинг, текст и мультимедиа.
Добавьте действия, такие как кнопки, ссылки или формы.
Стиль страницы.
Имейте в виду:
Чтобы установить титульную страницу в качестве первой страницы, которую посетители видят при посещении вашего сайта, установите ее в качестве домашней.
Чтобы удалить титульную страницу из меню навигации, переместите ее в раздел «Несвязанные» на панели «Страницы». Это полезно, если вы хотите, чтобы посетители видели его только один раз перед тем, как войти на ваш сайт, или если вы используете его как отдельную целевую страницу.
Если вы используете тарифный план «Только титульная страница», у вас нет панели «Страницы» и невозможно добавить дополнительные страницы. В главном меню отображаются панели для редактирования отдельной титульной страницы.
Макеты титульной страницы
Каждый макет титульной страницы действует как одностраничный шаблон со своими собственными особенностями и настройками стиля.На титульных страницах не используются блоки, а элементы дизайна, такие как текст и кнопки, отображаются в фиксированном положении. Это поможет сделать вашу титульную страницу красивой и отзывчивой.
Примечание: титульные страницы не поддерживают форматирование HTML и Markdown.
Чтобы изменить макет:
В меню титульной страницы щелкните Изменить макет .
Используйте раскрывающееся меню для сортировки макетов по категориям или выберите Все макеты , чтобы просмотреть все.
Наведите указатель мыши на макет и щелкните Выберите , чтобы установить его в качестве нового макета.
Щелкните Сохранить вверху страницы, чтобы применить изменения.
Хотя макеты титульных страниц можно адаптировать для любых целей, мы разработали их с учетом общих тем. Узнайте больше о каждой категории макетов ниже.
Используйте эти макеты для личной или деловой страницы, страницы «Скоро» или страницы подписки на информационный бюллетень:
Карточка
Крышка
Вспышка
Бюллетень
Куртка
Миссия
Раскрыть
Прожектор
Торговля
Используйте эти макеты для текстового личного профиля или для выделения жирных изображений:
Предыстория
Фокус
Монокль
Монтаж
Портрет
Призма
Силуэт
Снимок
Авангард
Виньетка
Используйте эти макеты, чтобы выделить звуковые дорожки от музыканта или группы или поделиться выпуском подкаста:
Радиовещание
Запись
Сессия
Тур
Чтобы добавить звуковые дорожки, щелкните Audio в меню титульной страницы, затем перетащите файл.mp3 или .m4a в загрузчик Add Track . Чтобы создать список воспроизведения, перетащите несколько файлов .mp3 или m4as. Титульные страницы поддерживают файлы .mp3 и .m4a размером до 20 МБ на дорожку.
Используйте эти макеты, чтобы поделиться фильмом, трейлером или другим видео:
Совет : Большинство макетов также поддерживают фоновое видео с использованием URL-адреса YouTube или Vimeo.
Чтобы встроить видео, щелкните Видео в меню титульной страницы. Затем следуйте нашим инструкциям по добавлению видео, используя прямую ссылку или код для встраивания.
При встроенном видео на странице отображается кнопка воспроизведения. Когда посетитель нажимает на нее, видео открывается в лайтбоксе.
Встраивание ссылки на видео не приводит к автоматической загрузке иллюстраций или эскизов, связанных с видео. Чтобы добавить похожие изображения на свою страницу, загрузите изображение на панели «Медиа».
Используйте эти макеты для отображения физического местоположения, например магазина, студии или места проведения мероприятия:
Чтобы добавить карту, щелкните Местоположение карты в меню титульной страницы.Введите адрес для булавки, затем щелкните + / — на панели, чтобы изменить масштаб по умолчанию.
Щелчок по булавке открывает местоположение на Google Maps. Невозможно добавить на карту несколько булавок.
Используйте эти макеты для отображения слайд-шоу последних твитов из ленты Twitter или поискового фильтра:
Чтобы подключить канал Twitter, щелкните Twitter в меню титульной страницы, затем щелкните Добавить учетную запись . Вы можете отображать твиты из своей учетной записи или ленту твитов других людей по хэштегу, упоминаниям или любому запросу с помощью . Используйте поиск в Твиттере .
Совет для продвинутых : рекомендации Twitter по использованию операторов запросов в поиске см. В документации Twitter по API.
Добавить брендинг и текст
Используйте панель «Брендинг и текст», чтобы добавить:
Логотип или фирменный текст
Заголовок страницы
Основной текст
Эти настройки работают со стилем вашего макета, чтобы помочь вам представить минимальный объем информации с максимальной отдачей.
Имейте в виду:
Брендинг и отображение текста зависят от макета
Невозможно одновременно отображать логотип и текст брендинга.
Убедитесь, что ваш логотип соответствует нашим лучшим практикам, или создайте новый логотип с логотипом Squarespace.
В отличие от других страниц, заголовки и логотипы сайтов на титульных страницах не ссылаются на домашнюю страницу сайта.
Ваш фирменный текст может отличаться от вашего SEO-заголовка, который служит именем страницы на вкладках браузера и в результатах поисковой системы.
Добавить медиа
Используйте панель «Медиа», чтобы:
Имейте в виду:
Правильно отформатируйте изображения перед загрузкой.
Вы можете использовать встроенный редактор изображений для редактирования исходных изображений.
Вы можете загрузить несколько изображений для создания слайд-шоу или фона сетки.
Загрузка большого количества изображений с высоким разрешением может повлиять на время загрузки титульной страницы.
Большинство макетов поддерживают фоновое видео, которое воспроизводится беззвучно, путем ссылки на URL-адрес YouTube или Vimeo.
Невозможно добавить элементы навигации или управлять скоростью перехода в слайд-шоу на титульной странице.
Благодаря адаптивному дизайну изображения и видео всегда будут в некоторой степени обрезаться, особенно на мобильных устройствах. Степень обрезки зависит от высоты изображения, ширины окна браузера и выбранного вами макета.
Установить цвет фона
Чтобы отображать простой цвет фона вместо изображения или видео, выберите Нет . Изображение исчезнет из предварительного просмотра. Измените цвет фона на панели «Стиль».
Добавить действия
Используйте панель «Действие», чтобы добавить кнопки, навигационные ссылки, а также форму или вариант подписки на рассылку новостей.Если вы не хотите никаких действий на титульной странице, оставьте поля пустыми.
Имейте в виду:
Вы можете добавлять кнопки или навигационные ссылки, но не то и другое вместе.
Вы можете добавить до двух кнопок или пяти навигационных ссылок.
Вы можете добавить одну форму или подписку на информационный бюллетень.
Чтобы добавить действие:
Щелкните Action в меню титульной страницы.
В разделе Выберите тип действия выберите действие.
Добавить кнопки или ссылки навигации
Кнопки и ссылки навигации направляют посетителей на другую страницу вашего сайта Squarespace, другой веб-сайт или загружаемый файл.Чтобы добавить кнопки или навигационные ссылки:
Выберите Кнопки или Навигация в меню Выберите тип действия .
Добавьте метку в первое поле. Мы рекомендуем делать текст метки ссылки коротким для лучшего форматирования и удобочитаемости.
Щелкните поле URL , чтобы ввести веб-адрес, или щелкните, чтобы открыть редактор ссылок. Вы можете ссылаться на внешние сайты, загружаемые файлы, адреса электронной почты, номера телефонов или собственный контент вашего сайта.Чтобы узнать больше, посетите Добавление ссылок на ваш сайт.
Щелкните Сохранить вверху панели, чтобы опубликовать все изменения.
Добавьте форму или подпишитесь на рассылку новостей
Посетители могут нажать кнопку и заполнить форму или подписку на информационный бюллетень, которая открывается в оверлее. Чтобы добавить форму или подписку на информационный бюллетень:
Выберите Form или Информационный бюллетень из меню Select action type .
Добавьте метку кнопки в поле Метка кнопки .
Щелкните Изменить форму или Изменить подписку на информационный бюллетень , чтобы создать контент.
Для форм вы можете добавить имя формы в поле Имя формы . Назвать подписки на рассылку новостей невозможно.
Для форм вы можете удалить поля-заполнители, щелкнув значок корзины и щелкнув + внизу, чтобы добавить новые поля. Если вы хотите, чтобы посетители заполняли поле для отправки формы, отметьте Требуется .Для подписки на информационный бюллетень есть только поле Адрес электронной почты .
Щелкните вкладку Storage , чтобы сообщить нам, куда отправлять материалы. Если вы используете список рассылки Email Campaigns в качестве хранилища, подписчики получат электронное письмо с подтверждением при регистрации. Отключить это невозможно.
На вкладке Advanced настройте метку кнопки отправки, настройте перенаправление после отправки или отредактируйте сообщение, которое появляется для посетителей после отправки формы.Используйте обычный текст или HTML.
Щелкните Сохранить в редакторе, затем щелкните Сохранить вверху панели, чтобы опубликовать все изменения.
Совет : После подключения вашей формы или подписки на информационный бюллетень к хранилищу мы рекомендуем посетить действующую версию вашей страницы и отправить тестовую форму, чтобы увидеть, как она работает.
Добавить цвет фона формы
В большинстве макетов вы можете использовать настройку Custom Overlay Color на панели Style , чтобы добавить цвет к вашей форме или фону подписки на информационный бюллетень.Чтобы скрыть это наложение от остальной части страницы, используйте ползунок непрозрачности, чтобы сделать его прозрачным. Ваши посетители увидят оверлей после нажатия кнопки подписки на форму или новостную рассылку.
Имейте в виду:
Макет «Гавань» не включает настройку Custom Overlay Color или Color Behind Text . Фон формы или подписки на рассылку новостей всегда будет светло-серым.
В некоторых макетах параметр Custom Overlay Color появляется только после добавления изображений на панель Media .
На этих макетах фон формы или подписки на новостную рассылку соответствует настройке Цвет за текстом :
Предыстория
Карточка
Флагманский
Вспышка
Фокус
Монокль
Сессия
Прожектор
Виньетка
Скрыть форму
Чтобы скрыть форму или подписку на информационный бюллетень, удалите весь текст Button Label и оставьте поле пустым.Поля формы останутся нетронутыми, если вы снова включите их позже.
Добавить социальные иконки
Чтобы отобразить значки социальных сетей, щелкните Ссылки соцсетей в меню титульной страницы и установите флажок Отображать значки социальных сетей . Значки социальных сетей отражают аккаунты, добавленные вами на панель «Ссылки соцсетей». Расположение значков зависит от макета, но обычно они отображаются внизу.
Стиль обложки
Используйте панель «Стиль» в меню титульной страницы, чтобы настроить дизайн. Каждая титульная страница имеет уникальные варианты стиля, не зависящие от шаблона вашего сайта и других титульных страниц.
Имейте в виду:
При изменении макета все настройки шрифта, цвета и размера сбрасываются до значений по умолчанию. Если вы вернетесь к ранее использовавшемуся макету, настройки стиля также будут сброшены.
Поскольку титульные страницы созданы с адаптивным дизайном, на мобильном устройстве они будут выглядеть немного иначе. Вы можете предварительно просмотреть, как ваша страница будет выглядеть на мобильных устройствах, с помощью просмотра устройств.
Изменить стиль
В меню титульной страницы выберите Стиль .Используйте настройки стиля, чтобы настроить титульную страницу. По мере внесения изменений предварительный просмотр страницы обновляется. Рекомендуем поэкспериментировать, чтобы найти понравившийся дизайн.
Вот список распространенных настроек титульной страницы:
Размещение — Размещение содержимого на странице. В зависимости от макета доступны следующие варианты: слева , по центру , справа или сверху , по середине , снизу .
Брендинг — Установите шрифт и цвет.
Заголовок — Установите шрифт и цвет.
Body — Установите шрифт и цвет.
Фон — Установите цвет фона (видимый, если не используется изображение или видео) и параметры границы страницы.
Media (недоступно в макетах расположения) — установите стиль как Full или Grid и настройте внешний вид сетки. Установите флажок Auto Overlay Color и Auto Loading Color или снимите флажок и установите цвета для каждого.Подробнее о загрузке цвета см. Ниже.
Кнопки — Установите шрифт, стиль и цвет любых кнопок.
Иконки социальных сетей — установка стиля и цвета иконок социальных сетей.
Элементы управления звуком (только макеты аудио) — установка стиля проигрывателя, а также шрифта и цвета дорожек.
Элементы управления видео (только макеты видео) — установка стиля и цвета проигрывателя.
Карта (только макеты локаций) — установка стиля карты.
Twitter (только макеты Twitter) — установите шрифт, стиль и цвет твитов ( Body ) и дескриптора Twitter ( Name и Meta ) текста.
Фоновое изображение
Большинство макетов включают варианты полного и сеточного изображения:
Выберите Full , чтобы заполнить весь фон титульной страницы одним изображением. Если вы загружаете несколько изображений, они будут отображать по одному изображению в виде слайд-шоу.
Выберите Сетка , чтобы создать фоновую сетку из повторяющихся изображений.Если у вас есть одно изображение, сетка будет повторять это изображение, чтобы заполнить пространство.
Параметр «Сетка» недоступен для макетов Focus, Flagship, Harbor или Monocle.
В макете «Монтаж» панель содержимого может закрывать некоторые из ваших изображений.
Используйте настройки, показанные ниже, чтобы установить соотношение сторон, ориентацию изображения и другие параметры.
Цвет загрузки
Большинство макетов титульных страниц предлагают вариант цвета загрузки, поэтому вы можете отображать отдельный цвет фона при загрузке обычного цвета фона или изображения.Вы также можете увидеть этот цвет при переходе между изображениями в слайд-шоу.
Примечание : макеты Flagship, Focus, Harbour и Monocle не поддерживают цвет загрузки.
По умолчанию в макете используется цвет Автозагрузка . Это означает, что цвет зависит от цвета фона вашего изображения или видео. Если у вас несколько фоновых изображений, цвет загрузки зависит от первого изображения на панели «Мультимедиа».
Чтобы выбрать собственный цвет, снимите флажок Цвет автозагрузки и установите новый, щелкнув Цвет нестандартной загрузки .
Чтобы отключить цвет загрузки, щелкните Пользовательский цвет загрузки и установите флажок Прозрачный .
Оверлей, цвет
Все макеты, кроме Harbor, предлагают вариант цвета наложения, который добавляет оттенок к фоновому изображению или цвету. По умолчанию в вашем макете используется Auto Overlay Color . Автоматический цвет обычно представляет собой оттенок серого, дополняющий ваше демонстрационное изображение.
Чтобы использовать пользовательский цвет наложения, снимите флажок Auto Overlay Color , щелкните Custom Overlay Color и выберите новый цвет.
Чтобы использовать настраиваемый цвет наложения в качестве цвета фона формы, но скрыть его от остальной части страницы, используйте ползунок непрозрачности, чтобы сделать цвет прозрачным.
FAQ
Почему я не могу увеличить размер текста после определенного момента?
Текст, логотипы и кнопки на титульной странице можно увеличить только до максимальной ширины, поддерживаемой каждым макетом. Эти ограничения предотвращают перекрытие контента и обеспечивают адаптивный дизайн.
В частности, основной текст отображает установленный размер шрифта, когда ширина браузера превышает 1800 пикселей.Для браузеров шириной 1800 пикселей и меньше максимальный размер основного шрифта зависит от ширины:
1800 пикселей в ширину: 27 пикселей
1600 пикселей в ширину: 22px
1020 пикселей в ширину: 18 пикселей
Ширина 760 пикселей: 17 пикселей
Ширина 600 пикселей: 16 пикселей
Например, если вы установите размер основного шрифта на 30 пикселей, он будет отображаться только в 30 пикселей, когда окно браузера посетителя имеет ширину не менее 1801 пикселей. В противном случае он будет изменен в соответствии с приведенным выше списком.Точно так же, если вы установите размер основного шрифта на 13 пикселей, он всегда будет отображать 13 пикселей, поскольку этот размер меньше любого из ограничений.
Брендинг и текст заголовка работают по-разному. Размер шрифта больше выполняет роль целевого объекта, а масштаб текста зависит от высоты и ширины браузера. Это масштабирование зависит от макета.
Могу ли я добавить собственный код на титульную страницу?
титульные страницы имеют очень продуманный дизайн и не предназначены для добавления пользовательского CSS. Чтобы настроить стиль титульной страницы (например, шрифты и цвета), используйте панель «Стиль».
Если вам все еще нужно добавить HTML или скрипты, используйте настройки титульной страницы, чтобы добавить постраничную инъекцию кода. Для получения дополнительной помощи посетите раздел Добавление пользовательского кода на ваш сайт.
Почему моя лента Twitter не обновляется?
Интеграция ленты Twitter обновляется каждые пять минут. Если вы заметили более длительную задержку, обновите соединение вручную:
В меню титульной страницы щелкните Social Icons , затем щелкните Connected Accounts .
Щелкните свою учетную запись Twitter.
Нажмите Сбросить данные . Вы увидите сообщение о том, что ваши данные сбрасываются, и ваш канал будет обновлен через несколько минут.
Щелкните Сохранить .
Кнопка воспроизведения изменяет положение на макете проектора.
Расположение кнопки воспроизведения в макете проектора зависит от количества текста в поле Body:
При небольшом количестве текста кнопка воспроизведения остается по центру.
Когда текст превышает определенную ширину, кнопка воспроизведения перемещается в верхний левый угол.
Позиция зависит от размера браузера.
Добавление блоков содержимого в макет страницы — Справочный центр Showpad
Что вам даст
С помощью функции «Страницы» Showpad вы можете создавать визуально привлекательные целевые страницы с группами контента по теме или персонажу. Представляя привлекательные и контекстно-релевантные страницы, торговые представители могут улучшить общее впечатление о покупателях.
Страницы визуально привлекательны и универсальны, поэтому существует множество типов блоков контента, которые вы можете добавлять в разделы своей страницы.Ниже вы найдете пошаговые инструкции по добавлению различных типов контента на вашу страницу.
В этой статье мы объясняем различные блоки содержимого, которые вы можете добавить в свой макет.
Это нужно для успеха
Пакет Showpad Plus или Ultimate
Аккаунт администратора Showpad
Страница с выбранным макетом
Примечание: Клиенты с пакетом Plus не могут редактировать или добавлять в шаблонный раздел страницы, но могут добавлять и редактировать разделы под ним.При использовании Pages в пакете Plus заголовки будут фиксироваться для любого выбранного вами шаблона, и вы не сможете добавлять дополнительные блоки галереи.
Быстрый путь к совершенству
Выберите блоки Text, Gallery, Assets, Pages, Experiences и Spacers, чтобы добавить
Перетащите их на свой макет
Отредактируйте блоки, чтобы добавить контент
Сделайте это пошагово
Работая над страницей, не забудьте нажать кнопку «Сохранить», чтобы изменения не были потеряны.Выберите блок содержимого, о котором хотите узнать больше.
Текст
Для работы с содержимым текстового блока щелкните текстовое поле на странице, чтобы открыть панель редактирования справа.
В редакторе текстовых блоков введите то, что вы хотите написать в текстовом блоке. Он автоматически начнет заполнять страницу.
Измените внешний вид вашего текста с помощью функции редактора форматированного текста. Выберите свой шрифт, размер шрифта, стиль и цвет шрифта. Вы также можете создавать маркированные или нумерованные списки, включать гиперссылки и удалять форматирование.
Галерея
Пользователи пакета Ultimate могут добавлять на свои страницы дополнительные блоки галереи.
Щелкните блок галереи, чтобы открыть панель редактирования.
Перетащите изображения со своего устройства в раздел «Содержимое» блока галереи или выберите «Обзор», чтобы найти и загрузить нужные файлы. В настоящее время в галерею можно добавить до пяти изображений.
В разделе «Дизайн» установите флажок «По размеру блока», если вы хотите, чтобы изображения увеличивались по размеру блока.В зависимости от размера блока изображения и размера изображения оно может быть обрезано при выборе «По размеру блока».
Выберите, хотите ли вы использовать поля вокруг изображений. Имейте в виду, что галерея изображений не будет расширяться за пределы максимальной ширины страницы 1100 пикселей, даже если поля не выбраны.
Если вы загрузили более одного изображения, вы увидите параметр «Показать эскизы». Если этот параметр выбран, у вас будет отображаться навигация по всем изображениям в библиотеке с миниатюрами, отображаемыми под основным изображением.
Если вы загрузили более одного изображения, вы также увидите параметр «Автоматический переход от одного изображения к другому». Если вы отметите этот выбор, появится ползунок, где вы сможете выбрать продолжительность между переходами в секундах.
Чтобы внести изменения или удалить изображение из галереи, наведите указатель мыши на изображение. Вы увидите значок редактирования и значок корзины.
Если вы выберете «Правка», измените точку фокусировки на изображении, перетащив поле в нужную точку фокусировки.Изображение справа покажет, как это изменит внешний вид изображения.
Другой вариант при редактировании изображения в галерее — прикрепить ссылку на изображение. Изображение может быть связано с активом, страницей, опытом или URL-адресом.
Если вы хотите связать свое изображение, выберите тип контента, на который вы хотите создать ссылку, из раскрывающегося меню, выберите «Тип», если хотите, а затем найдите и выберите контент.
Чтобы удалить изображение из галереи, наведите указатель мыши на изображение и щелкните значок корзины.
Когда вы закончите создавать свою галерею изображений, нажмите «Сохранить страницу».
Активы
Щелкните блок Asset, чтобы открыть панель редактирования.
В разделе «Общие» начните с добавления заголовка к блоку активов.
Если вы хотите добавить значок в блок ресурсов, включите настройку, затем перетащите или найдите значок для загрузки.
В разделе содержимого у вас есть возможность добавить содержимое вручную с помощью поиска ресурсов или динамически с помощью тегов.Если вы выберете «Вручную», найдите ресурс, который хотите загрузить, затем выберите его из списка. Он будет добавлен в раздел.
Вы можете выбрать динамическую фильтрацию содержимого путем поиска тегов с параметрами, соответствующими всем перечисленным тегам, что исключает содержимое, которое не включает все теги. Фильтр соответствия любому из этих тегов добавит результаты, соответствующие любому добавленному тегу. Или вы можете выбрать, какие теги содержимого исключить, добавив их в поле «Нет совпадений».
Вы увидите список содержимого, которое теперь включено в ваш блок, а под ним вы сможете ограничить количество файлов в блоке.Чтобы ограничить количество файлов в блоке, установите флажок, затем добавьте максимальное количество ресурсов, которые вы хотите заполнить.
В разделе «Настройки» выберите отображение активов в виде сетки или списка.
Для пользователей при просмотре блока ресурсов порядок, в котором отображаются ресурсы, нечувствителен к регистру, сначала символы и символы отображаются перед именами файлов, которые начинаются с цифры, а цифры группируются вместе. Например, «a» = «A», «Asset.PDF» будет отображаться перед «1Asset.PDF» и «1Asset.PDF »,« 2Asset.PDF »будет отображаться перед« 10Asset.PDF ».
Страниц
Щелкните блок Pages, чтобы открыть панель редактирования.
У вас будут те же параметры для настройки блока содержимого страниц, что и блока содержимого актива, однако вы будете добавлять страницу. См. Указания выше.
Добавление опыта или страницы к существующей странице не означает, что пользователь получает доступ к этому контенту автоматически.
Например, пользователь не может открыть страницу, вложенную в другую страницу в расширенном интерфейсе, если у него еще нет доступа к вложенной странице в том же или другом интерфейсе.Убедитесь, что у пользователей уже есть доступ к этой странице в существующем интерфейсе. Если нет, добавьте страницу в классический интерфейс, к которому у пользователя есть доступ, и он также сможет открыть его в расширенном интерфейсе.
Впечатления
Щелкните блок Опыт, чтобы открыть панель редактирования.
Начните с добавления заголовка к блоку содержимого, если хотите.
Если вы хотите добавить значок в блок ресурсов, включите настройку, затем перетащите или найдите значок для загрузки.
В разделе содержимого вы можете выбрать тип опыта, который вы хотите добавить на страницу, что поможет фильтровать доступные параметры, если у вас их много.
В меню «Опыт» введите в поиске имя опыта, который вы хотите добавить на свою страницу, затем выберите его в раскрывающемся меню. Выберите Root, чтобы выбрать основную папку опыта.
Прокладки
Разделители добавляются для создания пробелов между блоками содержимого.Нажмите на прокладку и с помощью регулятора измените высоту прокладки на холсте страницы.
В следующей статье вы узнаете больше о стилизации вашей страницы.
Разработка целевой страницы | Adobe Campaign
О дизайне контента целевой страницы Дизайн контента
Целевые страницы создаются как любая маркетинговая деятельность.
При разработке целевой страницы необходимо определить содержимое самой страницы, страницы подтверждения и страницы ошибки.Используйте переключатель под панелью действий для отображения и настройки каждой из этих страниц.
Содержимое целевых страниц разрабатывается с помощью редактора содержимого кампании.
ПРИМЕЧАНИЕ
Если ваш экземпляр был установлен до выпуска Adobe Campaign Standard 19.0, у вас все еще есть доступ к устаревшему редактору содержимого электронной почты. Интерфейс, принципы использования и настройки в основном такие же, как описано ниже для целевых страниц. Однако все функции могут быть недоступны или поддерживаться в устаревшем редакторе содержимого электронной почты, который считается устаревшим начиная с 19.0 выпуск. Чтобы быстро редактировать содержимое электронной почты с помощью интерфейса перетаскивания с расширенными функциями, используйте дизайнер электронной почты.
На этой странице описаны особенности редактора содержимого целевой страницы. Для получения дополнительной информации о действиях, которые являются общими для одного или нескольких маркетинговых мероприятий, обратитесь к этим разделам из руководства Проектирование содержимого электронной почты :
ПРИМЕЧАНИЕ
Если у вас есть целевая страница, которая уже предопределена в формате HTML, вы можете импортировать ее напрямую с помощью кнопки Изменить содержимое .
Перед импортом HTML-страницы в Adobe Campaign убедитесь, что она правильно открывается и отображается в различных браузерах. Если HTML-страница содержит сценарии JavaScript, они должны выполняться без ошибок вне редактора. В общем, избегайте использования сценариев в содержимом сообщения, чтобы убедиться, что оно правильно обрабатывается почтовыми клиентами.
Интерфейс редактора содержимого целевой страницы
Редактор содержимого целевой страницы позволяет легко определять, изменять и персонализировать содержимое в Adobe Campaign.Чтобы получить к нему доступ, щелкните блок Content на панели инструментов целевой страницы.
Редактор содержимого разделен на три разных раздела. Эти разделы позволяют просматривать и редактировать контент.
Палитра в левой части экрана позволяет изменять общие параметры, связанные с выбранным блоком. Параметры, которые можно изменить: цвет фона, граница, выравнивание текста, условие видимости и т. Д. См. Вставка поля персонализации.
Панель действий содержит общие параметры страницы. Вы можете выбрать шаблон и изменить режим отображения.
Основная зона редактирования позволяет напрямую взаимодействовать с контентом с помощью контекстной панели инструментов: вставлять ссылку в изображение, изменять шрифт, удалять поле и т. Д.
Панель действий содержит различные кнопки, которые позволяют вам взаимодействовать с создаваемым контентом.
Панель инструментов — это контекстный элемент интерфейса редактора, который предлагает различные функции в зависимости от выбранной зоны.Он содержит кнопки действий и кнопки, позволяющие изменять стиль текста. Выполненные изменения всегда применяются к выбранной зоне. Выбрав блок, вы можете, например, удалить или продублировать его. Выделив текст внутри блока, вы можете превратить его в ссылку или сделать его жирным.
ВАЖНО
Некоторые функции панели инструментов позволяют форматировать содержимое HTML. Однако, если страница содержит таблицу стилей CSS, инструкции из таблицы стилей могут иметь приоритет по сравнению с инструкциями, указанными через панель инструментов.
Управление структурой и стилем целевой страницы
Управление блоками в редакторе контента
Различные элементы содержимого HTML отображаются на целевой странице в виде блоков, соответствующих тегу

. Выберите блок, чтобы с ним взаимодействовать. Затем он будет окружен синей рамкой.
Если выбран блок, родительские объекты соответствующего HTML-элемента будут отображаться в строке навигации, расположенной в нижней части зоны редактирования.
При наведении указателя мыши на один из элементов навигации соответствующий элемент выделяется. Таким образом, вы можете легко перемещаться между различными блоками и выбирать именно тот HTML-элемент, который вы хотите изменить.
Используйте параметры палитры и контекстной панели инструментов для изменения, удаления или дублирования блока.
Для блоков, содержащих текст, щелкните еще раз в блоке, чтобы включить режим редактирования текста. Рамка вокруг блока станет зеленой.Затем вы можете выбрать или ввести текст. Используйте параметры палитры и контекстной панели инструментов, чтобы добавить ссылку или изменить форматирование текста.
Параметры, определенные для элемента в блоке (ссылки, поля персонализации, блоки содержимого и т. Д.), Могут быть изменены в любое время из палитры.
Добавление границы и фона в редакторе содержимого
Вы также можете определить цвет фона , выбрав цвет на диаграмме.Этот цвет применяется к выбранному блоку.
К выбранному блоку можно добавить границу .
Изменение стиля текста в редакторе содержимого
Чтобы изменить стиль текста, вы должны щелкнуть внутри текстового блока.
Чтобы изменить выравнивание текста, выберите один из следующих трех значков на палитре слева:
Выровнять по левому краю : выравнивает текст по левому краю выбранного блока (добавляет style = «text-align: left;»).
По центру : центрирует текст в выбранном блоке (добавляет style = «text-align: center;»).
Выровнять по правому краю : выравнивает текст по правому краю выделенного блока (добавляет style = «text-align: right;»).
Вы также можете использовать панель инструментов для изменения атрибутов шрифта: адаптировать размер шрифта, сделать текст полужирным или курсивом, подчеркнуть или изменить цвет текста. Обратитесь к этому разделу.
Вставка изображений на целевую страницу
В содержимом целевой страницы выберите блок, содержащий изображение.
Нажмите кнопку Insert .
Выберите Локальный образ на контекстной панели инструментов.
Выберите файл.
При необходимости настройте свойства изображения.
Определение динамического содержания на целевой странице
Чтобы определить динамическое содержимое на целевой странице, выберите блок с помощью хлебной крошки или щелкнув элемент напрямую.
Некоторые блоки, например изображения, нельзя выбрать напрямую. В этом случае выберите родительский блок с помощью навигационной крошки. Затем вы можете изменить все элементы, включенные в этот родительский элемент, включая изображения. Условие будет применяться ко всем дочерним элементам в родительском блоке.
Навигационная цепочка представлена в разделе «Управление блоками».
Следующие шаги для определения динамического содержимого на целевой странице аналогичны шагам, которые необходимо выполнить для электронного письма.См. Этот раздел.
ПРИМЕЧАНИЕ
Если вариантный элемент выделен красным, это означает, что выражение еще не было определено.
Вы можете перемещаться между различным динамическим содержимым блока. Для этого:
Выберите блок.
Стрелки появляются справа и слева от изображения.
Щелкните стрелку вправо, чтобы просмотреть доступное динамическое содержимое.
Стрелки с каждой стороны тускнеют в зависимости от того, достигли ли вы последнего или первого доступного динамического содержимого.
Чтобы удалить все условия, примененные к блоку, выберите этот блок и щелкните значок Отключить динамическое содержимое .
Выберите динамический контент, который вы хотите сохранить.
На поддоне:
Содержимое, для которого введено выражение, больше не выделяется красным контуром, оно отображается серым.
Текущее выделенное содержимое отображается синим цветом.
Добавьте блок навигации на страницу ActiveCampaign — Справочный центр ActiveCampaign
Блок «Навигация» имеет следующие параметры редактирования и стиля:
1. Тема навигации
Недавно добавленная навигация имеет ту же тему, что и другие добавленные элементы навигации. Снимите флажок «Использовать общую тему» , чтобы сделать тему уникальной.
2. Элементы навигации
Добавьте элемент навигации, щелкнув серый «+» (в правом верхнем углу).Измените положение элемента, перетащив перетаскивая с серым символом «||» ручка слева. Чтобы удалить существующий элемент, щелкните красный значок «x» справа от него.
Каждый новый блок навигации начинается с одного пункта: «Домой». У каждого элемента есть возможность заставить что-нибудь произойти при нажатии на него. Щелкните элемент навигации , чтобы изменить его действие «При щелчке».
3. Стили навигации
Измените цвет, размер и выравнивание навигации. Щелкните левый квадрат , чтобы изменить его цвет. Доступные цвета определяются цветовой палитрой вашей темы страницы. Вы можете выбрать один из трех размеров: маленький, средний или большой. Для выравнивания вы можете выбрать один из трех вариантов: влево, по центру или вправо.
4. Скрыть логотип
Переключите , чтобы указать, нужно ли скрывать логотип навигации.
5. Заменить изображение логотипа и замещающий текст
Замените изображение логотипа и добавьте замещающий текст для этого изображения.Замещающий текст используется для доступности и когда изображение не может быть отображено на устройстве просмотра.
6. Logo On Click
Сделайте что-нибудь, что произойдет, когда щелкнет логотип этой навигации.
No related posts.

textrunet.ru — Жизнь диктует — я записываю

Лендинг размеры блоков: выбираем оптимальный первый экран для Landing page

выбираем оптимальный первый экран для Landing page

Экраны лендинга

Какого размера делать лендинг

Примеры идеального первого экрана

размер лендинг страницы — учимся делать landing page в фотошопе

Размер лендинга | ЗЕКСЛЕР

Размер первого экрана

Шрифты для лендинга

Оптимальная структура лендинг-пейдж

Лендинги на главной — QIWI

Шаблоны

Чек-лист

Подготовка к разработке

Размер артбордов

Область изображения

Изображения

15 основных ошибок в дизайне современных лендинг пейдж | DesigNonstop

15 основных ошибок в дизайне современных лендинг пейдж

2

Как должен выглядеть лендинг для криптовалюты

Getresponse шаг за шагом: создаем лендинг

Познакомимся с конструктором

Найдите свой путь в редакторе блоков целевой страницы — Поддержка ClickDimensions

Выберите макет

Меню правого клика

Главное меню

Выберите макет

Главное меню

Рекомендации по изображениям для блоков содержимого

Общие советы для изображений

Размеры изображений для писем

Изображение

Карта изображения

12

Группа изображений

Изображение

Картинка

Изображение + текст

Группа изображений

8

Фоновые изображения на целевых страницах

— Документация по веб-шаблонам — Веб-редактирование — Веб-разработка — ИТ-решения — Государственный университет Миннесоты, Манкато

Ряд 1

Адаптивный слайдер

Ряды 2 и 3

Основное сообщение

Это пример заголовка

Широкая коробка

Это пример заголовка

Кнопка MSU

Классы CSS

титульных страниц — Справка Squarespace

Посмотреть видео

Добавить титульную страницу

Макеты титульной страницы

Добавить брендинг и текст

Добавить медиа

Установить цвет фона

Добавить действия

Добавить кнопки или ссылки навигации

Добавьте форму или подпишитесь на рассылку новостей

Добавить социальные иконки

Стиль обложки

Изменить стиль

Фоновое изображение

Цвет загрузки

Оверлей, цвет

FAQ

Почему я не могу увеличить размер текста после определенного момента?

Могу ли я добавить собственный код на титульную страницу?

Почему моя лента Twitter не обновляется?

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

Добавление блоков содержимого в макет страницы — Справочный центр Showpad

Разработка целевой страницы | Adobe Campaign

О дизайне контента целевой страницы Дизайн контента

Интерфейс редактора содержимого целевой страницы

Управление структурой и стилем целевой страницы

Управление блоками в редакторе контента