сли вы хотите создать веб-сайт для себя или для своего бизнеса, вы можете легко сделать это, используя правильные инструменты и ресурсы.
Это руководство по созданию веб-сайта поможет вам создать веб-сайт с нуля без необходимости тратить деньги на фрилансеров, агентства или разработчиков веб-сайтов.
Все, что вам нужно, это 1-2 часа свободного времени, чтобы заполнить руководство и создать веб-сайт.
Вещи, необходимые для создания веб-сайта
- Доменное имя (ваш персональный веб-адрес, www.YourSite.com)
- Хостинг веб-сайтов (услуга, на которой размещается ваш сайт)
- WordPress (бесплатная, часто используемая платформа для веб-сайтов)
Чтобы создать полнофункциональный веб-сайт, вам необходимо защитить доменное имя (веб-адрес) и учетную запись веб-хостинга. Эти два гарантируют, что ваш сайт полностью доступен для других. Без того или другого вы не сможете создать веб-сайт.
Если у вас есть домен и хостинг, вы можете создать веб-сайт WordPress. WordPress - самая популярная платформа для создания веб-сайтов, которую используют 39% всех веб-сайтов в Интернете.
Настройка сайта WordPress обычно представляет собой простой процесс в один клик через службу веб-хостинга.
После того, как вы закончите работу с руководством, у вас будет полностью рабочий веб-сайт в Интернете с собственным доменным именем, полностью доступный для других.
Готовы? Давайте начнем…
Оглавление (шаги по запуску сайта):
Полное раскрытие информации : это руководство поддерживается читателями. Если вы перейдете по нашим ссылкам, мы можем получить комиссию.
Готовы? Давайте начнем…
1. Выберите доменное имя.
Первое, что вам понадобится для создания веб-сайта, - это доменное имя.
Доменное имя - это имя и адрес вашего веб-сайта. Этот адрес используется посетителями, когда они пытаются найти ваш сайт через свои веб-браузеры.
Доменное имя этого веб-сайта - websitesetup.org . Твое может быть что угодно.
Доменные имена могут стоить от 10 до 50 долларов в год. Обычная цена - около 15 долларов.
Если вы не зарегистрировали или не выбрали доменное имя для своего веб-сайта, вот несколько советов, которые вам помогут:
- Если вы создаете веб-сайт для бизнеса , ваше доменное имя должно совпадать с названием вашей компании. Например: YourCompanyName.com
- Если вы планируете создать для себя личный веб-сайт, YourName.com может стать отличным вариантом.
- Используйте «общее» расширение доменного имени, такое как .com , .net и .org, если ваша цель - иностранные посетители или посетители из США. Используйте расширение «местного» доменного имени, например .de , .r или .ru, если ваша цель - посетители, ориентированные на страну.
Не беспокойтесь, если предпочитаемое вами доменное имя уже занято. Зарегистрировано более 300 миллионов различных доменных имен, но есть еще миллиард других возможностей, которые все еще доступны.
Если у вас еще нет доменного имени, регистрировать его не нужно.
Мы покажем вам, как получить доменное имя бесплатно в течение первого года (шаг 2):
2. Зарегистрируйте домен и зарегистрируйтесь для учетной записи веб-хостинга.
Помимо доменного имени вам также понадобится хостинг веб-сайтов (веб-хостинг).
Веб-хостинг - это служба, которая размещает и хранит файлы (контент) вашего веб-сайта на безопасном сервере, который всегда работает. Без веб-хостинга ваш сайт не будет доступен для чтения и просмотра другими.
Доступный и надежный веб-хостинг для новых веб-сайтов обычно стоит от 3 до 10 долларов в месяц. Меньше, чем чашка кофе, но важная инвестиция для успеха вашего сайта.
Независимо от того, в какой компании веб-хостинга вы зарегистрируетесь, убедитесь, что она имеет следующие функции:
- БЕСПЛАТНОЕ доменное имя с SSL (для безопасности)
- Установка WordPress в один клик (бесплатно)
- Пользовательские учетные записи электронной почты
- Неограниченная или неизмеренная пропускная способность (без ограничений по трафику)
- Поддержка клиентов, желательно круглосуточный онлайн-чат
Если вы найдете хостинг веб-сайтов, который предлагает все вышеперечисленное, вы, вероятно, нашли хорошего провайдера.
Мы рекомендуем использовать Bluehost.com для веб-хостинга и доменов. Они предлагают бесплатную регистрацию домена в течение первого года, а получение доменного имени и хостинга от той же компании сэкономит вам время и деньги.
Планы хостинга Bluehost начинаются с $ 2,75 в месяц с нашей скидкой по ссылке и предлагают все необходимые функции для создания веб-сайта.
1) Чтобы получить учетную запись веб-хостинга, просто посетите Bluehost и нажмите «Начать сейчас».
2) Затем выберите свой план веб-хостинга (выбор плюс полностью неограничен, а базовый лучше всего подходит для новых сайтов):
3) Затем выберите и зарегистрируйте доменное имя (бесплатно в течение первого года):
Имейте в виду , что Bluehost не предлагают окончаний доменов конкретных стран, таких как .de , .fr или .ru . Если они вам нужны, вы можете купить их отдельно на Domain.com или GoDaddy.com.
Если у вас уже есть доменное имя, которое вы купили где-то еще, Bluehost позволяет вам подключить его к вашему новому тарифному плану. Здесь потребуются некоторые дополнительные шаги - например, обновление серверов имен . Вот руководство от Bluehost о том, как это сделать.
4) После того, как вы завершите процесс регистрации, вам потребуется несколько минут, чтобы получить мгновенный доступ, так что вы можете сразу приступить к созданию своего сайта.
3. Настройте веб-сайт WordPress (через веб-хостинг)
Как только у вас будет готово доменное имя и веб-хостинг, вам нужно будет выбрать и установить платформу для создания веб-сайтов (также известную как CMS ).
Мы рекомендуем выбрать WordPress, поскольку он прост в использовании и содержит тысячи бесплатных дизайнов и надстроек, которые сделают ваш сайт профессиональным и уникальным.
Настроить веб-сайт WordPress легко, и ваш веб-хостинг в основном делает это за вас, поэтому вам не нужно слишком пачкать руки.
Если вы не используете Bluehost в качестве веб-хостинга, не волнуйтесь. У многих провайдеров веб-хостинга «установка WordPress» находится где-то в cPanel хостинга. Если вы имеете дело с веб-хостингом, который не обеспечивает «установку в один клик », попробуйте настроить WordPress вручную .
1) Установка сайта WordPress на Bluehost
- Войдите в свою учетную запись Bluehost
- Укажите основную информацию о своем сайте, и установка WordPress начнется. Все будет на автопилоте.
- Когда установка будет завершена, Bluehost покажет вам данные для установки и входа в систему. Обязательно сохраните эту информацию в надежном месте.
2) Проверьте свой сайт, введя адрес своего домена
После установки WordPress вам следует проверить, все ли работает.
Самый простой способ сделать это - ввести свое доменное имя в веб-браузере.
Если WordPress правильно установлен, вы увидите очень простой веб-сайт вроде этого:
Если это выглядит не слишком привлекательно, не волнуйтесь, скоро вы узнаете, как изменить дизайн на что-то более привлекательное.
3) Проверьте настройки SSL / HTTPS
Короче говоря, сертификат SSL гарантирует, что ваш сайт будет безопасно доставлен вашим посетителям.
Bluehost автоматически добавляет SSL, когда вы создаете новый веб-сайт или устанавливаете WordPress. Чтобы проверить статус SSL вашего сайта, выполните следующие действия:
- Войдите в свой портал Bluehost
- Нажмите «Мои сайты».
- Найдите свой сайт и нажмите «Управление сайтом».
- Перейдите на вкладку «Безопасность».
- В разделе «Сертификат безопасности» вы найдете свой статус «Бесплатный сертификат SSL».
Если все прошло хорошо, вы должны увидеть значок замка рядом с вашим доменным именем в веб-браузере.
Полная настройка SSL может занять несколько часов, но это не должно останавливать вас от продолжения создания своего веб-сайта.
4. Настройте дизайн и структуру своего веб-сайта.
Когда ваш голый веб-сайт жив и работает, пришло время сделать его более похожим на ваш собственный, выбрав красивый дизайн, настроив его и добавив элементы брендинга.
Начиная с:
1) Выберите тему для своего сайта
Темы WordPress - это готовые дизайнерские пакеты, которые меняют внешний вид всего вашего сайта. Темы WordPress взаимозаменяемы - вы можете легко переключаться с темы на тему.
Что наиболее важно, в сети доступны тысячи бесплатных и платных тем WordPress.
Если вы хотите получить бесплатную тему - с чего большинство людей предпочитают начинать - лучше всего перейти в официальный каталог тем на WordPress.org. В частности, раздел самых популярных тем .
Все темы, которые вы там видите, оказались отличного качества и имеют за собой большую базу пользователей.
Вы можете просмотреть этот список и выбрать любую понравившуюся тему, но, чтобы ускорить процесс в этом руководстве, мы рекомендуем Neve . Это универсальная тема, которая поставляется с несколькими стартовыми сайтами (дизайн-пакеты для разных ниш и типов веб-сайтов).
Мы собираемся использовать эту тему в этом руководстве в будущем.
2) Установите понравившуюся тему
Перейдите в административный интерфейс WordPress. Вы можете найти его по адресу YOURSITE.com/wp-admin . Используйте имя пользователя и пароль, полученные при установке WordPress.
- После завершения установки нажмите кнопку «Активировать», которая появится вместо кнопки «Установить».
- Вы увидите сообщение об успешном завершении, которое позволит узнать, что установка прошла должным образом.
3) Импортируйте дизайн (только для пользователей Neve Theme)
Хотя тема на данный момент активна, есть еще пара вещей, которые вы должны сделать, чтобы она выглядела правильно.
Вы увидите это приветственное сообщение:
Одна из замечательных особенностей Neve заключается в том, что вы получаете не один дизайн, а целый ряд различных дизайнов, из которых вы можете выбирать. Нажмите на большую синюю кнопку, чтобы увидеть их.
Более 20 дизайнов доступны бесплатно, и они охватывают большинство популярных ниш веб-сайтов, таких как бизнес, ресторан, фитнес, музыка, еда, свадьба, фотография, электронная коммерция, портфолио и многое другое. По сути, независимо от темы вашего сайта, вы найдете подходящий дизайн-пакет.
Для целей этого руководства мы выберем первый в списке - под названием «Оригинал».
Вы заметите, что этот процесс установки заботится обо всех элементах, которые вам понадобятся на вашем сайте - вы получаете сам дизайн, все плагины, необходимые для его работы, а также демонстрационный контент, который вы можете позже изменить.
Нажмите кнопку «Импорт», чтобы все заработало. Примерно через минуту вы увидите сообщение об успешном завершении.
Мы собираемся изучить некоторые из этих вариантов ниже:
4) Добавить логотип
Первое, что хочет сделать большинство пользователей, это загрузить свой логотип и отобразить его в верхнем левом углу сайта. Давай сделаем это сейчас.
Y ожно DIY логотип. Вот несколько инструментов, которые вы можете использовать для самостоятельного создания логотипа.
Когда у вас будет готов логотип, вы можете добавить его на свой сайт. Перейдите в «Внешний вид → Neve Options» и щелкните ссылку «Загрузить логотип».
Вот что вы увидите:
Этот интерфейс называется настройщиком WordPress и позволяет редактировать различные аспекты внешнего вида вашего веб-сайта. Для начала вы можете загрузить свой логотип. Для этого нажмите кнопку «Выбрать логотип» в верхнем левом углу.
WordPress предоставит вам возможность обрезать логотип, но вы можете пропустить это.
Вскоре вы должны увидеть свой логотип в углу страницы.
Кроме того, вы можете выбрать, хотите ли вы отображать название сайта и слоган рядом с логотипом, и установить максимальную ширину логотипа. Поэкспериментируйте с этими настройками и выберите наиболее подходящий для вас.
По завершении нажмите кнопку «Опубликовать» (в верхнем левом углу), а затем нажмите кнопку «X», чтобы выйти из настройщика.
5) Измените цветовую схему и шрифты веб-сайта
Еще вы можете поэкспериментировать с изменением цветовых схем и шрифтов, используемых на сайте. По мере того, как вы изучаете, как создать веб-сайт, это простое решение, позволяющее сделать ваш сайт более уникальным и более подходящим для вашего бренда.
- Сначала нажмите «Установить цвета».
- Большинство тем WordPress определяются цветовой схемой, которую они используют для различных элементов дизайна.
- Чаще всего это цвета ссылок, текста на сайте и фона.
- Вы можете изменить назначение цвета для темы Neve через Настройщик.
- Когда закончите, нажмите «Опубликовать» и «X».
Смена шрифтов работает аналогично:
- Щелкните ссылку «Настроить шрифты» на панели «Внешний вид → Параметры Neve».
- Neve позволяет вам выбирать из всего каталога системных шрифтов и шрифтов Google.
- После этого вы можете настроить отдельные шрифты, используемые для заголовков.
Поэкспериментируйте с этими настройками, чтобы увидеть, как они влияют на ваш сайт.
- Щелкните «Общие». Это приведет вас к аналогичной панели параметров, но на этот раз вы настроите основной шрифт.
- По завершении нажмите «Опубликовать» и «X».
6) Добавить боковую панель
Еще одна вещь, которую вы можете сделать на панели «Внешний вид → Neve Options», - это настроить, как вы хотите, чтобы ваша боковая панель выглядела. Щелкните «Content / Sidebar», чтобы начать.
Здесь у вас есть три основных варианта: без боковой панели , боковая панель слева или боковая панель справа . Боковая панель справа - это классический макет для большинства веб-сайтов. Вы также можете установить ширину содержимого. После внесения изменений нажмите «Опубликовать» и «X».
7) Добавить виджеты (бесплатные надстройки WordPress)
Виджеты - это те небольшие блоки контента, которые обычно появляются на боковых панелях веб-сайтов. Поскольку мы только что установили боковую панель на предыдущем шаге, давайте теперь настроим ее с помощью виджетов.
Чтобы настроить виджеты, перейдите в «Внешний вид → Виджеты». Вы увидите это:
Слева вы можете увидеть все доступные виджеты; а справа - все области виджетов, поддерживаемые вашей текущей темой. Чтобы добавить виджет на боковую панель, все, что вам нужно сделать, это захватить виджет слева и перетащить его в область боковой панели.
Например, если вы хотите перечислить все свои страницы на боковой панели, возьмите виджет «Страницы» и перетащите его в раздел боковой панели. Вы также можете настроить некоторые базовые параметры виджета.
8) Поэкспериментируйте с созданной вами темой
То, что мы рассмотрели выше, будет достаточно для вас, чтобы понять, как создать веб-сайт, который выделялся бы и выглядел оригинально, но существует гораздо больше вариантов.
Чтобы увидеть их все, выберите «Внешний вид → Настроить». Это запустит основной интерфейс Настройщика со всеми его настройками и предустановками.
Мы рекомендуем вам просмотреть то, что там доступно, и поиграть с некоторыми вариантами. Вы, вероятно, наткнетесь на некоторые настройки, которые мы здесь не обсуждали.
5. Добавьте контент / страницы на свой сайт
Страницы - это суть вашего сайта. Трудно представить себе веб-сайт без каких-либо страниц, правда?
С технической точки зрения веб-страница - это просто документ в сети. Он не сильно отличается от вашего традиционного документа Word, за исключением того, что в нем есть элементы брендинга вашего веб-сайта, такие как верхний и нижний колонтитулы.
Веб-страницы легко создавать в WordPress. Но прежде чем мы перейдем к практическим рекомендациям, давайте обсудим, какие страницы вам следует создать в первую очередь.
Для большинства веб-сайтов необходимы следующие страницы:
- Домашняя страница - это первая страница, которую посетители видят, когда переходят на ваш сайт.
- О странице - страница, объясняющая, о чем ваш сайт.
- Страница контактов - страница, позволяющая посетителям связаться с вами.
- Страница блога - список ваших последних сообщений в блоге; если вы не планируете вести блог, вы можете использовать страницу блога как место для новостей и объявлений вашей компании
- Страница услуг - если сайт, который вы создаете, предназначен для бизнеса, используйте эту страницу, чтобы продемонстрировать свои услуги.
- Страница магазина - для компаний, которые хотят запустить магазин электронной коммерции.
Многие из вышеперечисленных страниц будут очень похожи по структуре, с той лишь разницей, что контент на самой странице. По сути, как только вы научитесь создавать одну страницу, вы будете знать, как создавать их все. Здесь есть некоторый нюанс, поэтому давайте теперь рассмотрим, как создать пару основных типов страниц:
1) Создание домашней страницы
Если вы используете Neve, ваша домашняя страница выглядит примерно так:
Вы можете редактировать структуру этой страницы, а также элементы на ней (все тексты и изображения).
Для этого просто нажмите кнопку «Редактировать с помощью Elementor» на верхней панели.
Вы увидите интерфейс конструктора страниц Elementor.
Elementor - это то, что мы называем визуальным конструктором страниц . Это означает, что вы можете щелкнуть любой элемент, который видите на странице, и отредактировать его напрямую. Например, если вы хотите изменить основной заголовок, просто нажмите на него и начните печатать.
Если вы посмотрите на левую боковую панель, там есть целая панель настройки. Вы можете настроить структуру и стиль любого блока содержимого. Например, вот что вы можете увидеть, работая над заголовком:
Еще одна интересная вещь заключается в том, что вы можете захватить любой элемент на странице и перетащить его в другое место.
Чтобы добавить новые элементы, щелкните небольшой квадратный значок в верхнем левом углу.
Вы увидите список всех доступных блоков содержимого.
Возьмите любой из блоков и перетащите их на холст страницы.
Лучший способ работать на домашней странице - переходить блок за блоком и редактировать демонстрационный контент на странице.
Введите новое текстовое содержимое, выровняйте некоторые блоки, удалите те, которые вам не нужны, и соответственно добавьте новые.
Весь этот интерфейс довольно интуитивно понятен в использовании, поэтому просто потратьте час или около того, используя его и экспериментируя с разными вещами.
2) Создайте страницы, такие как «О нас», «Услуги», «Контакты».
Создавать классические веб-страницы в WordPress даже проще, чем работать на домашней странице. Перейдите в «Страницы → Добавить новый». Вы увидите этот интерфейс:
Каждой странице нужен заголовок, поэтому начните с добавления заголовка с надписью «Добавить заголовок». Например, «О нас» или «Контакты».
Затем выберите макет страницы. Если вы создаете стандартную страницу, вы можете выбрать первую в списке - «Однострочная». Но чтобы ускорить процесс, вы можете выбрать из библиотеки шаблонов. Для этого нажмите синюю кнопку.
Вы увидите окно, в котором вы можете выбрать один из заранее подготовленных разделов страницы. Если вы работаете на о странице, например, вы можете быстро найти и использовать следующие блоки:
Просто нажмите кнопку «Вставить» рядом с понравившимся блоком, и он будет добавлен на страницу. Оттуда вы можете дополнительно настроить его, изменить текст или заменить изображения.
Когда вы закончите, нажмите кнопку «Опубликовать» в правом верхнем углу экрана.
Вы можете следовать тому же процессу при работе со своей страницей контактов или страницей услуг .
Просто выберите разные блоки страницы из библиотеки шаблонов. Например, они должны отлично работать на странице услуг :
Если вы хотите добавить новые элементы страницы вручную - вместо использования шаблонов - щелкните значок «+» в верхнем левом углу интерфейса редактора.
Любой выбранный вами блок будет добавлен внизу вашей страницы. Вот как выглядит новый блок заголовка:
Как видите, вы можете свободно редактировать его, изменять свойства текста, плюс есть настройки цвета на правой боковой панели.
Как всегда, не забудьте нажать «Опубликовать», когда закончите.
3) Создайте страницу блога
На странице блога можно найти список ваших последних сообщений в блоге.
Хорошая новость в том, что страница блога уже создана для вас. Это произошло, когда вы установили WordPress и тему Neve. Вы можете увидеть эту страницу, перейдя в «Страницы»:
Щелкните ссылку «Просмотр», чтобы увидеть страницу своего блога в действии.
Добавление новых сообщений в блог:
Чтобы добавить новые сообщения в блог, просто перейдите к «Публикации → Добавить новые».
Этот интерфейс вам что-нибудь напоминает? Да, это та же среда редактирования, которую мы использовали при создании стандартных страниц. Легко!
6. Настройте меню навигации.
После создания ряда красивых страниц следующим шагом в нашем поиске того, как создать веб-сайт, является настройка вашей навигации (меню веб-сайта). Меню - это то, что ваши посетители будут использовать для перехода со страницы на страницу вашего сайта.
Перейдите в «Внешний вид → Меню» и оттуда нажмите «Создать новое меню».
Вот как шаг за шагом создать свое первое меню:
- Начните с добавления заголовка. Название меню на самом деле не имеет значения, но оно помогает отличить ваше меню от других меню (да, у вас может быть больше одного).
- Выберите страницы для добавления в ваше меню. Вы также можете добавить в меню другие элементы, например сообщения или пользовательские ссылки.
- Нажмите кнопку «Добавить в меню», чтобы добавить выбранные страницы в свое меню.
- Перетаскивайте элементы меню, чтобы расположить ссылки по важности.
- Выберите место отображения меню. Это отличается от темы к теме. В этом случае, установите свое меню в «Основное» место, чтобы отобразить меню в заголовке.
- Наконец, сохраните свое меню.
На этом этапе вы увидите свое меню на главной странице во всей красе.
7. Добавьте интернет-магазин / электронную коммерцию.
Последнее, что мы сделаем в этом руководстве, - это создадим интернет-магазин.
Если вы хотите добавить интернет-магазин на свой недавно созданный веб-сайт, следуйте этому пошаговому руководству здесь .
Очевидно, это не то, что нужно всем веб-сайтам, поэтому не стесняйтесь пропустить этот шаг, если электронная коммерция не является тем, чем вы хотите заниматься.
Как работает электронная коммерция WordPress
Поскольку WordPress является такой универсальной платформой для веб-сайтов, неудивительно, что с ее помощью можно создать полнофункциональный интернет-магазин электронной коммерции. Под полной функциональностью мы подразумеваем, что вы можете перечислить любое количество продуктов, сделать их доступными для продажи, а затем также собирать заказы от клиентов и даже обрабатывать все элементы всего процесса, связанные с налогами и доставкой.
Все это делается с помощью плагина WooCommerce.
WooCommerce - самое популярное, наиболее функциональное и, откровенно говоря, лучшее решение для электронной коммерции для WordPress.
У нас есть отдельное руководство о том, как запустить WooCommerce на вашем сайте WordPress. Мы приглашаем вас зайти туда и прочитать подробные инструкции по установке . Выполните шаги 3 и 4, а затем вернитесь сюда.
… Хорошо, поэтому, установив WooCommerce на вашем сайте и добавив продукты в ваш каталог, вы заметите, что в процессе WooCommerce автоматически создает новые страницы. Эти страницы:
- «Корзина» - корзина вашего магазина.
- «Оформление заказа» - страница оформления заказа, на которой покупатели могут завершить свои покупки.
- «Моя учетная запись» - профиль каждого клиента; хранит прошлые заказы, текущие данные и другую личную информацию; клиент всегда может изменить свою информацию
- «Магазин» / «Товары» - главная страница магазина - та, где указаны ваши товары
Каждая из этих страниц служит определенной цели для вашего магазина и его функций. Хорошая новость заключается в том, что в наши дни большинство тем оптимизированы для того, чтобы эти страницы выглядели правильно. Тема Neve ничем не отличается. Если вы посетите любую из этих новых страниц, вы увидите, что презентация ясна и все легко понять. Вот пример страницы корзины покупок:
Кроме того, все эти страницы работают так же, как и любые другие страницы вашего веб-сайта WordPress. Это означает, что вы можете редактировать их, добавлять свои собственные элементы или изменять такие вещи, как цвета, макеты и т. Д. Но когда вы делаете это, будьте осторожны, чтобы не стереть шорткоды WooCommerce, которые уже есть.
Вы также заметите новый значок корзины в главном меню вашего сайта.
На этом этапе ваш магазин электронной коммерции полностью готов к работе. Это означает, что ваши клиенты могут заходить и делать покупки. Вы увидите их заказы в админке WordPress в разделе «WooCommerce → Заказы».
Поздравляем - вы готовы к запуску!
Чтобы быстро резюмировать шаги, которые вы выучили:
Оглавление
- Получите веб-хостинг и зарегистрируйте домен:
Выбор доменного имени
Выбор хостинга веб-сайта