Создаем на Craftum: сайт для мероприятия

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

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

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

Как с ним работать и создать продающий лендинг для мероприятия – обо всем этом рассказываем в сегодняшней статье.

Что должно быть на сайте для мероприятия?

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

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

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

Первый экран

Это, так называемая, обложка сайта, где обычно располагается заголовок, отвечающий на вопрос «Что?» – например, «Конференция в Москве для малого бизнеса». Следом за ним идет описание, раскрывающее суть мероприятия. Например, «Приглашаю вас на офлайн-мероприятие, которое пройдет по адресу г. Москва, ул. Кутузова, 38». Ниже добавляется кнопка, побуждающая пользователя выполнить действие, например, «Записаться бесплатно». 

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

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

Вот как это может выглядеть: 

Программа мероприятия

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

Например, выглядеть это может так: 

Преимущества мероприятия

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

Убедить прийти на мероприятие можно с помощью следующего:

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

Один из примеров подобного экрана: 

Для кого проводится мероприятие

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

Выглядеть это может так: 

Спикеры

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

Вот как это может быть реализовано: 

Стоимость

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

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

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

Создаем сайт в конструкторе Craftum

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

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

Шаг 1: Проходим регистрацию

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

Итак, давайте зарегистрируемся на сервисе: 

1. Открываем официальную страницу и нажимаем «Создать сайт бесплатно». 

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

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

Шаг 2: Выбираем шаблон

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

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

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

Чтобы воспользоваться данным шаблоном, переходим во вкладку «Мероприятие» и нажимаем на кнопку «Выбрать».

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

Изучить полный список шаблонов вы можете в специальном разделе на официальной странице Craftum. 

Шаг 3: Редактируем шаблон

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

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

Итак, приступим: 

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

2. Здесь нас интересует раздел «Обложка», в котором есть множество различных блоков для первого экрана. Давайте для примера воспользуемся вторым в списке блоком под названием «cover-02». При необходимости вы можете выбрать любой другой – последующие инструкции будут универсальны. 

3. Таким образом выбранный блок добавляется в макет нашего будущего сайта: 

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

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

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

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

8. Теперь осталось внести изменения в кнопках – в меню «Контент» находим первую и задаем для нее название «Записаться бесплатно». Чтобы удалить вторую кнопку, просто стираем ее название. 

9. Чуть позднее мы добавим к кнопке форму, которую будут заполнять пользователи для записи на мероприятие. Сейчас давайте поработаем с фоновым изображением – добавим то, которое подходит под нашу тематику. Найти его можно, например, на сервисе Unsplash. Когда изображение будет подготовлено, останется лишь добавить его на свой сайт – для этого в Craftum есть отдельный раздел «Дизайн». Там нужно развернуть пункт «Блок» и внизу нажать «Настроить».

10. Добавляем свою картинку и внизу нажимаем на кнопку «Использовать в блоке». 

11. Также заменить фон можно и другим способом – для этого достаточно навести курсор мыши на блок и в левом нижнем углу нажать на кнопку «Фоновое изображение».

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

13. Изменение меню происходит в соответствующем разделе:

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

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

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

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

18. Для начала изменим весь текст – для этого во вкладке «Контент» вносим корректировки. 

19. В блоке «Форма» оставляем нужные поля – например, имя и телефон.

20. Осталось добавить почту, на которую будут уходить заявки – сделать это можно в разделе «Форма». В этом же разделе вы можете подключить таблицу, в которую также будут отправляться заявки. Для этого необходимо авторизоваться через Google с помощью кнопки «Sign in with Google» – после этого останется лишь настроить таблицу. 

21. И последним шагом подключаем созданную форму – для этого переходим в настройки первого экрана и в разделе «Контент» находим нужную кнопку. Затем выбираем «Тип ссылки» -> «Всплывающее окно». В поле «Блок» выбираем созданный нами блок. 

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

Для примера давайте создадим еще один блок, который будет рассказывать о том, для кого это мероприятие. Только работать с ним мы будем несколько иным способом – с помощью дизайн-блока. Его особенность в том, что нет никаких ограничений, как у других блоков из библиотеки. Он позволяет как угодно перемещать элементы и создавать уникальный дизайн. 

Как именно работает дизайн-блок – поговорим далее.  

Шаг 4: Используем дизайн-блок

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

Блок добавлен, давайте теперь перейдем к его редактированию: 

1. Первым делом удалим весь контент, который в нем есть. Для этого выделяем все элементы и нажимаем на клавишу «Delete».

2. Также удалим и фоновое изображение – для этого переходим в настройки блока и в разделе «Контент» -> «Фон» нажимаем на крестик.

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

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

5. Также сделаем заголовок немного больше и жирнее, чтобы он стал заметнее. Для этого кликаем по нему и открываем меню слева через стрелочку в верхнем левом углу. В поле жирность выбираем «Жирный», а в размере шрифта указываем 44px. 

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

7. Следующим шагом растянем 3 прямоугольника по сетке, где в 4 колонки помещается 1 объект. Чтобы это сделать, необходимо выделить элемент и потянуть за ползунок вправо. 

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

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

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

11. Таким образом у вас должно получиться что-то подобное: 

Аналогичным образом потребуется проработать все оставшиеся разрешения. 

Шаг 5: Публикуем сайт

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

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

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

Готово! Сайт опубликован, и теперь ссылку на него можно отправлять своим друзьям, коллегам и тем, кого вы хотите видеть на мероприятии. Обратите внимание, что по умолчанию устанавливается стандартный домен типа pm9812.craftum.io. Это тестовое имя, которое больше подходит для демо-версии. Если ваше событие – это свадьба или праздник для детей, то можно использовать и такой домен. Если же вы собираетесь активно продвигать сайт, то лучше всего приобрести уникальное доменное имя, отражающее суть вашего мероприятия, например, online-event.com.

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

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