Встроить раздел мультимедиа и приложений

Используйте раздел «Медиа и приложения», чтобы добавить на свой сайт внешний контент, например доску Pinterest, Youtube, Tumblr, Spotify, Vimeo и т. д.

Прежде чем вы начнете
Блоки внедрения извлекают контент из сервисов, которые используют стандарт Embed или коды внедрения, заданные вручную.

В этой статье:

  1. Что такое раздел «Медиа и приложения»?
  2. Добавление раздела «Медиа и приложения» на страницу
  3. Добавлять и редактировать элементы списка
  4. Элементы списка последовательности
  5. Удаление элементов списка
  6. Изменение макета раздела
  7. Варианты стиля

1. Раздел «Медиа и приложения»

  • Вы можете легко включить на свой веб-сайт раздел «Медиа и приложения», где вы сможете демонстрировать доски Pinterest, Youtube, Tumblr, Issuu, Spotify, SlideShare, Wlista, Vimeo, Soundcloud, Dribble, Facebook, Bandcamp, Flickr, публикации в Instagram, Giphy, Twitch, и любой пользовательский встроенный код.

2. Добавить раздел «Медиа и приложения»

  • Теперь вы увидите опцию категории разделов на левой стороне.
  • Выберите Социальные сети и встраивание (1) категорию и нажмите на Встраивание вкладка (2), где вы можете выбрать разные макеты   Встраивание (3) раздел.

Выберите любой макет раздела (2) и нажмите на него, чтобы добавить его на свою страницу.


3. Добавляйте и редактируйте элементы списка

Добавить элемент списка

После добавления раздела:

  • Нажмите на Управление разделом «Встроить» (1) кнопку, чтобы открыть панель элементов списка.

  • Нажмите на Добавить элемент (2) Кнопка для добавления нового элемента списка.

Редактировать элемент списка

  • Откроется параметры редактирования элемента списка.
  • Добавьте URL-адрес (1) или код внедрения (2) для элемента списка.
  • Если вы выберете опцию добавления ссылки, вы можете добавить ссылку сюда (3), заголовок (4), подзаголовок (5), описание 6) и добавить тип Ссылка (7) к элементу списка. Вы можете добавить кнопку/ссылку на изображение/значок социальной сети/текстовую ссылку. Узнать больше.
  • Если вы выберете опцию «Добавить код для встраивания», вы можете добавить свой встроенный код сюда (3), заголовок (4), подзаголовок (5), описание 6) и добавить тип Ссылка (7) к элементу списка.

4. Элементы списка последовательностей

  • Вы можете легко перетаскивать элементы списка, чтобы изменить последовательность.

5. Удалить элемент списка

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

  • Нажмите на Удалить Значок рядом с элементом списка для встраивания.
  • Нажмите на Удалить кнопку во всплывающем окне подтверждения.
  • Сохранено ваши изменения.

6. Макет раздела

  • Нажмите на Редактировать раздел для встраивания (1) Кнопка открытия панели редактирования списка.

  • Выберите Планировка (2) таб.
  • Выберите макет для своего раздела и сохраните изменения (3).


7. Стиль вашего раздела

  • Нажмите на Редактировать раздел для встраивания (1) кнопка, чтобы открыть панель редактирования.

  • Выберите Стиль (2) меню.
  • Измените стиль для элементов раздела и Сохранить (3) ваши изменения.

У вас будет несколько вариантов стиля для раздела: 

  1. Параметры элементов
  2. Параметры размера текста
  3. Варианты интервалов
  4. Заголовок раздела
  5. Встроить Обрезать
  6. Маска формы
  7. Варианты карт 
  8. Параметры тени
  9. Кнопки и ссылки

Параметры элементов

  1. Выберите Показать элементы in строки и столбцы or карусель 
    • Если вы выбрали строки и столбцы опция, элементы списка будут расположены в строках и столбцах. В этом случае вам нужно указать количество строк и столбцов.
    • Если вы выбрали карусель опция, элементы списка будут представлены в виде слайд-шоу.
  2. Установить Число столбцов для списка Embed. Вы можете выбрать от 1 до 10 столбцов.
  3. Укажите Пространство между столбцами из пунктов списка.
  4. Укажите Пространство между рядами из пунктов списка.
  5. Выберите Порядок содержания т.е., если встроенная часть элементов списка должна отображаться первой или связанный с ней текст.
  6. Выравнивать контент по горизонтали в списке изображений. Вы можете настроить их так, чтобы они были выровнены по левому краю, правому краю или по центру.


Параметры размера текста

  1. Нажмите на Изменить стиль текста кнопка для посещения Дизайн и управлять размерами и стилями шрифта.
  2. Установить Название стиль шрифта для элементов списка.
  3. Установить подзаголовок стиль шрифта для элементов списка.
  4. Установить по умолчанию Описание стиль шрифта для элементов списка.


Варианты интервалов

  1. Укажите Ширина вставки для элементов списка (в %).
  2. Укажите Ширина содержимого для элементов списка (в %).
  3. Укажите Пространство под заголовком раздела (в пикселях).
  4. Укажите Пространство под встроенной частью (в %).
  5. Укажите Пробел под заголовками элементов списка (в %).
  6. Укажите Пробел под субтитрами элементов списка (в %).


Заголовок раздела

  1. Горизонтальное выравнивание текст заголовка раздела. Вы можете задать его слева, по центру и справа.
  2. Включить/выключить Делитель между заголовком раздела и содержанием раздела.
  3. Установить толщина разделителя (в пикселях).
  4. Укажите Цвет разделителя из палитры цветов.
  5. Выберите предпочтительный Стиль разделителя.


Встроить Обрезать

  • Выбирайте Встроить Обрезать. Вы можете установить следующие параметры кадрирования: 1:1 Square, 2:1 Horizontal, 3:2 Horizontal, 4:3, 3:4, 16:9, 2.4:1 и Original Embed.


Маска формы

  1. Маска формы: Включите этот переключатель, чтобы применить маску формы к изображению в разделе «Встроить». После включения выбранная форма визуально обрежет изображение в этой форме.
  2. Выберите форму: Выбирайте из различных предопределенных форм для применения к вашему изображению. Это позволяет вам творчески стилизовать ваш контент, отображая изображение в уникальной форме, например, закругленной, ромбовидной, каплевидной и т. д.

Заметки

  • Параметр «Маска формы» зависит от макета – Он может не отображаться в макетах, где текст, например заголовок или подзаголовок, отображается поверх изображения.
  • Настройка Stretch зависит от множества факторов. – включая параметры размера изображения, выравнивания и обрезки, определенные на вкладке «Стиль».
  • Если для параметра «Обрезка изображения» установлено значение «Оригинал»фактические размеры изображения определят, будет ли оно растянуто по вертикали или по горизонтали.


Варианты карт


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

  1. Дисплей – Выберите отображение тени за элементами списка всегда или только при наведении.
  2. Стиль - Выберите из существующих пресетов или создайте собственную тень.
    Если вы выбрали вариант «Пользовательский», посетите этот Генератор теней коробки для создания пользовательской тени. Наконец, скопируйте и вставьте тень окна CSS.
  3. Если вы выбрали опцию пресетов, то Выберите стили теней из выпадающего списка.


Кнопки и ссылки

  1. Посмотрите, как для управления стилем кнопок и ссылок.
  2. Сохранено перемены.


Не можете найти то, что ищете?

Свяжитесь с экспертом Pixpa.

Pixpa Studio только что обновили. В данный момент мы обновляем скриншоты всех справочных статей.