Как сделать сайт самостоятельно и бесплатно
Уже прошли времена, когда сайты делали только крупные компании или звезды. Сейчас даже бабуля может сделать сайт своими руками для продажи меда деда, собирающего его зачем-то в промышленных масштабах. Давайте разберемся, почему сайт ― это легко.
Сайт может понадобиться кому угодно
За последние 5 лет появилось множество ресурсов, которые создаются самостоятельно, без помощников и знания кода. Какие сайты делают:
- Портфолио или визитку. Художникам, дизайнерам, строителям, тренерам, репетиторам и многим другим нужно показывать свои работы и достижения миру. К тому же, если вы идете устраиваться на работу или ищете заказчика, куда удобнее отправлять в письме ссылку, а не тяжелый документ.
- Корпоративные. Их делают не только крупные компании. Корпоративный сайт может быть у небольшого семейного ресторана, ТСЖ дома, ремонтной бригады и других бизнесов.
- Информационные. Его может сделать местная газета, студенты, желающие освещать события факультета, администрация школы.
- Форумы. Не нашли в интернете сайта с единомышленниками? Сделайте его сами и обсуждайте то, что вас интересует в своем сообществе.
- Онлайн-магазины. Думаете это точно не для новичков сайтостроения. Это неправда. Онлайн-магазин для своего фермерского хозяйства или ручных изделий может сделать любой самостоятельно.
Как самому создать сайт и что нужно для создания сайта, расскажем дальше.
Где можно сделать сайт
HTML, CSS, PHP и другие «страшные» слова знать необязательно. Они нужны только для невероятно сложных сайтов с кучей функционала. Создание и обслуживание ресурсов, разработанных с помощью программирования, – выбор крупных компаний. Куда проще использовать CMS и конструкторы. Даже профи далеко не всегда выбирают ручную разработку. Зачем все усложнять, если есть более простые решения.
CMS
CMS (англ. Content Management System) ― это система для создания и управления сайтом. Создание сайта вручную состоит из backend, frontend и верстки. Для всех этих этапов настройки сайта необходимо знание разных языков программирования и разметки. CMS ― это программа, которая заменяет все эти элементы и избавляет вас от ручной работы. Она сама настроит базы данных, заставит сервер отдавать нужные ответы на запросы и работать кнопки. От пользователя остается только выбрать необходимые функции и внешний вид.
Примеры популярных CMS: WordPress, Joomla, Drupal, OpenCart, 1C-Битрикс. Кстати, наш хостинг дружит со всеми популярными CMS, поэтому вы можете установить их в один клик.
Большой плюс CMS ― модульность. Это своеобразный конструктор, где есть плагины, которые расширяют функционал сайта и решают любые проблемы владельца веб-ресурса. Также есть возможность сбора статистики, в основном тоже за счет плагинов и дополнительных модулей. При этом многие CMS не прячут код. При желании вы можете нанять команду разработчиков и они дополнять систему.
Стоит предупредить, что любая CMS требует небольшого ознакомления. Вам нужно понять, где и что находится, загрузить плагины и следить за их обновлениями. Некоторые действия тоже могут быть непонятны на первый взгляд. Но немного почитав инструкции, любой определенно сможет создать даже крупный интернет-магазин.
Конструктор
Где сделать сайт еще проще, чем в CMS? Да, это конструктор. Он не дает доступа к коду и другим тонким настройкам сайта. В вашем распоряжении только настройка внешнего вида. Однако именно это делает его невероятно простым вариантом для создания веб-ресурса. Вы просто выбираете необходимый элемент, например меню, и перетаскиваете его на нужное место.
Простота не значит малофункциональность. Современные конструкторы могут и адаптировать сайт под мобильную версию, и настраивать SEO, и предоставлять статистику. Сделать сайт с нуля на конструкторе можно за пару часов.
А если мы скажем, что возможно сделать сайт бесплатно? Не верите, тогда давайте сделаем небольшой персональный сайт бесплатно вместе.
Как сделать сайт самому бесплатно на конструкторе
Если вам не нравится письменная инструкция, вы можете посмотреть весь процесс бесплатного создания сайта на нашем YouTube-канале.
Сделаем сайт-портфолио для няни. Родители очень внимательно подходят к подбору такого человека. Резюме в виде сайта явно будет говорить о прогрессивности няни и определенно покорит родителей ребенка.
Шаг 1. Выбираем тариф
Переходим на сайт Конструктора Spaceweb и выбираем бесплатный тариф. Регистрируемся, теперь у нас есть аккаунт с конструктором на 30 дней. Чтобы бесплатный тариф конструктора остался с вами навсегда, заполните данные владельца аккаунта, зарегистрируйте или перенесите домен. Нам пока хватит технического домена, который создался автоматически при заказе услуги. Хостинг нам тоже не нужен, так как он уже входит в услугу конструктора.
Бесплатный конструктор сайтов
Теперь вперед! Нажимаем кнопку «Редактировать сайт» и приступаем к магии.
Шаг 2. Выбираем шаблон
Шаблон — это уже фактически готовый сайт. В нем уже есть продуманная структура и внешний вид. Это отличная основа, которая еще больше сэкономит время для создания сайта. Фух, перед нами десятки вариантов. Хорошо, что слева есть рубрики, которые помогут найти подходящий.
Как можно создать сайт бесплатно
Если шаблон не подойдет, вы всегда можете его поменять. Теперь осталось только добавить свои фотографии, написать резюме, загрузить видео.
Создать сайт бесплатно самому в конструкторе
Что еще примечательного есть в этом конструкторе:
- Есть настройка SEO. А это значит, что вы сможете продвигать ваш ресурс, не тратя денег на отдельного сотрудника.
- Возможность установить фавикон. Это выделит вас в поисковой выдаче.
- Вставка кода. Нужна, чтобы добавить виджеты чата, обратного звонка или другой полезный функционал.
- Есть настройка robots.txt. Важный элемент для индексации сайта.
Опубликуйте сайт и всё, он готов. Вот так, без подготовки и сложностей у вас есть веб-ресурс, который не уступает самописному решению. На платном тарифе будет еще больше шаблонов, а также функция интернет-магазина с онлайн-оплатой.
Как создать свой сайт бесплатно с нуля
В этом уроке я покажу, как бесплатно создать свой сайт. Мы самостоятельно зарегистрируем хостинг и доменное имя, установим и настроим WordPress. В итоге получится полноценный сайт, который откроется у любого человека в интернете.
Эта пошаговая инструкция для чайников. Подойдет как для создания простого одностраничного веб ресурса, так и многостраничного (например, блога или информационного сайта).
Что такое веб-сайт
Сайт или веб-сайт (website) – это набор страниц с информацией, которые соединены друг с другом ссылками. На этих страницах публикуют текст, фотографии и видео.
Покажу на примере сайта-визитки. На первой странице человек рассказывает о себе:
На второй рассказывает о своей работе:
На третьей – как с ним связаться:
Одна из страниц должна открываться первой. Часто для этого создают отдельную страницу и публикуют на ней вводный текст. Её принято называть «Главная».
А еще страницы нужно каким-то образом соединить друг с другом. Для этого было придумано меню — специальная плашка со ссылками. Меню расположено на каждой странице, в одном и том же месте.
Когда страницы готовы и связаны друг с другом через меню, их нужно разместить в интернете по определенному адресу.
Далее я покажу, как сделать такой же мини сайт своими руками. Процесс его изготовления займет от 5 минут до одного часа.
Что нужно для создания сайта
Часто спрашивают, легко ли создать собственный сайт на русском языке и можно ли его сделать самому? Как его написать, где лучше разместить? Как самостоятельно опубликовать в интернете?
Раньше это было действительно сложно: нужно было изучить один или несколько языков программирования (html + php + javascrpit). Но сейчас всё изменилось: чтобы запустить свой веб ресурс нужно просто зарегистрироваться на хостинге и сделать кое-какие настройки. С этим справиться даже новичок. Всё делается онлайн и без конструктора.
Начать сайтостроение нужно с регистрации домена и хостинга. Это обязательное условие, без которого мы не сможем выложить свой ресурс в интернете.
- Хостинг – это ячейка в Интернете, где будет лежать сайт. Туда загружают все файлы от него: страницы, фотографии, документы.
- Домен – это адрес в Интернете. То название, по которому веб ресурс будет открываться. Этот адрес написан в верхней строке браузера.
Но есть проблема и то и другое стоит денег. Доменное имя в зоне ru стоит 190 рублей в год — эту сумму нужно внести сразу. Хостинг стоит дороже, но за него можно платить помесячно. В среднем получается 120 рублей в месяц.
Но глупо тратиться на всё это, чтобы только научиться. Поэтому мы зарегистрируем бесплатное доменное имя и бесплатный хостинг. Их можно получить сроком на месяц. Этого времени вполне достаточно, чтобы создать свой сайт и наполнить его информацией, ведь сама разработка занимает около 5 минут.
Пошаговая инструкция для начинающих
Создание сайта состоит из нескольких этапов. Один из самых важных – выбор правильного хостинга. Ведь от этого зависит скорость и стабильность работы вашего ресурса.
На мой взгляд, лучший хостинг из российских – от компании Бегет. Они предоставляют бесплатное доменное имя, бесплатный месяц хостинга, круглосуточную техническую помощь. И, что важно, автоматическую установку системы управления. Кроме того, у них одни из самых низких тарифов на рынке.
Поэтому в инструкции я буду показывать, как создавать сайты именно на этом хостинге. Вы можете выбрать любой другой, но тогда шаги будут существенно отличаться.
Шаг 1: получаем домен и хостинг
1 . Переходим по адресу Beget.com и открываем раздел «Виртуальный хостинг».
2 . Опускаемся чуть ниже и выбираем тарифный план «Blog».
3 . Регистрируемся: указываем ФИО, номер своего телефона, почту.
4 . Подтверждаем номер телефона и завершаем регистрацию.
Загружается страница с данными для доступа к личному кабинету. Они также придут в смс сообщении и в письме на почту.
После нажатия на кнопку «Начало работы» мы попадаем в личный кабинет хостинга. Здесь мы будем делать основные настройки.
Шаг 2: устанавливаем систему управления
Система управления или CMS – это движок сайта. Такая оболочка, через которую мы будем им управлять.
Через систему управления добавляют страницы, настраивают меню, меняют оформление и делают всё остальное. И благодаря этой системе можно создать свой сайт с нуля просто щелкая мышкой.
1 . Для установки движка в личном кабинете хостинга переходим в раздел CMS.
2 . Выбираем WordPress.
3 . В окошке указываем данные для управления сайтом.
«Сайт для установки» и «Домен по умолчанию» будут уже указаны. Вам нужно напечатать заголовок для сайта, придумать логин с паролем и указать свою электронную почту.
Обязательно сохраните логин и пароль! Это ваш доступ к редактированию сайта.
4 . Появится окошко, где написано, что система устанавливается и нужно немного подождать. Закрываем это окошко и ждем три минуты. Затем щелкаем по ссылке в списке «Сайты».
В новой вкладке загрузится ваш сайт. Адрес, по которому он будет открываться у всех в Интернете, написан в адресной строке.
Это и есть доменное имя (домен) – уникальный адрес веб ресурса в сети. Он такой неказистый, потому что бесплатный. Но его потом можно заменить на что-то более простое и красивое.
Вот и всё – сайт создан! Осталось его настроить и наполнить информацией.
Шаг 3: настраиваем сайт
Итак, мы получили персональный веб ресурс на системе управления WordPress (Вордпресс). Осталось только отредактировать его: создать страницы, сделать меню, настроить оформление. Всё это делается через административную часть сайта. Её еще ласково называют «админка».
Для входа в админку добавьте после адреса часть /wp-admin или /wp-login.php
В итоге получится что-то вроде mysite.beget.tech/wp-admin
Когда введете это дело в адресную строку, не забудьте нажать Enter 🙂
Появится вход в админку. Здесь печатаем логин и пароль, который указывали при установке системы управления.
Таким образом, вы попадете в официальную, невидимую часть сайта – в админку. Здесь всё и редактируется: и содержание и оформление.
Выбор темы . Тема – это дизайн сайта. Чтобы ее поменять, зайдите в раздел Внешний вид – Темы.
Система предложит выбрать один из трех вариантов оформления. Если ни один не подходит, щелкните по «Добавить новую тему».
Здесь куча готовых шаблонов оформления. Сначала показываются «Избранные», но есть еще и «Популярные», «Свежие», «Любимые».
Выбираем подходящую тему и устанавливаем ее. Затем переходим в раздел «Внешний вид» — «Темы», наводим на нее курсор и нажимаем «Активировать».
Сразу после этого у сайта поменяется оформление. Чтобы это увидеть, обновляем его — нажимаем F5 на клавиатуре.
Настроить тему можно через раздел Внешний вид – Настроить.
Добавление страниц . В админке переходим в раздел Страницы – Все страницы.
Здесь добавлена одна страница — она создалась автоматически. Для удаления наводим на нее курсор и нажимаем «Удалить».
Создаем новую страничку. Для этого вверху нажимаем на «Добавить новую».
Добавляем заголовок, текст. Фото и картинки вставляем через кнопку «Добавить медиафайл». Когда всё готово, нажимаем кнопку «Опубликовать» справа.
Таким же образом публикуем и другие страницы: Страницы – Все страницы – Добавить новую.
Настраиваем сайт . Осталось привести сайт в порядок. Настроить виджеты, меню, записи и главную страницу.
- Виджеты – это блоки с разными данными на страницах. Иногда полезно, но многие из них лишние. Для работы с этими блоками переходим в раздел Внешний вид – Виджеты.
- Меню – это разделы сайта. Ссылки, по которым открываются страницы. Для изменения пунктов меню переходим в раздел Внешний вид – Меню.
- Записи – очень похожи на страницы, но с другим смыслом. На страницах мы публикуем основную информацию, а в записях дополнительную. Например, на своем сайте я через страницы опубликовал главную информацию в разделах «Обо мне», «Контакты», «Услуги и цены». А в записях буду публиковать всё остальное: заметки о работе, статьи на разные темы.
- Главная страница – это страница сайта, которая будет загружаться первой. По умолчанию там выводятся все опубликованные записи.
Если я хочу вывести на главной только одну страницу, то нужно зайти в Настройки – Чтение. Там, в пункте «На главной странице отображать» указать «Статическую страницу» и выбрать ее из списка.
Что получилось
Снимок сайта, который я сделал по этой инструкции:
Посмотреть его вживую можно по ссылке.
Информация тестовая, для примера. Любые совпадения случайны 🙂
Я специально выбрал простое оформление, чтобы было понятнее, как все устроено. Но вы можете выбрать хороший шаблон и получить действительно крутой сайт для бизнеса или для души.
Заключение
Подытожу: только что я показал, как с нуля быстро и бесплатно открыть свой сайт в интернете. Он находится на хостинге Бегет, работает на системе управления WordPress.
| Вход на хостинг | cp.beget.com или через главную beget.com |
| Вход в админку | адрес_сайта/wp-login |
Напомню, что хостинг и домен бесплатные, но сроком на месяц. Потом, чтобы сайт работал, хостинг нужно продлить. Продление уже за деньги – примерно 115 рублей в месяц.
Вот такой получится самоучитель. Надеюсь, мои советы вам помогли:)
Если будут вопросы, пишите в комментариях.
Как создать сайт для специалиста
Сайт – это визитная карточка в интернете, которая нужна каждому, кто хочет продвигать свое дело не только в онлайне, но и в офлайне. Не так важно, чем вы занимаетесь, дизайнер вы или электрик – если вы работаете на себя, то сайт сделает вас более востребованным специалистом.
В сегодняшней статье я расскажу, как создать сайт для любого специалиста без привлечения программиста и дизайнера.
Разработка сайта сегодня – это просто?
Принято полагать, что создание сайта – это обычно долгая и сложная работа, в которой задействуется несколько специалистов: программист, веб-дизайнер, верстальщик, маркетолог и другие сотрудники.
Конечно, если вам нужно создать веб-сайт для Газпрома, то без набора команды обойтись будет сложно. А вот если нужно разработать лендинг для себя или небольшого бизнеса, то все это можно сделать своими руками. Причем такой сайт будет со всем набором функций, которые нужны в данном направлении. Сегодня во всем этом нам помогают специальные сервисы – конструкторы сайтов.
Вы можете сказать, что конструктор – это для тех, кому нужен шаблонный сайт с типичным дизайном, но будете совсем не правы. Конструкторы позволяют создавать сайты ничем не хуже тех, что были собраны целой командой.
Итог таков: если вы специалист в какой-то сфере и вам нужен сайт, то сделать это можно без особых вложений. Потребуется только оплата конструктора и несколько часов. Однако для начала следует продумать всю структуру страниц.
Что же должен включать сайт для специалиста – поговорим далее.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Каким должен быть сайт для специалиста
Можно пойти двумя путями – сделать простой сайт-портфолио либо рассказать на сайте обо всем по чуть-чуть. Если пойти по первому пути, то такой сайт не будет презентабельным. А вот если рассказать о себе, показать свои работы и прикрепить отзывы клиентов, то сайт приукрасится в разы.
Типичный сайт для специалиста включает в себя такие разделы, как:
- Первый экран. Это лицо сайта, которое видит каждый пользователь. Здесь следует размещать такую информацию, чтобы было понятно, чей это сайт и что на нем вообще происходит. Например, это может быть фотография специалиста и заголовок «Сайт дизайнера Дмитрия Степанова». К этому добавляется подзаголовок и кнопка призыва к действию – подробнее об этом еще поговорим далее.
- Раздел «Обо мне». Он необходим для знакомства клиентов со специалистом. Если вы не познакомите себя с потенциальными клиентами, то как минимум это будет странно. Например, пользователь ищет дизайнера в свой проект – попадает на ваш сайт, но не видит, с кем имеет дело. Скорее всего, он просто пролистает страницу и уйдет искать дальше. В самом разделе следует рассказать немного о себе, указать какие-нибудь факты, можно также рассказать, почему вы занимаетесь этим делом и так далее.
- Раздел «Портфолио». Один из значимых разделов, в котором следует размещать свои работы. Думаю, тут и так все понятно – если вы художник, то показываете свои картины, если сантехник, то выкладываете фотографии своих работ.
- Раздел «Как я работаю». Расскажите клиентам, как происходит процесс работы с вами. Например, если вы занимаетесь наращиванием ресниц, то распишите, как это происходит – сначала вы созваниваетесь, записываете клиента, подготавливаете инструменты для работы и так далее.
- Раздел «Отзывы». Если у вас уже есть успешные кейсы, на которые клиенты хорошо отзывались, то покажите их. Однако не стоит подделывать отзывы – такой подход чаще всего виден и будет только отпугивать пользователей.
- Раздел «Обратная связь». В конце следует призвать пользователя к действию. Это может быть простая форма для обратной связи либо форма с уникальным предложением: «Оставьте заявку сейчас и получите скидку 10% на все услуги».
Подготовьте всю информацию и разбейте ее на блоки, что мы рассмотрели выше. Сами разделы могут отличаться либо добавляться новые. Если хотите еще о чем-то рассказать, то не бойтесь этого. Здесь главное, чтобы все выглядело в едином стиле и структурированно. Посмотреть примеры работ вы можете на Pinterest, Behance, либо Land-book.
Достаточно ввести интересующий запрос, и можно исследовать работы. Например, на платформе Pinterest это выглядит следующим образом:
Также перед началом создания сайта рекомендую подобрать референсы – это работы, на которые можно опираться. Соберите несколько макетов в одном файле и смотрите на них при разработке сайта. Не стоит копировать их полностью, просто пробуйте повторить какие-нибудь отдельные элементы.
Создаем сайт своими руками: пошаговая инструкция
Как я уже упоминал выше, один из вариантов создания сайта – работа в специальном сервисе. С одним из них мы и будем работать. Сегодня можно найти множество онлайн-конструкторов, которые похожи друг на друга, однако многие из них не предоставляют возможностей для создания уникального дизайна.
Мы будем работать в конструкторе Craftum. Его особенность заключается в том, что сайты можно создавать тремя способами: с помощью шаблонов, блоков и дизайн-блоков. Благодаря последнему способу можно создавать уникальные блоки, не похожие на шаблоны.
Немного о стоимости: в конструкторе для всех новых пользователей предоставляется бесплатный доступ на 10 дней. В последующем потребуется оплатить тарифный план за 197 рублей в месяц.
Что ж, давайте приступим:
- Открываем официальный сайт конструктора Craftum и нажимаем на кнопку «Создать сайт бесплатно».
- В отобразившемся окне вводим свое имя и электронную почту, затем жмем на «Создать сайт».
- Теперь мы можем переходить к созданию сайта. На выбор нам предоставляется множество различных шаблонов, а также «Пустая страница». Она предназначена для разработки сайта с нуля, тогда как шаблоны включают в себя набор готовых блоков, которые можно изменять под себя и дополнять новыми разделами. Я покажу создание сайта на примере одного из шаблонов. Например, я дизайнер интерьера и хочу создать сайт – в конструкторе я могу выбрать специальный шаблон, который находится в разделе «Услуги».
- Таким образом, мы попадаем в конструктор сайта, где будут происходить все последующие манипуляции. Данный шаблон включает в себя набор уже проработанных блоков для дизайна интерьера. Нам остается только изменить их под себя, и сайт готов. При необходимости можно добавлять уникальные блоки или те, что есть в библиотеке. Давайте начнем с шапки сайта – она включает в себя логотип, меню, контактную информацию и кнопку. Чтобы настроить блок, необходимо навести на него курсор мыши и выбрать «Настроить».
- В отобразившемся окне нам дается полный доступ к этому блоку. Давайте поменяем номер телефона – укажем свой, а также добавим логотип. Обратите внимание, что мы можем добавить наименование контакта и изменить логотип на изображение – это потребуется, если у вас уже есть готовый лого в виде картинки.
- Теперь давайте поменяем кнопки меню. Будем придерживаться типичной структуры сайта для специалиста, о которой я рассказывал выше. Просто следуйте за мной и указывайте свои данные. Для начала удалим все текущие пункты меню – для этого заходим в соответствующий раздел и справа от пункта кликаем по крестику.
- Теперь давайте вставим свои пункты с помощью кнопки «Добавить».
- В отобразившемся окне указываем имя пункта меню, а также в блоке «Тип ссылки» указываем «Якорная ссылка». Таким образом, мы сможем привязать к кнопке необходимый раздел. Пока что у нас нет готовых разделов, поэтому привязывать не к чему, но после проработки всех блоков мы вернемся сюда и настроим их. А пока что просто нажимаем «Сохранить».
- У нас появился пункт «Обо мне». Аналогичным путем добавим все необходимые для нас пункты.
- В результате у нас получается меню с пунктами. Теперь давайте немного их преобразуем – для этого открываем раздел «Дизайн» и в блоке «Меню» нажимаем на шестеренку справа от кнопки «Меню».
- Здесь мы можем изменить настройки цвета и шрифта. Давайте поменяем шрифт на Open Sans и установим ему размер 16px. Обратите внимание, что на сайте в большинстве случаев используется всего 2 шрифта – один для заголовков, другой – для контента. Мы выбрали контентный шрифт, а это значит, что он должен использоваться везде. При создании последующих блоков не забывайте менять шрифт, иначе ваш сайт может получиться с большим количеством шрифтов, что сильно повлияет на его восприятие. Другие параметры трогать не будем, но если вы хотите, то можете с ними поиграться.
- Аналогичным образом я поработал с другими элементами, а также немного изменил кнопку – задал ей основной цвет, который буду использовать в последующем.
- У нас получается вот такое меню. Обратите внимание, что наименование контакта над телефоном я убрал – использовать его необязательно.
- Теперь давайте перейдем к созданию собственного блока – первого экрана. Шаблон предлагает уже готовый первый экран, но так как мы создаем сайт для специалиста, он нам не подходит. Конечно, мы можем его поменять под себя, как сделали это выше, например, прописать заголовок «Дизайнер интерьеров Дмитрий Степанов», поменять фоновое изображение, изменить кнопку, но я хочу показать весь функционал сервиса. Для начала удалим этот блок – наводим на него курсор мыши и жмем на корзину.
- Чтобы добавить уникальный блок, наводим курсор мыши между блоками и жмем на кнопку «Добавить еще блок».
- В левой части пролистываем в самый низ и выбираем «Дизайн блок».
- В результате перед нами открывается блок, в котором мы можем перемещать элементы так, как нам нужно. Также здесь можно добавлять неограниченное количество таких элементов, как текст, объект, фотография, видео, кнопка и HTML-код. Первым делом давайте избавимся от фона блока – сначала выделим все круги и нажмем «DELETE».
- Следующим шагом давайте изменим цвет текста на черный, чтобы при удалении фона его не потерять, так как в результате у нас получится белый текст на белом фоне. Для этого слева нажимаем на стрелочку и в «Цвет текста» устанавливаем необходимый цвет.
- Теперь можем перейти к удалению фона – для этого в разделе «Фон» жмем на крестик напротив изображения.
- В результате фон становится белым. Давайте теперь поработаем с текстом. Первым делом поменяем заголовок – назовем его, к примеру, «Дизайнер интерьера Дмитрий Степанов». Сделать это очень просто – достаточно кликнуть двойным щелчком по текстовому блоку и изменить его. После этого давайте поменяем шрифт на другой. Ранее мы выбрали Open Sans для контентного текста, а теперь давайте зададим шрифт для заголовков. Возьмем для примера шрифт Podkova, сделаем его размером 54px, а также изменим межстрочный интервал на 64px, текст сделаем не жирным и выровняем по левому краю.
- Аналогичным образом прорабатываем подзаголовок и выравниваем элементы по левой части. Для удобства рекомендую подключить сетку, по которой будет строиться весь сайт. Таким подходом пользуются все сайты – весь основной контент расположен в центре, а справа и слева остаются отступы. Это позволяет пользователям сконцентрироваться на контенте и удобно его изучать. Сетка в Craftum подключается через кнопку, расположенную в верхнем правом углу.
- Теперь перейдем к настройке кнопки – здесь нет ничего сложного, все точно так же, как мы делали с текстом.
- Теперь нам осталось добавить свою фотографию, и работа в этом блоке закончена. Нажимаем для этого на кнопку в верхнем левом углу и выбираем «Фотография».
- Таким образом, появляется новый элемент – нажимаем на него и добавляем нужную фотографию.
- Теперь давайте немного уменьшим размер блока, чтобы снизу не было больших отступов. Сделать это можно в настройках «Высота блока».
- На этом все, но только с десктопной версией. Обратите внимание, что адаптивная версия в дизайн блоке под мобильные устройства автоматически не настраивается. В отличие от шаблона, здесь предоставлена полная свобода творчества – для этого в верхней части есть специальные кнопки.
- В мобильной версии нам потребуется уменьшить фотографию и размер текста. Я сделал заголовок размером 26px, а подзаголовок – 16px. Все выровнял по центру, а высоту блока сократил до 670px, также изменил размер фотографии и кнопки. В результате получилось вот так:
- Аналогичным образом потребуется отредактировать все другие разрешения. В завершение необходимо нажать на кнопку «Закрыть».
- Теперь нам нужно добавить все блоки аналогичным образом. Необязательно делать это в дизайн-блоке, можно воспользоваться и обычными блоками. Например, чтобы создать раздел «О себе», можно выбрать блок из библиотеки «О проекте». Для примера давайте возьмем один из них.
- Теперь у нас появляется блок – настроить его можно точно так же, как мы это уже делали с шапкой сайта. Изменяем весь контент и получаем желаемый результат:
- Вот так, шаг за шагом, создается сайт на конструкторе Craftum. Когда все разделы будут созданы, не забудьте прикрепить их к меню, которое мы создавали в самом начале. Нужно будет зайти в настройки пунктов меню и к каждому прикрепить нужный блок.
- Чтобы сделать сайт рабочим, необходимо в верхнем правом углу нажать на кнопку «Опубликовать».
- Поздравляю! Только что вы создали сайт и теперь можете делиться им с друзьями и коллегами, а также продвигать его для привлечения новых клиентов.
Обратите внимание, что опубликованный сайт размещен на тестовом домене. Если вы хотите, чтобы ваш сайт назывался, например, designerdm.ru, то нужно будет купить домен и прикрепить его к созданному сайту. Напишите в чат конструктора Craftum – специалист поддержки оперативно ответит, поможет подобрать домен и расскажет, как зарегистрировать.
Заключение
Сегодня мы детально изучили работу в конструкторе Craftum на примере создания сайта для специалиста. Разработать ресурс для привлечения клиентов и других целей совсем не сложно, достаточно ознакомиться с функционалом желаемой платформы. Главное – продумать структуру сайта, написать нужный текст и определиться с цветовой схемой.