Как красиво оформить сайт: Как красиво оформить главную страницу сайта

принципы оформления статей на сайте, как привлечь внимание пользователя

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

Оформление статей: особенности текста

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

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

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

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

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

Основные принципы при оформлении статей в блоге

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

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

Понятная структура

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

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

• заголовки и подзаголовки;
• интервалы между абзацами;
• выделение информации другим начертанием — полужирным или курсивом;
• списки — маркированные, нумерованные и прочее.

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

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

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

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

Какие иллюстрации лучше использовать при оформлении статей:

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

Больше о визуальном контенте на сайте мы писали в этой статье.

Также нужно сказать о фоне для статей. Желательно не использовать большие изображения в качестве фона

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

Типографика

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

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

Больше о типографике для сайта мы писали в этой статье.

Элементы навигации

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

Такие блоки можно вставлять не только в конце, но и в контентной части:

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

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

Ссылки в блоге мы отмечаем красным цветом и подчеркиванием.

Также мы предлагаем пользователям оставлять комментарии к понравившимся статьям:

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

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

Фишки

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

Также можно показать сколько человек уже прочитало статью и количество комментариев:

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

Такое оформление является как дополнительным элементом навигации, так и деталью декора.

Превью

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

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

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

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

Адаптивность

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

На что нужно обратить внимание в первую очередь:

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

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

Контент и содержание

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

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

Как привлечь внимание пользователя к информации в статье

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

Отдельные блоки

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

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

Шрифт

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

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

Яркие акценты, баннеры

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

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

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

Управление вниманием

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

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

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

Главная страница ᐈ Как оформить главную страницу сайта

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

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

Из статьи вы узнаете:

1. Зачем нужна домашняя страница
2. Какая информация должна быть на главной странице
3. Требования к главной странице сайта 
4. Оформление главной страницы в зависимости от вида сайта
5. Дизайн главной страницы сайта
6. Примеры оформления главной страницы сайта
7. Шпаргалка: как правильно создать главную страницу сайта

Зачем нужна домашняя страница

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

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

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

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

Статья по теме:

Что такое лендинг и как его создать

Читать статью

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

• о компании
• чем она занимается
• что предлагает
• почему стоит купить именно здесь
• куда двигаться дальше

О компании

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

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

hostiq.ua

Чем занимается компания

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

zagariya-design.com.ua

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

Что вы предлагаете

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

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

nutsking.com.ua

Пробуйте качественный хостинг с рейтингом 9,7 из 10 баллов

на основе 1900 отзывов клиентов!

Тестировать 30 дней бесплатно

Почему стоит купить именно здесь

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

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

Сформировать доверие к бренду помогут отзывы других клиентов, список ваших партнеров, рейтинг компании среди конкурентов. Только не пишите «‎мы в 20-ке лучших»: четко укажите ваше место в конкретном рейтинге. Если оно не выглядит достаточно привлекательным и убедительным, не вызывает у вас чувства гордости, лучше об этом не пишите.

vps.ua

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

Куда двигаться дальше

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

hostiq.ua

Требования к главной странице сайта 

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

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

Заголовок и торговое предложение

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

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

nutsking.com.ua

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

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

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

Призыв к действию, или call to action — один из способов провести клиента в глубь сайта. Яркие и заметные кнопки с короткими надписями «сравнить тариф», «получить скидку», «перейти к хостингу» стимулируют посетителя лучше узнать продукт, протестировать его или получить более подробную информацию.

shmed.com.ua

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

Нужен сайт?
Сделать сайт самому для бизнеса или хобби с нашими готовыми решениями легко как раз-два-три. Бесплатный тест 30 дней!

Создать сайт

Подписка

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

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

foxtrot.com.ua

Контактные данные

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

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

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

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

spellchocolate.com

Хедер и футер

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

privatbank.ua

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

comfy.ua

Навигация

Навигация по сайту включает два основных пункта:

• меню навигации;
• расположение основных элементов на сайте.

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

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

french-shop.com.ua

Больше о навигации на сайте можно почитать в Бюро Горбунова.

Изображения

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

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

svetoteh.com

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

Поиск по сайту

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

rozetka.com.ua

Статья по теме:

10 плагинов WordPress для поиска по сайту

Читать статью

Оформление главной страницы в зависимости от вида сайта

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

• интернет-магазин
• сайт услуг
• инфопортал

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

Интернет-магазин

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

Исходя из этих задач, в структуре главной страницы интернет-магазина есть:

• визуализация основных категорий товаров — помимо стандартного перечисления в хедере используют иконки продуктов;
• баннер со скидками и крупными акциями;
• акции и скидки — баннер на главной странице сайта используют для крупных акций, в то время как в раздел с акционными предложениями выносят конкретные наименования и показывают выгоду для покупателя;
• разделы «Хит продаж», «Топ-предложения», «Товар дня»;
• новости, обзоры, рейтинги — сюда попадают превью статей, видео-обзоры и сравнение товаров.

Статья по теме:

Как создать и открыть свой интернет-магазин

Читать статью

Сайт услуг

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

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

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

upgrade-yourself.com.uaupgrade-yourself.com.ua

Информационный портал

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

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

edition.cnn.com

Любите продавать?
Держите хостинг для интернет-магазина с гарантированным аптаймом и +30% экономии при годичной оплате

Продавать с HOSTiQ.ua!

Дизайн главной страницы сайта

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

Кроссбраузерность и удобство пользования 

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

Цветовое решение

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

Одна мысль на одном экране

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

tesla.com

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

Информационное единство

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

doctor.kharkov.ua

Статья по теме:

Обзор книги «Дизайн для недизайнеров»: базовые принципы дизайна красивого сайта

Читать статью

Примеры оформления главной страницы сайта

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

Сладости Spell

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

spellchocolate.com

Школа искусств St.Art

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

starts.com.ua

Конный клуб Пассаж

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

passage.kh.ua

Шпаргалка: как правильно создать главную страницу сайта

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

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

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

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

Yana

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

13 советов по улучшению внешнего вида вашего веб-сайта — Advantage Services

19 июля 2019 г.

MobileWeb HostingWebsite

 

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

Используйте тонкие узоры или текстуры  

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

Используйте пробелы 

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

 

Используйте БОЛЬШИЕ фотографии

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

Социальные сети 

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

  

Цвет и контраст 

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

 

 
Сетки и симметрия  

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

Графика  

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

Мобильная оптимизация 

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

 

Параллаксная прокрутка

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

 

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

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

 

Видео 

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

Баланс 

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

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

9 простых правил дизайна, которые сделают ваш сайт красивее

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

«У меня плохой дизайн».

Я слышал это много раз.

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

Ерунда!

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

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

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

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

Начнем с…

1. 1. Никогда не используйте цветной текст
   1. Пример №1
   2. Пример #2
2. 2. Используйте цветовую палитру
3. 3. Используйте только 1 или 2 шрифта
4. 4. Используйте популярный шрифт без засечек
5. 5. Используйте отображаемый шрифт для заголовков
6. 6. Сделайте пункты меню одним словом
7. 7. Сбалансируйте текст с медиа
8. 8. Выравнивание изображений по центру
9. 9. Разместите свои медиа в столбцах
10. Сделать более красивый сайт

1. Никогда не используйте цветной текст

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

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

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

Вот что я имею в виду.

Пример #1

Эта кнопка имеет синий текст и светло-серый фон. Она выглядит довольно плоской, а текст перекрывает форму кнопки:

Нажмите здесь

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

Нажмите здесь

И пока мы говорящие кнопки…

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

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

Bad

Нажмите здесь

BAD

Нажмите здесь

Good

Click Здесь

Good

Нажмите здесь

Good

Нажмите здесь

Bad

Нажмите здесь

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

Пример #2

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

Этот текст выглядит не очень хорошо, потому что он синий!

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

Еще один способ привлечь внимание с помощью цвета — сделать текст белым, а фон синим:

Цвета много, поэтому используйте их экономно!

Или вы можете немного понизить насыщенность, чтобы фон был очень бледным, а затем сделать текст черным для более тонкого вида:

Черный текст хорошо смотрится на бледном фоне.

Или вы можете оставить текст черным и добавить немного цвета в качестве рамки вокруг текста:

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

Или вы можете комбинировать фон и рамку:

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

Подводя итог правилам цветного текста:

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

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

Чтобы вы знали, мне пришлось написать немного CSS, чтобы добавить границы к абзацам выше. У Гутенберга пока нет опции границы. Вы можете добавлять границы уже с виджетами Elementor .

2. Используйте цветовую палитру

Выбор цвета на лету — большая ошибка новичка.

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

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

И вот в чем дело…

Я много лет работаю веб-дизайнером и до сих пор не могу создать красивую цветовую палитру.

И поэтому я жульничаю 😉

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

Мой секретный ресурс для поиска цветовых палитр — Color Hunt.

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

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

Честно говоря, очень весело просматривать палитры и черпать идеи и вдохновение для своего сайта.

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

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

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

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

Теперь поговорим о шрифтах!

3. Используйте только 1 или 2 шрифта

Цвета следует выбирать из вашей палитры. Шрифты похожи.

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

Часто, когда пользователи WordPress узнают, как менять шрифты на своем сайте, они вдруг хотят использовать их все!

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

• Увеличьте толщину шрифта (жирный)
• Увеличьте размер шрифта
• Добавьте цвет

Когда дело доходит до шрифтов, вы должны выбрать один или два для всего сайта , и если вы считаете, что вам нужно больше, чем что, подумайте об этом…

Google разработал шрифт Roboto (который вы тоже можете использовать — он есть в Google Fonts), и они используют этот шрифт везде .

Они используют его для Google.com, Youtube, Gmail, Google Docs, Chrome — буквально все их продукты используют этот шрифт для всего текста.

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

4. Используйте популярный шрифт без засечек

У меня есть для вас еще одно сокращение.

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

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

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

Чтобы уточнить результаты, щелкните значок Категории раскрывающегося списка и отмените выбор всех параметров, кроме Sans Serif .

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

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

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

Я тоже так делаю!

При разработке новых тем я обычно захожу в Google Fonts и ищу самые популярные шрифты для вдохновения.

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

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

5. Используйте экранный шрифт для заголовков

Если вас устраивает один шрифт, вы можете пропустить эту тактику.

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

Используйте экранный шрифт для заголовков вашего сайта.

Первый выбранный вами шрифт был разработан для чтения на малых размерах, но шрифт display специально разработан для больших размеров (например, для больших дисплеев, понимаете?).

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

Заголовки — идеальное место для использования экранных шрифтов, потому что:

• Они всегда большие
• Они используются экономно

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

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

На данный момент в Google Fonts около 300 экранных шрифтов, так что приятного просмотра и не забудьте выбрать только один!

Вот еще один совет по текстовому дизайну, который сделает ваш сайт красивее.

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

6. Сделайте пункты меню одним словом

Из всех советов по дизайну, перечисленных в этом посте, этот самый простой в реализации.

Взгляните на меню Compete Themes:

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

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

Например, посмотрите, как равномерно расположены пункты меню в The New York Times.

Легко просматривать темы и различать их.

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

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

Пробелы внутри пунктов меню трудно отличить от пробелов между пунктами меню

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

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

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

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

Следующие несколько советов помогут вам сделать ваш контент более привлекательным.

7. Сбалансируйте текст и медиафайлы

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

Изучите содержание популярных веб-сайтов, таких как Buzzfeed, Washington Post или Bloomberg Businessweek, и вы обнаружите те же закономерности.

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

Этот список Buzzfeed содержит изображения, кнопки «Поделиться», ссылки и заголовки почти после каждого

абзаца, как я это называю, правило четырех абзацев.

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

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

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

To break up a long series of paragraphs, you can add:

• Images
• Blockquotes
• Videos
• Embedded Tweets
• Advertisements
• Tables
• New headings
• Lists 😉

It’s also a good Идея применить жирный шрифт к важным частям вашего текста, чтобы привлечь внимание и создать больший визуальный интерес.

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

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

8. Изображения с выравниванием по центру

Изображения в WordPress могут иметь любое из следующих выравниваний:

• По правому краю
• По левому краю
• По центру

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

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

Кроме того, убедитесь, что ширина изображения равна ширине содержимого сообщения .

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

Если выбрать выравнивание по левому или правому краю, изображение «плавает» в одну сторону, поэтому текст обтекает его, например:

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

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

На мобильных устройствах это может выглядеть ужасно:

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

Теперь ваш контент должен адаптироваться к размерам экрана от 400 до 2560 пикселей в ширину.

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

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

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

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

9. Разместите ваши медиафайлы в столбцах

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

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

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

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

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

И я знаю, о чем вы сейчас думаете…

«Хорошо, но я хочу, чтобы изображения отображались больше».

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

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

Другими словами, использование галереи дает вам лучшее из обоих миров.

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

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

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