Нажмите "Enter", чтобы перейти к содержанию

Как переделать сайт под себя: Как скопировать сайт и переделать

Содержание

Что лучше для создания сайта – конструкторы сайтов или свой хостинг?

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

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

Конструкторы сайтов

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

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

Сайт после этого начинает вполне себе неплохо работать, а владелец малого бизнеса уже в процессе может постигать дальнейшие премудрости и фишки SEO и интернет-маркетинга, постепенно применяя их на сайте для увеличения продаж с его помощью.

Плюсы конструкторов

  • Не нужно заботиться о защите сайта от взлома и внедрения в него чужого кода (нередко случается с сайтами на виртуальном хостинге).
  • Не нужно постоянно обновлять движок и модули своего сайта, чтобы закрыть дыры в безопасности и не отставать от текущих версий CMS, иначе движок сайта устареет, а регулярно обновляемые плагины или модули расширений уже не будут с ним работать.
  • Не нужно заключать отдельно договор с агрегатором платежей и обеспечивать его интеграцию со своим сайтом. Например, у Nethouse, агрегатор платежей уже встроен, а значит и есть возможность принимать платежи прямо на сайте.
  • Не нужно беспокоиться за создание бэкапов сайта.
  • Как правило, нет ограничений на использование места на сервере для размещения контента.

Минусы конструкторов

  • Не всегда функционала конструктора хватает для решения бизнес-задач на сайте, а для подключения дополнительных скриптов может не оказаться возможности.
  • Платить придется за каждый сайт отдельно.
  • Если бизнес вырастет и возникнет потребность в новых специфических функциях, перенес сайта на собственный хостинг и другой движок, если на нем будет уже большое количество страниц и разнообразного контента, будет непрост.
  • Дизайн сайта как правило выбирается из готовых шаблонов, хотя очень часто есть возможность его полностью переделать под себя.

Сервисов — конструкторов сайтов в наше время стало довольно много. Из отечественных наиболее известны Nethouse и Setup, на них могут быть собраны не только сайты, но и интернет-магазины с возможностью приема оплат на сайте. Некоторые хостинг-провайдеры также предлагают свои конструкторы, но они обычно менее функциональны. Из зарубежных наиболее известны Wix, Jimdo и многие другие. Все конструкторы предоставляют возможность подключения к сайту собственного доменного имени.

Помимо конструкторов сайтов общего назначения, бывают и более специализированные. Например, заточенные под создание интернет-магазинов, такие, например, как InSales.

В дополнение к краткому обзору особенностей использования конструкторов для создания сайтов – пара авторских заметок про Nethouse:

Сайт на собственном хостинге

Сайт на собственном хостинге – вариант, когда сайт создается силами веб-разработчика как правило на одном из «движков» для создания сайтов – системе управления контентом (CMS), для него разрабатывается оформление и много еще чего, а потом этот сайт размещается на специальном веб-сервере, обеспечивающем его работу 24 часа в сутки. Такой сервер, а точнее – выделенные на нем ресурсы, и называется хостингом для сайта. Создание такого сайта требует очень многих специальных знаний веб-разработчика и по силам, как правило, только фрилансеру или веб-студии.

Плюсы собственного хостинга

  • Возможность размещения более чем одного сайта за одни и те же деньги.
  • Возможность выбрать предпочитаемую CMS (систему управления контентом) при создании сайта.
  • Возможность разработать и применить свой дизайн или использовать готовый платный или бесплатный.
  • Возможность использования сторонних модулей (обычно их очень много у бесплатных CMS) и собственных разработок для расширения возможностей сайта.
  • Легкость переноса сайта с одного хостинга на другой в случае необходимости.

Минусы собственного хостинга

  • Необходимость следить за актуальностью версий программного обеспечения, используемого для создания сайтов (обновлять CMS и используемые модули).
  • Необходимость заботиться о защите сайта от хакеров.
  • Следить за нагрузкой, которую сайт создает на хостинг, если она начинает приближаться к разрешенным лимитам.

Хостинг сайтов также бывает разным по предлагаемым возможностям. Самый доступный и подходящий для большинства сайтов – виртуальный хостинг, когда на одном физическом сервере выделяются ресурсы для многих сайтов от разных клиентов хостера. Для проектов, требующих больших мощностей, используют отдельные виртуальные сервера или облачные сервера, а иногда и физически выделенные сервера (самый дорогой вариант).

На рынке хостинга очень много предложений и довольно непросто понять, какое из них лучшее. Возможно, что это и нельзя определить однозначно, потому что у хостинга очень много различных параметров, влияющих на качество. Несколько лет назад мы сделали свой выбор виртуального хостинга и не разу о нем не пожалели, с годами он становится только лучше и богаче по своим дополнительным возможностям. Речь идет о хостере Бегет, подробнее о его особенностях, и то не всех, можно прочесть в этой авторской заметке.

Резюме

Для начинающих сайтовладельцев использование конструкторов сайтов – очень хороший выбор, особенно если количество страниц на их сайте не будет слишком большим, например, не более сотни. В этом случае последующий перенос контента сайта на другую CMS, если в этом возникнет потребность, не потребует больших усилий. Если говорить о стоимости, то размер оплаты за собственный хостинг одного сайта (его разработка стоит отдельных денег) или оплаты работы одного сайта на конструкторе почти одинаков.

Если вам нужна более подробная консультация по этим вопросам или помощь в создании сайта на конструкторе или CMS, обращайтесь к нам, мы с удовольствием вам поможем, тем более, что технические аспекты создания сайта – лишь малая часть вопроса, не менее важно будет понять, как и чем созданный сайт наполнять, чтобы от него в дальнейшем был толк.

 

Как вывести новый сайт в ТОП, с чего начать и что категорически нельзя делать

Если вашему сайту меньше года, Яндекс и Google считают его новым и относятся с осторожностью. Чтобы ресурс занял хорошие позиции в ТОП и стабильно получал органический трафик, поисковым системам придется доказывать, что несмотря на «молодо-зелено», сайт полезен, интересен и удобен пользователям. Вот здесь и начинается самое интересное: как это организовать, чтобы не затягивать и не навредить?

На низком старте

Мы начинаем с аудита и вам советуем. Аудит помогает:

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

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


Если не уверены, что сайт разрабатывали с учетом SEO, проверьте его по чек-листу и сравните структуру страниц с семантическим ядром. По правилам иерархии страниц, структуру главной формируют высокочастотые запросы, среднечастотные ключевики идут на подразделы, а карточки товаров создаются под низкочастотники или транзакционные среднечастотники. Информационные запросы становятся основой для структуры блога, галереи, FAQ, портфолио, блока с отзывами клиентов. Это нельзя назвать полноценным аудитом, но представление об отправной точке у вас будет.

По результатам аудита выбираем модель продвижения. Для молодых сайтов с базовым SEO это может продвижение по трафику или SEO с оплатой за работы. Для проектов, сделанных без учета оптимизации, предпочтительно SEO с оплатой за работы. Такой ресурс можно дорабатывать по ходу дела: корректировать техническую часть и исправлять ошибки параллельно с продвижением ресурса.

Выбор инструментов продвижения

С новым сайтом нельзя идти напролом. Закупая ссылки, есть риск попасть под фильтр и надолго испортить репутацию. Генерировать тонны переоптимизированного контента тоже небезопасно — для особо торопливых у Яндекса и Google есть отдельный ад. Еще хуже заканчиваются попытки накрутить поведенческие факторы.


Мы, как Ленин, идем другим путем — планомерно наращиваем траст и начинаем привлекать лиды, не дожидаясь притока органического трафика. Сначала расскажем зачем, а потом как.

Во-первых, запуская рекламу, мы с первых дней работы обеспечиваем сайту лиды. Во-вторых, получаем информацию по поведению и активности пользователей. Это ценнейшие данные для качественного улучшения воронки продаж на сайте. Смотрим аналитику, вебвизор, данные конверсии и понимаем: здесь можно убрать пару полей на форме связи и получить лучший CTR, а тут добавить ссылок, врезок и вспомогательных блоков, чтобы увеличить глубину просмотра.

Теперь о трасте и привлечении пользователей на минимуме органики. Для каждого сайта мы разрабатываем стратегию продвижения, ориентируясь на специфику бизнеса, сегмент, конкурентную среду и сам ресурс, но в усредненном формате набор инструментов выглядит так:

  1. Контекстная реклама. С ней можно получить первых лидов уже в день запуска, вести пользователей на конкретные страницы.
  2. Социальные сети. У обоих поисковиков есть четкая корреляция позиции сайта с наличием группы в соцсетях. По данным аналитического отчета факторов ранжирования в e-commerce за 2020 год, самый высокий коэффициент корреляции с позицией дают группы в ВКонтакте и Facebook, аккаунты в Твиттере. Если группы есть — отлично, связываем их с сайтом. Нет — заводим, наполняем, развиваем параллельно с основным ресурсом.
  3. Крауд-маркетинг.
    Здесь мы убиваем двух зайцев: приводим целевой трафик с тематических ресурсов и бережно наращиваем ссылочную массу. В качестве площадок для крауд-маркетинга используем форумы, рекомендательные сервисы, сайты вопросов и ответов, отраслевые блоги и порталы, где можно на партнерских условиях разместить статью или экспертный комментарий со ссылкой. Предпочтение отдаем качеству, а не количеству.
  4. Сервисы Яндекса и Google. Пока кто-то жалуется, что Яндекс заполонил выдачу своими сервисами, мы используем их для разнообразия ссылочного профиля, получения «теплого» трафика и повышения узнаваемости бренда. Описания со ссылками в Картинках и Видео, ответы на вопросы в Кью, информация на Картах, статьи в Дзене, профиль «Мой бизнес» в Гугле — посетителей можно получить отовсюду.

Отдельно хотим рассказать о практике «лечения молодости» сайта. Часто встречаем рекомендации купить старый домен, чтобы сайт сразу пошел в выдачу, без «песочницы».

«Это не работает: возраст сайта отсчитывается от начала индексирования, а не с даты регистрации домена. Другой вариант — купить сайт похожей тематики и переделать под себя. Но здесь важно уделить внимание тому, что вы покупаете. Проверить на все фильтры, посмотреть историю. А если сайт долго был заброшен, возможно, это вообще не имеет смысла — поисковики перестают доверять брошенным ресурсам».

Наталья Любанская, SEO-специалист Nowmedia

Вопрос с выбором между новым и старым доменом мы уже разбирали. Посмотрите, если хотите покопаться в теме.

Мелочи, которые дают результат

Шаг за шагом по нарастающей

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

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


Достойный контент

Качественные тексты всегда в приоритете. Здесь как со ссылками: лучше их будет чуть меньше, но качественных, глубоко проработанных, полностью закрывающих интент пользователя.

Аналитика

Улучшить конверсию нового сайта и нарастить посещаемость без аналитики можно, но сложно, дорого и три раза дольше, чем с аналитикой. Не пугайтесь связки сайта с Google Analytics, Яндекс.Метрикой, CRM и системой коллтрекинга. Это как поход к стоматологу: страшно до жути, зато потом не понимаете, зачем так долго мучились. С аналитикой четко видно, какое действие приносит результат, во сколько это обходится в рублях и как сделать дешевле.

Конкурентный анализ

Если до начала продвижения вы не сделать конкурентный анализ, самое время его сделать. Возможно, у конкурентов в ТОП 10 есть наполненный и раскрученный канал в YouTube или они ведут блог на Habr. Или активно используют мессенджер-маркетинг? 

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

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

Как сделать сайт, а потом потратить кучу денег, чтобы его переделать? | Блог

Многие почему-то считают, что дизайн сайта, разработка сайта и его продвижение – это абсолютно не связанные процессы, а потому не просто заказывают всё это у разных подрядчиков (хотя это, конечно, дело каждого), но делают это иногда в какой-то своей бессистемной последовательности. Ведь это абсолютно нормально, запустить новый сайт, а через полгодика заняться его продвижением. Или нет?

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

Причина №1: Мы не планировали продвигаться

Не думать о продвижении своего сайта и расценивать его как дополнительный инструмент продаж – вещи несовместимые.

И всё же есть несколько ситуаций, при которых можно отложить SEO на потом (или когда в SEO-продвижении просто нет необходимости).

  • Когда ваш сезон продаж в самом разгаре

    Если вам необходимо продавать здесь и сейчас, то доработки лучше отложить и заняться контекстной рекламой. SEO — это процесс не на один, а иногда и не на три месяца. А с помощью контекстной рекламы заодно можно устроить своему сайту «испытательный срок» — проверить, хорошо ли он продает, на основе статистики дополнительно проработать юзабилити сайта и исправить проблемные места.

  • Когда у вас самый простой сайт-визитка

    Если вы делаете сайт только потому, что «у каждой уважающей себя компании должен быть сайт», и будете указывать его на визитках «для солидности», а других задач перед ним и не стоит — SEO и продвижение в интернете вам не пригодится.

  • Когда у вас лендинг

    Лендинги практически не подлежат SEO-продвижению, но их можно разово оптимизировать. Процесс продвижения предполагает наличие нескольких связанных страниц, чего, конечно же, в лендингах нет. Но при этом вы можете очень выгодно использовать контекстную, медийную и таргетированную рекламу.

  • Когда у вас сайт, собранный на конструкторе

    Да, пожалуй, это выгодный вариант, сайты на конструкторах гораздо дешевле. Но часто конструкторы не имеют функционала, необходимого для оптимизации и продвижения. Например, выводят некоторые элементы на сайт с помощью скриптов, а для SEO необходимо, чтобы эти же элементы выводились в HTML-коде. Как результат: оптимизировать раздел невозможно. Другая ситуация: когда в в мета-тегах для разных товарных категорий нужно прописать разные слова; или ещё проще: вам нужен определённый тип калькулятора, которого нет в конструкторе. В таких ситуациях вам могут предложить только доделать функционал конструктора (естественно, за ваш счёт), либо переделать сайт полностью на CMS. Продвигать сайты на конструкторах, конечно, можно, но с высококонкурентными тематиками и запросами практически нереально.

В других ситуациях подумайте о SEO сразу, как только решите делать сайт.

Причина №2: Мы решили, что займёмся продвижением после запуска сайта

Продвижение сайта – это не тот процесс, где можно получить результат моментально. Важный этап продвижения – оптимизация сайта, и это не просто какое-то «колдовство» над кодом и robots.txt, это обязательное взаимодействие с юзабилити, которое может вылиться в правки по дизайну и по функционалу, что естественно требует времени. Отделение оптимизации сайта от процесса разработки часто приводит только к двойной работе, которую никто не любит.

При этом за выстраивание рабочих процессов между подрядчиками не стоит переживать. Обычно мы берём на себя и составление технического задания по оптимизации, и его обсуждение, и контроль выполнения. Работа может выстраиваться как с привлечением специалиста клиента (PR-менеджера, маркетолога или другого ответственного специалиста), так и напрямую, между аккаунт-менеджерами подрядчиков по разработке и продвижению. Зоны ответственности в таком случае распределяются на всех участников процесса.

Именно поэтому для заказчика изначально проще обратиться в агентство, которое оказывает как услуги по разработке сайтов, так и по продвижению, ведь тогда весь комплекс ответственности за будущую работу сайта лежит на одном подрядчике. Так гораздо проще получить ответ на любой возникший вопрос без возможного «перевода стрелок» между исполнителями.

Причина №3. Нас уже продвигали, мы никому теперь не верим.


И в SEO тоже не верим!

Бывает, что к нам приходят клиенты не из «новичков». Их продвижением уже кто-то занимался, они имеют несколько позиций в ТОПе, но цифры из отчётов предыдущего подрядчика как-то расходятся с реальностью.

Однажды нам с клиентом даже пришлось ждать, пока закончится «период действия» подключенного предыдущим подрядчиком сервиса с ботами, которыми накручивалась посещаемость. Поскольку найти и отключить сервис накрутки не вышло, а он сам выключился только на на третий месяц нашего сотрудничества, клиент увидел реальную картину посещаемости сайта только тогда (логичнее было бы сказать «непосещаемости»). А это, опять же, лишняя трата времени и денег.

Из-за таких «историй» недоверяющих клиентов становится всё больше, а некоторые из них вообще перестают считать SEO-продвижение чем-то серьёзным и целесообразным.

Наученные «горьким опытом» клиенты, к слову, считаются самыми сложными для подрядчиков. Но мы прекрасно понимаем, что клиент вообще не обязан разбираться в SEO. Он эксперт в своей сфере, а мы ему нужны только для того, чтобы это показать его клиентам. А потому всегда просим задавать нам вопросы, если сам клиент по какой-то причине стесняется.

Поэтому со всей внимательностью отнеситесь к выбору подрядчика по SEO, чтобы не нарваться на компанию-однодневку или «повелителей над ботами». Читайте отзывы, просите подтвердить компетенции, а главное — задавайте как можно больше вопросов.

Лайфхак: Что спросить у веб-студии и SEO-агентства?

  • Что мне делать с сайтом после разработки? (продвигать, настраивать, использовать как инструмент продаж, развивать)
  • Будет ли привлекаться SEO-специалист и веб-аналитик/специалист по юзабилити при разработке первоначального проекта сайта? Необходимы они для работы над структурой сайта, его функционалом, проверки выполнения задач и тестирования внедрений перед сдачей сайта.
  • Будет ли в услуги SEO-агентства входить базовая оптимизация сайта — необходимые настройки для лучшего ранжирования в поисковых системах, сбор семантического ядра?
  • Предполагает ли платформа, на которой разрабатывается сайт, возможность самостоятельно задавать метатеги, заголовки, тексты, шаблоны для разделов сайта, внедрение меток для отслеживания конверсий по формам?
  • Представят ли вам стратегию продвижения с описанием всех этапов работ до начала работ по продвижению?
Честных партнеров, продуманных решений и продуктивного SEO!

Быстрый совет. Как переделать любой сайт в WordPress за несколько секунд

Хотя я и «укоренился» на платформе Postach.io, но стараюсь не упускать и интересные инструменты, предназначенные для других платформ. Так я отметил небольшой по объёму сервис, выполняющий конвертацию HTML-сайтов в сайты на основе WordPress, а именно: HTML to WordPress.

HTML to WordPress — веб-сервис, который за три простых шага переделает html страницу в страницу сайта на WordPress.

Для тех, кто не знает, что такое WordPress, приведу цитату с их сайта:

WordPress — идеальная платформа для публикации, ориентированная на красоту, поддержку стандартов и удобство использования. WordPress бесплатен и свободен к распространению.

Проще говоря, WordPress — это то, что вы используете, когда хотите работать над сайтом, а не бороться с ним.

Но вернёмся к нашим баранам, а точнее к HTML to WordPress. Итак, для преобразования (конвертации) сайта на основе HTML в сайт на WordPress нужно иметь три «вещи»:

Ваш сайт;

Сайт HTML to WordPress;

Profit.

Для преобразования нужно собрать все страницы имеющегося сайта на HTML и пропустить их через конвертор:

В качестве «платы» за конвертацию Вам предложат ответить на несколько вопросов:

Наиболее важен вопрос №5: нужно указать адрес e-mail, на который будет прислан файл с результатом конвертации. Хотя после конвертации он будет доступен и для ручного скачивания с сайта-конвертора.

Как поделиться своими письмами в @gmail — https://t.co/8oybyJIBvO #web @GoogleRussia @cloudHQ_net pic.twitter.com/0yaFyCwzlJ

— Константин Докучаев (@Marfapr) December 2, 2015

В результате моих тестов я получил архив в формате .zip для планируемой темы на WordPress:

Попробовать HTML to WordPress.

Обновление от 4 декабря 2015:
В сервисе добавлена функция предпросмотра темы на свежей инсталляции WordPress. Также появились тарифные планы:


Проектирование сайта: что такое, из каких этапов состоит

1. Мы точно сделаем тот сайт, который нужен компании

На старте проектирования вам нужно будет ответить на вопрос «Зачем нам сайт? Чего хотим добиться?» Если не знать куда мы хотим прийти, высок риск прийти не туда. И кажется, что и так все понятно. Но обычно в процессе разработки сайта цели растекаются, нужно все и сразу. И этот раздел, и этот. Или наоборот что-то забывается. И в итоге получаем сайт компании, а не решение проблем бизнеса. По-простому — слив бюджета, потеря денег, клиента, разочарование и уверенность в том, что «онлайн не работает».

2. Не придется гадать, как сделать правильно 

Реальная история из моей практики. Переговорка, в ней маркетолог, директор, бухгалтер и коммерческий обсуждают новый сайт. Что разместить на главной странице сайта, какие пункты в меню. И спорят час или два.

Бухгалтер хочет добавить пункт меню «Документы» и разместить там уставные и реквизиты. Потому что все контрагенты уже замучили её запросами и звонками с просьбами эти документы отправить. Коммерческий против, потому что этот пункт будет отвлекать от основного — продажи услуг. Бухгалтер работает с основания компании и влияния на директора у неё больше, чем у коммерческого. Директор соглашается, пункт меню добавляют.

Конечно, это очень глупое решение. Страницу «Документы» разместить на сайте нужно, но уж точно не в первом приоритете. Перенести в раздел «О компании», например. Но какие у вас аргументы, чтобы отказать бухгалтеру? А вот если бы вы провели исследование методом персонажа и спросили реальных клиентов, что они ожидают увидеть на сайте, вы убедили бы всех в обратном. 

3. Не придется переделывать дизайн и верстку сайта 

Это очень больно, но если вы не обсудили, что будет на каждой странице сайта на этапе разработки прототипов, то скорее всего придется всё это сделать в дизайне. И переделать часть макетов дизайна. Замучить дизайнера, себя, потратить огромное количество времени.

Ещё хуже — сверстать дизайн и потом, по-живому, в вёрстке все двигать. Тогда переделывать и дизайн, и программную часть. Сравните: поменять поля в калькуляторе услуг в ч/б картинках или на листочке, или изменить дизайн онлайн-калькулятора и программировать его снова. Уже чувствуете усталость? Плюсаните недовольство клиента, сорванные сроки и выход проекта в минус. У нас таких примеров было не много, но были. Это всегда эмоциональнотяжело. Я уж не говорю про деньги и время.

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

Содержание статьи

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

Итак, существует три способа построения мобильных версий сайтов:

  1. Адаптивный дизайн. Страница сайта в данном случае не меняется, но CSS-файл применяет другие правила, в зависимости от ширины окна браузера, и “адаптируется” под него.
  2. Отдельный мобильный сайт. Он размещается на поддомене или в подкаталоге, иногда основной и мобильный сайт имеют одинаковый URL. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»). Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает их изменить, так как эти версии сайтов хранятся в разных каталогах. Отличный пример – мобильный сайт ВКонтакте (m.vk.com).
  3. Мобильная версия сайта или RESS (Responsive Design + Server Side). Этот метод сложный в разработке, но включает в себя преимущества как адаптивного дизайна, так и отдельного мобильного сайта.

Прогрессивные веб-приложения

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

Мобильная версия сайта должна по стилистике, цвету и содержанию быть такой же, как и основной сайт. Разница в том, что пространство в мобильной версии должно быть максимально заполнено текстовым контентом и содержать минимум графики. Задача дизайнера в данном случае – продумать, какие элементы должны быть в приоритете, оставив лишь самую значимую графику и навигацию, и убрать все пробелы между блоками, чтобы уместить все в ограниченный размер экрана мобильного устройства.

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

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

Тенденции веб-дизайна

  1. «Mobile First»

Изначально создается мобильная версия, а затем основной сайт, который дополняется разными элементами и адаптируется под компьютер. Такой подход применяется, если наполнение сайтов совпадает.

  1. Навигация

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

  1. Размеры экрана

Большинство смартфонов имеют расширение 320 пикселей.  Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.

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

  1. Тачскрин

Учитывая то, что палец намного больше, чем курсор мышки, точность попадания по ссылкам довольно низкая. В связи с этим мобильную версию сайта нужно продумать так, чтобы вокруг ссылок было оставлено как минимум 28 пикселей свободного пространства.

Кроме того, пока сайт подгружает страницу по ссылке, пользователь должен понимать, что ссылка нажата, и не кликать по ней несколько раз. Для этого отлично подойдут вдавленные кнопки или ссылки, которые меняют цвет, что сигнализирует о принятии команды.

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

  1. По возможности нужно отказаться от ввода текста.
  2. Не пренебрегайте такими возможностями платформы, как функция «click to call» или адрес компании в виде ссылки (загрузка карты с маршрутом).

Как сделать адаптивную верстку

При адаптивном дизайне используется один HTML-код для всех размеров экранов. Все элементы меняются в зависимости от правил, которые прописывают в файле CSS media.

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

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

Правила верстки

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

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

Поисковую строку лучше заменять иконкой «увеличительное стекло». А верхнее меню сделать выпадающим. Это обеспечивает удобство использования и экономит пространство.

Что такое Progressive Web Apps

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

Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:

  • Весь контент находится в одной колонке, но разделяется на блоки с подсказками. В верхней части располагают элементы навигации;
  • «Гармошка» — прием, когда контент скрывается под заголовками в виде кнопок.

Все блоки, которые удалены с мобильной версии, необходимо внести в HTML-код и скрыть их отображение на определенных устройствах.

Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.

Удачные примеры адаптивных сайтов:

  1. New Adventures In Web Design Conference 2012

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

  1. Ribot

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

  1. Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.

Если же массив данных огромен, то есть смысл сделать отдельный сайт для мобильных устройств.

Разрабатываем отдельный сайт под мобильные устройства

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

Перед разработкой важно проверить ключевые запросы, по которым пользователи ищут данный контент. Эту информацию можно просмотреть в Google Analytics в отчете «Поисковая оптимизация».

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

Преимущества и недостатки этих способов разработки

ПреимуществаНедостатки
Адаптивный дизайн●       Удобство разработки. Вся структура сайта подстраивается под разную ширину экранов;

●       Не нужно писать сайт с нуля, достаточно внести изменения в CSS и HTML;

●       Простая поддержка такого продукта;

●       Наличие одного адреса позитивно сказывается на продвижении сайта.

 

●       Разные задачи мобильных пользователей и пользователей ПК;

●       Медленная загрузка;

●       Адаптивный сайт нельзя отключить и перейти на обычный домен.

Мобильный сайт●       Так как он существует отдельно от основной версии, в него легко вносить изменения;

●       Удобен для пользователей;

●       Быстрая загрузка;

●       Есть возможность перехода на основной сайт.

●       Разные адреса десктопной и мобильной версии;

●       Ограниченность, так как при создании мобильного сайта приходится избавиться от части контента и функционала.

Заключение

Нет идеального и уникального варианта мобильного сайта, который подойдет для всех. Все зависит от сути и направленности сайта, а также требований заказчика. Для крупных проектов целесообразно создавать отдельный мобильный сайт.

Учитывая нынешние тенденции использования мобильных устройств, создание мобильной версии просто необходимо, так как большинство пользователей заходят в Интернет через гаджеты. Если у вас ограниченный бюджет и вы не хотите тратить деньги на создание мобильного приложения для вашего сайта — компания Google рекомендует новую технологию Progressive Web App  или прогрессивные веб-приложения.

Технология позволяет совместить качества мобильного сайта и приложения. Пользователь заходит на сайт и сразу же получает предложение установить его на рабочем столе. Установка происходит по одному клику (ярлык сохраняется на рабочем столе). PWA занимает минимум места (до 200 Кб) и не тратит ресурсы мобильного устройства, работает в режиме оффлайн и при плохой Интернет-связи, автоматически обновляет контент при наличии хорошего интернет-соединения, загружается мгновенно (!).

Кроме того, в технологию «вшита» функция push-уведомлений, которые возвращают посетителей на сайт, напоминая им о нем. Наконец, раскрутка сайта с PWA происходит по той же схеме, что и раскрутка обычного сайта (не приложения — иметь дело с Интернет-магазинами приложений даже не придется) при помощи обычных маркетинговых инструментов, без задействования дополнительного бюджета. Если учесть, что уже с лета компания Google анонсирует введение ранжирования мобильных страниц по скорости загрузки, то становится ясно — супербыстрые прогрессивные веб-приложения PWA помогут добиться лидерских позиций в этом рейтинге.

Вас также может заинтересовать

Как переделать сайт-визитку в полноценный сайт » Техподдержка Prihod.ru

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

Вы можете пойти несколькими путями:

  1. Дополнить и расширить текущую версию визитки без отключения (этот вариант будет рассмотрен в статье).
  2. Снять сайт с публикации, провести все необходимые работы, включить обратно (это делается через обращение в техподдержку).  Не самый лучший вариант, поскольку  выпадет из всей системы, пока не будет снова опубликован.
  3. Создать второй сайт с нуля, заново внести в него информацию, настроить внешний вид, обратиться в техподдержку, чтобы визитку удалили, а сайт заменили новым и опубликовали.

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

Приступим 🙂

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

План действий:

  1. Определиться с наполнением сайта (что на нем будет). Составить структуру и меню.
  2. Подобрать подходящую тему из каталога, определить состав главной страницы и боковых колонок.
  3. Подготовить материалы для оформления и добавить в консоли минимальный объем информации (страницы, записи, фотографии).
  4. Сформировать меню.
  5. Подключить выбранную тему. Включить новое меню. Настроить главную страницу. Настроить боковые колонки.
  6. Проверить, все ли работает как нужно и дальше уже дополнять по усмотрению, необходимый минимум выполнен 🙂

1. Формируем структуру сайта

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

  1. Перечень рубрик и страниц сайта.
  2. Пункты основного меню (первый-второй уровень).
  3. Представление, что на вашем сайте является ключевым, в чем будет его сильная сторона.


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

2. Выбираем тему

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

Выбрать тему можно в каталоге тем Prihod.ru. Всего там более 100 проверенных, современных, симпатичных тем. Для удобства они разбиты по тематическим рубрикам. Практически у каждой темы есть демо-сайт, на котором можно посмотреть ее «вживую». Можно наглядно представить, какая информация будет выводиться на главной странице.

Важно. Тема на картинках и демо-версиях выглядит красиво. Рубрики укомплектованы, текстовые блоки сформированы, фотографии одна к одной симпатично укладываются на страничке. Подразумевается, что свой материал вы должны будете оформить примерно в таком же виде. И если в теме 3 информационные колонки на главной странице, в которых небольшой текст, вполне может случиться, что если текст будет больше, то страница просто некрасиво расползется вниз.

Это не недостатки темы, а особенности оформления сайта: тексты подгоняют по высоте, картинки по ширине, и это нормальный творческий процесс. 🙂 Когда вы делаете ремонт в доме, тоже отрезаете обои нужной длины, подпиливаете плинтуса, подбираете мебель нужного размера, чтобы все это гармонично вписалось в комнату.

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

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

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

На этом же этапе можно подумать о содержимом боковых колонок.

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

3. Подготовка и добавление материалов

Какие материалы имеются в виду?

  1. В зависимости от выбранной темы может понадобиться логотип или красивая картинка в шапку сайта.
  2. Тексты, фотографии, которые будут размещены. Старайтесь размещать качественный материал. Особенно фотографии, они больше всего обращают на себя внимание. Самая простая тема будет выглядеть очень эстетично с красивыми, аккуратными изображениями.


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

4. Формируем меню

После того, как на сайт внесены все необходимые материалы, сформируйте из них основное меню сайта. Пока не устанавливайте его в качестве основного, это нужно будет сделать после подключения новой темы.

5. Подключение новой темы

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

Вот и все. Работы завершены, визитка превратилась в новый, красивый сайт 🙂

Просмотрено (2398) раз

Как настроить тему WordPress (5 пошаговых способов)

Если вы установили тему WordPress, но она вам не совсем подходит, возможно, вы расстроены. Существует множество вариантов настройки тем WordPress.

Задача состоит в том, чтобы найти правильный способ сделать это.

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

Предпочитаете смотреть видеоверсию?

Варианты настройки темы

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

Вот обзор доступных вам опций:

  • Если вы хотите добавить функциональности своей теме, установите плагин.
  • Используйте настройщик на экранах администратора WordPress для настройки шрифтов, цветов и, возможно, макета, в зависимости от вашей темы.
  • Если вы работаете с темой компоновщика страниц, используйте ее функции для настройки дизайна вашего сайта.
  • Если вы установили тему фреймворка, используйте одну из доступных дочерних тем для настройки вашего сайта вместе с любыми параметрами настройки, доступными на экранах администратора.
  • Если ваша тема специфична для вашего сайта и вам удобно это делать, отредактируйте код темы напрямую.
  • Если вы хотите отредактировать код сторонней темы, создайте дочернюю тему.

Если вы хотите отредактировать код, у вас есть ряд доступных вам опций, от использования редактора блоков до настройщика и вплоть до редактирования файлов. Мы рассмотрим их все в этом посте, но начнем с самого простого варианта: установки плагина.

Вам действительно нужно настроить свою тему?

Иногда вам вообще не нужно настраивать тему: вместо этого вам нужно установить плагин.

Темы определяют дизайн вашего сайта: его внешний вид и способ отображения содержимого (используйте наш инструмент для определения темы, чтобы определить основную тему для понравившегося вам дизайна).Плагины добавляют дополнительную функциональность.

Если изменения, которые вы хотите внести, касаются функциональности, а не дизайна, рассмотрите возможность самостоятельной установки подключаемого модуля. Это может быть плагин, который вам нужно написать, который вы загружаете из каталога плагинов или который вы покупаете.

Если вы хотите отредактировать файл functions.php в своей теме, спросите себя:

Захочу ли я сохранить эту функцию при смене темы в будущем?

Если ответ положительный, этот код должен быть в плагине, а не в вашей теме.

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

Настройка темы WordPress с помощью экранов администратора WordPress

Если изменения, которые вы хотите внести, ориентированы на дизайн и относительно просты, вы можете сделать их через экраны администратора. Настройщик предоставляет вам множество вариантов настройки вашей темы: то, что вам доступно, будет зависеть от вашей темы.И вы можете увидеть что-то под названием «Редактор» в меню «Внешний вид». Держитесь подальше от этого по причинам, которые я вскоре опишу.

Настройка темы с помощью настройщика

Самый простой способ настроить тему WordPress — использовать настройщик WordPress.

Доступ к этому можно получить одним из двух способов:

  • При просмотре своего сайта (войдя в систему) нажмите ссылку Настроить в панели администратора в верхней части экрана.
  • На экранах администратора нажмите Внешний вид > Настроить .

Это приведет вас к Настройщику.

Настройщик WordPress

На скриншоте выше я установил бесплатную тему под названием ColorMag, которая имеет множество параметров настройки. В настройщик добавлены разделы для функций дизайна, включая изображение заголовка, социальные сети, цвета категорий и вкладку «Параметры дизайна», которая ведет к еще большему количеству вкладок, где вы можете вносить изменения в макет и дизайн вашего сайта.

Различные темы имеют разные параметры настройки, но новые темы, кажется, добавляют их все больше и больше.Если вы найдете тему, которая вам нравится, но не совсем подходит для вас, вы можете обнаружить, что ее настройка дает вам именно тот дизайн и макет, которые вам нужны.

Редактор тем (и почему его не использовать)

На экранах администратора вы можете заметить параметр под названием «Редактор тем», доступ к которому можно получить через «Внешний вид» > «Редактор тем» .

Редактор темы WordPress

Это дает вам доступ к файлам вашей темы, что означает, что вы можете напрямую редактировать их.

Не надо.

Даже если вы умеете писать на CSS или PHP, редактировать файлы в вашей теме подобным образом — очень плохая идея по двум причинам:

  • Если вы купили или загрузили стороннюю тему, любые внесенные вами изменения будут потеряны при следующем обновлении темы (и вам следует обновлять тему из соображений безопасности).
  • Что еще более важно, если вы вносите изменения, которые нарушают работу вашего сайта, они не будут отслеживаться, и предыдущая версия файла не будет изменена. Вы можете безвозвратно сломать сайт.

Если вы хотите отредактировать код в своей теме, вы должны сделать это с помощью редактора кода (ознакомьтесь с лучшими бесплатными HTML-редакторами), и вы не должны редактировать файлы на своем работающем сайте, пока не протестируете его. на тестовом сайте WordPress. Если вам нужно отредактировать стороннюю тему, вы должны сделать это через дочернюю тему. Подробнее об обоих из них позже в этом посте.

WordPress знает, насколько небезопасно использовать редактор тем: он даже выдает предупреждение при попытке доступа к нему.

Предупреждение о неиспользовании редактора тем WordPress

Так что прислушайтесь к совету WordPress: не используйте редактор тем!

Использование конструкторов страниц и фреймворков для настройки темы WordPress

Большая часть тем WordPress имеет параметры настройки, что означает, что вы можете вносить изменения в дизайн и макет с помощью Настройщика.

Но некоторые темы идут дальше и предназначены для расширения и значительной настройки. Эти темы называются каркасами тем.

Другим вариантом является использование плагина, который позволяет вам создавать свой сайт с помощью удобного интерфейса: они называются компоновщиками страниц.

Использование компоновщика страниц для настройки темы

Плагины

Page Builder предназначены для облегчения настройки дизайна вашего сайта с помощью интерфейса, который позволяет вам видеть, что вы получаете.

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

Одним из самых известных конструкторов страниц является Elementor, но вы можете узнать о некоторых альтернативах в нашем обзоре конструкторов страниц.

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

Ниже я использую конструктор страниц Elementor с темой Hello Elementor, которая с ним совместима.

Интерфейс Elementor

Конструкторы страниц дают вам большую гибкость в макете и дизайне ваших страниц. Если вы привыкли к такому конструктору веб-сайтов, как Wix, они могут упростить переход на WordPress. И если вы предпочитаете интерфейс WYSIWYG для своего контента WordPress, они могут помочь вам быстро спроектировать ваши страницы.

Использование Theme Framework для настройки темы

Альтернативой конструкторам страниц являются фреймворки тем. Это наборы тем, предназначенные для совместной работы.Есть одна родительская тема, которая является фреймворком, и несколько дочерних тем, которые вы можете использовать для настройки основной темы и придания ей желаемого вида.

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

Тема Divi

Рекомендуемая литература: Divi vs Elementor: Сравнение плагинов WordPress Page Builder

Редактирование кода вашей темы WordPress

Если вам удобно редактировать CSS и/или PHP, вы можете отредактировать код в своей теме, чтобы настроить ее.

Это дает вам максимальную степень контроля.

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

Редактирование файлов темы

Первый шаг к редактированию вашей темы WordPress — это понять, какие файлы тем управляют чем и какие вам нужно будет отредактировать.

Таблица стилей

Каждая тема WordPress имеет таблицу стилей, которая называется style.css. Он содержит весь код для оформления вашего сайта: макет, шрифты, цвета и многое другое.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили трафик более чем на 1000%?

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

Подпишитесь сейчас

Например, если вы хотите изменить цвета в своей теме, вы должны внести изменения в таблицу стилей.Если вы хотите добавить новый шрифт, вы должны использовать таблицу стилей, чтобы применить его к различным элементам, таким как основной текст и заголовки.

Обратите внимание при редактировании таблицы стилей: специфика означает, что код элемента не всегда берется оттуда, где вы думаете. Элементы наследуют стили от других элементов, которые находятся над ними в иерархии страницы, если только вы не добавите стиль, специфичный для нижнего элемента.

Чтобы узнать, какой CSS влияет на какие элементы на странице, вы можете использовать инспектор в своем браузере для просмотра CSS (Chrome DevTools в этом примере):

Проверка кода на сайте WordPress с помощью Chrome DevTools

Затем вы можете использовать это для написания нового CSS, предназначенного для отдельных элементов или диапазона элементов или классов на странице.

Если все эти разговоры об элементах, классах и специфике для вас в новинку, вы можете воздержаться от прямого редактирования CSS вашей темы. По крайней мере, пока вы не узнаете больше о CSS и о том, как он работает.

Файл функций

Другим файлом, который есть практически в каждой теме, является файл функций (functions.php). Это файл, который заставляет кучу вещей работать в вашей теме. Внутри вы можете найти код для регистрации функций темы, таких как избранные изображения, виджеты и многое другое.

Если у вас возникнет желание добавить функциональный код в свою тему, вы добавите его сюда. Но будьте осторожны: в большинстве случаев вам действительно нужно писать плагин. Спросите себя:

Захочу ли я сохранить эту функцию при смене темы в будущем?

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

Файл функций полностью написан на PHP, так что вам нужно с ним ознакомиться.Не копируйте слепо код, который вы нашли с помощью поиска Google: найдите время, чтобы разобраться, что делает этот код, и понять его. Таким образом, вы с меньшей вероятностью добавите код, который не так хорош, как должен быть.

Файлы шаблонов темы

Большинство файлов темы являются файлами шаблонов темы. Это файлы, которые определяют, какой контент WordPress выводит на данной странице, и выбираются в соответствии с иерархией шаблонов.

Если вы хотите изменить способ вывода контента для определенного типа записи, страницы или архива, вам нужно либо отредактировать один из этих файлов, либо создать новый.

Например, предположим, что в вашей теме есть файл archive.php, который используется для вывода архивных страниц для категорий и тегов. Вы хотите внести изменения в способ вывода тегов. Итак, вы создаете файл с именем «tag.php», который будет основан на archive.php с вашими настройками.

Опять же, будьте осторожны при редактировании файлов: они могут сломать ваш сайт. Всегда сначала проверяйте локальную установку с помощью таких инструментов, как DevKinsta и/или промежуточный сайт WordPress.

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

Настройка сторонней темы с помощью дочерней темы

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

Это связано с тем, что если вы отредактируете тему напрямую, а затем обновите ее (что вы и должны сделать), вы потеряете все сделанные вами изменения.

Создание дочерней темы состоит из четырех шагов:

  1. Создайте новую папку в wp-content/themes .
  2. В этой папке создайте таблицу стилей. В этой таблице стилей сообщите WordPress, что это дочерняя тема вашей существующей темы.
  3. Добавьте копии файлов, которые вы хотите редактировать, в дочернюю тему и отредактируйте их там.
  4. Активируйте дочернюю тему на своем сайте.

WordPress всегда будет использовать файл из дочерней темы для вывода содержимого, если в родительской теме нет файла выше по иерархии.Если есть две версии одного и того же файла, будет использоваться версия из дочерней темы. Это означает, что ваш новый файл в дочерней теме переопределит файл из родительской темы.

Рекомендации по настройке тем WordPress

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

Если возможно, настроить без редактирования кода

Если вы можете выполнить настройку через настройщик или где-либо еще на экранах администратора, это безопаснее, чем редактирование кода.

Редактируйте код только в том случае, если вы знакомы с CSS (для таблицы стилей) и PHP (для других файлов темы) и знаете, как это сделать безопасно.

Используйте локальный сайт разработки для внесения изменений

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

Таким образом, у вас есть зеркало вашего работающего сайта для проверки ваших изменений.Работа на локальном сайте не повлияет на ваш работающий сайт и может быть быстрее.

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

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

Использовать контроль версий

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

В простейшем случае это означает изменение номера версии темы и сохранение копий обеих версий. Но если вы хотите правильно управлять версиями, вам нужно использовать такой сервис, как GitHub, для отслеживания ваших изменений.

Таким образом, если изменение вызывает проблемы, вы можете легко отменить его, не внося изменений вручную.

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

Используйте промежуточный сайт для тестирования ваших изменений

Если у вас есть доступ к промежуточному сайту (например, к бесплатному промежуточному сайту Kinsta, который входит во все планы), тестирование на нем перед активацией новой версии вашей темы (или новой дочерней темы) на вашем работающем сайте — это самый безопасный способ продолжить. .

myKinsta staging

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

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

Сделайте вашу тему адаптивной

Любые изменения, которые вам необходимо внести в тему, должны работать как на мобильных устройствах, так и на настольных компьютерах.

Учитывая, что все больше и больше людей выходят в Интернет через мобильные телефоны, а индекс Mobile-first от Google, вероятно, важнее, чтобы ваша тема работала на мобильных устройствах, а не на настольных компьютерах.Таким образом, любые изменения, которые вы вносите в свою тему, должны быть адаптированы для мобильных устройств или, предпочтительно, для мобильных устройств, где это уместно.

Это в основном относится к любым изменениям, которые вы вносите в свой стиль или макет: убедитесь, что новый макет работает на мобильных устройствах и что вы добавили медиа-запросы, чтобы макет адаптировался к разным размерам экрана.

Если ваша тема не адаптивна, это негативно повлияет на ваш рейтинг в поисковых системах и коэффициент конверсии.

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

Адаптивные инструменты в настройщике WordPress

Убедитесь, что ваши настройки не влияют на доступность

Любые изменения в вашей теме также должны быть доступны для пользователей с ограниченными возможностями или сенсорными нарушениями.

Речь идет не только о том, чтобы ваш сайт работал на программах чтения с экрана: для большого числа людей важны и другие факторы, такие как цветовая схема и размер шрифта.

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

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

Придерживайтесь стандартов кодирования WordPress

Если вы редактируете код в своей теме или создаете дочернюю тему, вы должны убедиться, что ваш код соответствует стандартам кодирования WordPress.

Эти стандарты существуют для обеспечения согласованности и качества кода, а также для предотвращения беспорядка в коде. Существуют стандарты для PHP, CSS и JavaScript, поэтому найдите время, чтобы проверить те из них, которые имеют отношение к вам, и убедитесь, что вы следуете им.

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

Нужно настроить тему #WordPress, чтобы сделать ее уникальной? Есть много вариантов! Выберите подходящий для вас в нашем подробном руководстве! 👚👔Нажмите, чтобы твитнуть

Резюме

Настройка темы WordPress не так уж и сложна. Иногда это простой случай использования Customizer для внесения изменений в шрифты, цвета или ваш значок (не забудьте прочитать наше подробное руководство о шрифтах WordPress).В других случаях вам нужно создать новую дочернюю тему, чтобы добавить в тему новый файл шаблона.

Варианты настройки темы включают использование плагина или настройщика, непосредственное редактирование кода темы WordPress или создание дочерней темы.

Определите правильный вариант для вас и внесите свои настройки безопасно, не нарушая работу вашего сайта.


Экономьте время, деньги и максимизируйте производительность сайта с:

  • Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
  • Интеграция с Cloudflare Enterprise.
  • Глобальный охват аудитории благодаря 29 центрам обработки данных по всему миру.
  • Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

Все это и многое другое в одном плане без долгосрочных контрактов, сопровождаемой миграции и 30-дневной гарантии возврата денег. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти план, который подходит именно вам.

Настройте свой сайт так, чтобы он был оптимизирован для мобильных устройств

Существует множество способов управления содержанием вашего веб-сайта.Некоторые владельцы сайтов полностью строят свои собственный сайт с нуля. Другие могут использовать существующий программный пакет от такой компании, как WordPress, Drupal или Joomla, которые могут предоставить тему, дизайн и шаблоны. Когда используешь существующее программное обеспечение веб-сайта, владелец сайта не создает весь сайт, создавая код, стиль листы и сценарии, а предоставляет только содержимое (например, фотографии, изображения и текст).

Создать новый сайт

Если вы заинтересованы в создании совершенно нового сайта и хотели бы использовать существующий программный пакет, взгляните на некоторые из программных пакетов, перечисленных ниже. отправные точки.Многие из этих программных пакетов называются «управление контентом». системы», или, по их аббревиатуре, CMS. Некоторые компании могут предоставлять услуги хостинга в дополнение к предоставление программного обеспечения для вашего сайта.

Убедитесь, что ваш существующий сайт оптимизирован для мобильных устройств

Некоторые CMS написали специальные руководства по созданию и исправлению мобильный сайт. Если на вашем сайте используется одна из этих CMS, ознакомьтесь с их руководством:

Если программное обеспечение вашего веб-сайта не имеет документации для создания сайта, оптимизированного для мобильных устройств, следуйте нашим общим рекомендациям, чтобы убедиться, что программное обеспечение вашего веб-сайта оптимизировано для мобильных устройств:

  1. Сделайте резервную копию вашего сайта .Мы рекомендуем сделать резервную копию вашего сайта, прежде чем делать какие-либо изменения или обновления. Если вы не знаете, как создать резервную копию своего сайта, обратитесь к поставщику CMS или просмотреть наш владельцы веб-сайтов поддерживают сообщество.
  2. Обновите CMS до последней версии . В некоторых случаях обновление до последняя версия автоматически применяет необходимые обновления безопасности и делает ваш сайт для мобильных устройств. Если процесс не запускается автоматически, обязательно отправьте обновление вручную, чтобы предотвратить нарушения безопасности.Например, Joomla 3 поставляется с поддержкой мобильных устройств.
  3. Если CMS предлагает пользовательские темы, убедитесь, что тема подходит для мобильных устройств:
    1. В административной панели вашей CMS просмотрите тему для своего сайта и найдите термины например «мобильный» или «отзывчивый» в документации темы.
    2. Если доступен демонстрационный шаблон, скопируйте и вставьте URL-адрес шаблона в Мобильный тест, который нужно сделать конечно, это для мобильных устройств.
    3. Убедитесь, что шаблон работает быстро, проверив раздел «Скорость» PageSpeed ​​Insights и убедитесь, что скорость в разделе нет проблем с пометкой «Нужно исправить».
  4. Просмотрите форумы поддержки вашей CMS, чтобы узнать, с какими проблемами могут столкнуться люди мобильные версии своих сайтов. Посещение наш форум Google Search Central для получения дополнительных указаний и поддержки.
  5. Используйте мобильную версию Протестируйте, чтобы убедиться, что ваш сайт оптимизирован для мобильных устройств.

5 способов персонализировать контент вашего веб-сайта в 2021 году

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

То же самое касается веб-сайтов. Если у вас нет универсального продукта или услуги, универсальный веб-сайт не будет соответствовать всем требованиям.

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

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

Или сразу:

Первый шаг: определение вашей аудитории

Вы не можете связаться ни с кем, не понимая, кто они.Во-первых, вам нужно определить аудиторию персонализации. Аудитория в этом контексте, как объясняет маркетолог Кара Харшман, — это «группа посетителей сайта с особыми потребностями, которые заслуживают уникального опыта».

Существует три типа данных, которые вы можете использовать для создания своей персонализированной аудитории:

  1. Поведенческие данные: Просматривал ли посетитель вашего веб-сайта ваши планы продуктов? Нажмите на определенный призыв к действию? Прочесть пару сообщений в блоге? Скачать электронную книгу? Поведенческие данные дадут вам представление о том, как посетители взаимодействовали с вашим сайтом — это похоже на историю ваших разговоров с ними.
  2. Демографические или фирмографические данные: Получить атрибуты данных, такие как географическое положение или размер компании и отрасль, на основе IP-адреса посетителей.
  3. Контекстные данные: Это информация о ситуации человека, когда он посещает сайт — например, какое устройство или браузер он использует, является ли он новым или возвращающимся, или из какого источника или реферала он пришел к вам.

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

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

Будет ли полезна настройка для этих аудиторий?

Нецелесообразно настраивать свой веб-сайт для каждой отдельной группы, с которой вы сталкиваетесь.Посетитель сайта должен «подходить» для персонализированного обращения в зависимости от того, соответствует ли он атрибуту в вашем профиле идеального клиента или какому-либо другому сегменту, на который вы пытаетесь ориентироваться.

Подтвердите, что выбранные вами аудитории:

  • можно уверенно идентифицировать (имеется достаточный объем и точность для перемещения чисел)
  • ценны для вашего бизнеса (они стоят усилий по стратегической персонализации продаж и маркетинга)
  • пользу от специального обращения .Действительно ли аудитория получает какую-либо ценность от адаптированного веб-опыта? Например, для инструмента для обмена файлами очень маленькая компания имеет разные потребности по сравнению с очень большой, и не будет иметь большого значения, персонализируете ли вы на основе того, что находитесь в Мэриленде или в Коннектикуте.

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

5 составляющих персонализированного веб-сайта

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

Решите, какие типы контента следует изменить — это может быть только один раздел для эксперимента или их может быть несколько — и какие страницы нужно ввести в действие (хорошо начать с страниц с высоким трафиком и высоким намерением).

Давайте рассмотрим пять элементов вашего маркетингового сайта, которые вы можете персонализировать, и идеи того, что вы можете сделать для каждого из них.

1. Заголовки и герои

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

Посмотрите, как Tealium, центр данных о клиентах и ​​платформа управления тегами, меняет свой заголовок на главной странице для посетителя сайта из компании электронной коммерции:

Посетитель из финансовой компании увидит персонализированный заголовок, который гласит: «Инвестируйте в данные своих клиентов».

Что вы можете сделать:

  • Настройте текст и изображение заголовка для конкретных крупных компаний.Optimize, например, лично приветствует ценные именованные учетные записи — используя IP-адреса, чтобы определить целевую компанию, чтобы соответствующим образом адаптировать их заголовок:

  • Адаптируйте подзаголовок под заголовком для разных категорий клиентов. Создавайте разные варианты для каждой ключевой категории, используя любой атрибут, отличающий ваши целевые сегменты (например, отрасль, размер компании, роль). Вот пример из Double Your Freelancing, настраивающий сообщение подзаголовка для дизайнеров:

    .
  • Настройте главный образ для своей целевой аудитории (там, где это имеет смысл) — на основе географии, например, если у вас есть продукт бронирования или отрасль — чтобы укрепить вашу связь и соответствовать.

2. Призыв к действию

CTA — отличное место для персонализации — будь то последний элемент убеждения, чтобы заставить кого-то щелкнуть, или служить дверью к другому, индивидуальному опыту.

Допустим, вы — компания SaaS, которая предлагает два плана: базовый план и корпоративный план. Вы хотите поговорить с более крупными компаниями, чтобы обеспечить более индивидуальный подход, и нет смысла тратить так много времени один на один с небольшими компаниями.

В этом случае вы должны использовать размер компании (на основе количества сотрудников), чтобы определить, какой призыв к действию увидит посетитель сайта, например:

Это то, чем занимается Drift, как объясняет Сара Пион, специалист по маркетингу роста.Drift создал различные призывы к действию, «чтобы создать более бесконтактный опыт» для неподходящих потенциальных клиентов, чтобы перейти к созданию бесплатной учетной записи и «использовать беседу» с целевыми потенциальными клиентами. Такой подход привел к большему количеству забронированных встреч, что привело к более высокому MRR.

Что вы можете сделать:

  • Показывайте только определенные призывы к действию (общайтесь с продавцами, свяжитесь с нами, демо-запросы, вебинары и т. д.) посетителям, которые соответствуют вашей целевой аудитории.
  • Отправить известных клиентов, чтобы узнать или попробовать план более высокого уровня.
  • Если у вас есть предстоящее мероприятие, которое происходит недалеко от того места, где находится посетитель вашего сайта, добавьте CTA, чтобы узнать больше и зарегистрироваться.
  • Измените CTA в своем блоге, чтобы побудить читателя подписаться на пробную версию, если он является постоянным посетителем или уже загрузил часть контента.

3. Отзывы клиентов/логотипы

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

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

логотипы с домашней страницы Optimizely
показаны другие компании, связанные с программным обеспечением

Вот пример эксперимента от Optimizely.Они отображали рекомендации по тематическому исследованию, основанные на отрасли посетителей сайта, на странице своих клиентов и обнаружили, что количество кликов увеличилось более чем на 40%.

Что вы можете сделать:

  • Персонализируйте логотипы на главной странице компаний из той же отрасли или из того же географического региона.
  • Разместите видео-отзыв клиента, который соответствует размеру целевой компании, на странице /customers или на главной странице.
  • Выделите истории клиентов, связанные с ролью или типом бизнеса, чтобы лучше соответствовать обстоятельствам посетителя вашего сайта.

4. Функции продукта или плана

Если вы обслуживаете более одного типа клиентов или предлагаете более одного продукта, выделите конкретные функции или решения, которые вызовут наибольший резонанс.

Например, когда компания Intercom создала целевые страницы, персонализированные в соответствии с вариантом использования, привлекшим посетителей из кампаний Google Рекламы. На целевых страницах были представлены наиболее релевантные изображения и характеристики продуктов:

.

При таком подходе конверсия Intercom увеличилась более чем в три раза по сравнению со стандартной целевой страницей.

Что вы можете сделать:

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

5. Избранные сообщения в блогах (и другой контент)

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

Еще один отличный пример от Optimizely

Что вы можете сделать:

  • Рекомендуйте публикации в блогах и ресурсы, особенно практические советы, истории успеха клиентов и другие материалы, связанные с продуктом, или образовательные материалы в зависимости от роли.
  • Предлагайте сообщения в блогах, в которых рассматривается предыдущее поведение, например загрузка электронной книги или чтение информации об определенном продукте или плане, который вы предлагаете. Вот еще один интересный пример от Tealium, адаптирующий домашнюю страницу к посетителю сайта, опять же из розничной компании, но который также имеет историю чтения блога:
  • Продемонстрируйте конкретные публикации, предложения и вебинары на странице входа.
  • На главной странице удерживайте потенциальных потенциальных клиентов на своем сайте дольше, отображая сообщения в блогах и интересующий контент более низкой последовательности.

Сделайте его персональным для самых важных лидов

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

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

Всегда продолжайте учиться

Когда вы думаете, что уже все сделали, всегда есть новый способ персонализации. Ничего страшного, мы делимся советами раз в месяц.Зарегистрируйтесь ниже!

Руководство для начинающих по настройке WordPress

Вы выбрали план веб-хостинга и доменное имя для своего веб-сайта WordPress. И (вероятно) одним щелчком мыши вы установили WordPress на свой сервер.

Это самая простая часть.

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

В этом руководстве по настройке WordPress мы покажем вам, как взять установку WordPress по умолчанию и настроить ее.Вы узнаете, как:


Пошаговое руководство по настройке WordPress

К концу этого 10-шагового руководства у вас будет базовый, но полностью настроенный веб-сайт WordPress, настроенный и готовый к работе.

Шаг 1. Настройка параметров WordPress

Существует несколько мест, где вы найдете параметры WordPress.

Первый набор поможет вам настроить внешний вид самого WordPress. Второй поможет вам настроить внешний вид вашего сайта.

Настройка параметров экрана

Когда вы в первый раз войдете в WordPress, вы увидите следующее:

Это панель инструментов WordPress. И это несколько отвлекает от того, что все эти виджеты загромождают экран, верно?

Итак, первый набор настроек для настройки — это Параметры экрана, которые вы найдете здесь:

Нажмите «Параметры экрана», чтобы открыть настройки:

Флажки отображаются как виджеты на панели инструментов.

Действие предоставляет вам быстрый снимок нового контента, опубликованного на вашем сайте.

Краткий обзор показывает, сколько страниц и сообщений вы опубликовали, а также количество комментариев, которые вы получили.

Quick Draft — это способ записать мысли или заметки для нового поста в блоге, но дальше этого вы не продвинетесь.

Добро пожаловать! — не более чем упрощенный контрольный список для начинающих пользователей.

События и новости WordPress не очень полезны, если вы не разработчик, работающий в пространстве WordPress.

Если вы хотите сохранить какие-либо из этих виджетов, просто оставьте их отмеченными. Вы можете снять остальные флажки, чтобы они исчезли из поля зрения.

После того, как вы выбрали, какие ящики хотите сохранить, не стесняйтесь перетаскивать их. Вы можете расположить их вертикально (как на снимке экрана выше) или использовать оба столбца:

Вид панели управления можно настроить самостоятельно.

Примечание: Когда вы начнете добавлять плагины на свой веб-сайт, вы можете увидеть новые поля на панели инструментов.Если вы находите их полезными, держите их там, где они есть. Если вы хотите удалить их, чтобы отвлечь внимание, скройте их так же, как вы скрывали поля по умолчанию.

Настройка параметров WordPress

Чтобы настроить параметры веб-сайта WordPress, найдите меню «Настройки» на боковой панели:

Даже если вам не нужно настраивать параметры для каждой уверен, что вы расставили точки над i и перечеркнули свои t.

Начните с общих настроек:

Обратите внимание на следующее:

Если у вас нет логотипа, убедитесь, что у вас есть название сайта.Это будет отображаться в верхней части сайта при его отсутствии. Это также имя, которое вы увидите в верхнем левом углу панели администратора WordPress.

Убедитесь, что адреса WordPress и сайта совпадают друг с другом, а также с купленным вами доменным именем. Если какой-либо из них неверен, это может привести к ошибкам.

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

Перейти к настройкам чтения далее:

После того, как вы создали контент для своего сайта, вернитесь к этим настройкам и обновите «Ваша домашняя страница отображается» (инструкции по этому поводу приведены ниже).В противном случае по умолчанию ваш блог размещается на главной странице.

Пока сосредоточьтесь на двух последних параметрах.

«Для каждого сообщения в ленте включить» следует установить на «Сводка». Это полезно не только для посетителей, которые хотят быстро пролистывать темы блога в вашей ленте, но и для ускорения загрузки страницы.

Прежде чем сохранить изменения и двигаться дальше, убедитесь, что флажок «Видимость для поисковых систем» не установлен. Вы определенно хотите, чтобы Google и другие поисковые системы нашли ваш сайт и проиндексировали его.

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

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

Тем не менее, есть один параметр, который вы должны исправить здесь в целях безопасности.

В разделе «Настройки сообщений по умолчанию» снимите флажок «Разрешить уведомления о ссылках из других блогов (обратные ссылки и обратные ссылки) в новых сообщениях».

В двух словах, пингбеки и трекбеки — это уведомления, которые появляются в вашей ленте модерации комментариев всякий раз, когда кто-то ссылается на ваш блог.

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

Если вы когда-нибудь решите изменить размер изображения WordPress по умолчанию, вы можете сделать это в настройках мультимедиа. Хотя, наверное, сейчас этого делать не стоит.

Затем перейдите к настройкам постоянных ссылок.

Постоянная ссылка — это структура адресов вашей веб-страницы.WordPress предоставляет вам несколько вариантов на выбор:

По умолчанию «Имя сообщения» — это то, как будут структурированы ваши ссылки — и это хороший выбор. Он сохраняет ваши URL-адреса просто структурированными и позволяет посетителям легко их вспомнить.

Но решать вам. Если имеет смысл структурировать сообщения в блоге по дате публикации, вы можете включить один из этих параметров. Тем не менее, это, скорее всего, слишком усложнит ситуацию.

Настройки конфиденциальности были недавно добавлены в настройки WordPress:

В свете GDPR и его далеко идущего влияния на веб-сайты WordPress по всему миру конфиденциальность стала важным компонентом процесса разработки веб-сайтов.

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

Шаг 2: Добавление новых пользователей

Теперь, когда настройки WordPress завершены, вам следует обратить внимание на меню «Пользователи».

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

Добавить пользователя

Чтобы добавить нового пользователя, нажмите «Добавить нового пользователя» и заполните следующие данные:

Единственными обязательными полями являются имя пользователя (убедитесь, что это не «admin») и адрес электронной почты. Адрес.

Обязательно настройте их роль пользователя, прежде чем добавлять их в систему:

Это будет определять, какую часть административной панели WordPress они могут видеть и какие элементы управления редактированием (если они есть) у них есть.

Редактировать профиль пользователя

Даже если вы единственный человек, работающий на этом веб-сайте, рекомендуется посетить свой профиль пользователя и убедиться, что он обновлен.

Вот что вы увидите при редактировании собственного профиля:

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

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

И последнее, на что стоит обратить внимание, это раздел «Управление учетной записью»:

Если вы когда-нибудь захотите изменить свой пароль (что рекомендуется делать хотя бы пару раз в год), сделайте это здесь.

Что хорошо в этом, так это то, что WordPress помогает вам генерировать более надежные пароли (и будет поощрять других ваших пользователей делать это): включает строчные и прописные буквы, цифры и символы.

Шаг 3. Настройка темы

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

Есть десятки тысяч тем на выбор, поэтому пусть это руководство по 25+ лучшим темам WordPress поможет вам сузить кругозор.

Выбрав тему, перейдите в меню «Внешний вид» > «Темы».

По умолчанию WordPress автоматически устанавливает собственные темы в вашей системе. Чтобы установить другую тему, вам нужно сначала установить ее.

Установка бесплатной темы

Если у вас есть бесплатная тема из репозитория WordPress, например OceanWP, нажмите кнопку «Добавить новую» и найдите название вашей темы:

Наведите указатель мыши на карточку темы и нажмите «Установить». Синяя кнопка «Установить» изменится на синюю кнопку «Активировать».Нажмите на это, когда увидите.

Тема WordPress по умолчанию будет заменена вашей собственной.

Установка темы премиум-класса

Если у вас есть тема премиум-класса, вам сначала необходимо загрузить файлы темы. Если вы получили их от стороннего поставщика или на рынке тем, таком как ThemeForest, вы найдете их в своей учетной записи:

Загрузите файлы, а затем вернитесь в WordPress.

Нажмите «Добавить новую», чтобы добавить свою тему. Затем нажмите «Загрузить тему» ​​в верхней части экрана:

Появится загрузчик файлов, и вы можете поместить в него файлы WordPress:

Загрузчик автоматически установит и активирует тему для вас.

Настройте свою тему

Теперь, когда ваша тема установлена, пришло время настроить ее. В меню «Внешний вид» нажмите «Настроить». Это запустит настройщик WordPress:

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

Давайте рассмотрим основные модули настройки, которые вы сможете использовать здесь:

Идентификация сайта

Если вы уже обновили название сайта (или слоган) в разделе «Общие настройки», вам не нужно делать это снова.Помните: они появятся на веб-сайте только в том случае, если вы не добавите логотип.

Сняв флажок здесь, вы освободите место для логотипа (который мы скоро добавим).

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

Например, вы можете видеть здесь значки сайтов для websitesetup.org, WordPress.org и Google:

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

Логотип

Вы найдете это в разделе «Заголовок»:

Чтобы добавить свой логотип, нажмите «Выбрать логотип» и загрузите его со своего устройства.

Убедитесь, что логотип имеет прозрачный фон (это означает, что он должен быть в формате PNG или WebP). Таким образом, не будет иметь значения, на каком цвете фона он отображается поверх.

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

Цвета

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

Цвет заголовка, например, можно обновить, если вы хотите использовать что-то другое, кроме белого по умолчанию. Также может быть целесообразно настроить основной цвет, используемый для ссылок и кнопок, на фирменный цвет.

Global

Вы можете найти другие глобальные настройки, которые вы хотите настроить:

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

Если ваша тема предоставляет вам доступ к этим настройкам, просто знайте, что это не основной выбор цвета или шрифта, который вы будете делать. Вы можете изменить размеры шрифтов, макеты страниц по умолчанию, цвета элементов темы и так далее.

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

Что касается других параметров, с которыми вы можете столкнуться в Настройщике, вы собираетесь рассмотреть большинство из них на последующих этапах. Так что не волнуйтесь, если мы не коснулись всего. Мы дадим вам советы о том, как настроить их позже.

Настройте свою премиальную тему

Для всех тем — бесплатных или платных — вы будете использовать настройщик WordPress для начала. Однако, если у вас есть бесплатная или премиальная тема, вам нужно будет настроить дополнительные параметры.

Посмотрите на боковую панель WordPress и посмотрите, есть ли новый пункт меню для вашей темы.Если есть, вы найдете там свои настройки.

Например, это главная панель темы Uncode:

На самом деле нет никаких настроек для настройки. Тем не менее, тема предлагает пользователям установить ряд плагинов, необходимых для правильной работы темы.

В бесплатной теме Astra в разделе «Внешний вид» появляется новая вкладка меню:

Бесплатные настройки просто вернут вас в настройщик WordPress. Однако, если вы перейдете на профессиональную версию, вы откроете еще больше возможностей для настройки, как вы можете видеть из этого списка.

Итог: WordPress по умолчанию предоставит вам определенные настройки настройщика темы. В зависимости от того, какую тему вы выберете, у вас может быть больше возможностей для работы.

Впрочем, не переживайте. Как только вы начнете создавать свои страницы, вы поймете, нужна ли дополнительная настройка темы, и вы всегда сможете вернуться в это меню.

Шаг 4: Настройка основных плагинов

Хотя вы можете добавить на свой веб-сайт столько плагинов WordPress, сколько вам нужно, вы должны проявлять сдержанность в этом.

Find Your Essentials

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

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

Безопасность
Чтобы защитить экран входа в WordPress от атак методом грубой силы и сам веб-сайт от превращения в дом для спама и вредоносных программ, вам понадобится плагин безопасности, такой как Wordfence.

Кэширование
Веб-сайты WordPress имеют тенденцию становиться медленными и вялыми, если вы не добавляете к ним кэширование. Все кеширование — это процесс, с помощью которого ваш веб-сервер более эффективно доставляет ваш сайт в браузеры посетителей. Что хорошо в большинстве плагинов кеширования WordPress, таких как W3 Total Cache, так это то, что они поставляются с другими настройками оптимизации производительности, такими как сжатие Gzip и минимизация файлов.

Все эти вещи предназначены для ускорения загрузки вашего сайта.

Оптимизация изображений
Еще одна вещь, которая нужна каждому веб-сайту, — это плагин для сжатия изображений, такой как Smush. Таким образом, вы можете использовать множество изображений с высоким разрешением для дизайна своего веб-сайта или демонстрации своих продуктов, не беспокоясь о том, что большие размеры файлов замедляют работу (что может произойти без этого плагина).

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

Page Builder
Хотя это необязательно, вы, вероятно, обнаружите, что вы можете работать быстрее с плагином для создания страниц с помощью перетаскивания, чем с блочным редактором WordPress. Их существует множество, поэтому убедитесь, что вы выбрали плагин для конструктора страниц, который лучше всего подходит для ваших целей.

Установите бесплатные плагины WordPress

Когда у вас будет список необходимых плагинов, установите и активируйте их.

Для этого перейдите в Плагины > Добавить новый:

Это бесплатный репозиторий плагинов WordPress. Чтобы найти нужный плагин, просто введите его название в поле поиска.

Нажмите кнопку «Установить сейчас» для плагина, который вы хотите добавить. Кнопка изменится на синюю кнопку «Активировать». Нажмите на нее, чтобы добавить плагин и его функциональные возможности на свой сайт.

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

Установка премиум-плагинов

Если вы приобрели премиум-плагин у стороннего поставщика или на торговой площадке, это такой же процесс, как и при установке премиум-темы.

Перейдите в раздел Плагины > Добавить новый. Нажмите «Загрузить плагин».

Затем загрузите загруженные файлы. Установщик автоматически установит и активирует плагин для вас.

Настройте свои плагины WordPress

После установки плагина WordPress вы обычно получаете запрос о том, готовы ли вы приступить к работе, как это введение от Elementor:

Хотя большинство плагинов WordPress поставляются предварительно настроенными, все равно потребуется время, чтобы просмотреть каждый из недавно установленных плагинов и убедиться, что нет других параметров, которые вы хотите настроить.

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

Названия меню могут не всегда соответствовать плагинам (например, «Производительность» — это меню для плагина W3 Total Cache). И некоторые меню могут быть не на верхнем уровне, как в примерах выше.

Например, меню UpdraftPlus скрыто под Настройки:

Если вам когда-нибудь будет трудно найти меню настроек вашего плагина, перейдите на главную страницу Плагины и нажмите там кнопки настроек:

Настройки будут отличаться от плагина к плагину, так что не так уж и много.Опять же, просто не торопитесь, выполняя процедуры установки, которые вы получили от Smush:

. А также обратите внимание на любые рекомендации, которые разработчик плагина поместил на странице настроек. Эти советы помогут вам правильно настроить и оптимизировать свой плагин.

Шаг 5: Интеграция SEO

Поисковая оптимизация (SEO) — сложная задача. Поэтому я не собираюсь сегодня полностью вникать в тонкости оптимизации веб-сайта.

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

Установите плагин SEO

Необходимый вам плагин называется Yoast SEO.

Это самый популярный и загружаемый плагин SEO в WordPress. И если вы хотите, чтобы ваша поисковая оптимизация была проще для вас, это лучший плагин для этого.

Установка и настройка Yoast SEO

После установки плагина найдите новое меню SEO на боковой панели:

Откроется панель инструментов Yoast.Вам понадобится от пяти до десяти минут, чтобы выполнить настройку параметров, но мастер настройки ускорит процесс.

Нажмите на предоставленную ссылку, чтобы начать процесс.

Окружающая среда

Выберите вариант A.

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

Тип сайта

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

Организация или лицо

Обязательно заполните эту страницу. Как только вы начнете повышать узнаваемость имени (бренда), вы хотите, чтобы люди могли просматривать ваши данные, когда они ищут вас в поиске.

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

Видимость в поисковых системах

Если у вас нет частного контента, который вы не хотите, чтобы люди находили в Интернете, оставьте все из этих значений установлено значение «Да».

Несколько авторов

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

Настройки заголовка

Как правило, когда веб-страница появляется в поиске, она отображает заголовок страницы (или сообщения) и имя веб-сайта или компании после него.Например:

Но вместо того, чтобы ваши заголовки упирались в название бренда, вы можете сделать так, чтобы Yoast автоматически размещал разделитель между этими важными фрагментами данных. Дефис (-) и вертикальная черта (|) используются чаще всего, но вы можете выбрать любой из предложенных вариантов.

Другие настройки Yoast

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

Тем не менее, вы можете покопаться в подменю «Внешний вид поиска» и «Социальные сети».Здесь вы можете дополнительно настроить отображение ваших страниц и ссылок за пределами вашего веб-сайта.

Это также поможет вам сэкономить время при настройке этих деталей каждый раз, когда вы создаете новую страницу в WordPress.

Используйте плагин SEO

Почему мы попросили вас настроить плагин SEO еще до того, как у вас появился контент для оптимизации? Чтобы сэкономить ваше время.

При выполнении следующего шага вам следует использовать Yoast каждый раз, когда вы создаете новый контент.

Под каждой веб-страницей или постом в блоге, который вы создаете, вы найдете виджет Yoast SEO:

Здесь вы добавите свои поисковые данные (все, что люди увидят, когда найдут вас в Интернете).

Обязательно создавайте кастом:

  • Фокус ключевое слово — основная тема и ключевое слово поста
  • Слизняк — конкретная ссылка на страницу
  • 1 Мета описание — краткое описание который появляется под заголовком страницы в результатах поиска

Когда вы закончите, Yoast «оценит», насколько хорошо вы оптимизировали страницу для SEO.

Вы найдете советы о том, как повысить ранжирование вашего веб-сайта на вкладке SEO:

Вы найдете советы о том, как сделать вашу страницу более удобной для чтения, на вкладке Читаемость:

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

Шаг 6: Создайте свой контент

Большинство веб-сайтов содержат один и тот же базовый набор страниц:

  • Домашняя страница : Страница, которая приветствует ваших посетителей.
  • О : Страница, рассказывающая историю вашей компании.
  • Услуги/Продукты : Страница, которая знакомит посетителей с вашими услугами или продуктами (вам может понадобиться более одной страницы в зависимости от того, что вы продаете и как много контента).
  • Контактный номер : Страница, которая позволяет посетителям узнать, как связаться с нами.
  • Политика конфиденциальности : Страница, на которой объясняется, какие данные собирает ваш веб-сайт и что вы с ними делаете.

Есть и другие страницы, которые вы, возможно, захотите создать. Например:

  • Портфолио : Страница, на которой представлены образцы ваших работ.
  • Блог : Лента новостей, где появляются все сообщения или статьи вашего блога.
  • Ценообразование : страница, на которой вы указываете цены на свои услуги и, возможно, даже варианты «Купить сейчас».

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

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

Перейдите в меню «Страницы».

По умолчанию WordPress создаст для вас образец страницы и страницу конфиденциальности. Вы можете удалить пробную страницу. Держитесь за страницу конфиденциальности, так как вы можете настроить контент и опубликовать его, когда закончите со всем остальным.

Чтобы создать свою первую страницу (обычно лучше всего начать с домашней страницы), нажмите «Добавить новую».

Кстати, вы также можете перевести свой веб-сайт в режим обслуживания, который не позволит другим увидеть ваш незавершенный веб-сайт.

Это редактор блоков WordPress и связанные с ним настройки:

Вы можете использовать это для создания своих веб-страниц или использовать плагин для создания страниц. Добавление содержимого на страницу одинаково для каждого варианта.

Назовите страницу
Сначала дайте вашей странице имя.

Нажмите «Сохранить черновик», чтобы URL-адрес вашей страницы сгенерировался автоматически.(Я покажу вам, как починить домашнюю страницу, чтобы к ней не было привязано ярлыка.)

Создание дизайна и макета
Здесь у вас есть выбор: макет с нуля или использовать шаблон.

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

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

Если ваша тема не помогает, вы можете использовать плагин компоновщика страниц, чтобы добавить полностраничные или блочные шаблоны, чтобы заполнить пробелы.

Например, предположим, что вы используете Elementor, и это то, что вы видите, когда открываете новую страницу:

Чтобы заменить страницу шаблоном, щелкните папку для доступа к своим шаблонам:

Найдите шаблон, который хотите использовать, и нажмите «Вставить», чтобы добавить его на страницу:

Вот как выглядит этот конкретный пример, когда вы добавляете его на страницу:

Настроить макет
Допустим вам нравится импортированный шаблон, но вас не устраивает его расположение на странице.

Например, в приведенном выше примере вы хотите избавиться от баннера заголовка «Главная» страницы, а также от боковой панели. Вы не сможете сделать это на реальной странице, поскольку это не элементы, которые можно перетаскивать на место.

Вместо этого используйте виджет «Настройки» (значок шестеренки) в редакторе слева:

Когда вы нажимаете «Скрыть заголовок», он должен удалить строку заголовка из верхней части страницы. Однако, если вы планируете скрыть эту панель на каждой странице веб-сайта, лучше всего настроить этот параметр в настройщике темы.Таким образом, вам нужно установить его только один раз.

Чтобы лучше использовать пространство на странице, Elementor, в частности, предоставляет вам такие параметры, как «Полная ширина» и «Холст», чтобы растянуть дизайн. Поэкспериментируйте с этими настройками, чтобы найти макет и дизайн, которые лучше всего соответствуют вашим потребностям.

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

Настройка содержимого
Когда вы довольны дизайном своей страницы, вы можете настроить содержимое.Это включает в себя весь текст, а также изображения.

Чтобы сделать это в любом редакторе — редакторе блоков WordPress или плагине компоновщика страниц — просто нажмите на блок, который вы хотите настроить, и обновите его.

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

То же самое касается обновления носителя.

Независимо от того, заменяете ли вы изображение или видео своим собственным или добавляете что-то новое, у вас будет возможность загружать медиафайлы со своего устройства или выбирать из того, что уже есть в вашей библиотеке.

Добавить новый контент
Если вам кажется, что в вашем шаблоне чего-то не хватает, не беспокойтесь. Вы можете легко добавлять свои собственные блоки в готовые проекты.

В плагине компоновщика страниц найдите знак плюса в той части страницы, где вы хотите добавить новый блок:

Затем найдите тип блока, который вы хотите использовать, и перетащите его в новое пространство:

Редактор WordPress работает аналогично:

Найдите знак «плюс», чтобы добавить новый блок, или выберите его в меню «Блоки» в левом верхнем углу.Щелкните тот, который вы хотите добавить, а затем начните настройку.

Обновление настроек страницы
Вы уже видели виджет Yoast внизу страницы. Если у вас активирован этот плагин, убедитесь, что вы настроили эти параметры перед публикацией своей страницы.

Также не забудьте настроить параметры «Документ» вашей страницы здесь:

Вы можете редактировать:

  • Постоянная ссылка (ссылка на страницу) сводки ленты вашего блога и рекламные акции в социальных сетях имеют как изображение, так и описание)
  • Категории и теги (только для сообщений блога)

Когда вы закончите заполнение всех соответствующих деталей, нажмите кнопку «Предварительный просмотр», чтобы просмотреть ваш сайт в новом окне браузера.

Это дает вам возможность увидеть свою веб-страницу в режиме реального времени, прежде чем опубликовать ее (или любые изменения, которые вы внесли в существующую страницу).

Если вас это устраивает, нажмите кнопку «Опубликовать», и ваша веб-страница будет запущена.

Примечание : страница еще не будет добавлена ​​в ваше меню. Вы позаботитесь об этом, прежде чем этот процесс будет завершен.

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

Настройка домашней страницы
И последнее:

Вы хотите, чтобы ваша домашняя страница располагалась по адресу https://yourdomainname.com . Не что-то вроде https://yourdomainname.com/home .

Чтобы это исправить, перейдите в «Настройки» > «Чтение».

В разделе «Ваша домашняя страница отображается» выберите «Статическая страница»:

Теперь вы можете выбрать домашнюю страницу (и страницу блога, если вы ее создали) из списка опубликованных страниц.

Сохраните изменения. Это установит вашу домашнюю страницу в качестве главной страницы вашего веб-сайта и начнет заполнять блог любыми сообщениями, которые вы пишете.

Шаг 7. Создайте контактную форму

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

В этом руководстве показано, как создать контактную форму от начала до конца с помощью плагина Contact Form 7. Если есть другая контактная форма, на которую вы обратили внимание, прокрутите сообщение до конца, чтобы получить рекомендации.

Что касается рекомендаций по добавлению настраиваемой контактной формы в WordPress, вот некоторые вещи, о которых следует помнить:

Не скрывайте это.
Поместите форму в легкодоступное место. Ваша контактная страница, безусловно, нуждается в нем. Вы также можете добавить его на боковую панель своего блога или в нижнюю часть главной страницы.

Включайте только необходимые поля.
Поскольку в наши дни все так хорошо осведомлены о проблемах конфиденциальности в Интернете, вы не хотите запрашивать информацию, которая не имеет отношения к вашим целям.

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

Человек, заполнивший форму, получит сообщение с подтверждением. Обычно он появляется вместо формы после ее отправки.

По умолчанию ваша форма будет отправлять предварительно написанные сообщения пользователю:

Не стесняйтесь придавать этому индивидуальность, настраивая свои сообщения.

Не забывайте о сообщении, которое вы получите в ответ.Ваше письмо будет отправлено по электронной почте:

Строка темы вроде «Ваше доменное имя «[Тема пользователя]» не очень хороша, и это может отправить ваши электронные письма с контактной формой прямо в спам. Если вы хотите получать эти отправления контактной формы в обязательном порядке, настройте детали в строке темы, а также в теле сообщения.

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

Шаг 8: Добавление виджетов

Когда вы ранее работали с настройками настройщика, вы, возможно, заметили, что там был раздел для «Нижний колонтитул» или «Виджеты».

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

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

Хотя вы можете вернуться к настройке для настройки нижнего колонтитула, лучше всего выполнить всю работу в разделе «Внешний вид» > «Виджеты»:

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

В левой части экрана находятся доступные виджеты:

В правой части экрана находятся доступные места размещения виджетов:

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

Просмотрите любой виджет, установленный в данный момент. Если вы счастливы, оставьте их там, где они есть.

Если вы хотите настроить порядок их отображения — например, переместить список последних сообщений над строкой поиска — просто перетащите блок виджетов в нужное место.

И если вы хотите настроить содержимое виджета, нажмите на блок:

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

Теперь вам не нужно заполнять какие-либо из этих виджетов, если вы этого не хотите. Однако, если вы хотите воспользоваться этим дополнительным пространством, которое дает вам WordPress, позаботьтесь о заполнении всех ваших виджетов, прежде чем двигаться дальше.

Шаг 9. Настройка меню

Теперь, когда весь ваш контент на месте, вам просто нужно создать навигационное меню, чтобы показать его.

Вы найдете это в разделе Внешний вид > Меню:

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

Назовите меню

Нет необходимости усложнять это, так как вы единственный, кто увидит название меню. Просто назовите его как-то вроде «Главное меню».

Затем нажмите «Создать меню».

Выберите расположение меню

Затем укажите, куда вы хотите переместить меню.

Если вы создаете меню для нижнего колонтитула (что бывает редко) или другое меню для мобильных устройств (которое вы, возможно, решите сделать позже), вы настроите это здесь.Пока просто выберите «Главное».

Не устанавливайте флажок «Автоматически добавлять новые страницы верхнего уровня в это меню». Даже если вы автоматизируете эту часть, вам все равно придется вернуться на эту страницу, чтобы обновить заказ. С таким же успехом можно подождать, чтобы разместить страницу в меню, когда вы сможете выбрать для нее подходящее место.

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

Чтобы добавить свои страницы в меню, установите флажки рядом с ними. Затем нажмите «Добавить в меню».

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

Ваши страницы переместятся сюда:

Чтобы изменить порядок их появления, перетащите их на место:

Если вы хотите, чтобы все ваши страницы отображались на верхнем уровне навигации , убедитесь, что они выровнены по левому краю. Чтобы создать подстраницы для страниц верхнего уровня, поместите их ниже с отступом, подобным этому:

Настройка меню и страниц

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

Вы можете:

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

В большинстве случаев вам, вероятно, не потребуется настраивать эти параметры. Тем не менее, хорошо знать, что они здесь на случай, если вы это сделаете. Здесь же вы можете удалить страницы из своего меню.

Шаг 10. Подключитесь к Google

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

Настройка Google Analytics

С подключением к Google Analytics или без него Google и другие поисковые системы по-прежнему смогут сканировать и индексировать ваш веб-сайт. Таким образом, вы получаете возможность видеть, какие данные Google собрал с вашего веб-сайта в отношении трафика и производительности.

В этом руководстве вы узнаете, как создать учетную запись Google Analytics, а затем подключить ее к своему веб-сайту. Вы можете сделать это с помощью плагина WordPress или вручную с помощью кода.

Когда Google Analytics будет готов к работе, вы сможете отслеживать модели трафика вашего веб-сайта и принимать решения на основе данных о будущем дизайне, содержании, целях и т. д. вашего веб-сайта.

Это не единственный инструмент Google, к которому должен быть подключен ваш сайт.

Настройка Google Search Console

Google Analytics предоставляет вам данные о том, как посетители взаимодействуют с вашим сайтом. Консоль поиска Google, с другой стороны, предоставляет вам данные о том, как посетители встречают ваш сайт в других местах в Интернете.

Если у вас уже есть учетная запись Google Analytics, настроить Search Console несложно.
Следующим шагом будет подключение Google Search Console.

Перейдите на веб-сайт Search Console и нажмите «Начать сейчас». Он проведет вас через процесс быстрой настройки и попросит вас подтвердить право собственности на учетную запись, используя ряд вариантов. Google Analytics — один из самых простых способов сделать это, поэтому выберите этот вариант, если хотите.

Также важно установить это соединение со стороны Google Analytics.Вы найдете этот параметр в разделе «Администратор» > «Ресурс» > «Настройки свойства»:

. Вы должны увидеть свою учетную запись Search Console в списке в качестве опции. Выберите его и подключите к Google Analytics, чтобы вы могли начать извлекать некоторые из этих поисковых данных в своем отчете об источниках трафика:

Или вы всегда можете просто войти в саму консоль поиска Google, чтобы получить более глубокое представление о том, что происходит с вашим сайтом. в поиске:

Вы можете узнать такие вещи, как:

  • Сколько кликов и просмотров ваш веб-сайт и каждая отдельная страница получают в Google — при поиске в Интернете, изображениях и видео.
  • Сколько кликов и просмотров совершают пользователи компьютеров, планшетов и мобильных устройств.
  • Средний рейтинг страниц вашего сайта.
  • Самые популярные поисковые запросы для вашего сайта.
  • Какие проблемы с удобством использования мобильных устройств, безопасностью или скоростью возникают на вашем веб-сайте (если таковые имеются).
  • Какие веб-сайты имеют наибольшее количество ссылок, указывающих на ваш веб-сайт.
  • Насколько хорошо вы обрабатываете внутренние ссылки на своем собственном сайте.

Если вы потратите некоторое время на знакомство с Google Search Console, вы сможете усовершенствовать свою стратегию поисковой оптимизации в WordPress (и не только) для лучшего отображения в результатах поиска.

Отправка файлов Sitemap в Google

Последнее, что нужно сделать с Google Search Console, — это загрузить файлы Sitemap. Таким образом, вы можете создать прямую связь между WordPress и Google, сообщая Google, где найти контент на вашем сайте.

Одна из приятных особенностей использования плагина Yoast SEO заключается в том, что ваши XML-карты сайта генерируются автоматически. Вы можете найти ссылку на них в разделе «Общие» > «Функции»:

Нажмите на вопросительный знак, чтобы получить ссылку на ваши карты сайта.Теперь вы можете вернуться в Google Search Console.

Откройте вкладку «Карты сайта»:

Для каждой ссылки на карту сайта, полученной с вашего веб-сайта WordPress, введите ее в поле «Добавить новую карту сайта». Затем Google Search Console обработает карту сайта и все ссылки на страницы в ней. В следующий раз, когда боты Google начнут сканировать Интернет, страницы вашего сайта будут выбраны.

Поскольку ваша карта сайта автоматически обновляется всякий раз, когда вы добавляете новый контент на свой сайт, вам не придется беспокоиться о том, что Google пропустит важные обновления, поскольку теперь у него есть ваша карта сайта в Search Console.

Резюме

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

Итог: Если вы собираетесь использовать WordPress, воспользуйтесь всеми его возможностями.С помощью этой системы управления контентом вы можете сделать так много, чтобы создать уникальный и мощный веб-сайт, о котором вы всегда мечтали.


Предыдущая глава: Как создать сайт
Следующая глава: Как использовать редактор WordPress
Следующая глава: 25 лучших бесплатных плагинов для вашего сайта WordPressРеклама

Как отредактировать сайт Google и настроить свой сайт

Google Sites — это бесплатный инструмент для создания собственного веб-сайта без помощи разработчика.

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

Сайты Google являются базовыми, но их можно настраивать. Вы можете загружать изображения, добавлять ссылки, текст и базовый HTML-код, если знаете, как программировать.

После того как вы создали сайт Google, редактирование становится полностью интуитивно понятным. Если вы работали с документом Microsoft Word или использовали Google Slides, его интерфейс должен быть вам знаком.

Не нужно быть волшебником, чтобы сделать что-то простое и функциональное.

Как редактировать сайт Google

Создав веб-сайт, вы можете начать экспериментировать с различными функциями.

В верхней правой части страницы редактирования вы увидите три вкладки: «Вставка», «Страницы» и «Темы».

Параметры в разделе «Вставка» позволяют добавлять изображения, текст, ссылки и многое другое. Pages позволяет вам добавить несколько веб-страниц на ваш сайт помимо главной страницы.Темы позволяют изменить общий вид сайта. Вы можете выбрать из ограниченного числа цветов и шрифтов.

Как использовать вкладку «Вставка»

Вкладка «Вставка» обеспечивает наиболее детальные методы редактирования.

Используйте вкладку «Вставка», чтобы добавить важные элементы на свой сайт.Вивиан МакКолл/Business Insider

В правом верхнем углу вы увидите кнопки для добавления текстового поля, изображения, встроенной ссылки или документа с вашего Google Диска.

Прокрутив вниз, вы увидите различные варианты раскладки.

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

Коснитесь значка корзины слева, чтобы удалить макет. Нажмите кнопку палитры, чтобы настроить фон.

Вы можете настроить выбранный макет, щелкнув значок палитры на левой боковой панели.Вивиан МакКолл/Business Insider

Щелкните любое текстовое поле, чтобы добавить текст. Когда вы выбрали текстовое поле, вы можете выделить его полужирным шрифтом, курсивом или изменить стиль текста с заголовка на заголовок и основной текст. Чтобы изменить шрифт, перейдите на вкладку «Темы».

Любой фон можно заменить изображением.

Выберите изображение из серии изображений по умолчанию из Гугл Диск , или с вашего компьютера.Выберите «Изменить изображение», чтобы выбрать изображение, которое вы хотите добавить. Кроме того, нажмите любой значок плюса в пустом поле для фотографий, чтобы добавить изображение.

Вы можете добавить изображение в текстовое поле, щелкнув значок плюса «+».Вивиан МакКолл/Business Insider

Под макетами вы увидите варианты добавления видео YouTube, карусели изображений, календаря, Google Maps и многого другого. Вы также можете добавлять элементы из Google Docs, Google Sheets и Google Slides прямо со своего Диска.

Заполнители резервируют место для видео YouTube, изображений, карт и календарей. Кнопки становятся интерактивными ссылками.Разделители разбивают секции.

Как использовать вкладку Страницы

Эта вкладка позволяет добавлять отдельные страницы на ваш сайт. Отредактируйте более мелкие детали с помощью параметров на вкладке «Вставка».

Чтобы добавить новые страницы на свой сайт, нажмите значок плюса «+» в нижней части вкладки «Страницы».Вивиан МакКолл/Business Insider

Как использовать вкладку «Темы»

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

Выберите тему из доступных вариантов на вкладке «Темы».Вивиан МакКолл/Business Insider

Как настроить веб-сайт WordPress [Руководство для начинающих]

Вам интересно, как настроить WordPress? WordPress — самая популярная платформа для создания веб-сайтов и блогов. Одна из причин, по которой WordPress так популярен, заключается в бесконечных возможностях настройки с использованием тем, плагинов и многого другого.Настроить свой веб-сайт WordPress также не сложно, даже новички, которые ничего не знают о коде, могут это сделать.

Поскольку эта статья очень длинная, используйте это оглавление в качестве руководства.

  1. Настройка WordPress: начало работы
  2. Как настроить тему WordPress и страницы сайта
  3. Настройка WordPress для повышения SEO
  4. Настройте WordPress для повышения вовлеченности и потенциальных клиентов
  5. Протестируйте свой сайт WordPress

1.Настройка WordPress: начало работы

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

Кроме того, настройка WordPress не только сделает ваш сайт таким, как вы хотите, но и поможет:

  • Сделайте свой сайт WordPress более безопасным
  • Оптимизируйте свой сайт для поисковых систем
  • Упростите управление своим сайтом
  • Улучшите взаимодействие с посетителями вашего сайта

К счастью, WordPress очень удобен в настройке.Итак, давайте начнем с этого пошагового руководства по настройке вашего веб-сайта WordPress.

1.1. Установите плагин резервного копирования WordPress

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

Если с вашим сайтом случится что-то плохое, резервная копия сэкономит вам массу времени, денег и головной боли. Как говорится, самая дорогая резервная копия — это та, которую вы никогда не делали!

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

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

Одним из наших лучших плагинов для резервного копирования является UpdraftPlus.

UpdraftPlus — популярное решение для резервного копирования, которому доверяют более 2 миллионов веб-сайтов WordPress. Это удобное решение позволяет выполнять резервное копирование и восстановление одним щелчком мыши по удобному для вас расписанию, будь то каждые 4, 8 или 12 часов, ежедневно, еженедельно и т. д.

UpdraftPlus выполняет резервное копирование всего на вашем веб-сайте, включая все ваши файлы WordPress, базы данных, плагины и темы. Кроме того, UpdraftPlus поддерживает многочисленные варианты удаленного хранения, такие как Google Drive, Dropbox, Amazon S3 и другие.

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

Начните работу с UpdraftPlus уже сегодня.

Некоторые из наших других лучших рекомендаций для лучших плагинов для резервного копирования WordPress включают BackupBuddy и VaultPress.

2. Настройте свою тему WordPress

2.1. Настройка темы с помощью плагинов

Поскольку ваши возможности настройки несколько ограничены в зависимости от выбранной вами темы WordPress, полезно использовать плагин, чтобы еще больше повысить эффективность настройки WordPress.

Первый плагин, который мы рекомендуем, это SeedProd. SeedProd — один из лучших конструкторов страниц WordPress с перетаскиванием на рынке.

SeedProd работает с любой темой WordPress и дает вам полный контроль над содержимым и настройкой вашего сайта. Это позволяет очень легко спроектировать ваш веб-сайт именно так, как вы хотите, без необходимости касаться строки кода, используя их конструктор перетаскивания.

Они предлагают множество великолепных готовых шаблонов, которые вы можете использовать. Просто замените изображения и текст своими и нажмите «Опубликовать». Кроме того, позиционировать текст и изображение с помощью редактора WordPress сложно, но с SeedProd вы можете сделать это легко.Просто перетащите готовые блоки, такие как текст, изображения, видео, обратный отсчет, отзывы, таблицы с ценами и т. д., и поместите их на место.

С помощью этого плагина у вас будет полный контроль над макетом и внешним видом вашего сайта, поэтому вы сможете настраивать WordPress без каких-либо ограничений.

Начните работу с SeedProd уже сегодня.

Другим инструментом настройки WordPress, который мы рекомендуем, является CSS Hero. CSS Hero — еще один из лучших плагинов для простой настройки внешнего вида вашего сайта.

CSS Hero имеет простой и интуитивно понятный интерфейс, который позволяет мгновенно изменить внешний вид вашего сайта WordPress. Кроме того, это происходит в прямом эфире, поэтому вы можете видеть изменения по мере их внесения.

Этот инструмент работает без изменения каких-либо файлов вашей темы, поэтому вам не нужно беспокоиться о том, чтобы что-то сломать, а сложный CSS упрощается, просто указывая и щелкая.

Вы можете легко добавлять анимацию прокрутки, настраивать меры, управлять цветами, выбирать типографику, добавлять изображения из UnSplash и многое другое.

Начните работу с CSS Hero сегодня.

Теперь давайте посмотрим, как настроить тему без использования плагина.

Конечно, одним из преимуществ использования WordPress является возможность настраивать свой блог или веб-сайт WordPress с помощью тем. Тема WordPress может мгновенно придать вашему сайту профессиональный вид. Но самое лучшее в темах WordPress — это то, что вы можете дополнительно настроить их, чтобы создать собственный веб-сайт.

После того, как вы выбрали тему WordPress, в панели администратора WordPress перейдите к Appearance , затем нажмите Customize .

Здесь можно настроить темы WordPress несколькими способами, поэтому давайте рассмотрим некоторые из них.

2.2. Настройка без плагина — пользовательский заголовок

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

Для этого перейдите в Внешний вид , затем Заголовок .В зависимости от выбранной вами темы WordPress у вас могут быть разные варианты заголовка. Например, в приведенной ниже теме WordPress вы можете выбрать заголовок видео или заголовок изображения. Чтобы изменить изображение для шапки, просто нажмите «Изменить изображение» и выберите изображение высокого качества из своей медиатеки или загрузите его со своего компьютера.

Важно также убедиться, что изображение заголовка имеет правильный размер. Когда вы выбираете новое изображение заголовка, WordPress предложит вам рекомендуемые размеры изображения, чтобы убедиться, что ваше изображение лучше всего смотрится с темой.К счастью, изменение размера изображения легко исправить. Просто нажмите Select and Crop .

Появится новое окно, в котором вы можете обрезать изображение так, как вам нравится, и нажмите кнопку «Обрезать изображение», чтобы завершить процесс. Теперь желаемое изображение идеально подходит для вашего заголовка.

Не забудьте нажать кнопку Publish , когда закончите, чтобы сохранить изменения.

2.3. Выберите свой логотип и фавикон

Далее вы можете выбрать свой логотип и фавикон (или иконку сайта).Это позволит вам дополнительно настроить свой сайт WordPress с помощью личного бренда или бренда компании.

Перейдите к Appearance , затем Customize и щелкните раздел Site Identity . Здесь вы можете загрузить свой логотип, а также выбрать название сайта и слоган.

Под разделом «Логотип» находится раздел «Значок сайта». Значок сайта — это крошечное изображение, которое вы видите на вкладках браузера, панелях закладок и в мобильных приложениях WordPress.Как правило, это уменьшенная версия логотипа. Вы можете загрузить значок своего сайта здесь, чтобы его было легко идентифицировать.

2.4. Виджеты

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

Чтобы добавить виджет, перейдите в раздел Настройка и нажмите Виджеты .Затем щелкните область, в которую вы хотите добавить веб-сайт, затем нажмите кнопку «Добавить виджет ».

Существует множество различных виджетов, которые вы можете добавить на свой сайт, в том числе:

  • Архивы
  • Аудио
  • Календарь
  • Категории
  • Галерея
  • Последние сообщения
  • Форма поиска
  • и многое другое

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

2.5. Настройте свой профиль пользователя

Особенно важно для блоггеров настроить свой профиль пользователя в WordPress. Настраивая свой блог WordPress с профилем пользователя, каждый раз, когда посетитель читает один из ваших постов, он может узнать, кто вы. Это ключ к построению отношений с вашими читателями и посетителями сайта.

Чтобы настроить свой профиль пользователя, в панели администратора WordPress перейдите к Users , затем нажмите Your Profile .Здесь вы можете установить свои предпочтения цветовой схемы, свое имя, псевдоним, то, как вы хотите, чтобы ваше имя отображалось публично, и так далее. Вы также можете написать немного о себе в области биографической информации и установить фотографию своего профиля с помощью Gravatar. Нажмите кнопку Обновить профиль , чтобы сохранить изменения.

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

2.6. Создайте свои страницы WordPress

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

  • Дом
  • О
  • Услуги/продукты
  • Портфолио
  • Отзывы клиентов
  • Архив контента/Блог
  • Контакт
  • Часто задаваемые вопросы/Поддержка

Решите, какие страницы вам нужны для вашего сайта WordPress, и начните их создавать.Чтобы создать страницу, перейдите на Страницы и нажмите кнопку Добавить новую . Откроется новая страница. Здесь вы можете назвать свою страницу, добавить весь контент для страницы и нажать Опубликовать , когда вы закончите создание страницы и будете довольны тем, как она выглядит.

Вы также захотите установить домашнюю страницу. Как правило, WordPress по умолчанию устанавливает вашу домашнюю страницу для отображения ваших последних сообщений. Что может быть хорошо, если вы блоггер, но многие владельцы веб-сайтов предпочли бы настоящую домашнюю страницу.Итак, чтобы установить домашнюю страницу, на панели управления WordPress перейдите к Appearance , затем Customize . В этом меню выберите Настройки домашней страницы . Здесь вы можете выбрать вариант отображения вашей домашней страницы в качестве статической страницы, а затем из раскрывающегося списка в разделе «Домашняя страница» выберите созданную вами страницу, которую вы хотите сделать своей домашней страницей.

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

2.7. Настройка структуры меню

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

Итак, вам нужно настроить собственную структуру меню.

Для этого в панели администратора WordPress перейдите на Внешний вид , затем Меню .Здесь, слева, вы увидите список всех страниц, которые вы опубликовали на своем веб-сайте WordPress. Сначала выберите имя для своего меню и нажмите кнопку Создать меню . Затем просто отметьте страницы, которые хотите добавить в меню, и нажмите кнопку Добавить в меню .

Ваши страницы появятся в правой части экрана под созданным вами меню. Теперь вы можете перетаскивать страницы, чтобы расположить их в нужном вам порядке.

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

По завершении нажмите кнопку «Сохранить меню», чтобы сохранить изменения.

3. Настройте WordPress для повышения SEO

3.1. Убедитесь, что ваш сайт виден Google

Первый шаг к настройке вашего сайта WordPress — убедиться, что ваш сайт виден Google.В конце концов, вы потратили время на создание своего веб-сайта и хотите, чтобы его могли найти пользователи в Интернете.

Поскольку Google является основным источником трафика и посетителей для веб-сайтов, вы хотите, чтобы ваш веб-сайт был включен в список Google как можно скорее. Если ваш сайт не отображается в Google, ваш сайт не будет ранжироваться в результатах поиска.

Чтобы Google добавил ваш веб-сайт в список, в панели администратора WordPress перейдите к Настройки . Затем перейдите к разделу Reading и Search Engine Visibility .

Убедитесь, что этот флажок снят , чтобы поисковые системы могли индексировать ваш веб-сайт.

3.2. Повысьте SEO с помощью SEO-плагина

Для дальнейшего повышения SEO вашего веб-сайта WordPress вам необходимо использовать плагин SEO. Есть ряд отличных SEO-плагинов WordPress, которые помогут:

  • Увеличение органического трафика на ваш сайт
  • Обнаружение уязвимостей на вашем сайте, которые могут повредить вашему поисковому рейтингу
  • Оптимизируйте и улучшайте свои кампании
  • Ускорить общий процесс SEO

Самый популярный SEO-плагин для WordPress — All in One SEO.

All in One SEO позволяет легко оптимизировать ваш сайт WordPress для повышения рейтинга в поисковых системах.

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

А с помощью анализа на странице вы можете писать оптимизированный для SEO контент и оптимизировать его для поисковых систем перед публикацией.

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

Начните работу с All-in-One SEO уже сегодня.

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

Этот инструмент SEO может похвастаться такими функциями, как инструмент ключевых слов PPC, проверка SEO на странице, инструменты аудита обратных ссылок, анализатор контента, инструменты исследования рекламы и многое другое.

Начните работу с SEMrush сегодня.

3.3. Улучшите SEO с помощью описательных URL-адресов

Еще одна настройка WordPress, которая поможет улучшить SEO, — это настройка правильной структуры постоянных ссылок. Постоянная ссылка — это веб-адрес, используемый для ссылки на ваш контент. Вы захотите установить описательные URL-адреса для своих сообщений и страниц, чтобы повысить SEO, а также сделать их более приятными и понятными для посетителей вашего сайта.

WordPress предлагает несколько вариантов постоянных ссылок, включая простые, числовые и т. д., но не все из этих вариантов оптимизированы для SEO.Итак, перейдите на панель администратора WordPress, Settings , а затем Permalinks . Здесь вы можете выбрать опцию Post name .

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

4. Оптимизируйте свой сайт для лидов и конверсий

Если вы продаете что-либо на своем веб-сайте WordPress или у вас есть блог, и вам нужно создать свой список адресов электронной почты, вы также захотите настроить WordPress для лидов и конверсий.Вы можете легко оптимизировать свой сайт для привлечения потенциальных клиентов и конверсий с помощью нескольких плагинов, таких как OptinMonster.

4.1. Отслеживайте трафик своего веб-сайта с помощью Analytics

Отслеживание трафика вашего веб-сайта — это один из первых шагов, которые вам нужно сделать, если вы хотите получать потенциальных клиентов и конверсии.

Отслеживая свой трафик, вы можете выяснить, сколько посетителей получает ваш сайт, откуда они приходят, как долго они остаются на вашем сайте и многое другое.

Google Analytics — это самый популярный инструмент для мониторинга трафика вашего веб-сайта, который можно использовать бесплатно.Но интегрировать Google Analytics с вашим сайтом WordPress довольно сложно. Кроме того, с помощью Google Analytics вы не можете анализировать трафик своего сайта с панели управления WordPress.

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

MonsterInsights — одно из лучших решений для аналитики WordPress на рынке. Этот удобный плагин позволяет вам подключить ваш сайт WordPress к Google Analytics всего за несколько кликов, чтобы легко отслеживать всю статистику вашего сайта в режиме реального времени.

С помощью MonsterInsights вы можете отслеживать такие показатели, как:

  • Самые популярные страницы и записи на вашем сайте
  • Самые популярные сайты рефералов, которые ссылаются на ваш сайт
  • Топ исходящих ссылок с вашего сайта
  • Просмотры форм, отправки и конверсии с отслеживанием форм
  • Продажи в магазинах WooCommerce, Easy Digital Downloads и MemberPress
  • И многое другое

Начните работу с MonsterInsights сегодня.

4.2. Создайте привлекательную форму с помощью WPForms

На рынке существует множество плагинов для создания форм WordPress, но WPForms является самым популярным и удобным для пользователя. С WPForms вы можете создавать формы для своего веб-сайта за считанные минуты, используя их конструктор перетаскивания — не нужно иметь дело с каким-либо кодом.

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

Кроме того, WPForms может похвастаться многими другими интересными функциями, такими как интеллектуальная условная логика, загрузка файлов, регистрация пользователей, интеграция платежей с PayPal, Stripe и т. д., интеграция службы почтового маркетинга, диалоговые формы и многое другое.

Начните работу с WPforms сегодня.

4.3. Увеличивайте число потенциальных клиентов с OptinMonster

Далее, мы рекомендуем использовать OptinMonster, чтобы увеличить количество лидов и конверсий. OptinMonster на сегодняшний день является одним из лучших плагинов для лидогенерации.

С OptinMonster вы можете быстро создавать привлекательные всплывающие окна для своего сайта, используя конструктор перетаскивания. Он также поставляется с высокоэффективными готовыми шаблонами, которые, как доказано, превращают посетителей вашего сайта в потенциальных клиентов и клиентов.

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

Начните работу с OptinMonster сегодня.

4.4. Подключите свой сайт к социальным сетям

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

К счастью, вы можете легко подключить свой сайт к социальным сетям и настроить WordPress с помощью плагинов для социальных сетей.

Существует множество отличных плагинов для социальных сетей WordPress, поэтому мы рекомендуем несколько наших любимых. Во-первых, это общие счетчики.

Shared Counts — это плагин для социальных сетей, который быстро извлекает, кэширует и отображает различные счетчики обмена в социальных сетях с помощью SharedCount.ком API. Таким образом, на всем контенте вашего веб-сайта вы можете отображать, сколько раз он был опубликован в социальных сетях, что побуждает ваших новых посетителей также делиться вашим контентом.

Вы можете получить кнопки для Facebook, Twitter, Pinterest, Yummly и других.

Кроме того, этот плагин создан с учетом производительности сайта, поэтому он не замедлит работу вашего сайта.

Еще одна из наших рекомендаций — Monarch.

Monarch — это премиальный плагин для обмена в социальных сетях, разработанный командой Elegant Themes.С Monarch вы можете выбирать из более чем 20 социальных сетей, включая Pinterest, Twitter, Reddit и многие другие.

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

Начните работу с Monarch уже сегодня.

5. Протестируйте свой сайт WordPress

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

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

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

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

Вы также должны проверить скорость своего сайта. После настройки вашего сайта WordPress с большим количеством изображений, анимации, видео или плагинов вы действительно можете замедлить работу вашего сайта.Скорость вашего сайта важна для вашего SEO и для пользовательского опыта. Итак, вам нужно убедиться, что ваш сайт работает быстро.

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

Введите URL своего веб-сайта и нажмите кнопку АНАЛИЗ ВЕБ-САЙТА . Инструмент оценит скорость вашего сайта, а также даст ваши предложения о том, как улучшить вашу скорость.

Мы надеемся, что вам понравилась эта статья о том, как настроить WordPress, и что вскоре вы сможете настроить свой партнерский магазин Amazon, или любой веб-сайт будет создан специально для ваших нужд.Если вам понравилась эта статья, ознакомьтесь с нашим постом о необходимых плагинах WordPress для бизнес-сайтов.

Как создать веб-сайт 2022

Вариант 1. Используйте конструктор веб-сайтов

Как создать веб-сайт за 9 шагов

  1. Выберите подходящий для вас конструктор веб-сайтов.
  2. Подпишитесь на план, который соответствует вашим потребностям и бюджету.
  3. Выберите уникальное и релевантное доменное имя.
  4. Выберите шаблон дизайна, который вам нравится.
  5. Настройте свой дизайн шаблона.
  6. Загружайте и форматируйте собственный контент.
  7. Выберите и загрузите приложения.
  8. Предварительный просмотр и тестирование вашего веб-сайта.
  9. Опубликуйте свой веб-сайт в Интернете.

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

Огромное количество людей используют конструкторы сайтов для создания сайтов. Только у Wix более 100 миллионов подписчиков, а Shopify недавно перевалило за 1,2 миллиона.

Почему это? Создатели веб-сайтов означают, что любой может создать веб-сайт, независимо от технических навыков. На заре Интернета для создания веб-сайта требовалось понимание HTML (языка гипертекстовой разметки). Затем появились CSS (каскадные таблицы стилей), которые еще больше запутали.

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

Хотите заработать в Интернете?

Конструкторы веб-сайтов позволяют легко создавать интернет-магазины. Для более крупных амбиций в области электронной коммерции мы рекомендуем платформу для электронной коммерции, такую ​​​​как Shopify или BigCommerce, которая имеет лучшие инструменты для развития вашего бизнеса. Если вы просто хотите продать несколько продуктов, вы можете выбрать «общий» веб-сайт, такой как Wix, который имеет функции электронной коммерции.Взгляните на нашу сравнительную таблицу конструкторов интернет-магазинов, чтобы найти идеальное решение.

Это означает, что выбор правильного конструктора сайтов очень важен. Разные строители служат разным потребностям. Чтобы создать веб-сайт, которым вы будете довольны, необходимо двигаться вперед с правильным.

Какой конструктор сайтов выбрать?

Как лучше всего создать веб-сайт? Какой конструктор сайтов мне следует использовать? Какой самый простой способ создать сайт? Эти вопросы нам задают каждый день.Так много вопросов и так много строителей. Мы понимаем, это тяжело.

Вот почему мы провели тщательное исследование. Личный опыт работы с конструкторами веб-сайтов — это хорошо (и у нас его много), но мы тестируем конструкторы с людьми , такими же, как и вы. Поэтому, когда вы создаете свой собственный веб-сайт, вы можете быть уверены, что мы вас обеспечим.

Наша команда проводит тестирование и интервью с пользователями, а также отслеживает сотни функций в десятках продуктов, чтобы предоставить вам общее представление о рынке.Мы хотим, чтобы вы нашли строителей, которые соответствуют вашим потребностям. Имея это в виду, вот краткий обзор лучших конструкторов для создания веб-сайтов на сегодняшний день.

Wix и Weebly — два самых популярных конструктора на рынке, с их интуитивно понятными функциями перетаскивания, которые превращают веб-дизайн в детскую игру. Squarespace — это мечта для креативщиков, а Site123 идеально подходит для небольших веб-сайтов и предлагает великолепную поддержку в чате.

Лучший совет! Поскольку большинство разработчиков предлагают либо бесплатную пробную версию, либо в любом случае являются бесплатными конструкторами веб-сайтов, можно легко попробовать один из них, прежде чем перейти на платный план.
Хотите увидеть этих строителей бок о бок?

В нашей подробной сравнительной таблице представлены все лучшие конструкторы веб-сайтов, их функции, цены, рейтинги и многое другое.

Хотите знать, что все это на самом деле означает? Не волнуйтесь, у нас есть небольшая разбивка ниже — просто нажмите «+», чтобы узнать больше о каждом критерии. Чтобы узнать о нашем исследовании более подробно, посетите нашу страницу методологии.

Простота использования

Насколько прост в освоении и использовании конструктор.Это определяется с помощью пользовательского тестирования, когда участникам дается ряд задач и предлагается оценить, насколько легко (или сложно) они их нашли. Многим нашим пользователям нужен самый простой способ сделать веб-сайт возможным.

Соотношение цены и качества

Баланс между ценой и функциями. Никто не хочет платить через нос, но самое дешевое тоже не всегда лучшее. Мы оцениваем тарифные планы с учетом функций, чтобы найти лучшее из обоих миров при создании веб-сайта.

Гибкость дизайна

Насколько эстетичен, соответствует требованиям отрасли, удобен и современен каждый выбор шаблона.Мы сделали это, проконсультировавшись с экспертами по дизайну и проверив, насколько хорошо шаблоны работают на различных устройствах.

Особенности

На что способен конструктор. Мы смотрим не только на то, что они могут сделать, но и на то, как хорошо они могут это сделать. Ведение блогов, электронная коммерция, поисковая оптимизация и многое другое. Чем больше может сделать конструктор сайтов, тем больше вы можете с ним сделать.

Помощь и поддержка

Мы оцениваем, насколько сильна помощь и поддержка каждого строителя, принимая во внимание все, от центров знаний до живого чата.Это особенно важно при открытии собственного сайта.

Оценка клиента

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

Чтобы было ясно, перечисленные выше строители не единственные, заслуживающие внимания. Отнюдь не. В целом они работают лучше всего в нашем исследовании, но, опять же, все зависит от ваших потребностей. WordPress.com , например, является превосходным конструктором веб-сайтов для ведения блога, а Shopify лидирует в области электронной коммерции.

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

Какую платформу следует использовать для создания веб-сайта? Узнайте с помощью нашего теста из 4 вопросов!

Пройдите тест
Протестируйте свой конструктор сайтов

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


2: Подпишитесь на план, который соответствует вашим потребностям и бюджету

После того, как вы выбрали конструктор веб-сайтов, пришло время найти свой тарифный план. Если вам нужен простой сайт (скажем, для портфолио или небольшого бизнеса в сфере услуг), более дешевые планы, вероятно, будут работать отлично. Если вам нужно что-то более сложное, ознакомьтесь с функциями, предлагаемыми в более дорогих планах.Если вы сомневаетесь, начните с дешевого и обновите позже.

 

После того, как вы остановились на конструкторе веб-сайтов, вам необходимо подписаться на тарифный план. Разработчики веб-сайтов, как правило, предлагают несколько планов. У разных сайтов разные потребности, и планы гарантируют, что вы не будете платить за то, что вам не нужно.

Полезно знать: Планы конструктора веб-сайтов различаются по цене, но обычно они стоят от 8 до 40 долларов в месяц, что включает в себя цену «все включено». Если у вас ограниченный бюджет, либо придерживайтесь бесплатного плана (хотя у него есть свои недостатки, о которых мы скоро поговорим), либо ознакомьтесь с нашим обзором самых дешевых планов.

Это огромный плюс конструкторов сайтов по сравнению с веб-разработчиками. Веб-разработчик может стоить от 300 до 1000 долларов только за настройку шаблона, а полностью настроенный веб-сайт, созданный с нуля, часто стоит тысячи. Тем временем создание собственного веб-сайта с помощью конструктора позволяет вам получить полностью функционирующий веб-сайт и работать по цене меньше, чем цена кофе.

Какой план вы выберете, зависит от ваших потребностей. Вы делаете сайт для портфолио, чтобы продемонстрировать свои работы? План Wix Combo стоимостью 13 долларов в месяц, вероятно, подойдет.Хотите создать веб-сайт для своего бизнеса, который будет привлекать тысячи посетителей и иметь несколько учетных записей сотрудников? Тогда VIP-план стоимостью 25 долларов в месяц может подойти лучше.

Лучший совет!

Если вы хотите продавать несколько товаров на веб-сайте своей компании, почему бы не использовать ссылки Square Online Checkout? Эти ссылки для оформления заказа позволяют вам безопасно принимать платежи через ваш веб-сайт без необходимости подписываться на план электронной коммерции. Однако, если вы хотите продавать более 5 продуктов, мы рекомендуем специализированного конструктора сайтов электронной коммерции.

Будьте уверены, у каждого есть план. Если вы сомневаетесь, начните с малого и увеличивайте масштаб.

Какой план лучше для вас?

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

Будьте уверены, у каждого есть план. Если вы сомневаетесь, начните с малого и увеличивайте масштаб.

Можно ли сделать сайт бесплатно?

Вы можете сделать сайт бесплатно, но есть загвоздки.Бесплатные учетные записи на конструкторах веб-сайтов содержат множество важных функций. Вы не можете использовать собственные домены, и на вашем бесплатном сайте будет реклама этого конструктора сайтов. Если вы хотите узнать больше о создании веб-сайтов, стоит обратить внимание на бесплатные варианты. Однако, если вам нужен профессиональный, многофункциональный веб-сайт, вам придется платить как минимум несколько долларов в месяц.

Узнайте, что вы можете получить, просто подписавшись на самые простые премиальные планы конструктора веб-сайтов:

*Squarespace — единственный конструктор, у которого нет бесплатного плана, поэтому для получения функций вам придется заплатить скромную сумму. Ежемесячная плата.Однако он предлагает 14-дневную бесплатную пробную версию , чтобы вы могли попробовать ее перед покупкой.

Используйте код предложения «WBE» при оформлении заказа, чтобы получить скидку 10%

Получите скидку 10% на любой план Squarespace

Если вы решите перейти на платный план через 14 дней, у нас есть эксклюзивный код предложения для нашего читателей, которые сэкономят вам 10% на стоимости любого плана Squarespace! Чтобы воспользоваться этой скидкой, просто введите: Код предложения: «WBE» на кассе.


3: Выберите уникальное и релевантное доменное имя

Доменное имя — это уникальный адрес вашего сайта, например, наш — websitebuilderexpert.com. Вам нужно будет выбрать один из них для своего сайта, что можно легко сделать с помощью конструктора веб-сайтов (вам будет предложено при регистрации). Если у вас уже есть доменное имя, вы можете перенести его на любую платформу, которую хотите использовать (вы увидите соответствующую опцию).

Доменное имя — это часть URL-адреса (адрес сайта в строке поиска вашего браузера), которая идентифицирует веб-страницу — в данном случае ваш веб-сайт.Например, у нас есть sitebuilderexpert.com. Вы можете зарегистрировать их отдельно на таких сайтах, как Domain.com, но разработчики веб-сайтов предлагают сделать это за вас, когда вы регистрируетесь на них. Большинство предоставляют его бесплатно (по крайней мере, на первых порах), в то время как горстка берет несколько дополнительных долларов.

Доменное имя — это один из основных способов представления сайта в Интернете, так что учитывайте его. Вот несколько практических правил при выборе доменного имени.

  • Сделайте это актуальным. Звучит очевидно, но стоит упомянуть.Убедитесь, что домен соответствует тому, что видят посетители, посещая ваш сайт. Если ваша компания — Vintage Pantaloons™, не регистрируйте домен flipflopsfromthefuture.net
  • . Пусть он будет коротким или, по крайней мере, запоминающимся. Если вы хотите, чтобы люди запомнили ваш сайт, не выбирайте домен длиной в десятки символов. Это будет выглядеть глупо, и никто этого не запомнит.
  • Избегайте цифр. Обычно лучше избегать использования цифр в именах доменов. Это (как правило) выглядит непрофессионально и добавляет еще один элемент для запоминания.
  • Убедитесь, что брендинг еще не существует. Уже существуют миллионы веб-сайтов. Это означает, что миллионы доменов уже заняты. Проверьте, будет ли ваш домен выделяться, прежде чем совершить его.

Если вы уверены в домене, просто зарегистрируйте его в рамках процесса регистрации в выбранном вами конструкторе веб-сайтов. Некоторые из более компактных планов требуют ежегодной платы за продление в размере около 12 долларов, хотя в премиальных планах она обычно включена.

Если у вас есть уникальное доменное имя, что произойдет, если вы захотите переехать?

Это очень частый вопрос, который нам задают.Не беспокойтесь. Когда вы покупаете доменное имя — у конструктора веб-сайтов или у отдельных регистраторов — вы владеете доменным именем и можете использовать его, где хотите.


4: Выберите шаблон дизайна, который вам нравится . Ваш конструктор сайтов проведет вас к этому этапу после того, как вы зарегистрируетесь. Шаблоны классифицируются по отраслям или типам сайтов.Попробуйте несколько, прежде чем остановиться на своем любимом.

 

Итак, вы выполнили наши шаги в точности: вы выбрали конструктор веб-сайтов, подписались на план и зарегистрировали домен. Вы готовы приступить к созданию веб-сайта. Вместо того, чтобы оставлять вас делать все это самостоятельно, конструкторы веб-сайтов поддерживают вас в процессе с помощью шаблонов.

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

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

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

Воспринимайте шаблоны как «одежду» для вашего веб-сайта.Если вам не нравится один комплект одежды, просто смените его на другой, чтобы придать вашему сайту совершенно другой вид. И опять же, не торопитесь. Выберите разные шаблоны, просмотрите их, посмотрите, подходят ли они. Весь смысл шаблонов заключается в выборе, поэтому погрузитесь и найдите тот, который подходит для того, чего вы хотите достичь.


5: Настройте свой дизайн шаблона

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

 

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

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

Что входит в настройку веб-сайта? Ну, это во многом зависит от вас. В наши дни конструкторы веб-сайтов очень гибки. Настройка может включать:

  • Добавление новых страниц в вашу навигацию
  • Изменение размера, цвета и шрифта кнопок
  • Добавление новых элементов, таких как контактные формы и меню
  • Редактирование изображений в галерее домашней страницы
  • Выбор другого цвета палитра
  • Связывание/встраивание каналов социальных сетей

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

Нужен простой вариант?

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

Если эти настройки шаблона кажутся вам недостаточными (хотя, если вы создаете свой первый веб-сайт, они будут), вы можете подумать о создании своего веб-сайта на платформе с открытым исходным кодом, такой как WordPress.org — это «Вариант 2», который мы рассмотрим чуть позже. Вы получите больше гибкости, но если вы не программист, изучение WordPress займет много времени — особенно по сравнению с перетаскиванием. строители.

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


6: Загрузите и отформатируйте собственный контент

Теперь ваш веб-сайт начинает обретать форму, пришло время наполнить его собственными изображениями и письменным контентом.Вы можете заменить любой «заполнитель» контента, который уже есть в вашем шаблоне, а также «перетаскивать» текстовые и графические блоки вокруг каждой страницы (если вы используете конструктор с перетаскиванием).

 

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

Если вам нужны советы по письму, вы обратились по адресу; мы уже написали полное руководство по написанию для Интернета, наполненное исследованиями, мнениями экспертов и нашими собственными знаниями.

Определенно проверьте это, а пока вот обзор наших 19 лучших советов:

Узнайте больше

Убедитесь, что все тексты на вашем сайте самые лучшие — ознакомьтесь с нашими руководствами по больше советов!

Теперь об изображениях. Когда дело доходит до выбора правильных изображений для вашего сайта, качество является ключевым. О размытых изображениях просто не может быть и речи.

Некоторые конструкторы веб-сайтов имеют банк бесплатных изображений, которые вы можете использовать. Если нет, то в Интернете есть множество бесплатных сайтов с изображениями, таких как Unsplash и Pixabay (два из наших любимых).

Когда у вас есть готовые изображения высокого качества, вы можете легко заменить изображения-заполнители на сайте или перетащить их в совершенно другое место. Совет! Убедитесь, что вы «сжимаете» любые изображения, прежде чем загружать их на свой сайт, запустив их через бесплатный сайт, такой как Kraken.io или TinyPNG. Это уменьшит размер файла, чтобы изображение не замедляло работу вашего сайта, но это не повлияет заметно на качество.


7: Выберите и загрузите приложения 

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

 

Независимо от того, для чего вам нужен сайт, вы можете гарантировать, что для этого найдется приложение. Установить эти приложения очень просто — просто зайдите в App Market (или аналогичный) для своего конструктора. Там, как и в App Store, вы можете увидеть, сколько будет стоить приложение (хотя многие из них бесплатны), что оно делает и его пользовательский рейтинг.

У Wix есть более 300 приложений в App Market. Найдите то, что вы хотите, затем наведите указатель мыши на приложение, которое вы выбрали, и нажмите «Добавить +». как на мобильном, так и на рабочем столе!

 

 

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

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

  • Все ли орфографические и грамматические правила верны?
  • Все ли кнопки в меню работают?
  • Выполняет ли ваш сайт определенную цель?
  • Согласовано ли ваше форматирование?
  • Работает ли он на экранах настольных компьютеров и мобильных телефонов ?
  • Сайт загружается быстро?

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

Как вы предварительно просматриваете свой веб-сайт?

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

Лучший совет! Не забывайте про мобильный! Более половины поисковых запросов в Google выполняются с мобильных устройств, и это число только растет.Для любого успешного сайта необходимо сделать его удобным для мобильных устройств, особенно из-за преимуществ, которые мобильная адаптивность может иметь с точки зрения повышения доступности вашего сайта.

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

Лучший совет! Не просто тестируйте свой сайт самостоятельно.Вы будете слепы к некоторым его недостаткам. Кроме того, вы знаете, как должен работать ваш сайт, поэтому, хотя вам может показаться, что навигация по нему проста, но это не значит, что незнакомец будет. Получите свежий взгляд. Попросите членов семьи и друзей протестировать ваш сайт и оставить отзыв. Если они чем-то похожи на нашу семью и друзей, они не побоятся критики.

Все еще ищете своего идеального строителя?

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


9: Опубликуйте свой сайт в Интернете!

Когда все готово, нажмите кнопку «Опубликовать»! Но не волнуйтесь — в ваш сайт легко вносить изменения после того, как вы его опубликовали. Просто имейте в виду, что некоторые конструкторы не позволят вам переключать шаблоны после того, как ваш сайт будет запущен.

Все готово, вы должны быть готовы к работе.Прежде чем вы нажмете кнопку «Опубликовать» и отправите свой сайт в этот холодный, неумолимый мир, давайте вспомним шаги, которые вы должны были пройти, чтобы добраться до этой точки:

  1. Выберите подходящий для вас конструктор сайтов.
  2. Подпишитесь на план, который соответствует вашим потребностям и бюджету.
  3. Выберите уникальное и релевантное доменное имя.
  4. Выберите шаблон дизайна, который вам нравится.
  5. Настройте свой дизайн шаблона.
  6. Загружайте и форматируйте собственный контент.
  7. Выберите и загрузите приложения.
  8. Предварительный просмотр и тестирование вашего веб-сайта.

Все готово? Великолепный. Нажмите «Опубликовать»! Расскажите своим друзьям, кричите об этом на многолюдных улицах, наймите дирижабль — расскажите об этом всем. Теперь ваш сайт открыт для всего мира. Вы все еще можете настроить и развить его, конечно, но вы сделали решительный шаг. Как очень захватывающе.

Если вы все еще немного не уверены, сможете ли вы это сделать, особенно если вы чувствуете, что вы не творческий тип, у нас есть подробное руководство «Что вам нужно для создания веб-сайта», которое охватывает все пункты контрольного списка выше, плюс Google Analytics, дизайн логотипа и изображения, в деталях.

Ваш комментарий будет первым

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *