Примеры сайтов созданных на WordPress

Примеры сайтов на WordPress

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

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

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

1. Услуги обеззараживания воды

Услуги обеззараживания воды

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

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

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

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

2. Производственное предприятие

Производственное предприятие

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

Прайс-листы продукции загружены в виде PDF-документов. Ссылки на них размещены на отдельной странице. Активно используются фотографии и галереи. Последние, скорее всего, реализованы с помощью одного из плагинов для WordPress.

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

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

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

3. Дизайнерские беседки и барбекю

Дизайнерские беседки и барбекю

Качественная визитка компании по проектированию/изготовлению барбекю, беседок, печей и всего, что находится по смыслу около этой темы. Первое, что бросается в глаза, – настойчивая попытка превратить посетителя в клиента. Как только входите на сайт, сразу появляется плашка связи по WhatsApp, крупный виджет которого висит на каждой странице, прыгает при скроллинге и даже в пассивном состоянии. Он очень крупный и навязчивый. Раздражает, хотя, возможно, на некоторых клиентах такое решение срабатывает. Ему помогают онлайн-консультант и всплывающая форма заказа обратного звонка. Тот вариант, когда страница контактов не особо-то и нужна. Предложения связаться атакуют со всех щелей. Сделано качественно, симпатично, но всё же они переборщили с напором, на наш взгляд: человек толком не понял, куда он попал, а уже пора кому-то звонить или писать.

Дизайн у сайта неплохой, но вполне обыкновенный по меркам WP. Каких-то изысков, интересных решений не видать, но, тем не менее, всё сделано добротно. Информация в блоках хорошо подана, отлично читается. Шрифты внятные, крупные, как и кнопки, фотографии одного размера и все достаточно приличного качества. Красные и зелёные акценты элементов придают сайту красочности, контрастности. Присутствует некоторое количество графики и анимаций, которые добавляют макетам страниц живости. Логотип простой, но очень точно передаёт направление деятельности компании.

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

4. Монтаж кондиционеров и вентиляции

Монтаж кондиционеров и вентиляции

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

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

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

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

5. Белорусский картофель оптом

Белорусский картофель оптом

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

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

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

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

6. Коммуникационное агентство

Коммуникационное агентство

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

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

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

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

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

7. Галерея красоты

Галерея красоты

Лендинг салона по уходу за женской фигурой и кожей – массажи, SPA, коррекция, липосакция, эпиляция и всё такое. Что сразу бросается в глаза при попытках взаимодействовать с сайтом, так это баги меню – оно попросту пропадает с положенного места в шапке при переходе на любую страницу. Блок с программами тоже исчезает. Причём, даже после обновления страницы ситуация не меняется. Ctrl+F5 тоже не помогает. Помогает только ручное удаление текста ссылки вплоть до домена с обновлением страницы. В общем, явная техническая проблема.

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

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

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

8. Чудные штуки

Чудные штуки

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

Да и вообще, визитка солидная, страниц много, над оформлением каждой из них проведена приличная работа, что легко просматривается. Есть даже блог, в нём не так уж много статей, но оформление ленты и публикаций отличное – при виде такого всё равно, как и что там написано, можно просто рассматривать качество дизайна. Контент тоже качественный, классно форматирован, легко читается – сразу видно, что писали копирайтеры. Живенько, с задором материалы собраны.

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

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

9. Сайт стоматологической клиники

Сайт стоматологической клиники

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

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

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

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

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

Выводы

WordPress — мощный и гибкий инструмент для создания сайтов. В представленных примерах мы показали только малую часть того, что можно реализовать на этой CMS. Функциональность движка зависит от того, какие плагины к нему подключил пользователь. Если у разработчика есть опыт работы с HTML/CSS/JavaScript и PHP, то он может создавать кастомные решения для WordPress.

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

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

» Примеры сайтов » Примеры сайтов созданных на WordPress