Раздел «Профиль» — идеальный способ представить людей, стоящих за вашей работой. Независимо от того, создаёте ли вы страница о нас, презентация команды или раздел биографии, этот макет позволяет вам представлять людей с элегантностью и ясностью.
Выделите каждого человека фото, имя, роль и история В формате, который создаёт ощущение личного и увлекательного общения. Раздел «Профиль» поможет вам установить более тесную связь с аудиторией, представляя ваш бренд или проект лично, будь то творческие команды и соавторы, спикеры, наставники или другие участники.
Благодаря простым возможностям настройки и понятному, адаптивному дизайну раздел «Профиль» позволяет легко представить людей, которые делают вашу работу возможной.
В этой статье:
- Что такое раздел «Профиль»?
- Добавить раздел профиля
- Добавлять и редактировать элементы списка
- Элементы списка последовательности
- Удаление элементов списка
- Управление элементами
- Изменение макета раздела
- Варианты стиля
Профильный раздел
Раздел «Профиль» — это набор отдельных профилей, куда можно добавить фотографию, имя, должность или должность, а также краткое описание. Вы также можете добавить ссылку или кнопку, чтобы перенаправить посетителей на подробные страницы или внешние ссылки, связанные с каждым профилем.
Добавить раздел профиля
- На страницу можно добавить раздел. Вы можете добавить раздел на уже существующую страницу или создать новую страницу на вашем сайте.
- На твоей странице, нажмите на синий + значок добавить Новый раздел на вашу страницу.
- Теперь вы увидите опцию категории разделов на левой стороне.
- Выберите Профиль и биоссылки (1) категорию и нажмите на Профиль вкладка (2), где вы можете выбрать разные макеты Профиль (3) раздел.
- Вы можете управлять шириной секции из настройки раздела и ширина контента от стиль контента.
- Идеальный размер изображения, которое вам нужно загрузить в этот раздел, будет зависеть от количества столбцов. Узнать больше.
- Заголовки, подзаголовки и описания должны быть короткими и четкими.
- В поле описания нажмите кнопку Enter кнопку для разрыва строки и Shift + Enter кнопку, чтобы начать с самой следующей строки.
Добавлять и редактировать элементы списка
Добавить элемент списка
После добавления раздела:
- Нажмите на Редактировать список изображений (1) кнопка, чтобы открыть панель элементов списка.
- Нажмите на Добавить элемент (2) Кнопка для добавления нового элемента списка.
- Вы можете выбрать Dдублировать или удалить (3) элементы списка.
Изменить элемент списка
Нажмите на элемент списка, который вы хотите отредактировать. Это откроет определенные параметры редактирования элемента списка.
Отсюда вы можете:
- Загрузить/удалить основное и дополнительное изображение (1)
Вы можете загрузить Вторичное изображение вместе с Основное изображение для каждого элемента списка. Когда пользователь наводит курсор на элемент, будет отображаться вторичное изображение, заменяющее основное изображение. Кроме того, вы можете задать Цвет акцента изображения, который будет отображаться при наведении на изображение. - Добавить Название (2), Подзаголовок (3), и Описание (4) элемента списка.
- Вы можете не найти опцию подзаголовка и описания в определенных элементах списка в зависимости от выбранного вами макета.
Перед добавлением описания проверьте этой статьи.
5. Действие по щелчку
Вы можете настроить поведение при нажатии отдельных элементов в Профиль раздел. Ниже приведены доступные варианты:
- Перейти по ссылке
Выбор этой опции открывает Конструктор ссылок, что позволяет вам добавить гиперссылку на этот элемент. Ссылка может направлять пользователей на другую страницу вашего веб-сайта или на внешний URL. Узнать больше о Конструктор ссылок. - Открыть в лайтбоксе
Эта опция отображает элемент в увеличенном виде. Lightbox вид при нажатии. В этом режиме подзаголовок и Описание связанный с элементом, не будет отображаться в сетке, но будет виден в режиме Lightbox. - Действие отсутствует
Выберите этот параметр, чтобы сделать элемент некликабельным. При выборе этого параметра нажатие на элемент не вызовет никаких действий.
6. Открыть ссылку в новом окне: Установите ссылку, чтобы она открывалась в новой вкладке или в той же вкладке. Это будет видно только тогда, когда Перейти по ссылке опция выбрана под Действие по щелчку .
7. Кнопки и значки: Добавляйте любые виды Ссылка к элементу списка. Вы можете добавить кнопку/ссылку на изображение/социальный значок/текстовую ссылку. Узнать больше.
8. Переопределение стиля карты
Вы можете переопределить глобальные настройки стиля карты из раздела Параметры стиля и настройте карточку каждого элемента индивидуально в разделе «Профиль». Это позволит вам применять уникальные стили к разным элементам списка для более удобной настройки.
Узнать больше о опции «Карты» в динамическом разделе.
9. Переопределение стиля формы
Используйте опцию «Переопределить», чтобы назначить отдельную форму каждому изображению в разделе «Профиль», что дает вам больший контроль над визуальным стилем каждого элемента. Узнать больше о Шейп-Маске.
10. Сохранить: После внесения изменений сохраните их.
- Включите Карты вариант из Настройки стиля для переопределения и настройки карточек для отдельных элементов.
- Включите Маска формы вариант из Параметры стиля для стилизации фигур отдельно для каждого элемента.
См. редактирование элемента списка изображений в действии:
Элементы списка последовательностей
- Вы можете легко перетаскивать элементы списка, чтобы изменить последовательность.
См. последовательность элементов списка изображений в действии:
Удалить элемент списка
После того, как вы добавили элемент списка, вы можете редактировать и удалять его.
- Нажмите на Удалить значок рядом с элементом списка изображений.
- Нажмите на Удалить кнопку во всплывающем окне подтверждения.
- Наконец, сэкономь ваши изменения.
См. удаление элемента списка изображений в действии:
Удаленные элементы списка невозможно восстановить.
Раздел «Управление элементами профиля»
Раздел «Список изображений» включает в себя Вкладка "Элементы" что позволяет вам легко управлять видимостью различных элементов в разделе. Используя простые переключатели, вы можете включать или отключать определенные элементы без необходимости удалять или изменять сами элементы.
- Нажмите на Редактировать список изображений (1) кнопка.
- Выберите Elements (2) вкладка.
- После внесения изменений нажмите кнопку Сохранено (3) кнопка.
Опции раздела
- Показать заголовок: Включить или отключить видимость заголовка для раздела «Список изображений».
- Показать кнопки: Управление отображением кнопок на уровне раздела.
Параметры элементов
- Показать изображение: Переключить видимость изображений.
- Показать заголовок: Управление отображением заголовка.
- Показать субтитры: Включить или отключить субтитры.
- Покажите описание: Управление видимостью описаний элементов.
- Показать кнопки: Решите, следует ли отображать кнопки для отдельных элементов.
Макет раздела
- Нажмите на Редактировать список изображений (1) кнопка.
- Выберите Планировка (2) вкладка.
- Выберите макет для вашего раздела и Сохранено (3) изменения.
Чтобы создать раздел во всю ширину или раздел со списком вкладок, выберите любой макет от 25 до 29.
- Вы можете легко добавить на свою страницу макет списка с вкладками.
- У вас есть возможность выбрать макет с горизонтальными или вертикальными вкладками.
- Это помогает создать раздел, основанный на сравнении.
Стиль вашего раздела
- Нажмите на Редактировать список изображений (1) .
- Выберите Стиль (2) меню.
- Измените стиль для элементов раздела и Сохранить (3) ваши изменения.
У вас будет несколько вариантов стиля для раздела:
- Параметры отображения
- Мобильный дисплей
- центровка
- Размер шрифта
- Расстояние
- Заголовок раздела
- Параметры изображений
- Маска формы
- Параметры наведения изображения
- Граница изображения
- Параметры карты
- Параметры тени
- Кнопки и ссылки
Дисплей
- Выберите Показать элементы in строки и столбцы or карусель
- Если вы выбрали строки и столбцы опция, элементы списка будут расположены в строках и столбцах. В этом случае вам нужно указать количество строк и столбцов.
- Если вы выбрали карусель опция, элементы списка будут представлены в виде слайд-шоу. Узнать больше.
- Установить Число столбцов для списка изображений. Вы можете выбрать от 1 до 10 столбцов.
- Укажите Пространство между столбцами из пунктов списка.
- Укажите Пространство между рядами из пунктов списка.
Если на шаге 1 выбрана опция «Карусель», вы увидите следующие дополнительные параметры:
- Включить плавную прокрутку: обеспечивает непрерывную прокрутку элементов в карусели для бесшовного и визуально привлекательного просмотра.
- Авто Слайд: Автоматически переключает слайды без взаимодействия с пользователем.
- Показать прогресс автовоспроизведения: отображает индикатор хода выполнения во время автовоспроизведения для лучшей видимости.
- Задержка автовоспроизведения: Устанавливает временной интервал между каждым переходом слайдов при включенном автовоспроизведении.
- Карусельный цикл: обеспечивает непрерывный цикл слайдов, благодаря чему карусель плавно перезапускается после последнего слайда.
- Карусель управления: Выбрать Элементы управления навигацией. Вы можете выбрать «Без элементов управления», «Стрелки — внизу по центру/вверху справа/внизу справа», «Шеврон», «Точки» и «Горизонтальная прокрутка».
- Края затухания: Примените легкий эффект затухания к краям карусели. Он улучшает пользовательский опыт, мягко смешивая изображения, когда они входят в вид или выходят из него.
Мобильный дисплей
- Установите количество Столбцы сетки для мобильных устройств. Вы можете установить максимум 3 столбца.
- Определите Расстояние между сетками (в пикселях).
Расположение столбцов для конкретного устройства на основе настроек Studio:
центровка
- Выравнивать контент по горизонтали в списке изображений. Вы можете настроить их так, чтобы они были выровнены по левому краю, правому краю или по центру.
- Выравнивать контент по вертикали в списке изображений. Вы можете настроить их выравнивание по верху, центру и низу.
- Выберите Порядок содержания то есть изображения элементов списка, которые должны отображаться первыми, или связанный с ними текст.
Размер шрифта
- Нажмите на Изменить стиль текста кнопка для посещения Дизайн и управлять размерами и стилями шрифта.
- Установить Название стиль шрифта для элементов списка раздела.
- Установить подзаголовок стиль шрифта для элементов списка раздела.
- Установить по умолчанию Описание стиль шрифта для элементов списка раздела.
- Включите эту опцию, чтобы анимировать любые числа присутствовать в Название и подзаголовок поля. При включении этой функции числовые значения будут отображаться с динамической анимацией подсчета, что сделает их более привлекательными визуально.
Расстояние
- Укажите Ширина изображения для элементов списка.
- Укажите Ширина содержимого для пунктов списка.
- Укажите Пространство под заголовком раздела в пикселях.
- Укажите Пространство под изображениями элементов списка (в %).
- Укажите Пробел под заголовками элементов списка (в %).
- Укажите Пробел под субтитрами элементов списка (в %).
Заголовок раздела
- Горизонтальное выравнивание текст заголовка раздела. Вы можете задать его слева, по центру и справа.
- Включить/выключить Делитель между заголовком раздела и содержанием раздела.
- Установить толщина разделителя (в пикселях).
- Укажите Цвет разделителя из палитры цветов.
- Выбрать Стиль разделителя из выпадающего списка.
- Установить Ширина заголовка чтобы определить ширину отображения заголовка раздела, начиная с минимального значения 50%.
Фотографии
- Выберите Iмаг урожай для элементов списка. Вы можете установить изображения как «Квадрат», «Круг», «Горизонтально», «Портрет» и «Оригинал».
- Выберите общий радиус угла или разный радиус угла для каждой стороны элементов списка и установите число (в пикселях) для Cугловой радиус изображений элементов списка. Узнать больше.
Посмотрите на график угловой радиус поле, вы можете создавать различные формы изображений элементов списка. Если вы укажете здесь 500 пикселей, изображения будут отображаться в форме круга.
- Если вы выбрали разделенные углы, вы можете установить разные радиусы углов для каждого угла.
Маска формы
- Маска формы: Включите этот переключатель, чтобы применить маску формы к изображениям в разделе «Список изображений». После включения выбранная форма визуально обрежет изображение в этой форме.
- Выберите форму: Выбирайте из различных предопределенных форм для применения к вашим изображениям. Это позволяет вам творчески стилизовать ваш контент, отображая изображения в уникальных формах, таких как закругленные, ромбовидные, каплевидные и т. д.
- Протяжение: Включите эту опцию, чтобы растянуть выбранную фигуру для лучшего соответствия контейнеру изображения. Это гарантирует, что фигура пропорционально заполнит доступное пространство, улучшая визуальное выравнивание на экранах разных размеров.
- Параметр Stretch зависит от макета. – Он может не отображаться в некоторых макетах. В макетах, где текст, такой как заголовок или подзаголовок, отображается поверх изображения, вся опция Shape Mask может быть недоступна.
- Настройка Stretch зависит от множества факторов. - В том числе размер, выравнивание и настройки обрезки определяется на вкладке «Стиль».
- Если для параметра «Обрезка изображения» установлено значение «Оригинал»фактические размеры изображения определят, будет ли оно растянуто по вертикали или по горизонтали.
При наведении на изображение
- Выберите Цвет при наведении изображения быть акцентный цвет или быть указанный. Если вы выбрали акцентный цвет, затем укажите непрозрачность. Вы можете указать цвет акцента для каждого элемента из Изменить элемент панели.
- Если вы выбрали укажите цвет затем установите Цвет и непрозрачность наложения.
- Установить Цвет наложенного текста который отображается при наведении курсора.
- Выберите Анимация изображений элементов списка при наведении, нажав Да. Проверьте эту функцию на живой странице.
- Выберите Стиль анимации для изображений при наведении на них курсора.
- Выберите, хотите ли вы разрешить переход изображений при наведении или нет.
- Выберите Стиль перехода для перехода при наведении. Доступные параметры: Fade и Flip.
Граница изображения
- Включить/отключить границу вокруг изображений, переключая переключатель.
- Выберите, чтобы иметь общая граница со всех сторон изображения или вы можете указать границы отдельно с каждой стороны.
- Укажите ширина границы. Если установлено значение 0, граница не появится. У вас также есть возможность установить ширину границы индивидуально для каждой стороны изображения.
- Выберите выделяющий цвет из палитры цветов.
- Выберите предпочтительный Стиль обрамления из выпадающего списка.
- Обозначить ширина границы для мобильных устройств устройств, выровняв его по ширине, выбранной для рабочего стола.
Карты
- Посмотрите, как для управления картами.
Shadow
- Дисплей – Выберите отображение тени за элементами списка всегда или только при наведении.
- Стиль - Выберите из существующих пресетов или создайте собственную тень.
Если вы выбрали вариант «Пользовательский», посетите этот Генератор теней коробки для создания пользовательской тени. Наконец, скопируйте и вставьте тень окна CSS. - Если вы выбрали опцию пресетов, то Выберите стили теней из выпадающего списка.
Кнопки и ссылки
- Посмотрите, как управлять стилем Кнопки и ссылки.
- Сохранено весь стиль меняется.
