Вебинар • 28 января 16:00–18:30
Как получать клиентов с онлайн-карт без вложений в рекламу?

​Как создать сайт для приглашения на свадьбу

Обсудить
​Как создать сайт для приглашения на свадьбу

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

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

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

Этап 1: Подбираем референсы

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

Найти референсы можно на специальных площадках. Вот наиболее популярные из них:

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

  1. Открываем главную страницу сервиса и вводим нужный нам запрос. В нашем случае нас интересуют сайты свадебной тематики, поэтому так и введем – «Свадебный сайт». В результате перед нами отобразится список выложенных другими пользователями работ. Давайте откроем одну из них и посмотрим, что в ней находится.Что такое референсы для сайта и где их найти
  2. Мы открыли кейс для свадебного салона. Тематика и стиль сайта подходят отлично – отсюда мы можем, например, взять шрифты и цвета. Изучить, как построен макет и использовать такие же переходы между блоками, кнопки и так далее.

 Пример свадебного сайта

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

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

Этап 2: Создаем свадебный сайт

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

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

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

Мы пойдем и первым, и вторым путем – создадим сайт на основе шаблона с использованием дизайн-блока. Давайте начнем:

  1. Для начала пройдем простую регистрацию – для этого открываем официальную сайт конструктора и кликаем по кнопке «Создать сайт бесплатно».Конструктор сайтов Craftum официальная страница
  2. В отобразившемся окне вводим имя и адрес электронной почты, затем нажимаем на «Создать сайт».Регистрация в конструкторе сайтов Craftum
  3. На этом регистрация завершена. Данные для входа в учетную запись будут отправлены на электронную почту, но пока что они не нужны, так как после регистрации происходит автоматический вход в аккаунт. Обратите внимание также на то, что доступ ко всем функциям предоставляется бесплатно, но только на 10 дней. После этого потребуется оплатить тариф, стоимость которого составляет 197 рублей в месяц.
  4. Перейдем непосредственно к разработке сайта – для этого выберем подходящий шаблон. В Craftum есть шаблон «Организация свадеб», который отлично подходит к нашей тематике. Так как этот шаблон не предназначен именно для приглашений на свадьбу, мы переделаем его под себя. Найти его можно в библиотеке шаблонов, которая открывается сразу же после регистрации.Библиотека шаблонов в конструкторе Craftum
  5. В результате мы попадаем в редактор сайта – здесь мы и будем проводить все последующие манипуляции. Первым делом давайте возьмемся за первый экран – он должен сразу показывать всю суть сайта и рассказывать о главном. В нашем случае следует рассказать, что это сайт для приглашения на свадьбу, которая проходит в таком-то месте в такое-то время. Шаблон нам предлагает первый экран, но это простой слайдер. В него нельзя добавить текст, поэтому давайте удалим его и добавим другой блок. Для начала наводим курсор мыши на первый экран и в правом верхнем углу нажимаем на корзину.Как удалить блок в конструкторе Craftum
  6. Теперь добавим подходящий для нас блок – нажмем для этого на плюсик, который появляется при наведении мыши между блоками.Как в конструкторе Craftum добавить новый блок
  7. Нам отлично подойдет блок Cover-14, в котором есть заголовок, подзаголовок, время и место проведения мероприятия, а также кнопка. Вводим в верхнем левом углу запрос и кликаем по отобразившемуся блоку. Также вы можете найти этот блок в разделе «Обложка», он находится в самом низу раздела.Как в конструкторе Craftum сделать сайт для приглашения на свадьбу
  8. В результате блок применяется к нашему макету. Сейчас он совсем не похож на то, что нам нужно, поэтому давайте его преобразуем. Для начала введем свои данные – для этого достаточно кликнуть по тексту и ввести новую информацию. Аналогичным образом изменяется и название кнопки.Как поменять заголовок в блоке Craftum
  9. Следующим шагом давайте изменим фоновое изображение, чтобы оно соответствовало нашей тематике. Для этого нажимаем в верхнем левом углу на кнопку «Настроить» и во вкладке «Дизайн» раскрываем пункт «Блок», затем кликаем по «Настроить».Как удалить фон в блоке Craftum
  10. Здесь мы можем как выбрать фотографию из галереи конструктора Craftum, так и загрузить ее с компьютера. Давайте пойдем вторым путем и встроим свою картинку. Если у вас нет подходящего фото, то можете скачать его с бесплатного сервиса Unsplash. Но для начала нам потребуется удалить старый фон – для этого переходим во вкладку «Фото» и нажимаем там на крестик.Как удалить фон в конструкторе Craftum
  11. Теперь можем добавить свою картинку – достаточно переместить ее в поле. Затем останется только нажать на кнопку «Использовать в блоке». Обратите внимание, что мы также можем наложить фильтры на фотографию либо вовсе их отключить.Настройка фона в конструкторе Craftum
  12. Теперь давайте перейдем к дизайн-части – немного отредактируем текст и поменяем цвет и шрифт кнопки. Для этого в настройках блока перейдем во вкладку «Дизайн». Начнем с заголовка – установим для него шрифт IBM Plex Serif с обычной жирностью и нижним отступом в 40px.Настройка заголовка в блоке Craftum
  13. Для подзаголовка установим шрифт Gilroy, размер – 18px, межстрочный интервал – 160%. Как изменить шрифт в блоке Craftum
  14. Чтобы отредактировать время и дату, перейдем в «События» и напротив заголовка нажмем на шестеренку.Как сделать сайт для свадьбы в конструкторе Craftum
  15. Установим шрифт Gilroy с размером 16px. Обратите внимание, что шрифт я использую тот же, что и в подзаголовке – этого следует придерживаться, чтобы сайт оставался в едином стиле. Так же следует поступать и с заголовками.Как сделать сайт для свадьбы самому
  16. Подзаголовок сделаем шрифтом Gilroy, размер – 16px, также добавим отступ от кнопки в 40px, чтобы блок не выглядел зажатым. Настройка блока в конструкторе Craftum
  17. Теперь давайте поменяем кнопку – изменим ее цвет и установим шрифт, который используется в текстовом контенте. Для этого раскрываем пункт «Кнопка» и изменяем размер шрифта на 16px, Gilroy, уберем скругление углов и добавим цвет фона, похожий на жемчужный, также цвет текста сделаем черным. Такого цвета нет в палитре, но мы можем использовать HEX-код – просто пропишите #1D1D1D в поле ввода.Как изменить кнопку в блоке Craftum
  18. В результате у нас получился вот такой первый экран:Первый экран для сайта на свадьбу
  19. В блоке пока что неактивная кнопка. Мы настроим ее в самом конце, а пока давайте я покажу, как создать уникальный блок. В этом, как я уже говорил выше, нам поможет дизайн-блок. Добавить его можно из библиотеки блоков, в которую мы заходили при создании первого экрана.Как добавить дизайн блок в конструкторе Craftum
  20. Мы попадаем в редактирование блока. Давайте расскажем в нем, что ждет посетителей на свадьбе. Для начала удалим все из блока – для этого выделяем все элементы и жмем клавишу «Delete». Как очистить дизайн блок в конструкторе Craftum
  21. Откроем слева настройки и удалим фоновое изображение.Как в дизайн блоке удалить фон Craftum
  22. В результате мы получаем белый лист. Добавим в него сначала заголовок и назовем его «Что вас ждет на свадьбе». Для этого в верхнем левом углу нажимаем на плюсик и выбираем «Текст».Как добавить текст в дизайн блоке Craftum
  23. Перед тем как отредактировать заголовок, давайте включим сетку – она нужна, чтобы весь контент сайта был в центральной части. Таким образом, пользователю будет удобно изучать материал, а его глаза не будут бегать туда-сюда. Сделать этом можно в верхнем правом углу с помощью кнопки «Сетка».Как включить сетку в конструкторе Craftum
  24. Теперь перейдем к настройке текста – установим для него шрифт, который мы использовали в заголовке выше, а также поменяем цвет на черный и сделаем его размером в 36px.Редактирование дизайн блока Craftum
  25. Аналогичным образом добавим остальной текст – он будет рассказывать уже о том, что ждет посетителей мероприятия. Для него я задам шрифт Gilroy с размером 16px – это будет контент, а для его заголовка я установлю размер 18px с жирностью.– Настройка контента в дизайн блоке Craftum
  26. После этого я также поменяю высоту блока, так как по умолчанию он был большой, а контента у меня мало. Для этого в настройках в строке «Высота блока» я выставлю значение 630px.Как изменить высоту дизайн блока в конструкторе Craftum
  27. На этом редактирование блока можно закончить, но его еще нужно адаптировать под мобильные устройства. Если в шаблонных блоках все автоматизировано, то здесь следует немного поиграться с адаптивным дизайном. Для примера давайте настроим экран под телефоны – перейдем через верхнее меню в нужное разрешение и перестроим там весь контент по центру. Из настроек я только изменил размер заголовка, чтобы он входил в блок и не был таким огромным – на телефонах все должно выглядеть в уменьшенном варианте.Адаптив в дизайн блоке Craftum
  28. Нужно будет подредактировать все доступные разрешения, чтобы пользователи могли удобно использовать сайт на всех устройствах. Необязательно, чтобы ваш экран выглядел именно так. В дизайн-блоке вы можете сделать все что угодно – опирайтесь на референсы и стройте свои уникальные решения. Это касается как адаптивной версии, так и десктопной. В завершение останется нажать только на кнопку «Закрыть», и вся работа будет сохранена.Как выйти из дизайн блока в Craftum
  29. Теперь давайте настроим кнопку на первом экране так, чтобы при клике на нее открывалась форма, а пользователи могли оставить заявку для получения приглашения. Для этого добавим блок с формой.Как добавить pop up окно в конструкторе Craftum
  30. Настроим ее – для начала поменяем заголовок и подзаголовок во вкладке «Контент».Настройка формы в конструкторе Craftum
  31. Также в пункте «Форма» удалим все пункты и добавим email, чтобы посетители могли оставить свою почту для получения приглашения.Как настроить форму в конструкторе Craftum
  32. Во вкладке «Форма» сделаем так, чтобы заявка уходила к нам на почту.Получение заявок с формы Craftum
  33. И последним шагом поработаем с дизайном формы – поменяем цвет кнопки на точно такой же, что используется на первом экране, а также весь текст сделаем шрифтом Gilroy.Как изменить шрифт в форме Craftum
  34. Таким образом, я получаю следующий результат:Pop up окно в конструкторе Craftum
  35. Осталось сделать так, чтобы эта форма открывалась по клику на кнопку. Для этого перейдем в настройки первого экрана и во вкладке «Контент» -> «Тип ссылки» укажем «Всплывающее окно», а в строке «Блок» выберем «Окно 1».Как в конструкторе Craftum прикрепить к кнопке pop up окно
  36. Готово! Кнопка настроена, и теперь после клика по ней будет открываться созданная нами форма, заявки с которой будут отправляться нам на почту. На этом я закончу свою инструкцию. Вам же потребуется дальше проработать весь сайт, но ничего сложного в этом нет. Все точно так же – используйте шаблонные блоки, изменяйте их под себя и пробуйте создавать уникальные решения в дизайн-блоках. И, конечно же, не забывайте про общую стилистику сайта – придерживайтесь стиля и опирайтесь на референсы, чтобы сайт был красивым.
  37. После того как завершите работу, потребуется опубликовать сайт – для этого есть специальная кнопка в верхнем правом углу.

 Как опубликовать сайт в конструкторе Craftum

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

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

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте