Landing page размеры: выбираем оптимальный первый экран для 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. Остальное займет полоса прокрутки и вертикальные границы браузера. По этому же принципу рекомендуем выбрать оптимальный размер лендинга для остальных устройств.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

​ ​

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

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

​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание Landing Page в Adobe Photoshop — пошаговая инструкция — SkillsUp

Что такое лэндинг пэйдж и с чем его едят?

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

Зачем нужны Landing page?

Потребность в так называемых «продающих страницах» возникла с бурным ростом интернет индустрии и усиливающейся конкуренцией. Благодаря грамотно продуманной логике страницы можно значительно повысить продажи не увеличивая при этом рекламных бюджетов. Лэндинги также помогают с большей эффективностью работать с привлеченным через разные каналы трафиком. К примеру, если вы используете контекстную рекламу, медийные сети и баннерную рекламу на разных площадках, то использование в качестве целевой страницы специально подготовленного лэндинга значительно увеличит ROI (возврат на инвестиции) ваших рекламных каналов. Как добавить к вашему сайту лэндинг пейдж? Вам нужно либо самостоятельно сделать эту страницу либо заказать разработку landing page у специализирующихся на этом компаний, например компании e-art. С заказом всё просто, заплатил денег — получил готовую сверстанную страницу. А вот с тем чтобы самому сделать подобную страницу дела обстоят немного сложнее. Предлагаем разобраться в создании пошагово:

Шаг 1: Подготовка

В создании лендинга мы будем полагаться на популярный инструмент 960 Grid System, который в поможет нам правильно расположить графику на рабочем пространстве чтобы потом насадить её на уже готовую схему блоков от 960 Grid System. В работе были использованы следующие шрифты: Source Sans Pro, Nevis и Bebas Neue, но вы можете использовать шрифты на ваше усмотрение. В качестве иконок использовался набор Impressionist Icons, который на данный момент является платным. 

Для работы нам понадобятся скачать 960 Grid System. После скачивания разархивируйте его в папку и откройте PSD файл с 12 колонками под названием 960_grid_12_col.psd, он находится в папке templates\photoshop. Сперва нам нужно добавить немного рабочего места, поэтому перейдите в меню Image > Canvas Size и установите Width (Ширина) 1200px and Height (Высота) 1330px.

Оставьте 245px сверху для нашей главной картинки в шапке страницы. Остальному пространству задайте серый цвет (#f0f0f0) с помощью инструмента Rectangle Tool. Просто выберите этот инструмент и нарисуйте прямоугольную область, покрывающую всё пространство ниже наших заветных 245px, отведенных под шапку. Обратите внимание, что при создании прямоугольника вы должны задать ему нужный цвет (#f0f0f0) в палитре.

Результат должен выглядеть примерно вот так:

Шаг 2: Изображение в шапке

Для изображения в хедере рекомендуем вам подобрать тематическую картинку достаточного разрешения — 1200 на 245 пикселей будет в самый раз. Расположите картинку на свободном пространстве, которое мы оставили на предыдущем шаге, после чего размойте картинку любым известным вам способом. Например вы можете применить размытие по Гауссу перейдя в меню Filter > Blur > Gaussian Filter и поставьте радиус равным 4px.

Шаг 3: Панель навигации

С помощью Rectangle tool создайте прямоугольную область высотой 20px и шириной на всю рабочую область, после чего придайте полученному слою Opacity в 25% — таким образом мы добьёмся полупрозрачности слоя как это показано на картинке снизу.

Переключитесь на Horizontal Type Tool (T). В дальнейшем мы будем использовать шрифт Source Sans Pro — совершенно бесплатный шрифт, который можно без проблем сказать с серверов Гугла.

В опциях выставьте следующие параметры стиля:

• font family: Source Sans Pro
• font style: Bold
• font size: 16px
• text color: #aed572

После этого используйте Horizontal Type Tool чтобы написать выдуманный или реальный имейл и номер телефона. Справились? Переходим к иконкам. Как мы уже говорили выше, в данной работе использовался платный набор иконок, но вы можете вполне обойтись и бесплатным по этой ссылке — designinstruct.com/articles/resources/25-free-high-quality-minimalist-icon-sets/. Рекомендуем присвоить иконкам белый цвет (#ffffff). После того как надписи и иконки уже на своих местах — придайте им Drop Shadow эффект как это показано на рисунке.

В результате у вас должно получиться вот это:

Шаг 4: Лого-ленточка

В качестве логотипа вы можете использовать любое растровое или векторное изображение, либо же нарисовать фигуру средствами Adobe Photoshop. Перейдите в меню View > Show > Guides, таким образом вы включите предустановленные в 960 Grid System линии разметки. Если хотите получить подобную ленточку — используйте инструмент Pen Tool и попросту обведите нужный вам контур по линиям разметки, после чего придайте элементу зеленый (#79b02f) цвет.

Теперь давайте придадим нашей ленте несколько дополнительных стилей, чтобы она стала выглядеть как полноценный лого. Начнем с Inner Shadow с Opacity на уровне 35%. 

… и добавим Bevel and Emboss. Для параметра Highlight Mode установите Opacity на уровне 0% (нам ведь совсем не нужен хайлайт эффект), в то время как для Shading Mode ставим Opacity в 15%. Обратите внимание как это выглядит на рисунке:

После этого добавим Gradient Overlay к элементу. Параметр Blend Mode оставьте в позиции Soft Light, а Opacity на уровне 50%. Вот так должно выглядеть окно настройки эффектов:

Далее иcпользуем Pattern Overlay чтобы приаттачить к нашей стрелочке какой-нибудь интересный паттерн. По умолчанию установлено довольно небольшое количество паттернов, поэтому рекомендуем вам поискать интересные варианты на subtlepatterns.com. После того как выберете понравившийся вам паттерн, установите Opacity на уровне 5% чтобы у вас получилось нечто такое:

Теперь можно нанести какой-нибудь текст поверх нашего логотипа. Используйте Horizontal Type Tool и напишите нужные вам символы или текст. В нашем случае это буквы «DM» в шрифте Nevis (Bold 36px) + Drop Shadow эффект.

Шаг 5: Заголовки

Для оформления заголовков был использован шрифт Source Sans Pro, заботливо выделенный Bold‘ом. Больший заголовок выполнен шрифтом с размером 24pt, меньший — 18pt.

Вот так заголовки выглядят после придания им эффекта Drop Shadow:

Шаг 6: Круги

Теперь нам с вами предстоит добавить на наш лендинг пейдж 3 круга: 2 круга одинакового размера + один побольше и соединить их линией в 5px. Чтобы сделать круги воспользуемся инструментом Ellipse Tool, а для линии подойдет Line Tool с толщиной линии в 5 px.

Далее используйте рандомный дефолтный свой любимый шрифт и напишите несколько надписей с ключевыми аспектами лэндинга. В самом большом круге добавьте +10pt к размеру шрифта.

Шаг 7: Кнопка призыва к действию (Call to action)

Итак, мы наконец-то добрались до call-to-action кнопки. Сделаем её с помощью инструмента Rounded Rectangle Tool. Выставьте радиус 3px + цвет #96c64f и нарисуйте элемент шириной 7px и высотой 35px, после чего добавьте к элементу Drop Shadow эффект:

Далее добавим Inner Shadow c Distance в 1px и Opacity на уровне 30%. Получим следующее:

И снова Bevel and Emboss для call to action кнопки. Этот эффект отлично справляется с задачей придания объёма элементам, именно поэтому мы его здесь и используем. Но с ним тоже не стоит особо перегибать, чтобы сделать эффект едва заметным, выставьте для опции Highlight Mode оставьте Opacity на уровне 0% а для Shadow Mode — на уровне 7%.

Далее добавляем к элементу эффект Gradient Overlay в режиме смешивания Soft Light с Opacity на уровне 60%:

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

• Создайте новый документ любого размера
• Создайте новый слой и удалите дефолтный бэкграунд
• Перейдите в меню Select > All
• Выберите Edit > Fill чтобы заполнить всё рабочее пространство
• Далее снимаем выделение Select > Deselect
• Добавляем достаточно заметный шум следующими действиями Filter > Noise > Add Noise
• Снова выделяем всё рабочее пространство: Select > All
• Переходим в меню Edit > Define Pattern

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

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

Далее нам нужно соз

Как длина посадочной страницы влияет на её конверсию — Офтоп на vc.ru

Брайан Хонигмэн

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

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

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

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

Проведите множество А/Б-тестирований, чтобы подтвердить то, что вы уже и так знаете о вашей аудитории, и чтобы узнать что-то новое о вашем веб-трафике. 

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

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

Длинные лендинги 

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

Чем сложнее ваши цели, тем длиннее должен быть лендинг. Так говорит сооснователь аналитических сервисов KISSmetrics и Crazy Egg Нил Пател. Это хорошее и проверенное правило, которому нужно следовать. Главное преимущество длинного лендинга в том, что пользователь, который пролистывает страницу до конца, где расположена форма для подписки, и просматривает все детали страницы, становится «лидом» высокого качества. Нет даже смысла упоминать, что чем выше качество текста, чем тщательнее проработан визуальный ряд на вашем лендинге, тем лучше это будет для поисковых систем в долгосрочной перспективе. 

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

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

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

Популярный 

Насколько длинным должен быть эффективный лендинг?

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

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

«Если длинные целевые страницы все еще не считаются пережитком прошлого, то должны рассматриваться именно так. Совершенно очевидно, что люди обладают краткой продолжительностью концентрации внимания, поэтому их нужно конвертировать за счет максимально быстрой продажи продукта», — пишет фриланс-автор Кристи Хайнс (Kristi Hines).

Выступая в поддержку длинных лендингов, Брайан Мэйси (Bryan Massey) из Conversion Science сказал: «…продающее письмо должно поддерживать несколько разных режимов восприятия, включая сканирование, частичное внимание и вовлеченное чтение… методичного читателя нужно проводить через страницу в более традиционной манере.»

Защитники длинного копирайтинга в качестве главного козыря обычно приводят слова Дэвида Огилви (David Ogilvy), основателя Ogilvy & Mather:

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

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

Что говорят ученые?

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

Разумеется, это не значит, что данной темой никто не занимается. Одна команда исследователей обнаружила, что длинные тексты на баннерах обладают более высоким показателем CTR (click through rate). Но дело в том, что даже самое развернутое сообщение на баннере едва ли потянет даже на короткий продающий текст.

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

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

Интернет-маркетологи тестируют эти вещи на протяжении многих лет

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

Вот что показали несколько тестов.

Пример 1. Crazy Egg достигают желаемого при помощи длинного копирайтинга

В попытке увеличить уровень конверсии сайта Crazy Egg основатели платформы Нил Патель и Хитен Шах (Hiten Shah) обратились за помощью к Conversion Rate Experts. CRE рассмотрели существующую страницу и определили несколько областей для улучшения. Они обнаружили, что посетители не всегда понимали, чем занимается этот ресурс или как работают тепловые карты (heat maps). Потенциальные клиенты также не могли сказать, стоят ли данные, которые они должны получить, затраченных денег. Помимо этого, у них возникали вопросы по поводу различных функций и того, чем Crazy Egg отличается от бесплатных инструментов.

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

Результат? Новая длинная страница превзошла контрольную версию на 30%.

Пример 2. Crazy Egg получают еще лучшие результаты с коротким текстом

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

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

В итоге, было подготовлено четыре варианта новой страницы — все короче, чем контрольный лендинг — и проведен тест:

Результат? Версия D (самая правая страница на скриншоте), показала конверсию на 13% лучше, чем длинный контрольный лендинг. И хотя победитель оказался не таким коротким, как оригинал в примере №1 — он намного короче, чем новая контрольная страница.

Пример 3. Highrise оказались в выигрыше из-за длинного копирайтинга

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

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

Как только лендинг был готов, был проведен сплит-тест с участием 42 000 посетителей:

Результат? Более длинная страница обеспечила на 37,5% больше бесплатных подписок, чем контрольная. Это подтверждает эффективность длинного копирайтинга.

Пример 4. Highrise получили еще больше, сократив копирайтинг

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

Результат? Короткая страница повысила количество платных подписок на 102,5%. Затем команда провела еще один тест, добавив к новому дизайну львиную долю контента с длинной страницы. В итоге число регистраций снизилось на 22,72%. В данном случае короткий копирайтинг оказался более эффективным.

Пример 5. 911 Restoration урезали текстовую часть лендинга и повысили конверсию

Компания 911 Restoration привлекает трафик на сайт преимущественно за счет SEO и PPC. Этот трафик ответственен за 90% их потенциальных клиентов. Целевая страница была относительно длинной, так как она содержала важные ключевые слова, которыми клиенты пользуются при поиске.

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

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

Результат? Более краткая вариация генерировала 35 звонков на 133 клика ($4 982 рекламного бюджета), в то время как длинная — 34 звонка на 177 кликов ($7 177). Таким образом, конверсия повысилась на 37%, а затраты на конвертацию снизились на 33% — большая победа для короткого копирайтинга.

Пример 6. Moz делают свою страницу большей и повышают конверсию

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

Сотрудничая с Conversion Rate Experts, Moz опросили покупателей на всех стадиях воронки продаж (sales funnel), включая free-trial подписчиков. Используя итеративный процесс юзабилити-теста, модификации страницы и повторного теста, Moz создали новый лендинг, который включал информацию об услуге и объяснял пользователям, что конкретно они получат при покупке инструментов. Новая страница была в 7 раз длиннее, чем контрольная.

Затем они провели сплит-тест с более чем 5 000 посетителей сайта, чтобы сравнить эффективность обоих лендингов:

Результат? Длинный лендинг повысил продажи Moz Pro на 51,83% и тем самым привлек более $1 000 000 прибыли. Это отличный результат для длинного контента.

Пример 7. Qi Networks повышает конверсию на 70,1% за счет короткого копирайтинга

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

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

Результат? Более лаконичная страница повысила конверсию на 70,1%. Поклонники короткого копирайтинга обожают использовать этот пример как аргумент в пользу эффективности кратких текстов.

Пример 8. Длинный контент Quality Training сработал не хуже

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

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

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

Результат? Длинная страница повысила конверсию на 662% в сравнении с оригинальной и повлекла за собой рекордные продажи.

Закономерность или ее отсутствие?

Так когда же следует использовать длинные и короткие тексты? Боб Кемпер (Bob Kemper), научный руководитель в MECLABS, проанализировал сотни неопубликованных A/B тестов длинного и короткого копирайтинга, чтобы понять, какие факторы влияют на этот выбор. Он обнаружил три аспекта:

1. Природа мотивации посетителя

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

2. Изначальный уровень беспокойства о продукте или компании

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

3. Стоимость или обязательства, связанные с конверсией

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

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

Длинный копирайтинг против короткого. Ось Y: внизу — эмоциональные желания, вверху — рациональные, аналитические потребности. Ось X: слева — низкая стоимость/незначительные обязательства, справа — высокая стоимость/серьезные обязательства

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

Сравните матрицу Кемпера со шкалой состояния осведомленности, которой Джоанна Вибе (Joanna Wiebe) поделилась на сайте Copy Hackers, и вы получите еще более полную картину в плане того, когда в стоит использовать длинный или короткий контент:

Ось Y — как много вы должны рассказать? Ось X — низкая осведомленность > высокая осведомленность

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

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

На что обратить внимание?

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

Иными словами, вам вовсе не нужно тестировать длину копирайтинга. Вместо этого, поразмыслите над следующим:

1. Где и почему покупатели покидают вашу страницу?
2. Каков их уровень осведомленности?
3. Интересует ли их что-то, чего нет на вашей странице?
4. Что из сказанного вами их совершенно не волнует?
5. Какие элементы страницы ни на что не влияют?
6. Какие возможности и преимущества должны упоминаться в первую очередь?
7. Как вы можете выразить свою мысль эффективнее?
8. Можете ли вы изъясняться более сжато?
9. Какие слова использует ваша целевая аудитория, чтобы описать ваш продукт и стоит ли вам задействовать их?

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

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

Вместо заключения

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

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

Создали лендинг пейдж и задумываетесь об оптимизации конверсии? Ознакомьтесь с нашей технологией по увеличению бизнес-показателей >>>

Высоких вам конверсий!

По материалам: blog.crazyegg.com 

18-05-2016

Лендинг пейдж (Landing): что это такое и как создать

Что такое лендинг пейдж (или landing page), его особенности и преимущества

Итак, лендинг пейдж – это страница для «захвата» клиента. Идеальный landing page должен побудить потенциального клиента к тому или иному активному действию на сайте: оформить заказ, совершить звонок, оформить подписку на рассылку, заполнить анкету и т.д.

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

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

История развития лендинг пейдж

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

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

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

Подобные примеры лендинг пейджа видел каждый, кто пытался найти тот или иной продукт в Сети.

Цели и задачи посадочной страницы

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

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

Экспертами интернет-маркетинга утверждается, что грамотно составленная лендинговая страница может значительно повысить конверсию ресурса. Примеры удачных лендинг страниц показывают, что показатели конверсии при этом увеличивались от 8 до 40%.

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

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

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

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

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

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

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

Она представлена в виде графика в форме перевернутой пирамиды, отсюда и название – воронка. Как правило, она представлена так:

• число людей, выполнивших посещение сайта;
• число уников лендинг пейдж, выполнивших то или иное целевое действие;
• количество клиентов лендинг пейдж, выполнивших оплату продукта.

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

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

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

Кроме того, воронка продаж может сортировать клиентов по их поведению и их интересам.

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

Пример хорошего лендинга, когда потенциальный клиент лендинг пейдж проходит 4 шага:

1. осознание того, что нужно приобрести;
2. проявление интереса к предложению;
3. принятие решения о покупке;
4. совершение целевого действия, сама покупка.

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

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

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

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

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

Эффективность страницы захвата

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

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

• Менеджеры проекта. Они обозначают конечные цели при изготовлении лендинг пейдж, следят за всеми этапами исполнения технического задания на лендинг пейдж, рассчитывают окупаемость потраченных средств на рекламу, а также принимают все самые важные решения.
• Маркетологи. Они занимаются разработкой общей стратегии проекта лендинг пейдж, созданием прототипа будущей страницы. Также в их задачу входит поиск наиболее эффективных партнерских программ и формирование уникальных торговых предложений (так называемый УТП). Кроме того, ими определяется перспективность разработанных концепций, осуществляется аналитическая деятельность по полученным результатам.
• Веб-дизайнеры. Они заняты разработкой прототипа страницы и отвечают за ее спецэффекты.
• Front-end разработчики. Занимаются непосредственно программированием исходного кода и последующей версткой. В их задачу входит тестирование страницы на различных устройствах, а также корректировка форм обратной связи и отправки заказа.
• Копирайтеры. Эти специалисты пишут тексты, создают заголовки 4U. Их привлекают и на этапе прототипирования посадочной страницы, ее оптимизации и при разработке смысловых блоков.
• Специалисты- контекстологи SEM. Проводят анализ семантического ядра сайта, подбирают нужные целевые запросы для поисковых сервисов, настраивают контекстные рекламы, проводят анализ эффективности рекламной кампании.

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

Для чего создавать одностраничный сайт, три главных преимущества лендинга

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

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

Выделяют три преимущества лендинга:

1. Одностраничники помогают увеличить число активных посетителей, которые подписываются на новостную рассылку, в среднем на 20-30%.
2. Повышается на 50% вероятность приобретения предлагаемого продукта.
3. Посетители легче убеждаются в том, что им необходимо скачать ту или иную программу для компьютера или для мобильного устройства.

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

13 базовых правил по созданию своей Landing Page

Можно привести различные примеры лендинг сайтов, на которых конверсия достигала 70%! Тому способствовало всего два фактора:

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

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

Правило №1. На лендинге должен размещаться один продукт

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

Хорошая продающая страница показывает, что здесь:

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

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

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

Правило №2. Призыв к действию должен быть ясным

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

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

• Нет четкого побуждения к действию. Иными словами, посетитель не понимает, для чего именно его перевели на этот лендинг. Именно поэтому в landing page правильное построение сайта подразумевает наличие «большой красной кнопки» с побуждением нажать на нее и получить немедленно нужный результат.
• На лендинг пейдж наблюдается перегруженность посторонней информацией. Обилие ненужных данных лишь раздражает посетителя. Знание того, как правильно оформить лендинг, подразумевает умение сконцентрировать лишь самое значимое в пределах одной страницы. Если посетитель сбит с толку обрушившейся на него неструктурированной информации, то и прямые призывы не возымеют своего действия.

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

• Наличие той самой пресловутой большой красной прямоугольной кнопки с ясным глаголом, что нужно сделать. Кнопку нужно поместить в самом начале страницы, а затем и в ее конце.
• Выражаться нужно максимально ясно и лаконично. Если растекаться мыслью по древу, то посетитель не очень скоро поймет, что он, собственно, говоря, должен сделать и что за это получит.
• Убрать со страницы все, что будет отвлекать от главной мысли. Если без чего-то можно обойтись, то это следует немедленно и без сожалений выбросить!
• Нужно постараться убедить клиента в том, что он покупает исключительный и даже уникальный в своем роде товар. Тому поспособствовать могут различные графики и таблицы, мнение эксперта, отзывы от других покупателей… Сразу после этого у клиента может возникнуть спонтанное решение приобрести продукт, и тут-то нужно помочь ему – поместив «большую красную кнопку».
• Выгоды, которые пользователь получит в случае покупки, нужно расписать максимально емко и четко.

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

длинные или короткие лендинг пейдж — что работает лучше, принципы и преимущества

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

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

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

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

Обоюдоострый меч

Ни для кого не секрет, что длинные целевые страницы могут конвертировать достаточно хорошо, а иногда гораздо лучше, чем их короткие «коллеги», как например в этом кейсе. Маркетологи платформы Crazy Egg увеличили конверсию на 30%, «растянув в длину» свою страницу практически в 20 раз. Уже упоминавшийся в нашем блоге эксперт по CRO Peep Laja уверяет, что «длинные лендинги действуют убийственно мощно».

Однако есть и контрпримеры. Другой наш знакомый, Микаэль Огард (Michael Aagaard), обнаружил, например, что даже чуть укороченная целевая страница сети фитнес-залов начинает генерировать лиды заметно лучше.

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

Психологи из Университета Брауна (Brown University) в ходе недавно завершенного исследования обнаружили, что есть 2 вида потребителей:

• explanation fiends — «одержимые объяснениями», люди, которых к закрытию сделки мотивирует как можно больший объем знаний об УТП, и
• explanation foes — «враги объяснений», стремление совершить покупку у каковых уменьшается, если они знают об оффере больше.

Два вида потребителей

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

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

В ходе исследования также было выяснено, чем обусловлены эти отличия. Оба типа потребителей, с наибольшей вероятностью совершают покупку тогда, когда думают, что их объем знаний о продукте максимален. Эксперимент по разделению участников на «explanation fiends» и «explanation foes» напоминал по технике обычное исследование по ценообразованию: показывали некий товар и просили назвать цену.

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

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

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

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

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

Как же маркетологам разрешить этот конфликт?

Правильное таргетирование, нужная аудитория

Решающий фактор — правильное таргетирование. Но для начала немного статистики от Hubspot: бизнесы, обладающие более чем 40 целевыми страницами, генерируют в 12 раз больше лидов, чем компании с числом лендингов от 1 до 5. Даже те бренды, у каковых количество лендинг пейдж составляет от 31 до 40, опережают их по числу собранных лидов в 7 раз.

В самом деле, а зачем нужны десятки целевых страниц?

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

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

Тестируйте источники трафика: посетители, пришедшие из соцсетей, будут охотнее реагировать на короткий лендинг, нежели рефералы поисковой системы (или наоборот — без теста не сказать точно).

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

Интерес к контенту: проверьте подписную базу с помощью сегментации через фильтр интереса к контенту. Те, кто чаще нажимает на обращающиеся к инстинктам заголовки email, скорее всего, есть «враги объяснений».

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

Ключевые слова: есть хороший шанс, что некоторые keywords PPC трафика будут «наживкой» для «одержимых объяснениями», чаще чем для всех остальных. Разумнее всего тестировать подчеркнуто рациональную комбинацию нескольких ключевиков — так сегментирование будет точнее.

Помните: есть больше чем один тип посетителя!

Некоторых из них сразу же убедит самый простой лендинг, а другие будут стремиться узнать как можно больше о продукте, упорно проматывая «портянку» до конца. Вы не сможете реально максимизировать конверсию, располагая лишь одной целевой страницей — вам нужно множество различных по типу лендинг пейдж. Не существует идеальной целевой страницы по типу «one size fits all» — длина лендинга должна соответствовать запросам конкретного сегмента аудитории.

Почему короткая целевая страница не значит «поверхностная»

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

Исследователи Университета Брауна, о чем мы уже говорили выше, обнаружили общую нить, связывающую оба типа посетителей: люди готовы купить, когда чувствуют, что хорошо понимают суть оффера. Люди, предпочитающие короткие лендинги, суть «интуитивные мыслители», что значит — воздействовать на них излишней сложностью дополнительной интеллектуальной нагрузки есть решение ошибочное.

Рассмотрим убедительный пример:

Когда компания 37Signals заменила короткую, но информативную страницу на еще более компактный вариант с буллетами и улыбающейся клиенткой с ее социальным свидетельством, конверсия выросла на 103%. Но когда они дополнили эту посадочную страницу добавочной информацией, коэффициент преобразования снизился на 22.72%.

Что пошло не так?

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

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

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

Другими словами, «враги объявлений» воспримут «портянку» с подробной информацией как «неглубокое решение» с точки зрения своей группы, а короткие страницы с эмоциональными сообщениями будут восприняты «неглубокими» с точки зрения тех, кого называют «explanation fiends». Но короткий лендинг по сути своей не является «поверхностным», так как намеренно создается для специального сегмента вашей аудитории.

Контент для длинной страницы

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

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

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

В упомянутом выше кейсе Crazy Egg, специалисты по CRO создавали новый лендинг на основе опроса целевой аудитории и анализе тепловой карты. Аналогичным образом, когда команда Conversion Rate Experts работала над тем, как увеличить продажи офферов SEOMoz (теперь Moz), она тщательно исследовали сегментированные таргет-группы: платных клиентов, freemium-пользователей и «отказников».

Вот чем отличается слепое сплит-тестирование от успешного CRO: в основе второго лежит продуманная стратегия.

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

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

Самый простой способ оптимизации конверсии длинной страницы, представляющей сложный высокотехнологичный оффер — размещение на ней видео, раскрывающего суть УТП, показывающего «товар лицом»: так вы не оттолкнете посетителей-«интуитивистов», не любящих читать длинные тексты.

Длинные целевые страницы могут апеллировать к «врагам объяснений» согласно хорошо известным практикам доставки маркетингового сообщения:

• Много релевантных офферу изображений
• Графический дизайн, соответствующий ожиданиям посетителей («лендинг похож на обычный лендинг»), но все-таки достаточно выделяющийся из общей массы
• Расширенные подзаголовки и буллеты
• Достаточно пробелов
• Стрелки, привлекающие внимание к критически важным элементам страницы

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

Высоких вам конверсий!

По материалам conversionxl.com

16-12-2013

Руководство по размеру посадочной страницы

| Размеры целевой страницы

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

Реальный вопрос : Какой размер целевой страницы лучше всего подходит для вашей аудитории ? Прежде чем вы сможете выбрать правильные размеры целевой страницы, вам необходимо понять свою аудиторию! Соберите пользовательские данные из своей аналитики, чтобы установить базовый уровень.Войдите в Twitter и Facebook, чтобы общаться с людьми, на которых вы ориентируетесь. Узнав свою аудиторию, вы сможете точно оценить следующее:

Важные соображения при расчете размера целевой страницы

• Будет ваша аудитория на мобильных устройствах, ноутбуках или домашних компьютерах?
• Сколько информации вам нужно на вашей странице, и как вы ее разместите?
• Вы ищете минималистский подход или вам нужна насыщенная содержанием презентация?

Если большая часть вашей аудитории — пользователи настольных ПК / Mac, вы можете рассчитать МИНИМАЛЬНОЕ разрешение монитора 1024 × 768.После учета ширины браузера и небольшого отступа у вас останется стандартная ширина , равная 960 пикселей . Имеется ряд инструментов, которые подходят для этой минимальной ширины. Самая популярная — сетка 960.

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

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

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

.

Полное руководство по изображениям целевых страниц

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

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

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

Добавление изображений на ваши страницы

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

Добавление изображений с помощью фрагмента изображения

1. В редакторе нажмите кнопку «Добавить контент» в левом меню и выберите один из вариантов фрагмента изображения, который соответствует вашим потребностям.Затем перетащите фрагмент на страницу.

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

Добавление изображений в текстовое поле

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

Выберите изображение из библиотеки изображений или нажмите кнопку «Загрузить файл», чтобы загрузить новое изображение.

Добавление фоновых изображений

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

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

Нажмите кнопку фонового изображения, чтобы открыть библиотеку изображений и выбрать / загрузить новое изображение.

У вас также будет возможность выбрать тип заливки (Заливка, Центр или Плитка), добавить тонированное наложение изображения или сделать это фоновое изображение изображением параллакса ** Изображения параллакса не поддерживаются в мобильных браузерах **

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

Управление встроенными образами

• Щелкните изображение, чтобы открыть меню параметров изображения. В этом меню есть 7 опций: Заменить, Выровнять, Удалить, Вставить ссылку, Показать, Установить замещающий текст, Изменить размер и Стиль изображения.

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

Размеры изображения

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

Нет установленных правил, но, как правило, мы создали список размеров в соответствии с различными элементами на экране:

Фоновые изображения на всю страницу : Подходящие размеры — 1600 x 1000 пикселей и 1920 x 1200 пикселей. Постарайтесь поддерживать соотношение сторон 4: 3 (полноэкранный).

Фоновые изображения заголовков: они должны быть не менее 1600 x 500 пикселей.В зависимости от того, какой высоты вы хотите, чтобы изображение отображалось, вы можете настроить высоту в пикселях. Старайтесь поддерживать соотношение сторон 16: 9 (широкоформатный, горизонтальный, альбомный).

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

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

Для фонового изображения мобильного заголовка рекомендуется размер изображения не менее 800 x 1200 пикселей. Постарайтесь поддерживать соотношение сторон 16: 9 (портретное, вертикальное).

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

Изображения логотипов: Лучше всего подходит размер 300 x 150 пикселей. Размеры могут отличаться в зависимости от размера и макета вашего логотипа.

Фоновые изображения всплывающих окон: Идеальный размер всплывающих изображений составляет примерно 500 x 500 пикселей или больше при тех же размерах.

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

Мобильные адаптивные изображения : помните, что, поскольку страницы KickoffLabs (и большая часть современного Интернета) адаптируются к мобильным устройствам, ваши изображения будут уменьшаться в зависимости от просматриваемого устройства.

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

Используйте инструмент, например Screenfly, для предварительного просмотра страницы на устройстве с разными размерами.

Создание изображения

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

• Adobe Creative Cloud — Папа Mac для создания фотографий и изображений (Photoshop, Illustrator и т. Д.). Очень крутая кривая обучения.
• Пабло — Дизайн привлекательных изображений для социальных сетей.
• Canva — Создавайте изображения в социальных сетях идеального размера. В них также есть редактор фотографий.
• PicMonkey — Творческие инструменты для редактирования фотографий и графического дизайна.
• BeFunky — Создавайте фотографии и дизайны с помощью простых в использовании инструментов редактирования.
• GetStencil — Простое создание изображений для социальных сетей. Они включают бесплатные фотографии.
• Placeit — Красивые макеты изображений и видео для iPhone, iPad, iMac и MacBook.

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

Экспорт изображений

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

PNG , GIF или SVG : лучше всего подходит для тяжелых графических изображений, таких как логотипы, текстовая графика и т. Д.

PNG , JPG и иногда GIF : лучше всего подходит для изображений, сочетающих фотографии и графику.

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

JPG : лучше всего подходит для фотографий.

При экспорте файлов обязательно используйте следующие настройки:

• Экспорт PNG как PNG-24
• Экспорт JPG в качестве sRGB
• GIF-файлы должны быть настроены на цикл
• Все изображения должны быть с разрешением 72 api или выше
• Не пытайтесь загрузить файлы любого другого типа.Это означает отсутствие файлов PSD!

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

Когда именует файлы , лучше всего их четко обозначить. Это поможет предотвратить любые проблемы с кодировкой. Убедитесь, что в имени файла нет пробелов. Вместо этого используйте подчеркивание (_) или дефис (-). Кроме того, лучше избегать использования скобок и других специальных символов, таких как!, #, $,%, &, * И т. Д.

Примеры того, что делать и чего не делать:

• My_image_file.jpg — OK
• My-Image-File.png — OK
• My Image (* file) .jpg — Может сломать Интернет. НЕ ОК

Оптимизация изображений

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

Использование онлайн-инструментов оптимизации изображений, таких как Kraken или Optimizilla, может значительно уменьшить размер файла изображения, сохраняя при этом четкое, ясное изображение.

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

Чтобы получить более подробную информацию об оптимизации изображений, посетите сайт Google Developers.

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

Сжимает ли, оптимизирует, переформатирует ли KickoffLabs мои изображения?

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

Улучшите свои результаты с помощью A / B-тестирования.

Оптимизация целевой страницы — это постоянный процесс. Рекомендуется проводить A / B-тестирование изображений.

Для наиболее заметных результатов используйте тестовые изображения, видимые «над сгибом» или рядом с призывом к действию.Мы включили здесь пошаговое руководство по A / B-тестированию на платформе KickoffLabs.

Не используйте стоковые фотографии.

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

Где я могу найти изображения?

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

Мои изображения не загружаются в дизайнер.

Наиболее частые причины проблем с изображением:

• специальных символов в имени файла
• загрузка файлов без изображений (мы рекомендуем JPEG, PNG или GIF)
• Файл изображения очень большой.Слишком большие изображения также могут замедлить загрузку вашей страницы.

Мои изображения отсутствуют или отображаются неработающими на моей целевой странице.

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

Если у вас есть какие-либо вопросы или вам нужна помощь, отправьте нам письмо по адресу: [email protected]

.

Landing • Themify

Документация /

Установка темы

Чтобы установить темы с помощью загрузчика тем WordPress:

• Загрузите файл «theme.zip» из личного кабинета
  • Примечание: некоторые браузеры (например, Safari) автоматически извлекают zip-файлы. Щелкните правой кнопкой мыши ссылку для загрузки и выберите «Сохранить связанный файл как». Это позволит вам загрузить тему в виде zip-файла.
• Войдите в WP Admin на вашем сайте.
• Перейдите в «Оформление»> «Темы».
• Нажмите кнопку «Добавить», затем нажмите кнопку «Загрузить тему».
• Загрузите файл theme.zip (примечание : это theme.zip, а не theme-psd.zip, который вы только что загрузили из Личного кабинета).
• Активировать тему

FYI: Вы также можете установить темы с помощью метода FTP. Прочтите руководство по установке тем для получения дополнительной информации.

Импорт демо

Если вы запускаете новый сайт, импорт демонстрационного содержимого поможет вам понять, как создается демонстрационная тема.Функция Demo Import импортирует содержимое (сообщения, страницы, комментарии и т. Д.), Настройки панели Themify, меню и настройки виджетов из нашей демонстрации на ваш сайт. Позже вы можете стереть демонстрационный контент.

Для импорта демонстрационной установки:

• Перейдите в WP Admin> Themify> Настройки> Импорт демо и нажмите кнопку «Импортировать демо».
• Обратите внимание, что избранные изображения будут заменены заполнителем изображения по причинам авторского права.

Для удаления демонстрационных настроек:

• На вкладке «Импорт демо» нажмите кнопку «Стереть демо», чтобы удалить демо-контент.

FYI: Если демо-импорт не работает на вашем сайте, вы можете использовать WP Admin> Tools> Import tool, чтобы импортировать демо-контент вручную.

Логотип и слоган сайта

Для отображения логотипа вместо текста названия сайта:

• Перейдите в WP Admin> Внешний вид> Настройка> Логотип и слоган сайта.
• В разделе «Логотип сайта» выберите переключатель «Изображение логотипа».
• Загрузите изображение логотипа.
• Укажите ширину и высоту изображения логотипа.

Вы также можете изменить слоган сайта здесь:

• Перейдите в WP Admin> Внешний вид> Настройка> Логотип и слоган сайта.
• Прокрутите вниз и в разделе «Слоган сайта» выберите переключатель «Текст».
• Введите слоган вашего сайта.
• Нажмите «Сохранить и опубликовать».

Главное меню навигации

Для создания настраиваемого меню навигации:

• Перейдите в WP Admin> Внешний вид> Меню.
• Щелкните «Создать новое меню», чтобы создать новое меню (например, Главное меню).
• Добавьте пункты меню из левых панелей.
• Чтобы создать раскрывающееся меню: перетащите элемент меню вправо (элементы будут иметь отступ).
• Когда вы закончите добавлять пункты меню, нажмите «Сохранить меню».
• Для назначения позиций меню:
  • Прокрутите вниз, где написано «Расположение тем», и установите флажок «Расположение в меню».
  • Main Navigation = главное меню в заголовке
  • Навигация по нижнему колонтитулу = меню нижнего колонтитула в нижнем колонтитуле (Примечание: некоторые темы могут не иметь навигации по нижнему колонтитулу).

СОВЕТЫ: ​​ Вы можете отображать меню на виджетах боковой панели, удалять главное меню, создавать пустые ссылки и ссылки в лайтбоксах. Прочтите Custom Menus для получения более подробного руководства.

Настройка социальных ссылок

Шаг 1) Чтобы настроить ссылки на социальные сети:

• Перейдите в WP Admin> Themify> Настройки> вкладка Социальные ссылки.
• В теме есть несколько предварительно заполненных социальных ссылок. Просто введите URL-адрес своего социального профиля в поле ввода ссылки.Например, введите https://twitter.com/themify для ссылки Twitter.
• Вы можете выбрать отображение «Шрифт значков» или «Изображение».
  • Если выбран «Шрифт значков», нажмите «Вставить значок», чтобы выбрать значок (доступно более 320 значков).
  • Если выбрано «Изображение», вы можете загрузить свой собственный графический значок, нажав кнопку «Загрузить».
• Чтобы добавить дополнительные ссылки, нажмите кнопку «Добавить ссылку» внизу.
• Чтобы удалить ссылку, щелкните значок удаления.
• Чтобы настроить порядок отображения, перетащите контейнер ссылки.

Шаг 2) Отображение социальных ссылок:

• После того, как вы настроили социальные ссылки, перейдите в WP Admin> Внешний вид> Виджеты. Перетащите Themify — Социальные ссылки с панели «Доступные виджеты» на панель «Социальные виджеты».
• Необязательно: Настройте заголовок виджета, например «Следуйте за нами». Вы также можете «Показать имя ссылки» и настроить размер значка.

Скрытие значка RSS

Чтобы скрыть значок RSS по умолчанию в заголовке:

• Перейдите в WP Admin> Themify> Настройки> Настройки темы.
• В разделе «Исключить ссылку RSS» установите флажок «Отметьте здесь, чтобы исключить значок / кнопку RSS в заголовке».

Скрытие формы поиска

Чтобы скрыть форму поиска по умолчанию в заголовке:

• Перейдите в WP Admin> Themify> Настройки> Настройки темы.
• В разделе «Исключить форму поиска» установите флажок «Отметьте здесь, чтобы исключить форму поиска из заголовка».

Как импортировать макеты Sample Builder

Тема поставляется с 25+ макетами Builder, которые вы можете импортировать через Builder.

Чтобы импортировать образец макета Builder:

• Добавить новую страницу
• На странице Настраиваемая панель Themify> Параметры страницы выберите:
  • Параметр боковой панели = значок боковой панели без значка
  • Ширина содержимого = значок полной ширины
  • Скрыть заголовок страницы = Да
• На панели «Обсуждение» снимите флажок «Разрешить обсуждение» (это отключит комментарии на странице).
• Публикация и просмотр внешнего интерфейса страницы
• На верхней панели администратора веб-интерфейса выберите Themify Builder> Макеты> Загрузить макеты
• Появится окно лайтбокса с миниатюрами различных макетов Builder, которые вы можете использовать для своей страницы.Выберите образец страницы, которую вы хотите использовать
• Нажмите «ОК», когда появится сообщение, что он заменит ваши текущие макеты Builder, а затем перезагрузите страницу.

Как создать свои собственные целевые страницы

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

Шаг 1) Чтобы создать целевую страницу с нуля:

• Добавить новую страницу
• На странице Пользовательская панель Themify> Параметры страницы вы увидите следующие параметры:
• Параметры заголовка
  • Дизайн заголовка = Выберите один из 4 различных макетов:
    • По умолчанию = для этого будут выбраны «Параметры заголовка» из панели Themify> Настройки> Настройки темы> Параметры заголовка
    • Horizontal = горизонтальный дизайн заголовка, установленный по умолчанию
    • Блок = элементы заголовка (логотип сайта, слоган, значки социальных сетей и меню) находятся в центре.
    • Без заголовка = будет исключен весь заголовок
  • Sticky Header = Выберите, есть ли липкий заголовок или нет.Эта функция позволяет заголовку оставаться в верхней части страницы при прокрутке вверх или вниз по сайту. Очень полезно для одностраничных сайтов
  • Элементы заголовка = Выберите, показать или скрыть эти элементы в заголовке, наведя указатель мыши на опцию и выберите «Показать или скрыть» (по умолчанию можно установить на панели Themify> Настройки> Настройки темы> Параметры заголовка)
  • Фон заголовка:
    • Сплошной фон = Позволяет выбрать цвет или изображение, которое будет использоваться для вашего заголовка
    • Прозрачный фон = позволит вашему заголовку смешаться с фоновым изображением / цветом вашего сайта
• Параметр боковой панели = значок боковой панели без значка
• Ширина содержимого = значок полной ширины
• Скрыть заголовок страницы = Да
• На панели «Обсуждение» снимите флажок «Разрешить обсуждение» (это отключит комментарии на странице).
• Сохранить или опубликовать страницу

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

• Дизайн заголовка = горизонтальный
• Закрепленный заголовок = по умолчанию
• Элементы заголовка = мы скрыли (1) слоган, (2) форму поиска и (3) ссылку RSS
• Фон заголовка = Прозрачный фон

Шаг 2) Чтобы создать макет страницы с помощью Builder: (не забудьте сохранить Builder, когда вы закончите каждый шаг)

• На верхней панели администратора выберите Themify Builder> Включить Builder
• Первый ряд:
  • Вставьте текстовый модуль и введите свой текст.
    • Demo = «Агентство» в заголовке 1 и «Мы фокусируемся на UX, дизайне и приложениях» в заголовке 3. Внизу мы вставили короткий код кнопки со следующими параметрами — [themify_button link = «# connect»] Контакт Нас [/ themify_button]. После мы центрировали его.
  • Чтобы настроить строку: наведите указатель мыши на значок меню, расположенный в верхнем левом углу строки> выберите Параметры
  • В параметрах строки введите следующие параметры:
    • Высота ряда: Полная высота
    • Тип фона: Фоновое изображение
    • Фоновое изображение: Загрузите или выберите изображение из своей библиотеки
    • Фоновый режим: Параллаксная прокрутка
    • Цвет фона: b82c2c
    • Цвет шрифта: Белый (#ffffff)
    • Цвет звена: Белый (#ffffff)
    • Набивка: Верх = 10%, Низ = 6%
• Вторая строка:
  • Вставьте другой текстовый модуль и введите свой текст.
    • Demo = «Demo Reel» в заголовке 2
    • На вкладке «Стиль»:
      • Цвет шрифта: Ярко-красный (# f03030)
      • Набивка: Верх = 5%
  • Под текстовым модулем вставьте видеомодуль.
    • Стиль видео = Мы выбрали верхний вариант видео
    • URL-адрес видео = вставьте любой URL-адрес видео, который вы хотите отобразить. Мы использовали следующую ссылку vimeo = http://vimeo.com/71934862
    • На вкладке «Стиль»:
      • Маржа: Справа и слева = 10%
  • В параметрах строки введите следующие параметры:
    • Цвет фона: # 000000
    • Набивка: Сверху и снизу = 6%
• Третий ряд:
  • Вставьте другой текстовый модуль и введите свой текст.
    • Demo = «Услуги» в заголовке 2
  • Вставьте подстроку под текстовым модулем, предварительно вставив любой модуль, который вам нужен. Для демонстрации мы вставили модуль Feature под модулем Text. Со следующими параметрами:
    • Название функции: Введите любой желаемый заголовок. Demo = «Writing»
    • Текстовый редактор: Введите любой текст, который должен отображаться внизу заголовка.
    • Макет: Icon Top (третий вариант макета)
    • Круг:
      • Процент = 100, Обводка = 2 пикселя, Цвет = Черный (# 000000), Размер = Средний
    • Тип значка: Значок
      • Значок = fa-газета-o, цвет = красный (# F03030)
  • После настройки подстроки наведите курсор на верхний левый угол подстроки и выберите макет подстолбца.Демо = трехколонный макет
  • Мы продублировали первый модуль Feature и изменили только следующие параметры для каждого из них:
    • Функциональный модуль 2:
      • Название функции: Введите любой желаемый заголовок. Demo = «Apps»
      • Тип значка: Значок
        • Значок = fa-колба, цвет = красный (# F03030)
    • Функциональный модуль 3:
      • Название функции: Введите любой желаемый заголовок. Demo = «Games»
      • Тип значка: Значок
        • Значок = fa-геймпад, цвет = красный (# F03030)
  • В параметрах строки введите следующие параметры:
    • Цвет фона: #fafafa
    • Набивка: Верх = 6%, Низ = 2%
• Четвертый ряд:
  • Измените строку на 3 столбца.Для этого наведите курсор на верхний левый угол строки и выберите 3-й вариант макета во второй строке.

  

  • Оставьте первый и третий столбцы пустыми. Мы заполним содержимым только средний столбец.
    • Перетащите модуль разделителя. Введите следующие параметры:
      • Стиль разделителя: Сплошной (первый вариант)
      • Толщина мазка: 3px
      • Цвет разделителя: Черный (# 000000)
      • Верхнее поле: 30px
      • Нижнее поле: 50 пикселей
    • Перетащите текстовый модуль под модулем разделителя.Введите любой контент, который вы хотите, в редакторе контента, по центру и выделите его курсивом.
      • На вкладке «Стиль» измените цвет шрифта на красный (# f03030)
    • Перетащите другой текстовый модуль под текстовый модуль. Введите любой контент, который вы хотите, в редактор контента и отцентрируйте его. В последнем предложении ниже мы использовали заголовок 3, а затем добавили 2 шорткода кнопок.
      • Демо-кнопка Shortcode = [themify_button link = «https://themify.me/themes/landing»] Купить сейчас [/ themify_button] [themify_button link = «https: // themify.me / docs / landing-documentation «] Документация [/ themify_button]
  • В параметрах строки введите следующие параметры:
    • Цвет фона: #fafafa
    • Набивка: Низ = 5%
• Пятая строка:
  • Выберите для этой строки макет из 2 столбцов.
    • Слева вставьте текстовый модуль и вставьте любое содержимое, которое вы хотите, в редактор содержимого, затем по центру и выделите его курсивом.
      • Чтобы поставить перед текстом такой же значок точки с запятой, вставьте короткий код в то место, где он должен отображаться в редакторе содержимого. Вот что мы сделали для демонстрации:
        • [themify_icon icon = «fa-quote-left» icon_color = «# f03030»] Создайте раздел с отзывами на целевой странице. Просто вставьте значок и изображение в строку, чтобы скопировать тот же вид, что и этот макет.
    • Справа вставьте модуль изображения. Введите следующие параметры:
      • Стиль изображения: Изображение по центру
      • URL изображения: Загрузите или выберите любое изображение, которое хотите.
      • Внешний вид изображения: Закругленные и круглые
      • Ширина и высота: 400px
  • В параметрах строки введите следующие параметры:
    • Цвет фона: Черный (# 000000)
    • Цвет шрифта: Белый (#ffffff)
    • Цвет звена: Белый (#ffffff)
    • Набивка: Сверху и снизу = 6%
• Шестой ряд:
  • Перетащите текстовый модуль и введите текст.
    • Demo = «Свяжитесь с нами» в заголовке 2
  • Вставьте подстроку под текстовым модулем, предварительно вставив любой модуль, который вам нужен. Для демонстрации мы вставили модуль Feature под модулем Text. Со следующими параметрами:
    • Макет: Значок сверху (третий вариант макета)
    • Круг: Размер = средний
    • Тип значка: Значок
      • Значок = fa-конверт, цвет = белый (# 000000), фон = красный (# f03030)
    • Ссылка: Вставьте любую ссылку, по которой вы также хотите перенаправлять пользователей при нажатии значка.
      • Выберите, хотите ли вы открывать ссылку в новой вкладке или в лайтбоксе. Выбираем в новой вкладке.
  • После настройки подстроки наведите курсор на верхний левый угол подстроки и выберите макет подстолбца. Демо = макет из 4 столбцов
  • Мы продублировали первый модуль Feature и изменили только следующие параметры для каждого из них:
    • Функциональный модуль 2: Тип значка: Значок = fa-facebook
    • Функциональный модуль 3: Тип значка: Значок = fa-twitter
    • Feature Module 3: Тип значка: Значок = fa-google-plus
  • В параметрах строки введите следующие параметры:
    • Набивка: Сверху и снизу = 6%

Шаг 3) Сохраните и закройте Builder

Якорное меню ScrollTo Row (одностраничное меню)

Чтобы использовать scrollTo row anchor:

• Шаг 1) Сначала введите имя привязки строки в Builder> Row> Options (например,г. «портфолио»).

  

• Шаг 2) Затем в ссылке меню WordPress (WP Admin> Внешний вид> Меню) вставьте имя привязки как URL-адрес ссылки = «#portfolio» (в основном добавьте # перед именем привязки).

  

• Шаг 3) На странице, на которой вы хотите иметь одностраничное меню, выберите меню на пользовательской панели Themify (настраиваемая панель Themify находится под редактором содержимого, когда вы добавляете / редактируете страницу).

  

• Результат: При нажатии на ссылку #portfolio или когда пользователи переходят по URL-адресу с привязкой #portfolio (например,http: //yoursite.com#portfolio), он перейдет к строке, в которой он указал Row Anchor = «портфель».

Как установить индивидуальную цену Box

• Мы добавили пользовательскую функцию для этой темы, которая позволяет создавать настраиваемые поля цен, вводя дополнительное имя класса CSS.
• Чтобы создать настраиваемое окно цены, как в нашей демонстрации:
  • Выберите макет из трех столбцов в строке или подстроке.
  • Перетащите модуль Box на один из столбцов и введите всю информацию, которая должна отображаться в текстовом редакторе.
    1. Заголовок: Чтобы ввести заголовок, который появляется в самом верху поля цены, введите текст как Заголовок 3
    2. Цена: Чтобы ввести цену, которая отображается под заголовком, введите текст как Заголовок 4
    3. Подробности: Чтобы ввести подробные сведения, отображаемые под ценой, введите текст в маркеры.
    4. Кнопка: Введите короткий код кнопки со следующими параметрами. Демо = [themify_button link = «https: // themify.me / themes / landing «] Купить Basic [/ themify_button]
       
• Важно: На вкладке Styling модуля обязательно прокрутите вниз и добавьте дополнительный класс CSS — price-box
  

Как создать вкладку расписания

• Мы добавили настраиваемую функцию для этой темы, которая позволяет создавать вкладки расписания, соответствующие дизайну и макету темы, путем ввода дополнительного имени класса CSS.
• Для создания вкладок расписания, как в нашей демонстрации страницы событий:
  • Перетащите модуль вкладки в один из столбцов и введите всю информацию, которую вы хотите отобразить в текстовом редакторе.
    1. Макет вкладки: Выберите первый макет вкладки, в котором вкладки размещаются вверху
    2. Строка: Введите любой текст, который должен отображаться на каждой вкладке при выборе
    3. Текстовый редактор: Введите стиль и текст, который должен отображаться на вкладке
    4. Добавить новую строку: Добавление новой строки добавит новую вкладку в ваш модуль
       
       
• Важно: На вкладке Styling модуля обязательно прокрутите вниз и добавьте дополнительный класс CSS — custom-tabs
  

Как интегрировать плагин MailChimp на свой сайт

• Перед запуском :
  1. Обязательно сначала создайте учетную запись MailChimp
  2. Загрузите плагин MailChimp и установите на свой сайт
• Для интеграции плагина MailChimp в учетную запись MailChimp:
  • Как только плагин будет установлен на вашем сайте
    Получите ваш API в своей учетной записи MailChimp
  • Для этого перейдите в свой WP Admin> Щелкните «MailChimp for WP»
  • Нажмите «Получить здесь ключ API».Это перенаправит вас на ваш аккаунт MailChimp
  .

  

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

Тип сообщения о событии

Для создания нового события:

• Перейдите в панель управления WordPress> События> Добавить новый
• Вы можете предоставить заголовок и описание, используя стандартную страницу редактирования WordPress,
  и дополнительные параметры настройки доступны в пользовательской панели Themify

• Опция боковой панели = Эта опция используется для настройки отображения боковой панели или ее полного отключения.
• Featured Image = Эта опция используется для установки избранного изображения для сообщения о событии. Вы можете загрузить или использовать изображение из медиатеки.
• Размеры изображения = Эта опция используется для установки размеров, в которых будут отображаться изображения событий.
• Событие начинается = Эта опция устанавливает дату / время начала для события.
  • ПРИМЕЧАНИЕ: сообщение о событии на веб-интерфейсе будет использовать это как дату события. Дата публикации сообщения будет использоваться для запроса / сортировки сообщений о событиях.
• Местоположение = Эта опция устанавливает имя для местоположения события.
• Адрес карты = Эта опция устанавливает местоположение карты, которое будет использоваться на странице события.
• Ссылка для покупки билетов = Эта опция устанавливает ссылку, которая будет использоваться для покупки билетов на мероприятие.
• URL видео = Эта опция используется для установки видео, которое будет использоваться вместо избранного изображения, и может использовать ссылки из таких сервисов, как YouTube, Vimeo и т. Д.
• Внешняя ссылка Этот параметр используется для привязки избранного изображения и заголовка публикации к настраиваемому URL-адресу.
• Ссылка на лайтбокс Эта опция используется для связывания избранного изображения и заголовка публикации, чтобы открыть URL-адрес в лайтбоксе. По умолчанию ожидается URL-адрес изображения.
  • URL-адрес iFrame Если этот флажок установлен, URL-адрес будет открываться в виде окна iFrame внутри лайтбокса и может использоваться для открытия внешних URL-адресов, таких как другие страницы или сайты.
  • Добавить значок масштабирования в ссылку лайтбокса Этот параметр определяет, будет ли отображаться значок масштабирования на избранном изображении, если он установлен на ссылку лайтбокса.
• Пользовательское меню = Эта опция устанавливает меню, которое будет отображаться при доступе к альбому.
• Фон переноса заголовка = Эти параметры устанавливают фон заголовка для страницы события
  • Перенос заголовка = Эта опция устанавливает тип фона для выбора между сплошным или прозрачным фоном для переноса заголовка.
  • Фон = Эта опция устанавливает фон избранной области в верхней части единого представления страницы события.
  • Повтор фона = Этот параметр устанавливает параметр повторения для фона выделенной области.

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

Сообщения о событиях могут отображаться в боковых панелях, нижнем колонтитуле или других областях виджетов с помощью виджета «Themify — Сообщения о событиях», предоставляемого темой, который выводит события на основе параметров, выбранных на панели виджетов.

• Заголовок = Эта опция используется для установки заголовка виджета.
• Категория = Эта опция используется для установки категории, из которой будут отображаться сообщения о предстоящих событиях. По умолчанию для всех категорий.
• Показать [X] сообщений = Эта опция используется для установки количества сообщений, которые будут отображаться в виджете.
• Скрыть заголовок сообщения = Эта опция определяет, скрывать ли заголовки сообщения.
• Показать миниатюру сообщения = Эта опция устанавливает, показывать ли миниатюры избранных изображений.
• Размер миниатюр = Эта опция устанавливает размеры миниатюр избранных изображений.
• Скрыть мета события = Эта опция скроет мета сообщения из виджета.
• Скрыть дату события = Эта опция скроет дату события из виджета.
• Скрыть ev

.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт