Содержание
Как создать сайт WordPress с нуля (за выходные)
Привет, ребята!
Угадайте, кто вернулся с еще одной записью в блоге для вас…
Итак, вот сделка:
Если вы хотите создать веб-сайт WordPress за выходные с нуля, необходимо принять во внимание множество соображений.
Необходимо учитывать копирование и обмен сообщениями, добавление правильных технических компонентов, чтобы убедиться, что ваш веб-сайт оптимизирован для привлечения лидов, а также учитывать элементы брендинга.
Итак, если вы изо всех сил пытались запустить свой веб-сайт WordPress и не уверены:
- С чего начать?
- Какие инструменты вы должны использовать для создания своего WordPress с помощью
- Нужно краткое руководство по созданию вашего веб-сайта WordPress с нуля …
Тогда считайте это вашим окончательным контрольным списком и кратким руководством по созданию веб-сайта WordPress с нуля.
Теперь возьмем почту.
Готовы создать веб-сайт EPIC WordPress?
Введите свое имя и адрес электронной почты ниже, чтобы получить мгновенный доступ к вашему БЕСПЛАТНОМУ веб-сайту WordPress в выходном руководстве по набору инструментов и ресурсам , наполненному инструментами, контрольными списками и многим другим для создания веб-сайта EPIC WordPress для вашего бренда.
Используйте этот план, чтобы перейти к разделам публикации
Задачи 1-го дня: Создание вашей инфраструктуры
Шаг 1: Выберите доменное имя для своего веб-сайта.
Шаг 2. Выберите провайдера веб-хостинга
Шаг 3. Установите WordPress
Шаг 4. Выберите тему для своего веб-сайта WordPress
Шаг 5. Добавьте основные страницы на свой сайт
Шаг 6. Добавьте основные страницы на свой сайт
Шаг 7. Добавьте нижний колонтитул на свой веб-сайт
Задачи 2-го дня: брендинг вашего веб-сайта
Шаг 1.
Создайте руководство по стилю для своего веб-сайта
Шаг 2. Разработайте главную страницу EPIC для своего веб-сайта WordPress0002 Шаг 3. Добавьте привлекательный контент на главную страницу
Шаг 4. Добавьте логотип Pro Text на главную страницу
Шаг 5. Добавьте изображение профессионального HERO на главную страницу своего веб-сайта
Шаг 6. Создайте фирменную запись в блоге Графический шаблон
Шаг 7. Прокачайте боковую панель вашего веб-сайта
Шаг 8. Добавьте материалы Pillar в блог своего веб-сайта!
Проверки перед запуском и после запуска
Нужны пошаговые видеоруководства о том, как создать сайт WordPress с нуля?
Задачи 1-го дня: Создание фреймворка
Шаг 1: Выберите доменное имя для своего веб-сайта.
Рекомендуемый ресурс: Поиск по домену Siteground
Ваше доменное имя — это, по сути, ваш «уличный адрес» в Интернете.
Он сообщает людям, куда идти, чтобы получить доступ к вашему сайту. Вы можете начать поиск домена здесь .
Всякий раз, когда вы выбираете доменное имя для своего веб-сайта, лучше всего, чтобы оно было коротким, приятным и по существу. Кроме того, фирменные доменные имена работают лучше всего.
Бесплатное средство проверки доменных имен
Например, если название вашей компании « Just Blaze Consulting «, тогда JustBlazeConsulting.com
будет отлично работать в качестве вашего доменного имени.
Ключевые моменты
Сделайте свое доменное имя коротким, приятным и содержательным
Используйте расширение .Com
Выберите доменное имя, которое может «расти» вместе с вашим брендом. Симпатичные доменные имена могут показаться крутыми, но вам нужно учитывать долгосрочную перспективу.
Шаг 2. Выберите поставщика веб-хостинга
Рекомендовать ресурс :
Хостинг WordPress
Позвольте мне первым подчеркнуть, что использование хорошего веб-хостинга имеет большое значение, и вот почему:
Нет ничего более разочаровывающего, чем попытка просмотра веб-сайта, который движется с невероятной скоростью. Поэтому, пожалуйста, инвестируйте в хорошего провайдера веб-хостинга, чтобы предоставить посетителям вашего сайта наилучшие возможности просмотра.
Планы управляемого хостинга WordPress
Основные моменты
Проверка отзывов о провайдере веб-хостинга
Какую поддержку они предлагают (круглосуточно, без выходных, по телефону, в чате)
Просмотрите обзоры и статистику времени безотказной работы провайдера веб-хостинга
Шаг 3:
Установите WordPress
Рекомендовать ресурс :
Как установить WordPress на управляемую учетную запись хостинга
WordPress — это CMS (система управления контентом), также известная как платформа, которую вы можете использовать для управления всеми страницами, контентом и многим другим на вашем веб-сайте из одного места.
В наши дни WordPress очень легко установить. Вы можете использовать установку в один клик, а также мастер установки с управляемым хостингом WordPress.
Если вы не хотите иметь дело с техническими вещами, вы можете легко обратиться за поддержкой к своему веб-хостингу, чтобы попросить их установить WordPress для вас.
Ключевые моменты
Предлагает ли веб-хостинг установку в один клик, чтобы помочь вам быстрее настроить веб-сайт?
Есть ли служба технической поддержки, которая поможет вам, если вы столкнетесь с техническими проблемами?
Шаг 4:
Выберите тему для своего веб-сайта WordPress
Рекомендовать ресурсы вести мой блог, и мне это нравится.
Но… несколько веб-сайтов, на которых я покупал темы WordPress в прошлом, — это Creative Market и StudioPress.
Creative Market
Creative Market предлагает на выбор более 3700 доступных тем WordPress. Вы можете получить тему на Creative Market всего за 19 долларов.для создания вашего сайта WordPress.
Темы WordPress _ Creative Market
StudioPress
StudioPress — еще одно популярное место, где можно получить темы EPIC WordPress. Что мне нравится в темах WordPress от StudioPress, так это то, что они хорошо спроектированы, оптимизированы, чтобы помочь людям найти ваш сайт в поисковых системах, и быстро работают.
Темы WordPress StudioPress
Основные соображения
Адаптивна ли тема (она работает на всех мобильных устройствах)?
Легко ли настроить + бренд? (Добавьте свои цветовые схемы, логотип и т. д. в?
. Совместима ли тема с большинством плагинов WordPress?
.
Шаг 5. Добавьте основные страницы на свой веб-сайт
. Страницы, что добавить на домашнюю страницу, как написать страницу продукта/услуги, которая продает
На мой взгляд, есть 4 основные страницы, которые вам нужно добавить на свой веб-сайт. Они следующие:
Домашняя страница : самая важная страница на вашем веб-сайте, которая сообщает посетителям вашего веб-сайта, кто вы, чем вы занимаетесь, и « должна призывать их к действию ».
О странице : Сообщает посетителям вашего сайта, как ваш бренд может им помочь (да, верно). Ваша страница о вас не о вас. Пожалуйста, имейте это в виду.
Страница услуг/продуктов : Перечислите продукты/услуги, которые вы предлагаете, и добавьте решительный призыв к действию в конце ваших страниц, который подскажет вашим подписчикам, что делать дальше.
Контактная страница : Дает посетителям вашего веб-сайта возможность связаться с вами
Ключевые моменты
Написание убедительного текста домашней страницы , который побуждает посетителей совершать действия, когда они заходят на вашу страницу
Добавление звонка действия на всех ваших основных страницах
Создание страниц продуктов и услуг, ориентированных на преимущества
Шаг 6.
Добавьте основные страницы на свой веб-сайт
Рекомендация ресурсов : WordPress Web Design 101: 10 советов для начинающих
Не перегружайте навигационное меню вашего веб-сайта 10 различными вкладками. Это не обязательно. Как я уже упоминал в этом посте, держать в меню максимум 5-8 позиций — это хорошо.
Если вы решите добавить в свое меню дополнительные элементы, рассмотрите возможность использования подменю для организации потока вашего меню навигации.
Ключевые моменты
Текст в меню навигации должен быть коротким и понятным
Используйте подменю, когда вам нужно добавить дополнительную информацию в главное меню
Убедитесь, что ваше меню навигации хорошо отображается на мобильных устройствах
Шаг 7. Добавьте нижний колонтитул на свой веб-сайт
Рекомендуйте ресурсы : Как создать отличный футер
Нижний колонтитул вашего веб-сайта представляет собой мини-каталог в нижней части вашего веб-сайта.
Считайте нижний колонтитул универсальным средством, позволяющим направлять посетителей на несколько важных страниц вашего веб-сайта, которые вы не добавили в главное меню.
Ключевые моменты
Добавьте ссылки на социальные сети в нижний колонтитул, чтобы люди могли общаться с вами в социальных сетях
Добавление ссылки на политику конфиденциальности или страницу раскрытия информации
Добавление ссылки на карту сайта
Готовы создать веб-сайт EPIC WordPress?
Введите свое имя и адрес электронной почты ниже, чтобы получить мгновенный доступ к вашему БЕСПЛАТНОМУ веб-сайту WordPress в выходном руководстве по набору инструментов и ресурсам , наполненному инструментами, контрольными списками и многим другим для создания веб-сайта EPIC WordPress для вашего бренда.
Задачи 2-го дня: Брендирование вашего веб-сайта
Шаг 1:
Создайте руководство по стилю для вашего веб-сайта если вы хотите, чтобы ваши проекты визуального дизайна были последовательными, а ваш брендинг — актуальным, и вот почему:
Пример шаблона руководства по стилю от Venngage
Вы когда-нибудь были на чьем-то веб-сайте и думали — ммм, что, черт возьми, происходит с этим дизайном? ? Там слишком много цветов, шрифтов, и это выглядит просто беспорядочно.
Что ж, друг мой, я не хочу этого для тебя. Так что, мой друг, загрузите этот стартовый набор и используйте руководство по стилю, чтобы сгладить детали дизайна для своего веб-сайта.
Ключевые моменты
Используйте одну цветовую палитру для оформления своего веб-сайта с помощью
Выберите 2-3 шрифта для фирменного стиля своего веб-сайта
Используйте профессиональные и высококачественные изображения в дизайне своих веб-сайтов (Pexels и Unsplash) множество бесплатных стоковые фотографии, которые вы можете скачать + использовать.
Шаг 2:
Создайте домашнюю страницу EPIC для своего веб-сайта WordPress
Рекомендуйте ресурсы : Как создать домашнюю страницу EPIC с помощью Thrive Architect содержание на моей домашней странице веб-сайтов, и это было в значительной степени все.
Вот пример того, что я имею в виду:
Когда я запустил блог YourChicGeek давным-давно, когда у меня не было специальной домашней страницы для сайта (как вы можете видеть ниже):
Старая домашняя страница YourChicGeek
Быстрая перемотка вперед к моему текущему дизайну домашних страниц с помощью Thrive Architect . Я могу без сомнения сказать вам, что он конвертируется намного лучше, и он настроен для расширения моего списка адресов электронной почты, а также для предоставления пользователям дополнительной информации о продуктах и услугах, которые могут им пригодиться.
Текущая домашняя страница YourChicGeek
Ключевые соображения
Добавление неотразимого предложения, которое побуждает людей присоединиться к вашему списку рассылки
Использование цвета для ваших кнопок призыва к действию, которые выделяются и привлекают внимание
Создание профессионального макета вашего неотразимого предложения, чтобы помочь людям представить, как они используют его
Рекомендовать ресурсы : 7 примеров неотразимого копирования домашней страницы
Вот в чем дело, дизайн имеет значение . Но есть еще одна вещь, которая имеет не меньшее значение: копия вашей домашней страницы.
Я давно понял, что делать скучные и шаблонные копии — большая ошибка. Если ваши посетители зайдут на ваш сайт и не поймут, что вы делаете, или не поймут ваше уникальное торговое предложение, что, по вашему мнению, произойдет?
Мое предположение: они отскочат и отправятся в другое место.
Итак, мой друг, убедитесь, что вы нашли время, чтобы создать «копию , которая соединяет » со своими взглядами, или наймите кого-нибудь, кто может помочь вам с этим.
Пример: электронная книга Чендлера Болта, школа
Самоиздательская школа — копия главной страницы
Основные соображения
Создание сильного заголовка для вашей домашней страницы
Создание отличного вспомогательного текста (который связан с заголовком вашей домашней страницы)
Призыв к действию (т. позвоните для консультации, пройдите тест)
Шаг 4:
Добавьте логотип Pro Text на главную страницу
Рекомендовать ресурсы : Photopea.com
Ваш логотип — это ваш фирменный знак, друг мой, и, как и на большинстве веб-сайтов, вы захотите добавить его на свой.
Следует помнить, что вам не нужно создавать что-то слишком замысловатое.
Вы можете легко создать текстовый логотип, используя что-то вроде
Креативный рынок
пакеты шрифтов и добавьте их на свой сайт.
Основные рекомендации
Используйте простой набор шрифтов из Creative Market или DaFont для создания текстового логотипа
Используйте бесплатный ресурс, например
PhotoPea.com
для разработки логотипа
Убедитесь, что ваш логотип имеет прозрачный фон (чтобы за ним не было пробелов)
Шаг 5:
Добавьте изображение Professional HERO на главную страницу вашего веб-сайта
Рекомендовать ресурсы : Pexels.com
Главное изображение — это ваше собственное изображение или профессиональное стоковое изображение в верхней части главной страницы вашего веб-сайта, на котором есть призыв к действию.
Например:
Вот письмо от Сары Морган из
XOSarah.com. Мне очень нравится этот образ, так как он кажется очень дружелюбным, доступным и веселым.
XO Sarah • Основное изображение
Ключевые моменты
Добавление вашего профессионального изображения для брендинга вашей главной страницы
Использование высококачественных стоковых фотографий в главном изображении (Pexels.com
и Unsplash) — отличные ресурсы
Добавление четкого призыва к действию, который будет выделяться на вашем герое Изображение
Шаг 6:
Создайте фирменную пост в блоге. получить от людей в Интернете, о, эй, я увидел одно из изображений вашего блога в Твиттере и решил проверить ваш контент.
Или: «Привет, Ким, я видел изображение, которым ты поделился на
Пинтерест
и любите то, что вы делаете».
Этот мой друг — сила хорошо продуманной графики сообщения в блоге.
Вот пример того, как выглядят мои шаблоны сообщений в блоге:
YourChicGeek Pinterest Template Design
Плюс, когда вы создаете шаблоны для ваших сообщений в блоге ваша графика будет выполнять двойную функцию для вашего бренда. Они сделают ваш контент в блоге суперкрутым, а также создадут согласованность бренда с вашими сообщениями.
Основные соображения используйте, чтобы брендировать свой контент с помощью
Создание руководства по стилю для вашей графики, чтобы поддерживать ее согласованность
Использование ресурса DIY, такого как Canva, или этих предварительно разработанных изображений для создания графического шаблона для вашего блога
Рекомендовать ресурсы : Что разместить на боковой панели вашего веб-сайта0003
Добавлять или нет боковую панель на ваш сайт.
На мой взгляд, чем больше возможностей вы можете предоставить своим посетителям для взаимодействия с вашим брендом и просмотра ваших предложений, тем лучше.
Возьмите эту боковую панель от хороших людей из Thrive Themes:
Пример содержимого боковой панели Thrive Themes
У них есть ссылки на их f страницу acebook, последние сообщения в блоге и категории сообщений в блоге.
Я уверен, что наличие этой информации на их боковой панели удерживает посетителей на их сайте дольше, а также побуждает их связываться со своим брендом на Facebook.
Шаг 8:
Добавьте материалы Pillar в свой блог!
Рекомендовать ресурсы : 3 простых шага к созданию основного веб-сайта в блоге, который будет генерировать органический трафик на долгие годы какая-то причина, чтобы остаться не так ли?
Что ж, друг мой, добавление контента на ваш новый веб-сайт — это один из ЛУЧШИХ способов обучить вашу аудиторию, познакомить ее с вашим брендом, а также повысить авторитет вашего бизнеса в Интернете.
Да, ведение блога требует работы, но вот несколько преимуществ ведения блога, которые следует учитывать.
Вы можете перепрофилировать контент своего блога и использовать его по-разному для цифрового маркетинга. там даже больше
Основные соображения
Создание трех основных постов для привлечения посетителей на ваш новый веб-сайт
Готовы создать веб-сайт EPIC WordPress?
Введите свое имя и адрес электронной почты ниже, чтобы получить мгновенный доступ к вашему БЕСПЛАТНОМУ веб-сайту WordPress на выходных Набор инструментов и ресурсы 9Руководство 0028, наполненное инструментами, контрольными списками и многим другим для создания веб-сайта EPIC WordPress для вашего бренда.
Подготовка к запуску
- Установите дату запуска для вашего веб-сайта!
- Добавьте страницу, которая скоро появится на вашем сайте.
(Thrive Architect и Creative Market) скоро появятся шаблоны страниц, которые вы можете использовать) - Зарегистрируйте учетную запись электронной почты в Mailchimp или другом поставщике услуг электронной почты, чтобы начать собирать электронные письма перед запуском своего веб-сайта
- Подключите страницу, которая скоро появится, к службе маркетинга по электронной почте, чтобы начать создание списка адресов электронной почты. help)
- Напишите 3-5 ПОТРЯСАЮЩИХ материалов для своего блога + добавьте к ним фирменные изображения
- Используйте буфер или Hootsuite, чтобы предварительно запланировать недельную публикацию сообщений в ваших учетных записях в социальных сетях, объявив о скором открытии вашего нового веб-сайта.
(Thrive Architect и Creative Market) скоро появятся шаблоны страниц, которые вы можете использовать)Действия в день запуска
- Удалите страницу обратного отсчета со своего веб-сайта
- Используйте Hootsuite или Buffer, чтобы предварительно запланировать недельный контент из блога в учетные записи социальных сетей.
- Поблагодарите всех своих новых подписчиков и попросите их посетить ваш блог
- Отправьте электронное письмо своим подписчикам электронной почты, сообщив им, что ваш сайт запущен.
- Сообщите своим друзьям, семье и людям, с которыми вы уже связаны в социальных сетях, что ваш блог запущен!
- Убедитесь, что по крайней мере 3-5 сообщений в блоге доступны для чтения.
Если вы не являетесь техническим специалистом и нуждаетесь в пошаговых инструкциях (с видео-тренингами, групповой поддержкой и помощью) для создания своего веб-сайта WordPress,
проверить сайт WordPress в выходные
обучение в Blazing Branding Academy.Этот курс
содержит множество видеоуроков и многого другого, которые проведут вас через все шаги, необходимые для успешного создания веб-сайта WordPress с нуля.Что вас больше всего расстраивает при создании сайта на WordPress?
Я хотел бы услышать ваши мысли по этому поводу, а также хотел бы знать: что вас больше всего расстраивает при создании вашего веб-сайта на WordPress?
Всем привет и спасибо, что заглянули в этот мега-пост!
Готовы создать веб-сайт EPIC WordPress?
Введите свое имя и адрес электронной почты ниже, чтобы получить мгновенный доступ к вашему БЕСПЛАТНОМУ веб-сайту WordPress в выходном руководстве по набору инструментов и ресурсам , наполненному инструментами, контрольными списками и многим другим для создания веб-сайта EPIC WordPress для вашего бренда.
Создание веб-страницы с нуля с помощью HTML — введение в цифровые гуманитарные науки
HTML — это язык, который понимают веб-браузеры (например, Firefox, Chrome и Safari). это язык разметки , что означает, что вы аннотируете контент с его помощью, чтобы браузер обрабатывал этот контент по-разному.
(HTML расшифровывается как язык гипертекстовой разметки , если вам интересно.)Выучить его несложно, и это весело! Самое сложное в этом уроке будет расположение окон на вашем экране так, чтобы вы могли видеть все сразу. В одном окне или на вкладке браузера оставьте этот учебник открытым, чтобы вы могли обращаться к нему по ходу работы.
Настройка
Загрузите Atom и дважды щелкните его, чтобы открыть. Когда вы открываете Atom в первый раз, в окне появляются три вкладки. Закройте все вкладки, кроме вкладки «Без названия».
Atom – это (бесплатный) текстовый редактор, так называется программа, в которую вы вводите код. Как и Microsoft Word, он отображает текст, который вы вводите. Но в отличие от Microsoft Word, он (невидимо) не окружает ваш текст информацией о форматировании. Поэтому никогда не используйте Microsoft Word для своего кода! Вместо этого используйте Atom или одну из множества альтернатив, например Sublime.
Хотите верьте, хотите нет, но простой текстовый редактор (например, Sublime) и веб-браузер (например, Chrome, Safari или Firefox) — это все, что вам нужно для создания даже самой причудливой веб-страницы!
Введите объявление документа и немного текста
Текст не будет выглядеть таким красивым и розовым, как на этом изображении, пока вы не сохраните текстовый файл Atom в виде HTML-документа.
Объявление документа дает инструкции веб-браузеру (например, Safari или Firefox) о том, как обрабатывать созданный вами документ. К счастью, их легко сделать. Просто введите
в самом верху документа.
Затем нажмите , верните и введите
, чтобы браузер ожидал HTML в последующем документе. Затем пропустите несколько строк и закройте свой HTML-тег, набрав
(Ваш браузер не будет обращать внимания на пробелы и возвраты внутри заголовка.
)Считается хорошей практикой разделить вашу веб-страницу на головка и корпус секций. Специальные инструкции для браузера (если они у вас есть) находятся в разделе head. Контент помещается в раздел body.
Чтобы создать эти разделы, нажмите return и введите
где-нибудь внутри открывающего и закрывающего тегов.
После создания тега заголовка оставьте одну или две строки пустыми и закройте тег заголовка, набрав
Теперь создайте раздел body . Ниже вашего тег, введите
Затем пропустите несколько строк и введите
Давайте также добавим немного текста, чтобы нам было на что посмотреть. Введите
Добро пожаловать на мою веб-страницу
после открывающего тега body и перед закрывающим тегом body. Возможно, вы помните, что
означает: абзац
Сохраните ваш документ как index.
html , где вы сможете легко найти его снова.Оставьте документ Atom открытым и перейдите туда, где вы сохранили файл. Дважды щелкните значок сохраненного файла. По умолчанию этот файл должен открываться в браузере. Теперь вы открыли файл двумя разными способами: как веб-страницу и как текстовый файл. Расположите окна так, чтобы вы могли одновременно видеть документ открытым как текстовый документ и как веб-страницу.
В текстовом документе измените текст между тегами абзаца, чтобы в нем говорилось что-то другое и сохранить документ. Теперь нажмите Обновить в веб-браузере. Текст на веб-странице должен отображать новый текст, который вы сохранили.
Добавить заголовок
Я знаю, что текстовый редактор на этом изображении выглядит иначе, чем на предыдущих изображениях. Я сменил текстовые редакторы, но вы по-прежнему будете использовать Atom, поэтому ваш текстовый редактор будет выглядеть так, как на предыдущих изображениях.
По умолчанию заголовки указывают браузерам по-разному обрабатывать текст внутри, чтобы сигнализировать о его важности. Добавьте заголовок на свою страницу, поместив текст в
теги, где-то над тегами вашего абзаца. Сохраните документ и обновите браузер. Теперь у вас должен быть заголовок на вашей странице! Хорошо смотритесь.
Вы также можете использовать теги
, которые немного меньше, и теги
, которые еще меньше, вплоть до тегов
. Поэкспериментируйте с заголовками разного размера, сохраняя и обновляя их по ходу дела.
Как работают ссылки
Что за веб-страница без ссылки? Они работают следующим образом:
текст вашей ссылки
В приведенном выше примере www.google.com – это URL-адрес, на который вы хотите сделать ссылку. и текст вашей ссылки – это текст, который фактически отображается как гиперссылка.
Создайте ссылку на своей странице
Попробуйте сами, создав новый абзац (используя открывающий и закрывающий теги
) и создав ссылку в новом абзаце. Сохраните документ, обновите браузер и проверьте ссылку!
Как работают изображения
Вы можете создать ссылку на изображение одним из двух способов. Если в Интернете есть изображение, которое вы хотите встроить на свою страницу, вы можете получить ссылку на изображение, щелкнув изображение правой кнопкой мыши и выбрав Скопировать URL-адрес изображения . Затем вы можете вставить изображение, вставив ссылку, как указано выше.
Если на вашем компьютере есть изображение, которое вы хотели бы использовать, вы можете сохранить его в том же месте, где сохранен ваш HTML-файл и напрямую связать его, введя имя файла, как указано выше.
Добавьте изображение
Добавьте изображение на свою веб-страницу одним из двух способов из предыдущего шага.
Добавить акцент
Иногда вам нужно выделить определенный текст на странице, чтобы обозначить, что браузер должен обрабатывать его по-другому.