Команди дуже важливі для успіху будь-якої організації. Вони об’єднують людей з різними навичками, досвідом і перспективами, створюючи динамічне середовище, у якому можна досягти цілей.
Використовуючи розділ «Команда» Pixpa, ви можете відображати профілі та фотографії членів вашої команди, а також їхні відповідні ролі та обов'язки.
У цій статті:
Додати розділ команди на сторінку
- Щоб додати розділ, потрібно додати сторінку спочатку на ваш веб-сайт.
- На вашій сторінці, натисніть на синій + значок додати а Новий розділ.
- Тепер ви побачите категорії розділів на лівій стороні.
- Прокрутіть професіонали (1) і натисніть на нього. Тепер з’явиться спливаюче вікно, на якому можна вибрати різні макети командної секції (2).
- Виберіть макет будь-якого розділу та натисніть на нього, щоб додати його на свою сторінку.
Додавання та редагування елементів списку
Додати елемент списку
- Натисніть Редагувати команди (1), щоб відкрити панель елементів списку.
- Натисніть на Додати товар (2) кнопку, щоб додати новий елемент списку.
- Ви можете вибрати Dскопіювати або видалити (3) пункти списку.
Редагувати елемент списку
Клацніть елемент списку, який потрібно редагувати. Відкриються параметри редагування конкретного елемента списку.
Звідси ви можете:
- Завантажити/видалити основне та додаткове зображення (1)
Ви можете завантажити файл Вторинне зображення разом з Первинне зображення для кожного пункту списку. Коли користувач наводить вказівник на елемент, відображатиметься другорядне зображення, яке замінить основне зображення. Крім того, ви можете встановити Колір акценту зображення, який відображатиметься при наведенні зображення. - Додавати назва (2), Підзаголовок (3), і Опис (4) пункту списку.
- Залежно від вибраного вами макета, ви можете не знайти параметр підзаголовка та опису в окремих елементах списку.
Перш ніж додати опис, перевірте це статті.
5. Дія при натисканні
Ви можете налаштувати поведінку клацання окремих елементів у професіонали розділ. Нижче наведено доступні варіанти:
- Перейдіть за посиланням
Вибір цієї опції відкриває Конструктор посилань, що дозволяє додати гіперпосилання до цього елемента. Посилання може спрямовувати користувачів на іншу сторінку вашого веб-сайту або зовнішню URL-адресу. Більше інформації Про бренд Конструктор посилань. - Відкрити в лайтбоксі
Цей параметр відображає елемент у збільшеному вигляді Lightbox переглянути при натисканні. У цьому режимі Субтитр та Опис пов’язані з елементом не відображатимуться у вигляді сітки, але будуть видимі в режимі Lightbox. - Дія відсутня
Виберіть цей параметр, щоб зробити елемент неактивним. Якщо об’єкт вибрано, натискання на нього не запускатиме жодних дій.
6. Відкрити посилання в новому вікні: Налаштуйте посилання для відкриття в a нову вкладку або в тій самій вкладці. Це буде видно лише тоді, коли Перейдіть за посиланням параметр вибрано під Дія при натисканні .
7. Кнопки та посилання: Додайте будь-який тип посилання до пункту списку. Ви можете додати кнопку/посилання на зображення/іконку соціальної мережі/текстове посилання. Детальніше.
8. Перевизначення стилю картки
Ви можете змінити глобальні налаштування стилю картки в розділі Налаштування стилю і налаштуйте картку кожного елемента окремо в розділі «Список зображень». Це дозволяє застосовувати унікальні стилі до різних елементів списку для кращого налаштування.
Детальніше про параметр Картки в динамічному розділі.
9. Зберегти: Після налаштувань збережіть зміни.
Щоб налаштувати картки для кожного елемента окремо, спочатку потрібно ввімкнути карта параметр у налаштуваннях стилю.
Послідовність елементів списку
Ви можете легко змінити послідовність елементів списку за допомогою Перетягування Ними. Подивіться послідовність списку елементів Teams у дії:
Керування елементами розділу команди
Розділ «Команда» містить Вкладка «Елементи». що дозволяє легко керувати видимістю різних елементів у розділі.
За допомогою простих перемикачів можна вмикати або вимикати певні елементи, не видаляючи чи змінюючи самі елементи.
- Натисніть на Елементи (1) вкладка.
- Після внесення змін натисніть Зберегти (2) кнопка.
Параметри розділу
- Показати заголовок: Увімкнути або вимкнути видимість заголовка для розділу «Команда».
- Показати кнопки: керування відображенням кнопок на рівні розділу.
Параметри елементів
- Показати зображення: перемикання видимості зображень.
- Показати заголовок: керування відображенням заголовка.
- Показати субтитри: увімкнення або вимкнення субтитрів.
- Показати опис: керування видимістю описів предметів.
- Показати кнопки: Вирішіть, чи мають відображатися кнопки для окремих елементів.
Макет розділу
-
- Натисніть на Редагувати команди кнопку, щоб відкрити панель редагування розділу та вибрати макет .
-
- Звідси ви можете легко змінити макет розділу навіть після додавання його на сторінку.
Під час зміни макета вгорі ви побачите макети, пов’язані з розділами.
Окрім цього, у вас також є можливість вибрати макет з інших розділів у Більше макетів заголовок.
Розділ команди стилю
Ви можете налаштувати різні аспекти розділу «Команди», використовуючи різні параметри стилю. Щоб перейти до параметрів стилю, натисніть на Редагувати команди (1) кнопка.
- Виберіть стиль (2) вкладка.
- Після налаштування Зберегти (3) зміни.
Ви матимете кілька варіантів стилю для розділу:
- Параметри відображення
- Мобільний дисплей
- Вирівнювання
- Розмір шрифту
- Відстань
- Заголовок розділу
- Параметри зображень
- Форма Маска
- Параметри наведення зображення
- Границя зображення
- Cards
- тінь
- Кнопки та посилання
Параметри відображення
- Виберіть Показати елементи in рядки та стовпці / карусель / Вітрина
- Якщо ви вибрали рядки та стовпці пункти списку будуть упорядковані в рядки та стовпці. У цьому випадку потрібно вказати кількість рядків і стовпців.
- Якщо ви вибрали карусель пункти списку будуть представлені у вигляді слайд-шоу. Більше інформації.
-
Вітрина пропонує елегантний та інтерактивний макет у стилі каруселі для відображення зображень по одному з плавними переходами та ефектами. Цей макет додає вашому сайту сучасного, захопливого досвіду. Детальніше.
- Встановіть Кількість стовпців для списку зображень. Ви можете вибрати від 1 до 10 стовпців.
- Вкажіть Відстань між колонками елементів списку.
- Вкажіть Відстань між рядами елементів списку.
Якщо на кроці 1 вибрано параметр «Карусель», ви побачите такі додаткові параметри:
- Увімкніть плавне прокручування: дозволяє безперервно прокручувати елементи в каруселі для бездоганного та візуально привабливого досвіду.
- Авто слайд: автоматично обертається між слайдами без участі користувача.
- Показати прогрес автовідтворення: для кращої видимості відображає індикатор прогресу, коли активовано автовідтворення.
- Затримка автовідтворення: встановлює інтервал часу між кожним переходом слайдів, коли ввімкнено автоматичне відтворення.
- Петля каруселі: вмикає безперервне повторення слайдів, тому карусель плавно перезапускається після останнього слайда.
- Елементи керування каруселі: Виберіть Елементи керування навігацієюВи можете вибрати між варіантами «Без керування», «Стрілки – внизу по центру/угорі праворуч/внизу праворуч», «Шеврон», «Кропки» та «Горизонтальне прокручування».
- Вицвілі краї: Застосуйте легкий ефект вицвітання до країв каруселі. Це покращує взаємодію з користувачем, м’яко змішуючи зображення, коли вони входять або виходять з перегляду.
Якщо на кроці 1 вибрано опцію «Вітрина», ви побачите такі додаткові опції:
- Ефекти: Виберіть один із п’яти анімаційних ефектів: Згасання, Відображення, Картки, Перекриття (нахилене) або Перекриття (плоске), щоб керувати переходами між зображеннями.
- Увімкнути плавне прокручування: Дозволяє безперервне прокручування елементів у Вітрині для безперебійного та візуально привабливого перегляду.
- Автоматичне ковзання: Автоматичний перехід між зображеннями без втручання користувача.
- Показати прогрес автовідтворення: Відображає індикатор прогресу під час автозапуску для кращої видимості.
- Затримка автовідтворення: Встановіть час між слайдами, коли автовідтворення активне. Ви можете вибрати будь-яке значення від 1 до 10 секунд.
- Карусельний цикл: Увімкніть цю функцію, щоб карусель відтворювалася безкінечно, забезпечуючи безперервне відтворення.
- Елементи керування каруселлю: Налаштування «Елементи керування каруселлю» дозволяє вибрати спосіб навігації між слайдами, використовуючи такі параметри, як стрілки (внизу посередині, угорі праворуч, внизу праворуч), крапки або взагалі без елементів керування.
Мобільний дисплей
- Встановіть кількість Стовпці сітки для мобільних пристроїв. Ви можете встановити максимум 3 стовпці.
- Визначте Відстань між сітками (у пікселях).
Макет стовпців для певного пристрою на основі налаштувань Studio:
Вирівнювання
- Вирівняти зображення по горизонталі у розділі «Команда». Ви можете встановити вирівнювання по лівому краю, правому краю або по центру.
- Вирівняти текст по горизонталі у розділі «Команда». Ви можете встановити вирівнювання по лівому краю, правому краю або по центру.
- Вирівняти Вміст по вертикалі у Списку команд. Ви можете встановити вирівнювання по верху, центру та знизу.
- Виберіть Порядок вмісту тобто зображення елементів списку, які будуть відображатися першими, або відповідний текст.
Заголовок розділу
- Горизонтальне вирівнювання текст заголовка розділу. Ви можете встановити його вліво, по центру та праворуч.
- Увімкнути/вимкнути дільник між заголовком розділу та вмістом розділу.
- Встановіть товщина розділювача (у пікселях).
- Вкажіть Колір розділювача із засобу вибору кольорів.
- Вибрати Стиль роздільника з випадаючого.
Розмір шрифту
- Натисніть на Змінити стиль тексту кнопку, щоб відвідати Дизайн розділ і керуйте розмірами та стилями шрифтів.
- Встановіть назва стиль шрифту для елементів списку розділу.
- Встановіть Субтитр стиль шрифту для елементів списку розділу.
- Встановити за замовчуванням Опис стиль шрифту для елементів списку розділу.
- Увімкніть цю опцію, щоб анімувати будь-які числа присутні в назва та Субтитр поля. Після ввімкнення числові значення відображатимуться з динамічною анімацією підрахунку, що зробить їх візуально привабливішими.
Відстань
- Вкажіть Зображення ширини для елементів списку.
- Вкажіть Ширина вмісту для елементів списку.
- Вкажіть Пробіл під заголовком розділу в px.
- Вкажіть Місце під зображеннями пунктів списку (у %).
- Вкажіть Пробіл під заголовками пунктів списку (у %).
- Вкажіть Пробіл під субтитрами пунктів списку (у %).
Заголовок розділу
- Горизонтальне вирівнювання текст заголовка розділу. Ви можете встановити його вліво, по центру та праворуч.
- Увімкнути/вимкнути дільник між заголовком розділу та вмістом розділу.
- Встановіть товщина розділювача (у пікселях).
- Вкажіть Колір розділювача із засобу вибору кольорів.
- Вибрати Стиль роздільника з випадаючого.
зображень
- Виберіть Iмаг Кроп для елементів списку. Ви можете встановити зображення як квадрат, коло, горизонталь, портрет і оригінальне.
- Виберіть загальний радіус кута або інший радіус кута для кожної сторони елементів списку та встановіть число (у пікселях) для Cкутовий радіус зображень елементів списку. Більше інформації.
Використання кутовий радіус ви можете створювати різні форми зображень елементів списку. Якщо ви вкажете тут 500 пікселів, зображення відображатимуться у формі кола.
- Якщо ви вибрали розділені кути, ви можете встановити різний радіус кута для кожного кута.
Форма Маска
- Форма маски: Увімкніть цей перемикач, щоб застосувати маску фігури до зображень у розділі «Команди». Після ввімкнення вибрана фігура візуально обріже зображення у цій формі.
- Виберіть форму: Вибирайте з різноманітних попередньо визначених форм для застосування до своїх зображень. Це дозволяє творчо стилізувати ваш вміст, відображаючи зображення в унікальних формах, як-от закруглені, ромбові, краплі тощо.
- Розтягувати: Увімкніть цей параметр, щоб розтягнути вибрану форму, щоб краще відповідати контейнеру зображення. Це гарантує, що форма пропорційно заповнює доступний простір, покращуючи візуальне вирівнювання на різних розмірах екрана.
- Параметр «Розтягнути» залежить від макета – Він може не відображатися в певних макетах. У макетах, де текст, наприклад заголовок або підзаголовок, відображається поверх зображення, Повна опція Shape Mask може бути недоступною.
- Налаштування Stretch залежить від багатьох факторів - у тому числі розмір зображення, вирівнювання та налаштування кадрування визначений на вкладці Стиль.
- Якщо для параметра Обрізання зображення встановлено значення Оригінал, фактичні розміри зображення визначатимуть, чи буде воно розтягнуто вертикально чи горизонтально.
Наведення курсора зображення
- Виберіть Колір наведення зображення бути акцентний колір або бути зазначений. Якщо ви обрали акцентний колір, потім вкажіть помутніння. Ви можете вказати колір акценту для кожного елемента з Редагувати елемент .
- Якщо ви вибрали вказати колір потім установіть параметр Колір і непрозорість накладення.
- Встановіть Колір накладеного тексту який відображається при наведенні.
- Виберіть Анімуйте зображення елементів списку наведіть курсор, натиснувши кнопку Так. Перевірте цю функцію на живій сторінці.
- Виберіть Стиль анімації для зображень, коли на них наводиться курсор.
- Виберіть, чи хочете ви дозволити перехід зображень при наведенні чи ні.
- Виберіть Стиль переходу для переходу при наведенні. Доступні параметри: Fade і Flip.
Границя зображення
- Увімкнути/вимкнути рамку навколо зображень, перемикаючи перемикач.
- Виберіть мати a спільний кордон на всіх сторонах зображень або ви можете вказати межі окремо для кожної сторони.
- Вкажіть ширина кордону. Якщо встановлено значення 0, то межа не з’явиться. У вас також є можливість встановити ширину рамки окремо для кожної сторони зображення.
- Оберіть виділяє колір із засобу вибору кольорів.
- Виберіть потрібний Прикордонний стиль з випадаючого.
- Визначте ширина рамки для мобільних пристроїв пристроїв, вирівнявши його за шириною, вибраною для робочого столу.
Cards
- Подивіться, як керувати картками.
тінь
- дисплей – Виберіть, щоб тінь відображалася за елементами списку завжди або лише під час наведення курсора.
- стиль – Виберіть із існуючих стилів або створіть власну тінь.
Якщо ви вибрали спеціальний варіант, відвідайте це Генератор тіні коробки щоб створити власну тінь. Нарешті, скопіюйте та вставте box shadow CSS. - Якщо ви вибрали параметр попередніх налаштувань, тоді Виберіть Стилі тіней з випадаючого.
Кнопки та посилання
- Подивіться, як керувати стилем Кнопки та посилання.
