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

Шаг 1 — регистрация на хостинге

Что такое хостинг? Говоря простым языком, это сервер (компьютер), на котором будет храниться ваш сайт.

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

Если вам не безразлична судьба нашего проекта, то укажите для поля “Указать код партнера” наш код — 1486766, так нас хостинг наградит приятным бонусом, а своим партнерам мы обещаем помочь в решении любых вопросов, просто напишите в наше сообщество в ВКонтакте!

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

Шаг 2 — Регистрация домена

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

Доменом именуют адрес вашего сайта. Например, sajt-pod-klyuch.ru — домен моей веб-студии. Вам следует зарегистрировать свой.

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

Выход только один — зарегистрировать любой другой свободный адрес.

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

Регистрация домена в зонах “.ru” и “.рф” кого-то может отпугнуть, ведь требуется указать свои паспортные данные. Не тревожьтесь, это полностью безопасная процедура, особенно если пользоваться надежным хостингом. К слову, эти данные никто не увидит кроме регистратора доменов.

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

Шаг 3 — Установка CMS WordPress

Что нужно сделать, чтобы создать сайт самому бесплатно? Переходим в раздел “Сайты”. Здесь находится список созданных вами сайтов. Сейчас вы там видите сайт, который создал Beget автоматически для бесплатного домена. Удалите этот сайт. Просто нажмите на иконку корзины и подтвердите действие.

Теперь требуется скопировать зарегистрированный вами домен в поле “Имя сайта” и нажать кнопку “Создать”.

Отлично! Вы создали директорию для вашего будущего сайта. Теперь от вас требуется требуется кликнуть на зеленую иконку “Прикрепить домен” и выбрать из списка домен, соответствующий созданной директории.

Теперь немного подождите. Сходите на кухню и налейте горячего чаю! 🙂

Отдохнули? Отлично! Осталось совсем немного. Заходим на вкладку “CMS” и кликаем на WordPress.

Внимательно посмотрите на пункты “Сайт для установки” и “Домен по умолчанию”. Они должны соответствовать зарегистрированному вами доменному имени и директории сайта, которую вы создали.

Теперь от вас требуется заполнить поля “Описание сайта”, “Логин администратора” и “Пароль администратора”, а также почту, на которую хотите получать уведомления от сайта.

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

Теперь вам остается нажать кнопку “Установить” и WordPress начнет установку. Можете также немного подождать, а затем попробовать перейти на свой сайт по адресу зарегистрированного домена!

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

Шаг 4 — Установка темы и плагина Elementor

Вам необходимо попасть в админ-панель вашего сайта. Введите в адресную строку “домен/wp-admin”. Например, мне требуется ввести “root-mobile.ru/wp-admin”.

Вы увидите окно для входа в вашу админку. Введите данные от входа, которые вы указывали при установке WordPress.

Если вы вдруг забыли данные, которые указывали при установке WordPress, проделайте следующие действия:

• Зайдите на хостинг;
• Откройте раздел “CMS”.

Вам требуется нажать на надпись “Wordpress…” в списке ваших сайтов над блоком с CMS. В открывшемся окне вы увидите логин и пароль от входа в админку.

После успешного входа в админ-панель вашего сайта уделите несколько минут вашего времени и покликайте по вкладкам в меню. Там все интуитивно понятно и дополнительных комментариев не требует.

Перейдите на вкладку “Темы” и нажмите кнопку “Добавить” над блоками установленных тем.

В открывшемся поиске введите Ocean wp и установите эту тему.

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

После того, как вы нажмете на кнопку установки темы, вам потребуется ее активировать. Для этого просто нажмите на соответствующую кнопку.

Видите желтое уведомление над списком тем? Кликайте на “Начало установки плагина”.

Здесь все просто. Нажмите на ссылку “Установить” под названием плагина.

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

Как думаете, что следует делать с большой синей кнопкой в блоке с голубой рамкой? Правильный ответ! На нее следует нажать! 🙂

Вас приветствует такая акула. Это мастер установки плагина. Нажимаем на очередную синюю кнопку!

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

После выбора понравившегося шаблона просто нажимаем Install Demo.

На следующей вкладке вам предлагают выбрать дополнительные плагины для работы с сайтом. Вам требуется нажать на кнопку “Install Now” для плагина Elementor. Все остальное сверьте со скриншотом, на всякий случай. Должны стоять те же галочки, что и у меня. Сразу после этого кликаем по кнопке “Import”.

На следующей странице вам предлагают выбрать цветовую гамму будущего сайта, загрузить свои логотипы. Этого можно не делать, загрузим в будущем, а пока просто нажимаем на “Continue”.

Отлично! Если вы видите такое окно, то вы все сделали правильно. Теперь нажимаем на серую кнопку и давайте посмотрим на результат.

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

Как видите, после установки CMS WordPress и темы Ocean WP мы получили достаточно стильный одностраничный сайт. Остается дело за малым. Мы должны открыть этот сайт с помощью конструктора страниц Elementor и приступить к его редактированию.

А вы видите черную полоску в самом верху вашего сайта? Просто кликните на пункт “Редактировать в Elementor” и откроется визуальный конструктор.

Если после клика на “Редактировать в Elementor” вы увидите такое окно — просто нажмите на “Пересоздать набор”.

Вас перекинет в админку сайта, где вы должны нажать на кнопку “Пересоздать набор”, а затем просто перейдите на сайт и попробуйте снова кликнуть на “Редактировать в Elementor”.

Получилось? Принимайте мои поздравления! Теперь вы можете отредактировать абсолютно любой элемент на вашем сайте!

Шаг 5 — Учимся работать в Elementor

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

Как отредактировать текст в Elementor?

Начнем с самого простого. Для этого наведите курсор на любой элемент, и в правом верхнем углу появится синяя иконка с карандашом. Кликните на нее.

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

На вкладке “Стиль” вы можете настроить типографику (шрифт, размер, насыщенность и так далее), а также цвет или же тень.

Как заменить картинку на фоне секции?

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

На этой же вкладке вы можете поиграть с опцией “Привязка” — закрепить изображение на месте или же прокручивать его вместе с контентом при скролле.

Как вставить изображение или любой другой элемент на страницу?

Видите слева темно-бордовую полоску с надписью Elementor? Кликните на 9 точек справа. Откроется меню со всеми доступными вам элементами для работы. У базовой версии Elementor доступен лишь ограниченный набор. И в следующем материале я расскажу, как получить Elementor Pro бесплатно!

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

Как удалить секцию или элемент?

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

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

Как создать секцию?

Наводите курсор на секцию, над которой нужно создать еще одну. Затем нажимаете на плюс.

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

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

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

Наводите курсором на колонку и кликаете ПКМ по “Редактировать Колонка”, а уже в выпадающем меню выбираете “Дублировать”. После этого у вас появится еще 1 элемент.

Подведем итоги

В ходе изучения этого материала я научил вас создавать сайты на бесплатном конструкторе Elementor для CMS WordPress. И такой способ создания сайта, в отличие от Tilda или Wix, несет множество неоспоримых преимуществ:

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

Во-вторых, сайт создается крайне быстро. Благодаря хостингу Beget, CMS WordPress и Elementor вы сможете создать и запустить сайт в максимально короткие сроки.

В-третьих, благодаря такому способу разработки вы уже сможете выходить на первых заказчиков с помощью того же Авито с чеком от 10 000 рублей. Согласитесь, достаточно неплохая подработка на субботу и воскресенье!

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

В-пятых, ваш сайт будет давать хорошие позиции в SEO, даже если вы создали его на Elementor.

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