Как оформить страницу сайта


15 лучших примеров дизайна главной страницы сайта

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

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

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

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

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

Семь правил оформления главных страниц
1. FreshBooks: классика жанра
2. Airbnb: ориентация на действие
3. Pixelgrade: игра на контрасте
4. Mint: минимализм еще в тренде
5. Dropbox Business: ничего лишнего
6. 4 Rivers Smokehouse: вкусная фотография
7. Melyssa Griffin: личный бренд
8. Evernote: гармоничные цвета
9. Basecamp: мультяшный стиль
10. charity: water: убедительный призыв
11. TechValidate: баланс во всем
12. Medium: белый дизайн
13. Digiday: внимание на главном
14. KIND Snacks: яркая гамма
15. Ahrefs: четкий заголовок
Вместо заключения

Семь правил оформления главных страниц

1. Хорошая homepage четко отвечает на вопросы: «Что это за компания?», «Чем она занимается?» и/или «Что вы (посетитель) можете здесь делать?»

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

О том, почему это остается важным, лучше всех объясняет Стивен Кругг (Steven Krugg), автор бестселлера «Не заставляй меня думать» (Don’t make me think): «Если посетители не могут за пару секунд определить, чем именно вы занимаетесь, надолго они не задержатся».

2. Контент должен резонировать с потребностями целевой аудитории

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

3. Главная страница содержит убедительный оффер

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

4. Сайт оптимизирован под разные устройства и экраны

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

5. Дизайн включает в себя призывы к действию (CTA)

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

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

6. Тренды всегда меняются

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

7. Дизайн должен быть профессиональным

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

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

Читайте также: Лендинг vs главная страница: ключевые отличия

1. FreshBooks: классика жанра 

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

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

2. Airbnb: ориентация на действие 

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

Читайте также: Секреты юзабилити: намерение пользователя и поисковые фильтры

3. Pixelgrade: игра на контрасте

«Простые WordPress темы для быстрого старта. Мы разрабатываем простые темы для WordPress, доступные всем, кто хочет создать современный сайт. Смотреть темы»

Главную страницу этой студии дизайна, которая создает темы для WordPress, отличают следующие черты:

4. Mint: минимализм еще в тренде 

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

Чем интересен этот пример от бесплатного персонального сервиса по управлению финансами:

Читайте также: 10 трендов веб-дизайна на 2020 год

Дизайн сайта файлового хостинга Dropbox:

  • продолжает удивлять своей простотой и минимализмом. На первом экране присутствует только то, что действительно важно: большое вполне уместное изображение с поясняющим текстом и CTA-кнопка «Попробуйте бесплатно (30 дней)».
  • главная страница да и весь веб-сайт Dropbox — это показательный пример незамысловатого, но вместе с тем эффективного дизайна. Здесь не так много текста и визуальных элементов, при этом сайт совсем не кажется пустым или пресным.
  • подзаголовок такой же простой, но весьма убедительный: «Безопасное хранилище для файлов. Это умное рабочее пространство, в котором собраны рабочие группы, инструменты и данные». Понять, что предлагает Dropbox, можно за считанные секунды.

6. 4 Rivers Smokehouse: вкусная фотография

«Грудинка. 18 лет опыта. Вкус, который нужно смаковать»

Чем интересен этот дизайн:

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

Преимущества дизайна этого сайта, принадлежащего Мелиссе Гриффин, которая помогает предпринимателям монетизировать свой оффер и развивать свое сообщество:

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

8. Evernote: гармоничные цвета 

Чем привлекает этот дизайн от Evernote, популярного веб-сервиса для создания и хранения заметок:

  • за годы своего существования Evernote превратился из простого приложения для заметок в полноразмерный бизнес-продукт. Этот факт довольно сложно отразить на главной странице, но Evernote удается сделать это, обозначив все основные офферы в нескольких ключевых преимуществах продукта.
  • фирменное сочетание ярко-зеленого и белого цветов позволяет выделить основные этапы конверсионного пути.
  • от простого заголовка и подзаголовка взгляд пользователя естественно перемещается на CTA-кнопку «Зарегистрируйтесь бесплатно».
  • Evernote позволяет оформить регистрацию в один клик с помощью аккаунта Google: это очень удобно и экономит время.
Читайте также: F-паттерн: неверно понятый, но все еще актуальный (даже на мобильных)

9. Basecamp: мультяшный стиль

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

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

10. charity: water: убедительный призыв

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

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

11. TechValidate: баланс во всем

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

Достоинства дизайна:

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

12. Medium: белый дизайн

«Истории, которые всегда при тебе. Приложение для читающих на ходу»

Чем примечателен этот пример дизайна от платформы для социальной журналистики:

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

13. Digiday: внимание на главном  

Что интересного:

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

14. KIND Snacks: яркая гамма

Достоинства дизайна:

  • смелые цвета усиливают контраст, позволяя словам и изображениям хорошо смотреться на странице и быть заметными.
  • слоган KIND Snacks прост и гениален: «Ингредиенты, которые ты сможешь увидеть и произнести». Таким образом компания прямо говорит, что эти снеки из натуральных продуктов, знакомых каждому. Никаких консервантов и труднопроизносимых компонентов.

15. Ahrefs: четкий заголовок

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

Почему эта страница достойна внимания:

  • контраст между синим, белым и оранжевым цветами бросается в глаза и делает заголовок и CTA еще более заметными;
  • подзаголовок и CTA прекрасно дополняют друг друга: получить возможность разгадать секреты конкурентов и превзойти их — кто в здравом уме способен от этого отказаться?
  • на главной странице вы найдете много полезной информации, но она не создает ощущения беспорядка, благодаря однотонному фону и удобочитаемой типографике.
Читайте также: Анатомия шрифта: визуальный гайд по типографике

Вместо заключения

В этой статье мы рассмотрели 15 отличных примеров оформления главных страниц сайтов различной тематики. Все homepage, показанные выше, очень удобны: на них легко ориентироваться, они не содержат «кричащих» объектов, например, флэш-баннеров, анимаций или других чрезмерно сложных и ненужных элементов. Многие также оптимизированы для мобильных устройств, что очень важно в современном веб-маркетинге.

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

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

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

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

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

Высоких вам конверсий! 

По материалам blog.hubspot.com Изображение: freepik.com

11-01-2013

Как создать сайт, если вы не дизайнер

Шаги и передовой опыт

Этот пост был первоначально опубликован 15 июня 2016 г. и обновлен 14 сентября 2017 г. и 5 июня 2019 г.

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

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

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

Как получить сайт на WordPress

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

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

Если вы любите приключения или хотите большего контроля, вы можете приобрести надежный пакет хостинга и установить WordPress самостоятельно.CMS доступна бесплатно на WordPress.org, и ее довольно легко настроить, если у вас есть некоторые технические навыки. Ознакомьтесь с разделом «Как установить WordPress на cPanel», чтобы получить подробную информацию о процессе.

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

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

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

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

Решая, как создать свой веб-сайт, помните следующие советы:

  1. Начните с пяти основных страниц.
  2. Держите его чистым и простым.
  3. Ваше содержание имеет… большое значение.
  4. План для SEO.
  5. Не игнорируйте мобильных пользователей (отзывчивость).
  6. Убедитесь, что он работает (кроссбраузерная совместимость).

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

1. Начните с пяти основных страниц

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

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

По теме: Как спланировать сайт

Домашняя страница

Это первое, что видят посетители, попадая на ваш сайт, так что учитывайте это.

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

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

Призыв к действию (или CTA) - отличный инструмент для размещения на вашей домашней странице.

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

Другие важные элементы, которые следует учитывать, включая на вашу домашнюю страницу:

  • Основная контактная информация : Сделайте так, чтобы посетители могли легко связаться с вами.
  • Форма регистрации / подписки : Поощряйте пользователей подписываться на новости и информацию с вашего веб-сайта.
  • Отзывы / значки доверия : Включите отзывы предыдущих клиентов или любые значки / оценки, которые у вас есть (например, Better Business Bureau, Google Reviews), чтобы показать клиентам, что вы предлагаете качественные услуги и укрепляете доверие.

По теме: Как запросить отзывы и обзоры у ваших клиентов

Товары / услуги стр.

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

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

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

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

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

Связано: Как создать привлекательную страницу продукта электронной коммерции

О странице

Кто ты? Как вы начинали? Какой твой любимый вкус мороженого?

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

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

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

Связано: Как создать страницу «О нас» для своего магазина электронной коммерции

Отзывы страница

Ничто так не внушает доверия, как хорошие отзывы других довольных клиентов.

Используйте положительные отзывы, оставленные в таких местах, как Google Review, или напрямую попросите прошлых клиентов оставить отзыв, который вы можете использовать.

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

По теме: Как составить отзывы клиентов для вашего сайта электронной коммерции

Контактная страница

Страница контактов, возможно, одна из самых важных страниц на вашем веб-сайте.

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

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

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

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

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

Связано: Разработка контента веб-сайта - Что включать на 5 основных страниц веб-сайта

2.Сохраняйте чистоту и простоту

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

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

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

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

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

Выберите один или два шрифта и только несколько цветов (обычно это цвета вашего бренда) и ограничьте свое использование только этими элементами.

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

Веб-сайт Ford Motor Company очень ясный и простой, с использованием всего двух или трех основных цветов, чтобы сделать их сообщение центром внимания веб-сайта.

3. Ваше содержание имеет значение… много

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

Письменный текст или копия

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

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

Копия

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

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

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

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

По теме: Как стратегически использовать текст и визуальные эффекты на целевых страницах продукта

Изображения

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

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

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

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

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

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

Pages на National Geographic for Kids используют хорошее сочетание релевантных копий и изображений для четкого отображения информации.

4. План SEO

Когда вы решаете, как создать веб-сайт, важно иметь в виду SEO - сокращение от «поисковой оптимизации».

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

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

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

Ключевые слова

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

Инструменты

, такие как Google Keyword Planner, Google Trends и SEMrush, могут помочь вам в этом исследовании ключевых слов.

По теме: советы по поиску ключевых слов и оптимизации контента

Метаданные

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

Эти элементы, называемые «метатегами», предоставляют поисковым системам скрытую информацию, описывающую, о чем ваша страница. Это фрагменты заголовка и описания, используемые в результатах поиска такими системами, как Google.

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

Метатеги для GoDaddy.com используются в результатах поисковой системы.

Схема

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

Не кодировщик? Не беспокоиться! Для создания кода за вас существуют генераторы схем.

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

Связано: Структурированные данные - Кто, что и почему использует схему

Теги изображений

Как насчет нетекстовых элементов на ваших страницах, таких как изображения?

Поисковые системы тоже любят получать информацию о них.

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

По теме: Что такое веб-доступность, какое это имеет значение и как начать?

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

По теме: Руководство для начинающих по поисковой оптимизации веб-сайтов малого бизнеса

5. Не игнорируйте мобильных пользователей (отзывчивость)

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

Способность дизайна веб-сайта автоматически настраивать контент для заполнения различных устройств / размеров экрана известна как «отзывчивость».

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

И снова WordPress делает это просто.

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

По теме: что вам нужно знать о первом индексе мобильных устройств Google

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

6. Убедитесь, что он работает (кроссбраузерность)

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

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

Необязательно пробовать все возможные варианты браузера, но ваш сайт должен хорошо работать в пяти самых популярных: Chrome, Firefox, Safari, Edge и Opera (Microsoft прекратила поддержку Internet Explorer).

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

Веб-сайт Better Business Bureau выглядит практически одинаково при просмотре в любом браузере.Показано здесь в Firefox, Chrome и Edge.

Это обертка

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

.

Получите идеальный макет веб-сайта за 27 шагов

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

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

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

Начало работы

01. Определите, что означает успех

Доберитесь до сути цели вашего дизайна

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

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

02. Понимание текущего сайта

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

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

03. Делитесь проектами с клиентами на ранней стадии

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

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

Рабочий процесс проектирования

04. Сначала займитесь макетом

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

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

05. Начните рисовать каркас верхнего уровня

Базовый каркас поможет вам структурировать макет (щелкните значок в правом верхнем углу, чтобы увеличить)

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

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

06. Добавьте сетку

Пример сетки 978 с базовой линией 10 пикселей

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

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

07. Выберите типографику

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

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

08. Выберите цветовую тему

Инструменты, такие как Color Hunt, разработаны, чтобы помочь вам выбрать палитру.

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

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

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

09. Упростите макет

Простые макеты, как правило, легче ориентироваться

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

На самом деле на странице не должно быть слишком много призывов к действию - все должно приводить к финалу: «Что я могу здесь сделать?»

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

10. Усовершенствуйте каждый компонент

Клаудио Гульери работал над дизайном пользовательского интерфейса в Microsoft Music

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

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

11. Ознакомьте клиентов с вашими решениями

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

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

12. Думайте в движении

Движение необходимо при разработке интерактивных взаимодействий

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

13. Прототип, прототип, прототип

Прототипирование - лучший способ тестирования взаимодействий

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

Следующая страница: Дизайн и упаковка

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера

  • Объявление определяет этот документ как HTML5
  • Элемент является корневым элементом HTML стр.
  • Элемент содержит метаинформацию о документе
  • Элемент </code> определяет заголовок документа </li> <li> Элемент <code> <meta> </code> должен определять набор символов как UTF-8 </li> <li> Элемент <code> <meta> </code> с name = "viewport" позволяет веб-сайту хорошо выглядеть на всех устройствах и разрешениях экрана. </li> <li> Элемент <code> <style> </code> содержит стили для веб-сайта (верстка / дизайн) </li> <li> Элемент <code> <body> </code> содержит видимое содержимое страницы </li> <li> Элемент <code> <h2> </code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3> Создание содержимого страницы </h3> <p> Внутри элемента <code> <body> </code> нашего веб-сайта мы будем использовать наш макет Черновой вариант" и создайте: </p> <ul> <li> Заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Боковое содержимое </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3> Заголовок </h3> <p> Заголовок обычно располагается вверху веб-сайта (или прямо под верхним меню навигации).Часто содержит логотип или название веб-сайта: </p>. <p> <div> <br/> <h2> Мой веб-сайт </h2> <br/> <p> Веб-сайт создано мной. </p> <br/> </div> </p> <p> Затем мы используем CSS для стилизации заголовка: </p> .header {<br/> отступ: 80 пикселей; / * немного отступов * / <br/> text-align: center; / * центрировать текст * / <br/> фон: # 1abc9c; / * зеленый фон * / <br/> цвет белый; / * белый цвет текста * / <br/>} <p> / * Увеличиваем размер шрифта элемента <h2> * / <br/> .заголовок h2 {<br/> font-size: 40px; <br/>} </p> <p> Попробуйте сами »</p> <hr/> <hr/> <h3> Панель навигации </h3> <p> Панель навигации содержит список ссылок, помогающих посетителям перемещаться по ваш сайт: </p> <p> <div> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> </div> </p> <p> Используйте CSS для стилизации панели навигации: </p> / * Стиль верхней панели навигации * / <br/>.навигационная панель {<br/> переполнение: скрыто; / * Скрыть переполнение * / <br/> background-color: # 333; / * Темный цвет фона * / <br/>} <p> / * Стиль ссылок панели навигации * / <br/> .navbar поплавок {<br/>: левый; / * Убедимся, что ссылки остались рядом * / дисплей <br/>: блочный; / * Измените отображение на блок, по причинам реагирования (см. ниже) * / <br/> цвет: белый; / * Белый цвет текста * / <br/> text-align: center; / * Центрировать текст * / <br/> отступ: 14 пикселей 20 пикселей; / * Добавляем отступы * / <br/> text-decoration: none; / * Убрать подчеркивание * / <br/>} </p> <p> / * Ссылка по правому краю * / <br/>.navbar a.right {<br/> float: right; / * Размещаем ссылку вправо * / <br/> } </p> <p> / * Изменение цвета при наведении / наведении указателя мыши * / <br/> .navbar a: hover {<br/> цвет фона: #ddd; / * Цвет серого фона * / <br/> цвет: черный; / * Черный цвет текста * / <br/>} <br/> </p> <p> Попробуйте сами »</p> <hr/> <h3> Содержание </h3> <p> Создайте макет из 2 столбцов, разделенных на «побочное содержимое» и «основное содержимое». </p> <p> <div> <br/> <div>... </div> <br/> <div > ... </div> <br/> </div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> / * Обеспечение правильного размера * / <br/> * {<br/> box-sizing: border-box; <br/>} <p> / * Контейнер колонки * / <br/> .row {<br/> display: flex; <br/> flex-wrap: пленка; <br/>} </p> <p> / * Создать два неравных столбца, которые расположены рядом друг с другом * / <br/> / * Боковая панель / левый столбец * / <br/>. Сторона {<br/> изгиб: 30%; / * Устанавливаем ширину боковой панели * / <br/> цвет фона: # f1f1f1; / * Серый цвет фона * / <br/> отступ: 20 пикселей; / * Некоторые отступы * / <br/>} </p> <p> / * Основной столбец * / <br/>.основной { <br/> гибкость: 70%; / * Устанавливаем ширину основного содержимого * / <br/> background-color: white; / * Белый цвет фона * / <br/> padding: 20px; / * Некоторые отступы * / <br/>} <br/> </p> <p> Попробуйте сами »</p> <p> Затем добавьте медиа-запросы, чтобы сделать макет адаптивным. Это обеспечит что ваш сайт хорошо выглядит на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> / * Адаптивный макет - когда ширина экрана меньше 700 пикселей, делаем два столбцы располагаются друг над другом, а не рядом * / <br/> @media экран и (максимальная ширина: 700 пикселей) {<br/>.ряд {<br/> flex-direction: столбец; <br/>} <br/>} <p> / * Адаптивный макет - если ширина экрана меньше 400 пикселей, сделайте навигационные ссылки складываются друг на друга, а не рядом * / <br/> @media screen и (max-width: 400px) {<br/> .navbar a {<br/> float: нет; <br/> ширина: 100%; <br/>} <br/>} <br/> </p> <p> Попробуйте сами »</p> <p> <strong> Совет: </strong> Чтобы создать другой вид макета, просто измените ширину гибкости (но убедитесь, что она составляет 100%).</p> <p> <strong> Совет: </strong> Интересно, как работает правило @media? Узнать больше о это в нашей главе CSS Media Queries. </p> <p> <strong> Совет: </strong> Чтобы узнать больше о модуле гибкой компоновки коробки, прочтите наши Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих бокса рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок сломается. Свойство <code> box-sizing </code> позволяет нам включить заполнение и границу в общую ширину (и высоту) блока, следя за тем, чтобы заполнение оставалось внутри блока и не ломалось.</p> <p> Вы можете узнать больше о свойстве box-sizing в нашем руководстве CSS Box Sizing Tutorial. </p> <hr/> <h3> Нижний колонтитул </h3> <p> Наконец, добавим нижний колонтитул. </p> <p> <div> <br/> <h3> Нижний колонтитул </h3> <br/> </div> </p> <p> И стиль: </p> <p> .footer {<br/> отступ: 20 пикселей; / * Некоторые отступы * / <br/> text-align: center; / * Центр текста * / <br/> фон: #ddd; / * Серый фон * / <br/>} </p> <p> Попробуйте сами »</p> <p> Поздравляем! Вы создали адаптивный веб-сайт с нуля.</p> <br/> <br/>.<h2> Как создать сайт на WordPress - Простое руководство </h2> <p> Вы хотите создать сайт? Создание веб-сайта может быть пугающей мыслью, особенно если вы не разбираетесь в технике. Не волнуйтесь, вы не одиноки. Помогая более чем 130 000+ человек создать веб-сайт с помощью WordPress, мы решили создать наиболее полное пошаговое руководство о том, как создать веб-сайт без обучения программированию. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_24.jpg" /> </p> <p> Это руководство полезно для пользователей любого возраста и уровня подготовки.Однако, если вам нужна помощь, вы можете связаться с нашей командой экспертов, чтобы бесплатно настроить ваш сайт. </p> <p> → Нажмите здесь, чтобы получить бесплатную настройку веб-сайта WordPress! ← </p> <p> Если вы хотите сделать это самостоятельно, продолжайте следовать нашему пошаговому руководству по созданию веб-сайта. </p> <p> Вот обзор от начала до конца всех шагов, которые мы проведем в этом руководстве. </p> <ul> <li> Как найти и бесплатно зарегистрировать доменное имя </li> <li> Выбор лучшего хостинга </li> <li> Как установить WordPress </li> <li> Установка шаблона для изменения дизайна вашего сайта </li> <li> Создание страниц в WordPress </li> <li> Настройка WordPress с помощью дополнений и расширений </li> <li> Ресурсы для изучения WordPress и получения поддержки </li> <li> Расширяя возможности, создавая веб-сайты с дополнительными функциями </li> </ul> <p> Прежде чем мы начнем создавать веб-сайт, давайте рассмотрим некоторые из наиболее часто задаваемых вопросов.</p> <h5> Что мне нужно для создания веб-сайта? </h5> <p> Для запуска сайта WordPress вам понадобятся следующие три вещи. </p> <ul> <li> Доменное имя - это имя вашего веб-сайта, например google.com </li> <li> WordPress hosting - здесь хранятся файлы вашего сайта. </li> <li> 45 минут вашего безраздельного внимания. </li> </ul> <h5> Сколько стоит сайт на WordPress? </h5> <p> Ответ на этот вопрос действительно зависит от того, какой веб-сайт вы пытаетесь создать.Мы написали руководство из 2000 слов, в котором объясняется, сколько на самом деле стоит создание веб-сайта. </p> <p> Типичный бизнес-сайт может стоить от 100 долларов в год до 30 000 долларов в год. </p> <p> Мы рекомендуем всем нашим пользователям начинать с малого, а затем добавлять на свой сайт больше функций по мере роста вашего бизнеса. Таким образом вы сэкономите деньги и минимизируете возможные потери, а также избежите перерасхода средств. </p> <p> В этом руководстве мы покажем вам <strong>, как создать веб-сайт менее чем за 100 долларов </strong>.</p> <p> Мы также покажем вам, как продвинуться дальше, добавив в него больше функций в будущем. </p> <h5> Какая платформа для веб-сайтов лучшая? </h5> <p> Существует множество конструкторов веб-сайтов, которые помогут вам настроить веб-сайт. Мы рекомендуем использовать автономный WordPress в качестве платформы вашего веб-сайта. </p> <p> WordPress - самая популярная платформа для веб-сайтов в мире. Он поддерживает почти 28% всех веб-сайтов в Интернете. </p> <p> WordPress является бесплатным и включает тысячи дизайнов и расширений веб-сайтов.Он чрезвычайно гибкий и работает практически со всеми сторонними инструментами и услугами, доступными владельцам веб-сайтов. </p> <p> Мы используем WordPress для создания всех наших веб-сайтов, включая этот WPBeginner. </p> <h5> Как извлечь максимальную пользу из этого учебного пособия по созданию веб-сайта? </h5> <p> Это пошаговое руководство по созданию веб-сайта. Мы разделили его на несколько этапов и проведем вас через все от начала до конца. Просто следуйте инструкциям, и в конечном итоге у вас будет очень профессиональный веб-сайт.</p> <p> Мы также укажем вам правильное направление, чтобы вывести ваш веб-сайт на новый уровень в зависимости от ваших потребностей. </p> <p> Удачи, создавая свой сайт. </p> <p> Помните, если вам понадобится помощь, вы можете связаться с нами, и мы бесплатно настроим ваш сайт. </p> <p> Приступим. </p> <h5> Как создать веб-сайт Видеоурок </h5> <p> <iframe type="text/html" src="https://www.youtube.com/embed/50m263vX0Uw?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" frameborder="0" allowfullscreen=""/> </iframe> </p> <p> Подписаться на WPBeginner </p> <p> <iframe src="https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=http%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.Rx51stRkYnQ.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCM5XUrLkPZ9aFXqtSLivsifryqsUA#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1448178294715&parent=http%3A%2F%2Fwpbeginner.com"/> </iframe> </p> <p> Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.</p> <h5> Шаг 1. Настройка </h5> <p> Одна из самых распространенных ошибок новичков - это неправильный выбор платформы для сайта. К счастью, вы здесь и не совершите этой ошибки. </p> <p> Для большинства пользователей самостоятельный сайт WordPress.org - идеальное решение. Он поставляется с тысячами дизайнов и надстроек, которые позволяют создавать веб-сайты любого типа. Для получения дополнительной информации по этой теме см. Наше руководство о том, почему вам следует использовать WordPress. </p> <p> WordPress можно бесплатно загрузить и использовать для создания любых веб-сайтов без каких-либо ограничений.</p> <p> <strong> Если WordPress бесплатный, то откуда берется стоимость? </strong> </p> <p> WordPress является бесплатным, потому что вам нужно будет организовать собственное доменное имя и хостинг, что стоит денег. Подробнее об этой теме читайте в нашей статье, почему WordPress бесплатный ?. </p> <p> Доменное имя - это адрес вашего веб-сайта в Интернете. Это то, что ваши пользователи будут вводить в своих браузерах, чтобы перейти на ваш сайт (например, wpbeginner.com или google.com). </p> <p> Далее вам понадобится хостинг для веб-сайтов.Все веб-сайты в Интернете нуждаются в хостинге. Это будет дом вашего сайта в Интернете. </p> <p> Доменное имя обычно стоит 14,99 долларов в год, а стоимость хостинга начинается от 7,99 долларов в месяц. </p> <p> Это МНОГО для большинства людей, которые только начинают заниматься. </p> <p> К счастью, Bluehost согласился предложить нашим пользователям бесплатное доменное имя и более 60% скидки на веб-хостинг. </p> <p> → Нажмите здесь, чтобы воспользоваться этим эксклюзивным предложением Bluehost ← </p> <p> Bluehost - одна из крупнейших хостинговых компаний в мире.Они также являются официальным хостинг-партнером, рекомендованным WordPress. </p> <p> Они работают с WordPress с 2005 года и полны решимости дать сообществу. Вот почему они пообещали нам, что если вы не можете настроить свой веб-сайт, следуя этому руководству, наша команда экспертов выполнит этот процесс за вас бесплатно. Они выплатят нам компенсацию, так что вам не придется. Не стесняйтесь обращаться к нам за бесплатной помощью в настройке веб-сайта. </p> <p> <strong> Примечание: </strong> В WPBeginner мы верим в прозрачность.Если вы покупаете хостинг по нашей реферальной ссылке, мы получим небольшую комиссию без каких-либо дополнительных затрат для вас. Фактически вы получите скидку на хостинг + бесплатное доменное имя. Мы получили бы эту комиссию за рекомендацию любой хостинговой компании WordPress, но мы рекомендуем только те продукты, которые мы лично используем и которые, по нашему мнению, принесут пользу нашим читателям. </p> <p> Давайте купим доменное имя и хостинг. </p> <p> Сначала вам нужно перейти на сайт Bluehost в новом окне браузера и нажать зеленую кнопку «Начать работу сейчас».</p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_25.jpg" /> </p> <p> Вы попадете на страницу с ценами, где вам нужно будет выбрать тарифный план для своего веб-сайта. Базовые планы и планы Plus являются наиболее популярными среди наших пользователей. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_26.jpg" /> </p> <p> Вам нужно будет нажать на кнопку «Выбрать», чтобы выбрать план, который вам нравится, и перейти к следующему шагу. </p> <p> На следующем экране вам будет предложено выбрать новое доменное имя. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_27.jpg" /> </p> <p> В идеале вы должны использовать доменное имя .com. Убедитесь, что он связан с вашим бизнесом, его легко произносить и писать, а также легко запомнить.</p> <p> Нужна помощь в выборе доменного имени для вашего сайта? См. Эти советы и инструменты о том, как выбрать лучшее доменное имя. </p> <p> После выбора доменного имени нажмите кнопку «Далее», чтобы продолжить. </p> <p> Теперь вам будет предложено ввести информацию об учетной записи, такую ​​как имя, адрес, адрес электронной почты и т. Д. </p> <p> На этом экране вы также увидите дополнительные опции, которые вы можете приобрести. Обычно мы не рекомендуем покупать эти дополнительные услуги. Вы всегда можете добавить их позже, если решите, что они вам нужны.</p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_28.jpg" /> </p> <p> Затем вы добавите свою платежную информацию, чтобы завершить покупку. </p> <p> После завершения покупки вы получите электронное письмо с подробностями о том, как войти в панель управления веб-хостингом (cPanel). </p> <p> Это панель управления хостингом, где вы управляете всем, например, получением поддержки, настройкой электронной почты и т. Д. Что наиболее важно, здесь вы устанавливаете WordPress. </p> <h5> Шаг 2. Установите WordPress </h5>. <p> На панели управления учетной записью хостинга (cPanel) вы найдете множество значков для различных действий.Вам никогда не придется использовать 95% из них, поэтому вы можете игнорировать их. </p> <p> Прокрутите вниз до раздела веб-сайта в cPanel и щелкните значок WordPress. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_29.jpg" /> </p> <p> Теперь вы увидите экран быстрой установки Bluehost Marketplace для WordPress. Нажмите кнопку «Начать», чтобы продолжить. </p> <p> На следующем экране вам будет предложено выбрать доменное имя, на которое вы хотите установить WordPress. Выберите свой домен из раскрывающегося поля и нажмите Далее.</p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_30.jpg" /> </p> <p> Теперь вам нужно будет ввести имя вашего веб-сайта, имя пользователя администратора и пароль для вашего веб-сайта. Не волнуйтесь, вы можете изменить их позже в настройках WordPress, если вам нужно. </p> <p> Вам также нужно будет установить все флажки на экране и затем нажать кнопку «Установить», чтобы продолжить. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_31.jpg" /> </p> <p> Quick Install теперь начнет установку WordPress на ваш сайт. Между тем, он покажет вам несколько шаблонов веб-сайтов, которые вы можете установить на свой сайт.</p> <p> Вам не нужно делать это прямо сейчас, потому что мы покажем вам, как найти и установить бесплатный шаблон WordPress на ваш сайт позже в этом руководстве. </p> <p> По завершении установки в верхнем заголовке появится сообщение об успешном завершении. </p> <p> </p> <p> Теперь вам нужно щелкнуть ссылку «Установка завершена», и вы попадете на экран с URL-адресом и паролем для входа в WordPress. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_32.jpg" /> </p> <p> Поздравляем! Вы создали свой первый веб-сайт на WordPress.</p> <p> Теперь вы можете перейти на страницу входа в WordPress. Ваш URL-адрес для входа будет выглядеть так: </p> <p> http://www.yourdomain.com/wp-admin </p> <p> Вы можете войти на свой сайт WordPress, используя имя пользователя и пароль администратора, которые вы ввели ранее. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_33.jpg" /> </p> <p> Разве не все было просто? </p> <p> А теперь перейдем к следующему шагу и выберем дизайн для вашего веб-сайта. </p> <h5> Шаг 3. Выберите тему </h5> <p> Внешний вид вашего сайта WordPress контролируется темой WordPress.</p> Темы <p> WordPress - это профессионально разработанные шаблоны, которые вы можете установить на свой веб-сайт, чтобы изменить его внешний вид. </p> <p> По умолчанию каждый сайт WordPress поставляется с базовой темой. Если вы посетите свой сайт, он будет выглядеть примерно так: </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_34.jpg" /> </p> <p> Это не очень нравится большинству пользователей. </p> <p> Но не волнуйтесь, есть тысячи бесплатных и платных тем WordPress, которые вы можете установить на свой сайт. </p> <p> Вы можете изменить свою тему из панели администратора WordPress.Посетите страницу <strong> Внешний вид »Темы </strong>, а затем нажмите кнопку« Добавить ». </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_35.jpg" /> </p> <p> На следующем экране вы сможете выполнить поиск из 4 492 бесплатных тем WordPress, доступных в официальном каталоге тем WordPress.org. Вы можете отсортировать их по популярным, последним, избранным, а также по другим фильтрам функций (например, по отрасли, макету и т. Д.). </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_36.jpg" /> </p> <p> Нужна помощь в выборе темы? Ознакомьтесь с нашим списком этих потрясающих бесплатных бизнес-тем WordPress.</p> <p> Вы также можете ознакомиться с нашим руководством о том, как выбрать идеальную тему WordPress для вашего сайта. </p> <p> Для этого руководства мы будем использовать Bento. Это популярная многоцелевая бесплатная тема WordPress с гибкими возможностями дизайна для всех типов веб-сайтов. </p> <p> Если вы знаете название бесплатной темы, которую хотите установить, вы можете найти ее, введя ее название в поле поиска. </p> <p> WordPress покажет вам тему в результатах поиска.Вам нужно будет навести указатель мыши на тему и затем нажать кнопку «Установить». </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_37.jpg" /> </p> <p> После того, как вы установили свою тему, вы можете настроить ее, щелкнув ссылку «Настроить» в меню «Внешний вид». </p> <p> Это запустит настройщик темы, где вы сможете изменить настройки темы с предварительным просмотром вашего веб-сайта в реальном времени. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_38.jpg" /> </p> <p> Нет необходимости сразу настраивать все настройки темы. Вы сможете настроить его намного лучше, если у вас будет контент на вашем сайте.</p> <p> Давайте посмотрим, как добавить контент на ваш сайт WordPress. </p> <h5> Шаг 4. Добавьте контент на свой сайт </h5> <p> WordPress поставляется с двумя типами содержимого по умолчанию, называемыми сообщениями и страницами. Сообщения являются частью блога и отображаются в обратном хронологическом порядке (сначала отображаются новые сообщения). </p> <p> С другой стороны, страницы предназначены для статического «одноразового» контента, такого как страница «О компании», страница контактов, политика конфиденциальности и т. Д. </p> <p> По умолчанию WordPress показывает сообщения вашего блога на главной странице вашего сайта.Вы можете изменить это и сделать так, чтобы WordPress отображал любую страницу в качестве главной страницы вашего сайта (мы покажем вам, как это сделать позже в этом руководстве). </p> <p> Вы можете создать отдельную страницу для своего блога или раздела новостей. Фактически, вы можете создать веб-сайт вообще без раздела блога. </p> <p> Сказав это, давайте добавим контент на ваш сайт. </p> <p> Вы начнете с добавления нескольких страниц на свой сайт WordPress. Не беспокойтесь, если у вас сейчас недостаточно контента для этих страниц.Вы всегда можете редактировать и обновлять их. </p> <p> Перейти на <strong> страниц »Добавить новую страницу </strong> в админку WordPress. Откроется экран редактора страниц, который выглядит следующим образом: </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_39.jpg" /> </p> <p> Сначала вам нужно указать заголовок для своей страницы, назовем эту страницу «Домашняя». </p> <p> После этого вы можете добавлять контент в текстовом редакторе ниже. Вы можете добавлять текст, ссылки, изображения, вставлять видео, аудио и т. Д. </p> <p> После добавления содержимого на свою страницу вы можете нажать кнопку публикации, чтобы разместить его на своем веб-сайте.</p> <p> Вы можете повторить процесс, добавив больше страниц для разных разделов вашего сайта. Например, страница «О нас», «Свяжитесь с нами» и страница блога для отображения сообщений блога. </p> <p> А теперь давайте добавим еще несколько сообщений в блог. </p> <p> Перейдите к <strong> сообщениям »Добавьте новый </strong> в админку WordPress. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_40.jpg" /> </p> <p> Вы увидите экран, похожий на предыдущий, когда добавляете страницы. </p> <p> Вы можете добавить заголовок сообщения, а затем добавить контент в визуальном редакторе сообщений.Вы также заметите некоторые дополнительные параметры, такие как форматы сообщений, категории и теги. </p> <p> Вы можете нажать кнопку «Сохранить», чтобы сохранить сообщение в виде черновика, или нажать кнопку «Опубликовать», чтобы сделать его видимым на вашем сайте. </p> <p> Для получения более подробных инструкций о том, как использовать все эти параметры на экранах редактирования сообщений и страниц, ознакомьтесь с нашим руководством по добавлению нового сообщения в WordPress. </p> <h5> Шаг 5. Настройка и настройка вашего веб-сайта </h5> <p> Теперь, когда вы создали некоторый контент на своем веб-сайте, вы сможете настроить его и придать ему красивую презентабельную форму.</p> <p> Давайте начнем с создания статической главной страницы. </p> <p> <strong> Настройка статической лицевой страницы </strong> </p> <p> Вам необходимо посетить страницу <strong> Настройки »Чтение </strong> в админке WordPress. В разделе «Отображение первой страницы» щелкните статическую первую страницу, а затем выберите «Страницы», которые вы создали ранее для своей домашней страницы и страниц блога. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_41.jpg" /> </p> <p> Не забудьте нажать кнопку «Сохранить изменения» внизу страницы, чтобы сохранить изменения.</p> <p> WordPress теперь будет использовать страницу с названием «Домашняя страница» в качестве главной страницы вашего сайта и страницу «Блог» для отображения сообщений вашего блога. </p> <p> <strong> Изменить название и слоган сайта </strong> </p> <p> Во время установки вы можете выбрать название своего сайта. WordPress автоматически добавляет к заголовку вашего сайта строку с надписью «Просто еще один сайт WordPress». </p> <p> Вы можете изменить как заголовок, так и слоган вашего сайта в любое время, перейдя на страницу <strong> Настройки »Общие </strong>. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_42.jpg" /> </p> <p> Название вашего сайта будет именем вашего сайта, например, WPBeginner.Строка тега обычно представляет собой одну строку, описывающую ваш веб-сайт. Вы также можете оставить поле строки тега пустым, если хотите. </p> <p> Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки. </p> <p> <strong> Установить настройки комментариев </strong> </p> <p> WordPress поставляется со встроенной системой комментариев, позволяющей пользователям оставлять комментарии к вашим сообщениям. Это отлично подходит для взаимодействия с пользователем, но также нацелено на спамеров. </p> <p> Чтобы решить эту проблему, вам нужно включить модерацию комментариев на своем сайте.</p> <p> Посетите страницу «Настройки <strong>» »Обсуждения </strong> и прокрутите вниз до раздела« До появления комментария ». Установите флажок рядом с опцией «Комментарий должен быть одобрен вручную». </p> <p> </p> <p> Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки. </p> <p> <strong> Создание меню навигации </strong> </p> <p> Меню навигации позволяет пользователям просматривать различные страницы или разделы вашего веб-сайта. WordPress поставляется с мощной системой меню навигации, и ваша тема WordPress использует эту систему для отображения меню.</p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_43.jpg" /> </p> <p> Давайте добавим на ваш сайт меню навигации. </p> <p> Сначала зайдите на страницу <strong> Внешний вид »Меню </strong>. Введите имя для своего меню навигации и нажмите кнопку создания меню. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_44.jpg" /> </p> <p> WordPress создаст ваше меню навигации. Но в данный момент он будет пуст. </p> <p> Затем вам нужно выбрать страницы, которые вы хотите отобразить в своем меню, и затем нажать кнопку «Добавить в меню». </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_45.jpg" /> </p> <p> Вы заметите, что выбранные вами страницы заполняют пустую область вашего меню навигации.Вы можете перемещать их вверх и вниз, чтобы изменить их положение в меню. </p> <p> <img src="/wp-content/uploads/kak-oformit-stranicu-sajta_46.jpg" /> </p> <p> Теперь вам нужно выбрать место для отображения. Эти местоположения определяются вашей темой WordPress. Обычно у большинства тем WordPress есть главное меню, которое появляется сверху. </p> <p> Наконец, нажмите кнопку меню сохранения, чтобы сохранить меню навигации. </p> <p> Теперь вы можете посетить свой веб-сайт, чтобы увидеть меню в действии. </p> <p> Более подробные инструкции см. В нашем руководстве для начинающих о том, как добавить меню навигации в WordPress.</p> <h5> Шаг 6. Установка плагинов </h5> Плагины <p> WordPress похожи на приложения для вашего сайта WordPress. Они позволяют добавлять функции на ваш сайт WordPress. Подумайте, контактная форма, фотогалереи и т. Д. </p> <p> В настоящее время для WordPress доступно более 49 000 бесплатных плагинов. Есть также платные плагины, продаваемые сторонними веб-сайтами и разработчиками. </p> <p> Как вы определяете, какие плагины установить с таким количеством плагинов? Мы также расскажем вам об этом, см. Наше руководство о том, как выбрать лучший плагин для WordPress.</p> <p> Вот наш список необходимых плагинов, которые вы должны сразу установить на свой сайт. Все они бесплатны. </p> <p> <strong> Характеристики </strong> </p> <p> <strong> Оптимизация веб-сайта </strong> </p> <p> <strong> Безопасность </strong> </p> <ul> <li> Updraft Plus - Создание автоматических резервных копий вашего сайта по расписанию </li> <li> Sucuri - Аудит безопасности веб-сайтов и сканер вредоносных программ </li> </ul> <p> Нужна помощь в установке плагинов? См. Наше пошаговое руководство по установке плагина WordPress.</p> <p> Для получения дополнительных рекомендаций по плагинам ознакомьтесь с нашим списком из 24 плагинов WordPress, которые должны быть установлены для бизнес-сайтов. </p> <h5> Шаг 7. Освоение WordPress </h5> <p> WordPress прост в использовании, но чрезвычайно мощный. Время от времени вы можете искать быстрые ответы. </p> <p> Хорошая новость заключается в том, что существует множество бесплатных справок по WordPress. Посмотрите наше руководство о том, как правильно запросить поддержку WordPress и получить ее. </p> <p> WPBeginner сам по себе является крупнейшим сайтом WordPress в Интернете.На WPBeginner вы найдете следующие ресурсы (все они совершенно бесплатны). </p> <ul> <li> WPBeginner Blog - Здесь мы публикуем наши руководства по WordPress, инструкции и пошаговые инструкции. </li> <li> WPBeginner Videos - Эти пошаговые видео помогут вам изучить WordPress FAST. </li> <li> WPBeginner на YouTube - Нужны дополнительные видеоинструкции? Подпишитесь на наш канал YouTube с более чем 52 000 подписчиков и 7 миллионами просмотров. </li> <li> WPBeginner Dictionary - лучшее место для начинающих, чтобы начать и познакомиться с жаргоном WordPress.</li> <li> WPBeginner Blueprint - ознакомьтесь с плагинами, инструментами и услугами, которые мы используем на WPBeginner. </li> <li> WPBeginner Deals - Эксклюзивные скидки на продукты и услуги WordPress для пользователей WPBeginner. </li> </ul> <p> Вот несколько наших руководств, которые стоит сразу добавить в закладки. Это сэкономит вам много времени и денег в будущем. </p> <p> Многие из наших пользователей используют Google, чтобы найти ответы на WPBeginner. Просто введите ключевые слова для того, что вы ищете, и добавьте в конце wpbeginner.com.</p> <p> Не можете найти ответ? Отправьте свой вопрос напрямую, используя нашу контактную форму, и мы постараемся ответить. </p> <h5> Шаг 7. Дальнейшее развитие </h5> <p> Итак, мы показали вам, как создать веб-сайт, добавить тему и установить необходимые плагины. </p> <p> Хотите пойти еще дальше? </p> <p> Используя WordPress, вы можете создавать мощные нишевые веб-сайты, способные делать гораздо больше. </p> <p> Для получения дополнительных примеров ознакомьтесь с нашим списком из 19 типов веб-сайтов, которые вы можете создать с помощью WordPress </p>. <h5> Часто задаваемые вопросы (FAQ) </h5> <p> Помогая тысячам людей создать сайт, мы ответили на довольно много вопросов.Ниже приведены ответы на наиболее часто задаваемые вопросы о создании веб-сайта. </p> <p> <strong> Является ли WordPress единственным способом создать веб-сайт? </strong> </p> <p> Нет, существует множество других разработчиков веб-сайтов. Мы считаем, что WordPress - лучшая и самая простая платформа для создания веб-сайтов. </p> <p> <strong> Как мне зарабатывать деньги на моем веб-сайте? </strong> </p> <p> После того, как пользователи помогли создать веб-сайт, это, безусловно, наиболее часто задаваемый вопрос. Есть много способов заработать деньги в Интернете с вашего сайта.</p> <p> У нас есть список из 25 способов заработать деньги в Интернете с помощью WordPress. Это не схемы быстрого обогащения. Если вы ищете способ быстро разбогатеть, зарабатывая деньги в Интернете, извините за плохую новость, такого способа нет. </p> <p> <strong> Как создать веб-сайт, на котором я могу продавать товары? </strong> </p> <p> Вы можете легко добавить интернет-магазин на свой сайт WordPress. Мы создали список лучших плагинов электронной коммерции для WordPress. Вы также можете следовать нашему пошаговому руководству о том, как открыть интернет-магазин.</p> <p> <strong> Нужно ли мне знать HTML / CSS для создания и настройки моего веб-сайта? </strong> </p> <p> Нет, вам не нужно знать HTML / CSS, чтобы создать сайт с помощью WordPress. Вы можете использовать один из многих плагинов для перетаскивания страниц WordPress, чтобы легко настраивать свои веб-сайты. </p> <p> <strong> Как я могу создать сайт бесплатно? </strong> </p> <p> Некоторые конструкторы веб-сайтов могут предлагать бесплатные варианты, но мы не рекомендуем их использовать. Часто они размещают на вашем веб-сайте свой бренд и рекламу, которая не выглядит профессионально.</p> <p> Лучше приобрести собственное доменное имя и хостинг, чтобы вы полностью владели своим сайтом. Посмотрите, в чем разница между доменным именем и веб-хостингом. </p> <p> <strong> Могу ли я создать такой веб-сайт, как eBay? </strong> </p> <p> Да, вы можете легко создать веб-сайт, такой как eBay, с помощью плагина аукциона для WordPress. У нас есть пошаговое руководство по созданию веб-сайта онлайн-аукциона с помощью WordPress, которому вы можете следовать. </p> <p> <strong> Могу ли я получить бесплатный домен для моего сайта? </strong> </p> <p> Да, некоторые веб-хостинговые компании предлагают бесплатный домен, если вы решите создать свой веб-сайт с их помощью.Bluehost - официально рекомендуемый хостинг-провайдер WordPress, и они предлагают пользователям WPBeginner бесплатный домен + 60% скидку на хостинг, если вы решите создать свой сайт с их помощью. </p> <p> <strong> Могу ли я создать такой сайт, как Facebook? </strong> </p> <p> Да, вы абсолютно можете использовать WordPress, чтобы превратить свой сайт в социальную сеть. У нас есть пошаговое руководство, как создать такой сайт, как Facebook, с помощью WordPress. </p> <p> <strong> Могу ли я создать веб-сайт с помощью доски обсуждений / форума? </strong> </p> <p> Совершенно верно.Вы можете использовать один из этих плагинов форума в WordPress для создания веб-сайта с функциями доски обсуждений. </p> <p> Мы надеемся, что это руководство помогло вам научиться создавать веб-сайт, не нанимая разработчика и не тратя слишком много денег. Вы также можете увидеть наш список из 19 полезных советов по привлечению трафика на ваш новый сайт WordPress. </p> <p> Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook. </p> .<table><hr><h2 class="relpost">Смотрите также</h2> <ul class="relpost"> <li><a href="/raznoe/kak-iskat-opredelennoe-slovo-na-sajte.html" title="Как искать определенное слово на сайте"><div class="relimg"><img src="/wp-content/uploads/kak-iskat-opredelennoe-slovo-na-sajte_0.jpg" /></div>Как искать определенное слово на сайте</a></li> <li><a href="/raznoe/kak-sdelat-klon-sajta.html" title="Как сделать клон сайта"><div class="relimg"><img src="/wp-content/uploads/kak-sdelat-klon-sajta_0.jpg" /></div>Как сделать клон сайта</a></li> <li><a href="/raznoe/kak-zarabotat-v-internete-sozdav-svoj-sajt.html" title="Как заработать в интернете создав свой сайт"><div class="relimg"><img src="/wp-content/uploads/kak-zarabotat-v-internete-sozdav-svoj-sajt_0.jpg" /></div>Как заработать в интернете создав свой сайт</a></li> <li><a href="/raznoe/kak-chasto-obnovlyaetsya-tic-sajta.html" title="Как часто обновляется тиц сайта"><div class="relimg"><img src="/wp-content/uploads/def.jpg" /></div>Как часто обновляется тиц сайта</a></li> <li><a href="/raznoe/kak-najti-favikon-na-sajte.html" title="Как найти фавикон на сайте"><div class="relimg"><img src="/wp-content/uploads/kak-najti-favikon-na-sajte_0.jpg" /></div>Как найти фавикон на сайте</a></li> <li><a href="/raznoe/ikonki-dlya-sajta-kak-my-rabotaem.html" title="Иконки для сайта как мы работаем"><div class="relimg"><img src="/wp-content/uploads/ikonki-dlya-sajta-kak-my-rabotaem_0.jpg" /></div>Иконки для сайта как мы работаем</a></li> <li><a href="/raznoe/kak-uznat-celevuyu-auditoriyu-sajta.html" title="Как узнать целевую аудиторию сайта"><div class="relimg"><img src="/wp-content/uploads/kak-uznat-celevuyu-auditoriyu-sajta_0.jpg" /></div>Как узнать целевую аудиторию сайта</a></li> <li><a href="/raznoe/kak-dobavit-sajt-na-ekspress-panel.html" title="Как добавить сайт на экспресс панель"><div class="relimg"><img src="/wp-content/uploads/kak-dobavit-sajt-na-ekspress-panel_0.jpg" /></div>Как добавить сайт на экспресс панель</a></li> <li><a href="/raznoe/kak-nazyvaetsya-znachok-sajta-v-poiskovike.html" title="Как называется значок сайта в поисковике"><div class="relimg"><img src="/wp-content/uploads/kak-nazyvaetsya-znachok-sajta-v-poiskovike_0.jpg" /></div>Как называется значок сайта в поисковике</a></li> <li><a href="/raznoe/kak-opisat-sebya-na-sajte.html" title="Как описать себя на сайте"><div class="relimg"><img src="/wp-content/uploads/kak-opisat-sebya-na-sajte_0.jpg" /></div>Как описать себя на сайте</a></li> <li><a href="/raznoe/kak-zajti-na-sajt-yukoz.html" title="Как зайти на сайт юкоз"><div class="relimg"><img src="/wp-content/uploads/kak-zajti-na-sajt-yukoz_0.jpg" /></div>Как зайти на сайт юкоз</a></li> </ul></table>