Как создать пошаговый поток с помощью виджета Elementor Process

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

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

В этой статье мы покажем вам, как легко установить и настроить виджет процессов на вашем сайте. Оставайтесь с нами, чтобы узнать больше о:

Надстройки Qi для виджета процесса Elementor

Qi Addons for Elementor — это мощный, универсальный и очень простой в использовании инструмент, который помимо функциональности добавляет элегантности вашему веб-сайту. На данный момент этот инструмент является самой большой коллекцией бесплатных надстроек в Интернете и включает в себя 60 бесплатных виджетов, которые позволяют даже новичкам легко обогащать свои веб-сайты эффективными элементами без каких-либо знаний в области программирования. Помимо бесплатных виджетов, вы можете найти потрясающие 40+ премиальных.

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

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

Варианты настройки виджета «Процесс» — это параметры «Содержимое» и «Стиль». Здесь мы выберем, какой элемент мы хотим видеть в нашем виджете процесса, и определим, как все это будет выглядеть с точки зрения стиля. Есть много настроек настройки, но они настолько хорошо организованы, что вам будет очень легко попробовать и поэкспериментировать с опциями.

Виджет процесса — опция вкладки «Содержимое»

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

Общие настройки

Первое, что вам нужно будет настроить, это общие настройки самого виджета.

Здесь мы выбираем количество столбцов, и если вы хотите, чтобы все ваши элементы были в одной строке, вы выберете количество элементов для количества столбцов. В противном случае, если вы поместите меньше столбцов, чем элемент, элементы будут в 2 или более строках, или если вы выберете больше столбцов, чем элемент, у вас останется пустое место в строке.

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

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

Исходя из нашего опыта, размер 618-768px выглядит лучше всего, когда он использует один столбец, поэтому мы так и сделали.

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

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

Поля «Заголовок» и «Текст» используются для ввода текста, связанного с определенным этапом процесса. Конечно, в этом случае вполне естественно, что каждый шаг имеет другое название и описание, поэтому это единственное место, где вы можете ввести эти значения.

Вот как это выглядит при замене на наш текст.

Параметры элемента относятся к той части элемента, которая не является заголовком и описанием. Мы используем Item Offset для позиционирования одного элемента. Окружность с единицей измерения и линия, ведущая к следующему шагу, являются частью одного элемента, и, регулируя смещение элемента, мы перемещаем эти элементы вниз или вверх. Как вы можете видеть на картинке, мы установили некоторое смещение для первого элемента, и теперь он немного ниже уровня следующего элемента.

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

Размер держателя предмета – это размер поля, в котором он на данный момент равен 1, т.е. количество шагов, а позже мы посмотрим, что еще здесь можно найти. (Этот параметр также можно найти в параметрах стиля, если мы хотим, чтобы все держатели предметов были одинакового размера).

Типографика элемента относится к типографским характеристикам количества шагов.

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

Сейчас мы добавим только цвет фона.

По умолчанию элементы отображаются в виде кругов, но если вам нужен квадрат или фигура с определенными углами, радиус держателя элемента можно отрегулировать. Когда значение равно 0, это квадрат прямых углов. Добавляя значения, вы увидите, как меняются углы. Если вы удалите значения, вы снова получите круг. Не все углы должны быть одинаковыми, вы можете установить разные значения для каждого угла.

Тип границы, ширина и цвет относятся к элементам границы. Если вам не нужна граница, тогда граница имеет тип «Нет».

У вас также есть все эти настройки в параметрах стиля, если вы хотите, чтобы все элементы были одинаковыми.

Мы только что видели, как изменить смещение, и теперь у нас есть два варианта, которые позволяют нам изменить положение только строки, ведущей к следующему процессу. Верхнее смещение линии используется для перемещения положения линии (вверх/вниз), а вращение линии используется для ее поворота. Как вы можете видеть в примечании ниже, мы повернули линию, и она больше не находится под прямым углом к ​​элементу. У вас есть только эти настройки на самом элементе.

Что мы намеренно пропустили в начале, так это параметр «Тип значка», он служит нам для добавления значка из библиотеки к элементу или для загрузки нашего значка SVG.

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

Теперь типография и цвет предмета относятся к самой иконке. Здесь мы настроим размер (в параметре размера шрифта) и цвет для каждой иконки.

Еще одна вещь, которую мы не рассмотрели более подробно выше, — это фоновое изображение элемента, как в случае со вторым элементом в примере:

Каждое фоновое изображение несет в себе определенные настройки, касающиеся позиционирования изображения, его размера и того, будет ли оно простым фоном или с эффектом прокрутки (опция прикрепления). У вас будут все эти параметры, когда вы используете фоновое изображение.

После настройки общих опций наш виджет процесса выглядит так:

Параметры анимации появления

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

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

Возможны два варианта компоновки — горизонтальный и вертикальный вид процесса. До сих пор мы показывали все горизонтально. Однако, если вы выберете вертикальное отображение, параметры точно такие же. Единственное, на что следует обратить внимание, это количество столбцов (об этом мы говорили в общих параметрах). Вертикальный процесс всегда имеет один столбец, если мы хотим, чтобы элементы располагались друг под другом в одном столбце.

Поскольку мы установили три столбца для нашего примера, потому что у нас есть 3 элемента, без перехода на один столбец наш виджет выглядит следующим образом:

Конечно, если мы настроим один столбец, все будет так, как должно быть:

Инструменты разработчика

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

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

Виджет процесса — опция вкладки «Стиль»

Вкладка «Стиль» предоставляет параметры для стилизации частей процесса. Как мы уже упоминали, все, что здесь установлено, будет применяться ко всем элементам в нашем процессе, кроме тех, в которых на самом элементе установлено что-то другое.

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

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

Единственное, чего нет в элементах, это выравнивание, которое определяет, как заголовок и текст будут центрированы.

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

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

Стилизация линий процесса — у нас есть несколько типов, мы можем настроить цвет и толщину.

Стиль интервала

Интервал, пространство над подзаголовком, над текстом и отступы вокруг текста. Этот отступ вокруг текста служит для «сужения» содержимого, помещая отступ в поле, где невозможно отобразить текст.

Дополнительный стиль

Эти настройки у нас есть только тогда, когда наш товар содержит вставленную иконку, т.е. когда у нас есть это дополнительное поле, в котором находится число. Настройки относятся к этому номеру и к полю, в котором он находится.

Цвет дополнительного держателя — это цвет поля, в котором номер и типографика дополнительного держателя связаны с настройкой внешнего вида самого номера. Размер дополнительного держателя — это размер поля, и с помощью Положения дополнительного держателя мы можем изменить положение поля.

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

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

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

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

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

Все значки и тексты имеют одинаковые цвета, что говорит нам о том, что это установлено в параметрах вкладки стиля.

Второй пример хоть и кажется более сложным, но выполнить его еще проще. Здесь строка на странице разделена на две части. Слева картинка, справа процесс.

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

Все элементы располагаются симметрично друг под другом, что означает отсутствие смещения.

Все тексты имеют одинаковые характеристики, поэтому стиль задается на вкладке стилей.
Здесь мы видим, что у каждого элемента есть фоновое изображение (и что нет дополнительных полей для числа), но мы также можем заметить, что число не находится в середине элемента, как это имеет место по умолчанию.

Есть трюк, который вы можете использовать, чтобы скрыть номер, если вы не хотите, чтобы он отображался. Все, что вам нужно сделать, это установить размер типографики элемента на 0 пикселей на вкладке «Стиль» в «Общих параметрах». Таким образом, номер не будет отображаться.

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

В заключение

Добавление виджета процесса на ваш веб-сайт с помощью надстроек Qi для Elementor — это не только просто, но и весело, а также позволяет вам выразить свое творчество. Мы призываем вас продолжать изучать способы улучшения дизайна и функциональности вашего веб-сайта. Если ваш веб-сайт ориентирован в основном на визуальный контент — вам также может быть интересно узнать больше о добавлении полноразмерной страницы и строки на ваш веб-сайт WordPress, или если вы хотите добиться лучшей структуры контента, вам может быть интересно узнать больше о вкладках WordPress. Как мы уже упоминали, Qi Addons поставляется с 60 бесплатными виджетами, поэтому экспериментирование и использование новых возможностей не будут угрозой для вашего бюджета, а могут только вдохновить вас на улучшение вашего веб-сайта и добавление в него дополнительных полезных функций.