Стили сайтов с примерами: Стили дизайна сайтов: гайд по направлениям веб дизайна

Примеры сайтов в разных стилях

18.10.2011

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

Сайты с иллюстрациями

<inserviowebsolutions

Отличный сайт с привлекательной мультяшной векторной графикой и необычной навигацией

The combine

Сайт с векторными иллюстрациями выполненный методом «ScrollTo»

War child

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

I love spoon

Потрясающий иллюстрированный флеш-сайт со смешанным типом иллюстраций — векторными и рисованными от руки (Hand-draw)

Leg work studio

Hand-draw сайт c интересным эффектом при наведении на пункты меню, которое расположено внизу страницы.

Сайты в стиле ретро

Walking wall of words

busesatthebrewery

Сайт в стиле ретро с интересной типографикой в меню

Henry realestate

Ретро сайт с хорошо подобранными шрифтами

Сайты в стиле минимализм

Barnt & arnst

Минималистичный сайт в пастельных цветах с прикольной гостевой книгой

fruitablanch

Сайт на каталонском языке семейной компании, которая занимается выращиванием фруктов. Интересная структура и отличная типографика

Оbey clothing

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

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

Womens timberland

Что тут скажешь, классная фотография создает атмосферу на сайте

Foreign policy design

Хорошо, когда фоновые фотографии меняют и на этом сайте хорошее меню

360 lang strasse

Замечательная идея для социальных сайтов, сайтов путешествий и др.

Show studio

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

Сайты в стиле гранж

Garynock

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

exptypo

Отлично выдержан гранжевый стиль.

edgepointchurch

На этом сайте хорошая цветовая гамма и типографика.

Сайты с газетным стилем

The Times

«The Times», Сээээээр… Что тут еще скажешь. Газетный стиль замечателен для сайтов с огромным и разнородным контентом.

New Yorker

Gapers block

Сайты в стиле web 2.0

Сssmenow

Vimeo

Fluid theme demo

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

ПОДПИСАТЬСЯ НА РАССЫЛКУ НОВОСТЕЙ

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

04.11.2019

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

03.10.2019

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

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

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

Из чего состоит дизайн сайта?

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

Из чего складывается веб дизайн?

Сетка

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

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

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

Шрифты

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

• с засечками или без;
• строгие угловатые или закруглённые мягкие;
• плотные или утонченные;
• вытянутые или плоские;
• машинные или рукописные.

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

Графика

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

Палитра

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

Помимо стандартных многоцветных сайтов, в последнее время стали популярны три типа палитры:

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

Формы

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

Эти правила распространяются на:

• фоновые изображения;
• кнопки;
• иконки;
• блоки с контентом;
• иллюстрации и т.
  д.

Анимация

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

Требования к современному веб дизайну

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

Сделать хороший веб-проект помогут следующие требования:

• Пользовательские сценарии

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

Какая у посетителя цель? Какие этапы он должен пройти? Что поможет ему сделать это? Эти вопросы помогут вам при проработке.

• Юзабилити

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

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

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

• Небольшие отрывки текста

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

• Умеренность и баланс

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

10 трендов веб-дизайна 2022 года

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

№1: Memphis vs Минимализм

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

https://65db.fr/en/

https://www.tateesq.com/

№2: 3D-изображения и анимация

Хотя flat design остается одним из лучших решений для интерфейсов, всё больше IT-компаний и сервисов включают в свои макеты 3D-элементы. Такие работы выглядят объемными и хорошо вовлекают пользователей в контент.

https://next.junni.co.jp/

https://nexus.hexagon.com/

№3: Типографика без изображений

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

https://librairie-experience.com/

https://www.antaeustravel.com/

№4: Видимая сетка

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

https://www.draw-your-polo.lacoste.com/fr/gallery

https://www.getrepeat.io/

№5: Брутализм

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

https://miro.com/ways-we-work/

№6: Монохром

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

https://supercloud.co/

https://www.aircompany.com/

№7: Необычный скролл

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

https://ever.ru/en/

№8: Сплит-экраны для навигации

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

https://www. rolandmouret.com/en-eu

https://www.tde.nl/

№9: Неоновая подсветка

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

https://creativecom.org/

https://claystack.com/

№10: Рисунки

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

https://we-sounds.com/

https://snackweirdos.com/

Резюме

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

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

стилей — служба поддержки WordPress.com

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

В этом руководстве

Доступ к стилям

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

Эта функция доступна на сайтах с нашими тарифными планами WordPress.com Premium, Business и Commerce. Если у вашего сайта есть один из наших устаревших планов, он доступен в плане Pro.

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

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

Найдите настройки стилей

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

Чтобы найти панель «Стили», выполните следующие шаги:

1. Посетите панель управления вашего сайта.
2. Перейти к Внешний вид → Редактор .
3. Выберите Стили в меню слева.
   • В некоторых темах вам может быть предложено выбрать из различных комбинаций стилей. Нажмите. значок карандаша , чтобы затем открыть полные настройки стилей.

Значок стилей

В настройках стилей вы увидите следующие параметры:

• Просмотр стилей (только для некоторых тем)
• Типография
• Цвета
• Макет
• Блоки

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

Обзор стилей

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

Typography

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

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

• Текст
• Ссылки
• Заголовки
• Подписи
• Кнопки

Варианты, найденные в Typography, включают:

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

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

Настройки типографики для текста.

Colors

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

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

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

• Текст
• Фон
• Ссылки
• Подписи
• Кнопки
• Заголовки

Подробнее см. в нашем специальном руководстве по настройке цветов вашего сайта.

Макет

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

Дополнительную информацию см. в нашем специальном руководстве по настройкам размеров.

Блоки

На панели «Стили» нажмите Блоки , чтобы настроить внешний вид определенных блоков на всем сайте.

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

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

Книга стилей

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

1. На панели «Стили» нажмите кнопку Книга стилей в правом верхнем углу — значок выглядит как глаз, как показано на изображении справа.
2. Используя вкладки в верхней части экрана, перемещайтесь между различными категориями блоков, такими как текст, мультимедиа, дизайн и т. д.
3. Щелкните значок Книга стилей еще раз, чтобы отключить его и вернуться к содержимому.

Дополнительный CSS

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

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

1. Откройте панель «Стили».
2. Щелкните многоточие (три точки) в правом верхнем углу.
3. Выберите Дополнительный CSS .
4. Введите свой CSS в соответствующем поле. Содержимое в левой части экрана будет отражать ваши изменения CSS в режиме реального времени.
5. Щелкните Сохранить .

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

1. Откройте панель «Стили».
2. Выберите блоков .
3. Выберите блок.
4. Прокрутите вниз и нажмите Дополнительно .
5. Введите код CSS в поле Additional CSS . Содержимое в левой части экрана будет отражать ваши изменения CSS в режиме реального времени.
6. Щелкните Сохранить .

Ревизии стилей

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

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

Сбросить все стили

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

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

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

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

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

Обзор видео

Основы Squarespace: использование стилей сайта — Пейдж Брантон

Squarespace

25 фев

Автор Пейдж Брантон

Пре-с. Новичок в Squarespace? Вы можете подписаться на бесплатную пробную версию здесь ! О, и я также сделал вам небольшую скидку, используйте код PAIGE10 для 10% от вашего первого года. (Да, это партнерская ссылка!)

Хорошо! Продолжая с того места, где мы остановились на основах Squarespace: что такое блоки? и Основы Squarespace: страницы и параметры навигации , пришло время погрузиться в настройку стилей сайта для вашего сайта!

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

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

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

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

Оказывается, любые изменения, сделанные с помощью настроек панели дизайна, распространяются на весь сайт. 🤦‍♀️

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

Настройка стилей шрифтов для вашего сайта в Squarespace

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

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

Вот пример добавления одного шрифта каждого типа в первый раздел страницы вашей доски настроения:

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

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

Назовите их маленькими, средними и большими (я добавил дополнительные eee’s , чтобы увеличить ширину кнопки для примера), а затем измените их настройки в редакторе блока кнопок, чтобы они соответствовали.

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

Начнем со шрифтов, хорошо? Идите вперед и перейдите к дизайн > шрифты .

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

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

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

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

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

Семейство : фактический тип шрифта (например, Times New Roman)

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

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

Высота строки: пробел между каждой строкой текста.

Обязательно оставьте это значение на уровне 1.0 или выше, иначе все начнет перекрываться!

Межбуквенный интервал: пробел между каждой буквой

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

Размер: Просто используйте эти ползунки, чтобы установить каждый тип шрифта в нужный размер!

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

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

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

Настройка цветовых тем вашего сайта в Squarespace

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

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

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

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

Настройка цветовых тем заголовка сайта/основной навигации

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

Далее нам нужно сделать несколько вещей, чтобы подготовить шапку нашего сайта к изменению цветовой темы!

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

• Загрузить свой логотип

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

• Изменить стиль и положение вашей основной панели навигации 9000 3

• Выберите цветовую тему для главной навигации

Откройте цветов панель. Видите эту прозрачную настройку?

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

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

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

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

Установка светлого фона, темного фона и цветовых тем нижнего колонтитула

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

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

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

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

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

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

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

Если у вас уже есть установленные цветовые коды для вашего бренда (например, те цветовые коды html, которые выглядят примерно так: #FAAF99), тогда скопируйте и вставьте их прямо в цветовую панель каждого элемента.

Все еще экспериментируете с цветами и атмосферой вашего бренда?

Не беспокойтесь, Squarespace вас прикроет! Просто перемещайте курсор внутри цветовой панели каждого элемента, пока не найдете оттенок, который вам нравится!

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

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

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

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

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

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

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

О, и еще кое-что, прежде чем вы уйдете!

Кнопки

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

• , будут ли ваши кнопки сплошными или просто контурными

• независимо от того, имеют ли ваши кнопки квадратную, закругленную или форму пилюли

• сколько отступов (иначе пробелов) есть между текстом вашей кнопки и краями вашей кнопки

Впервые в Squarespace? Вы можете подписаться на бесплатную пробную версию здесь ! О, и я также сделал вам небольшую скидку, используйте код PAIGE10 для 10% от вашего первого года.