Создание сайта на WordPress для начинающих

Какой WordPress выбрать

WordPress бывает двух версий, и это очень важно.

Совет: для любого серьёзного сайта выбирайте WordPress.org — это стандарт индустрии и даст вам полную свободу.

Хостинг и домен за 10 минут

Хостинг — это место в интернете, где живёт ваш сайт. Мы используем Hostinger, потому что он быстрый, надёжный и есть предустановка WordPress.

Какой тариф выбрать

• Business plan (рекомендуется): лучшая производительность, можно разместить до 50 сайтов, 50 ГБ хранилища
• Бесплатный домен на первый год
• Сроки платежей: чем дольше платите вперёд (48 месяцев), тем ниже цена в месяц

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

1. В личном кабинете Hostinger нажмите «Claim domain»
2. Придумайте короткое, запоминающееся имя
3. Проверьте, свободно ли оно
4. Подтвердите email — домен активирован

Установка WordPress за клик

Hostinger автоматически устанавливает WordPress. Это совсем просто.

1. В контрольной панели нажмите «Create new site» → WordPress
2. Выберите ваш домен и регион сервера (чем ближе к вашей аудитории, тем быстрее сайт работает)
3. Придумайте пароль для входа администратора (сохраните его в надёжном месте)
4. Выберите «Create from scratch» — не AI-генерацию
5. Подождите 1–2 минуты, пока все установится

Важно: сохраните URL входа в админку (обычно example.com/wp-admin) и пароль — они понадобятся дальше.

Выбор темы и нужные плагины

Тема — это шаблон оформления. Плагины добавляют функции. Вместе они делают сайт красивым и функциональным.

Установка темы Astra

• Тема контролирует шрифты, цвета, расположение элементов
• Astra очень популярная, быстрая и имеет сотни готовых шаблонов
• В админке: «Appearance» → «Themes» → «Add Theme»
• Найдите Astra, установите и активируйте её

Плагины: оставляем нужные, удаляем лишние

• Идите в «Plugins» и удалите все предустановленные плагины
• Оставьте только LiteSpeed Cache — он ускоряет сайт
• Установите Starter Templates — это даст вам доступ к библиотеке готовых дизайнов

Совет: не устанавливайте много плагинов — они замедляют сайт. Берите только то, что действительно нужно.

Выбираем готовый дизайн сайта

Зачем делать сайт с нуля? Используйте готовый шаблон — так вы за минуты получите профессиональный дизайн.

1. Запустите мастер установки через плагин Starter Templates
2. Выберите Elementor — это самый удобный конструктор drag-and-drop
3. Ищите шаблон по категориям (ресторан, портфолио, магазин) или ключевому слову
4. Нажмите на понравившийся бесплатный шаблон
5. При импорте можно сразу загрузить ваш логотип и выбрать цвета, или пропустить и делать потом

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

Редактируем сайт с Elementor

Elementor — это конструктор, где вы редактируете всё через перетаскивание. Никаких кодов.

Интерфейс Elementor: как он работает

• Страница состоит из контейнеров — блоков, в которые вложены элементы (текст, картинки, кнопки)
• Правая панель «Structure» показывает иерархию страницы — очень удобно для сложных макетов
• На левой панели три вкладки для каждого элемента: «Content» (текст и ссылки), «Style» (цвета, размеры), «Advanced» (отступы, тени)

Редактируем текст

• Кликните на текст → печатайте
• Вкладка «Style» → меняйте размер, шрифт, цвет
• Вкладка «Advanced» → настраивайте отступы и выравнивание

Добавляем и меняем картинки

• Кликните на картинку → загрузите свою со своего компьютера
• В «Style» меняйте размер, скругление углов, тень

Кнопки и ссылки

• Вкладка «Content» — меняйте текст и ссылку
• Вкладка «Style» — цвет фона, шрифта, скругление
• Добавляйте отдельное состояние для наведения мышки (hover)

Фон контейнера

• Кликните на контейнер → «Style» → «Background»
• Выбирайте: сплошной цвет, картинку, градиент или видео

Отступы, новые блоки и элементы

• Отступы: Padding — внутри, Margin — снаружи. Оба в «Advanced» → «Layout»
• Пустое место: используйте готовый элемент «Spacer» для вертикальных промежутков
• Новый элемент: нажмите «Add Element» и перетащите виджет на страницу
• Новый блок: нажмите + между контейнерами, выберите Flexbox

Глобальные стили и мобильная версия

• Логотип Elementor → «Site Settings» — меняйте основные цвета и шрифты для всего сайта сразу
• Вверху переключение: Desktop, Tablet, Mobile — отдельно настраивайте вид на каждом устройстве
• После любых правок нажимайте «Publish» в правом верхнем углу

Совет: сначала редактируйте Desktop-версию, потом проверьте Tablet и Mobile. Обычно нужно только чуть-чуть подправить размеры.

Добавляем страницы, меню, хедер и футер

Создаём новую страницу

1. В админке: «New» → «Page»
2. Дайте названию — это будет название в браузере и меню
3. Нажмите «Publish»
4. Нажмите «Edit with Elementor» и начинайте дизайнить
5. Можете начать с нуля или импортировать готовый блок/шаблон из Starter Templates

Добавляем страницы в меню

1. На живом сайте нажмите кнопку «Customize» вверху
2. Перейдите в «Menu» → «Main Menu»
3. Нажмите «Add Items» и выберите вашу новую страницу
4. Перетащите пункты меню, чтобы изменить порядок
5. Нажмите «Publish»

Правим хедер (шапка) и футер (подвал)

Хедер и футер редактируются в настройках темы, не в Elementor.

1. На живом сайте нажмите «Customize» вверху
2. Найдите секции «Header» и «Footer»
3. Хедер: загрузите логотип, удалите ненужные блоки (телефон, соцсети), перетащите элементы. Может потребоваться раскрыть «Transparent Header»
4. Футер: поправьте текст (копирайт), загрузите логотип, уберите лишнее
5. Favicon: в «Site Identity» загрузите маленькую иконку для вкладки браузера
6. Нажмите «Publish»

Итоги: что получилось

Готово! Вы создали профессиональный, адаптивный сайт без единой строки кода.

Что вы узнали

• Разница между WordPress.com и WordPress.org — выбрали правильный
• Как выбрать хостинг и зарегистрировать домен на Hostinger
• Как установить WordPress, тему Astra и плагин Starter Templates
• Как использовать Elementor для редактирования каждой детали (текст, картинки, кнопки, цвета)
• Как добавлять новые страницы и собирать меню
• Как адаптировать сайт под мобильные телефоны и планшеты
• Как менять глобальные стили и быстро обновлять весь сайт

Фишки, которые помогают

• Готовые шаблоны экономят часы работы — не начинайте с нуля
• Все инструменты бесплатны — платите только за хостинг
• Drag-and-drop интерфейс не требует программирования
• Мобильная адаптация встроена в шаблоны — не нужно переделывать

Дальше?

• Добавьте СЕО (плагин Yoast или Rank Math) — поисковики начнут вас находить
• Установите форму обратной связи (WPForms) — клиенты смогут писать вам
• Настройте аналитику (Google Analytics) — поймёте, откуда приходит трафик
• Периодически обновляйте WordPress и плагины — это безопасность