Обзор Инспектора

Обзор Инспектора

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


Видимость элемента

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

Атрибуты


Раздел атрибутов инспектора будет содержать:

Float — это в основном то же самое, что выравнивание текста влево/центр/вправо, но для элементов вместо текста.
Id — уникальный идентификатор для выбранного элемента, поэтому css cap будет проще применить к нему.
Класс — здесь будут перечислены все выбранные классы элементов, вы можете удалить их, щелкнув значок x рядом с именем класса, вы можете применить новые пользовательские классы к элементу, щелкнув в любом месте ввода (серый фон), введя свое имя класса и нажав enter или нажав зеленую галочку. Есть куча предопределенных классов, которые вы можете использовать, например text-danger сделает цвет текста красным. Вы можете найти больше предопределенных классов здесь.
Этот раздел также будет иметь различные другие атрибуты в зависимости от того, какой элемент вы выбрали, например, если у вас выбран заголовок, он будет иметь атрибут типа заголовка, поэтому вы можете выбрать между h1, h2, h3, h4, h5, h6.

Фон

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

Цвет

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

Изображение

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

Градиент

Нажмите на кнопку градиент, чтобы открыть панель градиента, здесь вы можете выбрать из более чем 30 css3 градиентов, включенных в architect, чтобы использовать их в качестве фона выбранного элемента.

Тени

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

Угол — чтобы управлять углом тени, нажмите на зеленую ручку в круге и перетащите ее вокруг.
Цвет — чтобы управлять цветом теней, нажмите на белый квадрат, это вызовет палитру цветов, такую же, как и для цвета фона элементов.
Расстояние — это будет управлять тем, как далеко тень будет находиться от выбранного элемента.
Размытие — это будет контролировать, насколько четкой будет тень.
Распространение — это будет контролировать, насколько велика тень.
Box/Text — применит тень либо к элементу box, либо к тексту внутри него.
Внутренний/наружный — либо применить тень к снаружи или внутри выбранного блока элемента.

Поля / Отступы

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

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

Стиль текста

Эта панель управляет внешним видом выделенных элементов текста.

Шрифт
Нажмите на кнопку font select, чтобы изменить шрифт выбранных элементов на один из собственных шрифтов браузера, или нажмите значок G, чтобы открыть google fonts modal, так что вы можете выбрать один из почти 700 шрифтов google.

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

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

Граница / Округлость Границы

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

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

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

Наверх