Овладеть золотым соотношением в дизайне

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

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

Давайте узнаем больше.

Что такое золотое соотношение?

Золотое соотношение равна приблизительно

1.618.

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

Вы можете рассчитать золотое соотношение, используя последовательность Fibonacci. Начните с 0 и 1. Добавьте их, чтобы получить 1. Затем добавьте 1 и 1, чтобы получить 2. Продолжайте добавлять последние два числа: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Когда вы делите какое -либо большее число на предыдущее число, вы приближаетесь к 1.618.

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

Изображения предоставлены: Лукас и динамичный Ван на Unsplash и Milena Carolina Dos Santos Mangueira

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

Почему это важно: от старых зданий до веб -дизайна

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

Репрезентативное изображение

Хорошо известные дизайнеры все еще используют это. Логотип Apple использует пропорции золотого соотношения. Бывший логотип Bird Twitter следовал за этими измерениями. Журналы помещают важный контент в золотых отношениях, а не прямо в центре.

Изображения предоставлены: Widewalls & Design Shack

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

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

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

Почему ваши дизайны чувствуют себя «выключенными» (и как это исправляют соотношения)

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

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

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

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

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

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

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

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

Золотое соотношение может помочь исправить это. Вместо того, чтобы сделать свой герой 70 процентов, попробуйте 61,8 процента, оставляя следующий раздел 38,2 процента видимым.

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

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

Как рассчитать пропорции золотого соотношения

Вам не нужна причудливая математика. Просто помните 62 и 38. Эти цифры составляют до 100, поэтому они работают в процентах.

Разделите любое пространство, предоставив 62% большей части и 38% меньшей части. Ваш сайт имеет ширину 1000 пикселей. Сделайте свой основной контент 620 пикселей. Поместите боковую панель на 380 пикселей. Идеальное золотое соотношение.

Получил раздел высотой 500 пикселей. Ваша основная область получает 310 пикселей. Остальные получают 190 пикселей.

Быстрые правила для частей веб -сайта

Секция героя должна занять около 60% того, что люди видят в первую очередь. Остальное идет к вашему основному предварительному просмотру контента. Сделайте карты 60% высокими, как и широкие. Карта шириной 300 пикселей становится ростом 180 пикселей.

Кнопки работают так же. Ширина 100 пикселей означает высоту 60 пикселей. Ваш текстовый столбец имеет ширину 600 пикселей. Прекратите добавлять контент около 370 пикселей вниз. Затем добавьте свой следующий раздел.

Это выглядит правильно?

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

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

Общее золотое соотношение ошибки дизайнеры делают

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

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

Многие дизайнеры вокруг 1.618 до легких чисел, такие как 1,5 или 1,7. Ваш мозг замечает разницу между 62% и 60%, и этот небольшой разрыв влияет на визуальную гармонию, которую вы работаете.

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

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

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

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

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

Почему многие строители страниц игнорируют золотые соотношения?

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

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

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

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

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

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

Создание идеальных пропорций с Divi 5

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

Что такое Диви?

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

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

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

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

Создавать веб -сайты без головных болей

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

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

изображения,

код,

и целые разделы страниц с использованием Divi AI.

Вы даже можете редактировать свои существующие фотографии, просто описав то, что вам нужно.

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

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

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

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

Получите диви

Divi 5: Следующий шаг

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

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

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

Что улучшилось? Что нового?

• Полная структура перестройки избавляет от старых шорткодов. Все работает на новом коде на основе блоков, который загружается быстрее и работает лучше.
• Редактирование одного щелчка позволяет вам нажать на любую часть вашей страницы, чтобы немедленно отредактировать ее. Больше нет охоты на маленьких икон или копать в меню.
• Настраиваемые точки останова дают вам семь размеров экрана для работы вместо трех. Вы можете изменить каждый, чтобы соответствовать вашим точным потребностям.
• Поддержка Advanced Units позволяет использовать Calc (), Clamp (), min (), max () и все новые единицы CSS прямо в строителе.
• Переменные дизайна позволяют сохранять цвета, шрифты, размеры, изображения, текст и ссылки в одном месте. Измените их один раз, и они будут обновляться везде на вашем сайте.
• ПРЕДУПРЕТЫ Опционной группы позволяют вам сохранить и повторно использовать стили для границ, шрифтов, теней и интервалов. Они работают в разных частях вашего сайта.
• Вложенные ряды позволяют вам помещать ряды в другие ряды. Вы можете создать сложные макеты без специальных разделов.
• Группы модулей объединяют несколько модулей в одну единицу. Это облегчает управление сложными макетами. Вы также можете сделать свои пользовательские модули.
• Многопанельное рабочее пространство позволяет разместить панели там, где вы хотите. Вы можете работать с несколькими настройками, открытыми одновременно.
• Управление атрибутами дает вам точное управление при копировании, вставке и сбросе стилей, контента и пресетов между разными частями.
• Light/Dark Mode позволяет вам выбрать тему, которая легче для ваших глаз, пока вы работаете.
• Масштабирование Canvas позволяет изменить размер вашей рабочей области, чтобы увидеть, как выглядит ваш сайт на разных экранах. Не нужно переключать режимы предварительного просмотра.
• Улучшения производительности делают страницы быстрее, быстрее отображаются, и чувствуют себя более плавными, когда вы строите.

Попробуйте Divi 5 сегодня

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

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

Как использовать золотые соотношения, используя Divi 5

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

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

• Цветовые переменные содержат цвета бренда, фоны, текстовые цвета и другие оттенки, используемые по всему сайту.
• Переменные шрифта поддерживают шрифты для заголовков, текста тела и специальных элементов.
• Переменные изображения хранят общую графику, такую ​​как логотипы или фоновые шаблоны для легкого использования.
• Переменные текстовой строки сохраняют многоразовый контент, такие как лозунги, контакты и юридические заметки.
• Переменные ссылки сохраняют URL -адреса, которые вы часто используете, например, в социальных сетях или ключевых страницах.
• Номерные переменные обрабатывают измерения в пикселях, процентах, EMS, REMS и единицах Viewport и работают с функциями CSS, такими как Calc (), чтобы сохранить пропорции прямо на любом экране.

Настройка переменных золотого соотношения

Откройте панель панели Divi 5 и найдите значок переменного менеджера на левой боковой панели.

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

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

Типографические переменные

• H1 размер: зажим (47px, 4,7vw, 76px)
  • Минимум 47px: даже на самых маленьких телефонах (шириной 320px) ваш H1 остается достаточно большим, чтобы установить иерархию. Все, что меньше теряет воздействие в качестве основного заголовка.
  • 4.7VW Среднее значение: этот блок ширины просмотра гласит текстовый масштаб гладко. При ширине экрана 1000 пиксеров, 4,7VW = 47px. На 1600px он растет до 75px
  • Максимум 76px: мы получаем это путем умножения 18px × 1,618 три раза (18 × 1,618 × 1,618 × 1,618 = 76,244PX)
• H2 Размер: зажим (29px, 3,5 ВВт, 47px)
  • Минимум 29px: H2 заметно меньше, чем H1 на мобильном
  • Масштабирование 3,5 Вт: пропорционально меньшее масштабирование, чем H1 для поддержания иерархии
  • 47px Максимум: ровно 76px ÷ 1,618 = 47,122px
• H3 размер: зажим (18px, 2,9 ВВт, 29px)
  • Минимум 18 пикселей: соответствует размеру текста тела на мобильном телефоне, чтобы сохранить вертикальное пространство
  • Масштабирование 2,9 Вт: растет более мягко, чем более крупные заголовки
  • 29px максимум: точно 47px ÷ 1,618 = 29,124px
• H4 размер: зажим (14px, 2,2vw, 22,4px): продолжить делить ~ 29px ÷ 1,618 = 17,994px, но мы устанавливаем минимум до 22,4px для читаемости
• H5 Size: зажим (13px, 1,8vw, 18px): наш базовый размер шрифта 18px идеально подходит в масштабе здесь
• Размер текста тела: зажим (16px, 1,6VW, 18px): стандартная база 18px, которая все расчеты связаны с

Функция Clamp () позволяет тексту плавно изменять размер между экранами. Это требует трех значений: наименьший размер для телефонов, среднее значение для масштабирования и самый большой для настольных компьютеров. Мы используем ширину просмотра (VW) в середине, потому что это делает текст постепенно расти, когда экраны становятся больше. Нет внезапных прыжков между размерами.

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

Расстояние переменных

Каждое значение умножает предыдущее на 1,618:

• Пространство XS: зажим (8px, 1vw, 10px)
  • Почему база 10px: это самая маленькая удобная касательная целевая прокладка на мобильном телефоне. Мудрость промышленности рекомендует минимальные целевые показатели 44 пикселей, а 10PX накладывает со всех сторон, плюс контент попадает туда. Меньшее, чем 10px, элементы чувствуют себя тесными.
  • Почему минимум 8 пикселей: на телефонах шириной до 360 %, даже 10px может показаться слишком просторным. Мы падаем до 8px, чтобы максимизировать пространство для контента, сохраняя при этом элементы различимыми.
  • Почему 1VW: растет расстояние пропорционально и дает вам ровно 10px при ширине экрана 1000px
• Маленькое пространство: зажим (13px, 1,6VW, 16.18px): идеально подходит для прокладки кнопок и интервалов в области поля.
• Пространственная среда: зажим (21px, 2,6VW, 26,18 пл.)
• Большое пространство: зажим (34px, 4,2VW, 42,36px): создает передышку между основными секциями при масштабировании с размером экрана.
• Space XL: зажим (55px, 6,8vw, 68,54px): отлично подходит для верхней/нижней прокладки на секциях героев и основных блоков функций. Разделы героев нуждаются в существенной прокладке даже на мобильных устройствах. Ниже 50px содержание героя чувствует себя тесно по краям.
• Пространство XXL: зажим (89px, 11VW, 110,89px): используйте экономно. Может быть, для специальных секций, которые нуждаются в драматической передышке.

Переменные макета

• Ширина первичного столбца: 61,803%
  • Как мы его получаем: разделить 1 на 1,618 = 0,61803 (или 61,803%)
  • Используйте это для вашей основной области контента в любом макете с двумя столбцами
• Вторичная ширина столбца: 38,197%
  • Используйте для столбца боковой панели в том же ряду
  • Получен из 100% - 61,803% = 38,197%
• Контейнер максимальная ширина: 1165px
  • Текст становится трудно читать, когда строки растягиваются за 72 символов,
    • и предполагая 10px в качестве минимального размера текста, оптимальное ширину считывания (720px) × золотое соотношение (1,618) = 1165px
  • Примените к вашему основному разделу или строке, которая содержит ваш контент
• Коэффициент золотой высоты: расчет (100% / 1,618)
  • Это можно использовать в качестве значения в высотах для групп модулей/модулей, таких как изображения, ящики для вызова, разделы героев, карты членов команды и т. Д.
  • Это создаст прямоугольники вместо квадратов или случайных форм. Ваш мозг находит эти пропорции естественными, как идеально сформулированная фотография.
  • Как нам это получить? Золотое соотношение говорит, что если ширина = 1,618, то высота = 1. Поэтому, если ширина = 100%, то высота = 100%÷ 1,618 = 61,8%. Эта формула делает эту математику автоматически.

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

Создание секции героев с золотыми соотношениями

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

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

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

Для фона раздела у вас есть два основных варианта, используя ваши переменные дизайна:

Вариант 1: сплошной цвет

• Нажмите на поле «Цвет фона» и выберите свою основную цветную переменную из раскрывающегося списка. Это держит ваш раздел героев в соответствии с идентичностью вашего бренда. Если ваш основной цвет слишком легкий для контраста текста, вместо этого используйте свою вторичную цветную переменную. Убедитесь, что какой -либо цвет, который вы выберете, обеспечивает достаточный контраст, чтобы ваш текст оставался читаемым. Следите за нашим вдохновением, мы добавим градиент фона и основных цветов с остановкой 72% и при 90 °.

Вариант 2: Фон изображения

• Примените переменную изображения своего героя (если вы создали ее) через поле фонового изображения. Нажмите значок переменных рядом с настройкой фонового изображения и выберите сохраненную переменную изображения. При использовании фоновых изображений добавьте наложение для читаемости текста. Установите цвет наложения в свою основную цветную переменную и отрегулируйте непрозрачность до 40-60%. Это темнеет изображение достаточно, чтобы сделать белый текст хрустящим и читаемым.
• Вы также можете использовать свою вторичную цветную переменную для наложения, если она лучше контрастирует с выбранным фоновым изображением.

Создание макета двухколонов

Добавьте строку с двумя столбцами.

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

Мы также позволим «использовать настраиваемую ширину желоба» и установить ее на 1. Это поможет нам использовать размахивание золотого отношения между нашими модулями.

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

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

Настройка типографии, которая течет

В вашем основном столбце добавьте два модуля заголовка.

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

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

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

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

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

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

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

Стилизация правой колонки

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

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

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

Результат

Ниже приведен результат:

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

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

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

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

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

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

Создайте свой первый раздел, используя переменные, которые мы создали. Получите типографику, интервал и макет точно правильно. Затем нажмите на значок PRESET рядом с каждой группой стиля (типография, расстояние между границей и т. Д.) И сохраните их в качестве предварительных настроек группы.

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

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

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

Математика до красивого дизайна, Divi 5 делает это легко

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

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

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

Математика работает повсюду, но Divi 5 фактически делает его практичным постоянно.