Пт

02

май

2014

Посадочная страница за 18 шагов

Посадочная страница за 18 шагов

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

 

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

 

  • Сайт на Jimdo
  • Любой графический редактор. Он может понадобиться для работы над разными связанными с графическим дизайном мелочами и фотографиями. Если у вас нет необходимости в постоянном наличии такого редактора на компьютере, вы всегда можете воспользоваться одним из онлайн-сервисов, например, Pixlr

Пошаговая инструкция создания посадочной страницы

1. Для начала мы регистрируем обычный сайт на Jimdo и выбираем для него шаблон. В нашем случае давайте остановимся на простом и всем доступном шаблоне F4240.

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


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

  

Для того, чтобы его применить, мы сохраняем изображение в формате .jpg, после чего заходим в админ-панель нашего Jimdo-сайта: "Стиль" – "Собственный фон". В настройках фоновых изображений и видео мы выбираем режим "Одиночное изображение" и загружаем наш фон, после чего не забываем нажать на кнопку "Сохранить".


Подробнее о настройках собственного фона на сайте можно прочитать в онлайн-помощи.

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


4. Переходим к названию сайта. По умолчанию в шапке сайта стоит белая надпись "Название сайта", которая нас, конечно же, не устраивает. Чтобы изменить ее, нужно зайти в режим редактирования и клинуть на шапку сайта, открыв настройки шапки сайта. В них нас интересует вкладка "Заголовок". Если вы пользуетесь версией JimdoFree, то вы можно просто изменить название сайта на, скажем, "Книжная ярмарка". У пользователей версий JimdoPro и JimdoBusiness есть возможность установить в шапку сайта собственный логотип.

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

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


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

 

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

6. Для того, чтобы выстроить в ряд различные объекты (в нашем случае — иконки и блоки текста), лучше всего использовать модуль "Колонки". Чтобы структуризировать внешний вид страницы, мы вставляем этот модуль и создаем в нем шесть колонок. В первую, третью и пятую мы ставим нужные нам иконки (модуль "Изображение"), а во вторую, четвертую и шестую — текстовую информацию к ним (модуль "Текст").


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

 

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


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


9. Приступая к оформлению основного контента страницы, не стоит забывать о модуле "Интервал" – обязательно вставляйте его между различными информационными элементами вашего сайта. Для целостного и органичного восприятия информации рекомендуем разделять ее одинаковыми интервалами: в нашем случае – 20 пикселов по высоте. Это сделает знакомство с вашим сайтом намного более приятным для посетителей.

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

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

Оформление всех блоков мы начинаем с заголовка и, конечно же, интервала.


11. Сам блок мы оформляем с помощью модуля "Колонки": в правую колонку мы вставляет приветственный текст (модуль "Текст"), а в правую — фотографию (модуль "Изображение"). 


12. В качестве завершающего штриха мы также можем отделить разделы страницы друг от друга тонкими и изящными пунктирными разделительными полосами, воспользовавшись для этого модулем "Разделитель".


13. Следующий блок, который мы бы хотели оформить, будет представлять из себя примерное описание программы ярмарки. Чтобы обеспечить наглядность и компактность расположения информации, мы поставим расписания двух дней один напротив другого. Для этого снова используем наш незаменимый модуль "Колонки". В каждой из двух колонок мы пишем номер дня и дату (модуль "Заголовок", размер H2), затем вставляем интервал. Саму программу ярмарки размещаем с помощью модуля "Текст" и воспользуемся маркированным списком.


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

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

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


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


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


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

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


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

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

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


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


Вот и все: посадочная страница готова! Как видите, все было совсем не сложно, зато в итоге у нас получился отличный сайт! Готовый результат вы можете увидеть по адресу http://awesomelandingpage.jimdo.com. А если у вас возникнут вопросы или пожелания по дальнейшим дизайн-урокам, просто напишите их в комментариях!

Альберт Бучацкий

 

Специалист службы технической поддержки, веб-дизайнер


Комментарии: 26 (Дискуссия закрыта)
  • #1

    Костя (Пятница, 02 Май 2014 15:09)

    Сделайте, пожалуйста, видео-урок по установке собственного шаблона на сайт (видео в хорошем качестве).

  • #2

    mebelioni (Пятница, 02 Май 2014 17:23)

    Да, такой урок и возможности Jimdo, добавляет вам веса!
    Спасибо!

  • #3

    yazikon (Суббота, 03 Май 2014 18:16)

    подскажите, какую посадочную страницу можно сделать для бюро переводов? чтобы можно было перенаправить на нее увидевших рекламу в яндексе или гугле? наш сайт www.yandex.ru
    и еще один вопрос - а можно сделать посадочную страницу с меню или это уже не будет считаться такой страницей?

  • #4

    yazikon (Суббота, 03 Май 2014 18:19)

    пардон, наш сайт www.yazikon.ru!!! просто начинается как yandex)

  • #5

    Jimdo-Team (Суббота, 03 Май 2014 21:55)

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

  • #6

    7t-model-003 (Воскресенье, 04 Май 2014 17:15)

    Да поддерживаю, уважаемые господа сделайте урок как вставлять свой шаблон на сайт jimdo!

  • #7

    Белкельме (Воскресенье, 04 Май 2014 22:50)

    хм, вполне недурно, а самое главное поучительно! Благодарю за новые идеи!

  • #8

    kamil1967 (Понедельник, 05 Май 2014 22:16)

    Молодцы ребята!!! Красивое отношение к своим избранникам

  • #9

    101kniga (Вторник, 06 Май 2014 13:40)

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

  • #10

    Дарья (Вторник, 06 Май 2014 16:20)

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

  • #11

    Олег (Четверг, 08 Май 2014 10:27)

    Всё просто и доступно изложено! Я в восторге!

  • #12

    poselok-rostov (Пятница, 09 Май 2014 10:39)

    Всё ясно и понятно!!!!!!!!!!! СПАСИБО!

  • #13

    Maks (Пятница, 23 Май 2014 10:13)

    рооооооооооллллллллллллллллллллл

  • #14

    Наталия (Понедельник, 26 Май 2014 16:40)

    Век живи век учись )

  • #15

    domschastya (Пятница, 30 Май 2014 12:19)

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

  • #16

    Команда Jimdo (Пятница, 30 Май 2014 15:50)

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

  • #17

    terenga-inform (Понедельник, 14 Июль 2014 20:51)

    Не получается установить собственный фон. Во вкладке "Стиль" на панели управления нет раздела "Собственный фон", там только "Формат шрифта", "Дизайн магазина" и "Дизайн блога".Что делать?

  • #18

    Jimdo-Team (Вторник, 15 Июль 2014 10:05)

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

  • #19

    fl-cool (Пятница, 17 Октябрь 2014 06:16)

    Спасибо! Пуду пробовать - что-то 100% получится.
    Так интересно читать комменты: кому-то легко, кому-то не очень - смотря кто на каком уровне подготовки находится)))

  • #20

    ТрансУрал (Среда, 10 Декабрь 2014 17:46)

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

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

  • #21

    kvadrolife (Среда, 10 Декабрь 2014 21:18)

    Как всегда на сложные вопросы ответов Jimdo нет (приходится чем то жертвовать в угоду цене и простоте). Я сделал так. В списке услуг/товаров есть определенный продукт, который я хочу продвигать. Под него я сделал скрытую страницу, где изменил привычный дизайн и разместил более подробное описание услуги/товара. С призывом к действию, перечислением преимуществ, контактами и формой заказа. Т.е. при ведении сторонней кампании можно ссылаться сразу на нее. А в списке товаров и услуг напиал - узнать подробнее и т.п. Хотя меню, конечно, не спрячешь на Лэндинге. Лучше, чем ничего!

  • #22

    Команда Jimdo (Четверг, 11 Декабрь 2014 13:26)

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

    2. О том, как создавать ссылки-якоря, рассказано вот в этой статье: http://ru.jimdo.com/2013/09/13/вопрос-недели-как-добавить-ссылку-якорь-на-страничку-сайта/

    К сожалению, размещать такую ссылку прямо в навигационном меню на Jimdo нельзя.

    @kvadrolife, спасибо за то, что поделились вашим способом!

  • #23

    jewel-lab (Пятница, 16 Январь 2015 18:00)

    Сделайте пожалуйста урок как установить свой шаблон на jimdo pro!

  • #24

    Елена (Суббота, 28 Февраль 2015 16:34)

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

  • #25

    Команда Jimdo (Суббота, 28 Февраль 2015 18:09)

    Елена, здравствуйте! Для подписи фотографий вам необходимо воспользоваться, например, Photoshop.

  • #26

    999idei (Понедельник, 09 Март 2015 21:15)

    ... приветствую вас!!! Перелопатил кучу сервисов,вы лучшие! в одном месте всё необходимое!)