Раздел «Изображения до и после»

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

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

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

  1. Добавьте блок до и после.
  2. Управление контентом.
  3. Управление макетом.
  4. Параметры стиля.

Добавьте блок «До и после»:

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

 

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

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

Управление контентом

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

  • Нажмите на Управление до и после (1) кнопку, чтобы открыть правый ящик (2).

Отсюда вы можете: 

  • Загрузить основное изображение (1) для предварительного просмотра.
  • Загрузить дополнительное изображение (1) для последующего просмотра.

  • Добавить Название (3), Подзаголовок (4), и Описание (5) для сечения. Перед добавлением описания проверьте этой статьи.

  • Добавляйте любые виды Ссылка (6) к разделу. Вы можете добавить кнопку/ссылку на изображение/значок социальной сети/текстовую ссылку. Узнать больше.
  • Вы можете дублировать (7), редактировать (8) или удалить (9) существующую кнопку.
  • Сохранить (10) ваши изменения.


  • Добавьте любой тип ссылки в раздел. Нажать на + Добавить ссылку кнопка добавления ссылки.

  • Ассоциация + Добавить ссылку option предоставляет четыре способа добавления ссылки:

Button

Добавьте кнопку к элементу списка. Вы сможете обновить:

  1. Ярлык кнопки: – Установить метку кнопки.
  2. Кнопка Ссылка – Указать ссылку.
  3. Целевое окно – Выберите, чтобы открыть страницу в том же или новом окне.
  4. Стиль кнопки – Выберите стиль кнопки по умолчанию (устанавливается в Кнопки и ссылки вкладку раздела «Дизайн»), Solid, Outline или Text Link.
  5. Выберите цвет кнопки быть по умолчанию или инвертировать цвет. 

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

Вы сможете обновить:

  1. Установить текстовая метка.
  2. Укажите текстовая ссылка.
  3. Целевое окно – Выберите, чтобы открыть страницу в том же или новом окне.

Фото товара 

Добавьте изображение и свяжите его с любой страницей.

  • После того, как вы загрузили изображение, оно отображается таким образом. Нажмите на ссылку, чтобы отредактировать ее.

  • Отсюда вы можете:
    1. Загрузите/Изменить изображение.
    2. Кнопка Ссылка – Указать ссылку.
    3. Целевое окно – Выберите, чтобы открыть страницу в том же или новом окне.

Социальная Иконка

  • Добавьте значок социальной сети к элементу списка.

  • Вы можете управлять:
    1. Социальная иконка, которую нужно связать.
    2. Укажите путь к соответствующему социальному профилю.
    3. Целевое окно – Выберите, чтобы открыть страницу в том же или новом окне.


Управление макетом

  • Нажмите на Управление до и после кнопку (1).
  • Выберите Планировка вкладка (2).
  • Выберите макет для вашего раздела (3) и спасти изменения (4).


Параметры стиля

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

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

Фотографии 

  1. Выберите общий радиус угла или другой радиус угла для каждого слайда и установите число (в пикселях) для угловой радиус. 
    Посмотрите на график угловой радиус поле, вы можете создавать различные формы изображений. Если вы укажете здесь 500 пикселей, изображение будет отображаться в форме круга.
    Если вы выбрали разделенные углы, вы можете установить разные радиусы углов для каждого угла. Узнать больше. 
  2. Выберите Ползунок Направление быть горизонтальным или вертикальным.
  3. Укажите Стартовая позиция ползунка в процентах. Ползунок можно перемещать влево/вправо для просмотра определенного слайда.

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

Размер и пространство 

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

Текст

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

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

Предположим, вы добавили ссылку на социальную сеть Amazon в Кнопка/Ссылки, и указал цвет значка красный и цвет фона значка зеленый, то значок будет отображаться, как показано ниже:

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

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