Як створити крок за допомогою віджета процесу Elementor
Який би тип веб-сайту у вас не був, важливо не лише мати якісний вміст, але й мати можливість відображати його привабливим способом. На щастя, багато інструментів дозволяють нам творчо ділитися широкою інформацією та даними. Ви можете додати ефект паралакса, щоб підкреслити сучасний тон вашого сайту, використовувати перемикачі та гармошки, щоб досягти кращої структури вмісту, а віджети процесів є цінними, оскільки вони дозволяють нам відображати складні дані в чіткій, цікавій та привабливій формі.
Якщо у вас є будь-який вміст, який передбачає відображення певного процесу, важливо мати можливість розбити його користувачам у простий, зрозумілий і стислий спосіб, але не втратити жодної важливої деталі, пов’язаної з ним. Інтернет-магазини знайдуть віджет процесу цінним, оскільки його можна використовувати, щоб поетапно показати процес онлайн-покупки, корпорації можуть поділитися тим, як виглядає процедура працевлаштування в їхній компанії, медичні веб-сайти можуть продемонструвати процес лікування через етапи, будь-який робочий процес можна візуально представити через фази – можливості безмежні.
У цій статті ми покажемо вам, як легко встановити та налаштувати віджет процесу на вашому веб-сайті. Залишайтеся з нами, щоб дізнатися більше про:
Додатки Qi для віджета процесу Elementor
Qi Addons для Elementor — це потужний, універсальний і дуже простий у використанні інструмент, який додає вашому веб-сайту не тільки функціональність, але і елегантність. На даний момент цей інструмент є найбільшою колекцією безкоштовних доповнень в Інтернеті та включає 60 безкоштовних віджетів, які дозволяють навіть новачкам легко збагачувати свої веб-сайти ефективними елементами без будь-яких знань програмування. Крім безкоштовних віджетів, ви можете знайти дивовижні 40+ преміальних віджетів.
Віджет «Процес », який надається безкоштовно, має безліч параметрів налаштування та дозволяє створювати прекрасні відображення всіх типів робочих циклів і процесів, які ідеально відповідають потребам і стилю вашого веб-сайту.
Перетягнувши віджет процесу вбік, ви отримаєте стандартний вигляд, який можна редагувати. Важливо зазначити, що віджет використовує шрифти, які використовуються у вашій темі, тому, якщо ви бажаєте одноманітності в цій частині, вам не доведеться змінювати його.
Параметри налаштування віджета «Процес» — це параметри вмісту та стилю. Тут ми виберемо, який елемент ми хочемо мати в нашому віджеті процесу, і ми визначимо, як це все виглядатиме з точки зору стилю. Існує багато параметрів налаштування, але вони настільки добре організовані, що вам буде дуже легко випробувати та експериментувати з варіантами.
Віджет процесу – параметр вкладки вмісту
Тут є загальні параметри, параметри анімації, макет процесу та корисний інструмент розробника, а також довідка, де ви можете знайти інструкції та підтримку від самого автора надбудови.
Загальні параметри
Перше, що вам знадобиться, це налаштувати загальні параметри самого віджета.
Тут ми вибираємо кількість стовпців, і якщо ви хочете, щоб усі ваші елементи були в одному рядку, ви виберете кількість елементів для кількості стовпців. Інакше, якщо ви помістите менше стовпців, ніж елемент, елементи будуть у 2 або більше рядках, або якщо ви виберете більше стовпців, ніж елемент, у вас залишиться порожнє місце в рядку.
Ви, ймовірно, дізнаєтеся, скільки предметів вам потрібно, як тільки почнете створювати це, тому я люблю налаштувати це відразу, і, звичайно, ви також можете налаштувати ці параметри пізніше.
Важливим параметром є Columns Responsive, де ми налаштовуємо вигляд нашого процесу на пристроях різних розмірів. Ви можете вибрати «Попередньо визначені» або «користувацькі» – на ваш вибір.
Виходячи з нашого досвіду, розмір 618-768 пікселів виглядає найкраще, коли в ньому використовується один стовпець, тому ми поставили це так.
Елементи, звичайно, служать для додавання елемента в процес. Ви можете додати скільки завгодно. Є можливість як скопіювати елемент, так і видалити його.
Кожен елемент налаштовується окремо, вводяться його специфічні характеристики, і для кожного елемента можна встановити певні елементи, щоб кожен виглядав по-різному. Однак, якщо ви хочете, щоб усі елементи виглядали однаково, ви вкажете їхній стиль у параметрах стилю, а не в кожному елементі окремо. Усе, що встановлено в параметрах стилю, застосовується до всіх елементів процесу, за винятком тих, де сам елемент налаштовано дещо інакше відносно параметрів стилю. Все буде зрозуміло, коли ми пройдемо налаштування.
Поля «Заголовок» і «Текст» використовуються для введення тексту, який відповідає певному етапу процесу. Звичайно, у цьому випадку цілком природно, що кожен крок має різну назву та опис, тому це єдине місце, де ви можете ввести ці значення.
Ось як це виглядає, якщо замінити наш текст.
Параметри елемента стосуються частини елемента, яка не є назвою та описом. Ми використовуємо Item Offset, щоб позиціонувати один елемент. Коло з одиницею та лінія, що веде до наступного кроку, є частиною одного елемента, і, регулюючи зміщення елемента , ми переміщуємо ці елементи вниз або вгору. Як ви можете бачити на малюнку, ми встановили деяке зміщення для першого елемента, і тепер воно знаходиться трохи нижче рівня наступного елемента.
Параметр зміщення елемента також існує в параметрах стилю, і, як ми вже згадували, усе, що там установлено, застосовується до всіх елементів процесу. Тому, якщо ви хочете, щоб усі елементи були в іншій площині для кожного елемента, ви встановлюєте зміщення окремо.
Item Holder Size — це розмір поля, в якому він зараз дорівнює 1, тобто кількість кроків, а пізніше ми побачимо, що тут ще можна знайти. (Цю опцію також можна знайти в параметрах стилю, якщо ми хочемо, щоб усі тримачі предметів були однакового розміру).
Типографіка елемента відноситься до типографічних характеристик кількості кроків.
Фон слугує для призначення відповідного кольору або фону елементу. Крім того, ми можемо встановити градієнтний фон. Якщо ми хочемо, щоб усі елементи мали однаковий фон, ми налаштуємо його в параметрах стилю, якщо ми хочемо, щоб фон був іншим для іншого елемента, ми налаштуємо його в налаштуваннях елемента.
Наразі ми додамо лише фоновий колір.
За замовчуванням елементи відображаються як кола, але якщо вам потрібен квадрат або фігура з певними кутами , радіус власника елемента – це місце, де ви можете його налаштувати. Якщо значення дорівнює 0, це квадрат прямих кутів. Додаючи значення, ви побачите, як змінюються кути. Якщо ви видалите значення, ви знову отримаєте коло. Не всі кути мають бути однаковими, ви можете встановити різні значення для кожного кута.
Тип рамки, ширина та колір стосуються елементів рамки. Якщо ви не хочете мати межі, виберіть тип «Немає».
У вас також є всі ці налаштування в параметрах стилю, якщо ви хочете, щоб усі елементи були однаковими.
Ми щойно побачили, як змінити зміщення, і тепер у нас є два варіанти, які дозволяють змінити положення лише лінії, яка веде до наступного процесу. Верхнє зміщення лінії використовується для переміщення позиції лінії (вгору/вниз), а поворот лінії використовується для її обертання. Як ви можете бачити в примітці нижче, ми повернули лінію, і вона більше не під прямим кутом до елемента. Ви маєте ці налаштування лише для самого елемента.
Те, що ми навмисно пропустили на початку, — це параметр «Тип значка », він служить для додавання значка з бібліотеки до елемента або для завантаження нашого значка SVG.
Зверніть увагу на те, що відбувається далі, порядковий номер кроків пишеться вже не в центрі елемента, а окремим додатковим кружечком.
Тепер типографіка та колір елемента стосуються самої піктограми. Тут ми налаштуємо розмір (у варіанті розміру типографіки) і колір для кожної піктограми.
Ще одна річ, яку ми не розглянули більш детально вище, це фонове зображення елемента, як у випадку другого елемента в прикладі:
Кожне фонове зображення несе з собою певні налаштування щодо розташування зображення, його розміру та того, чи буде воно простим фоном чи з ефектом прокручування (параметр прикріплення). Ви матимете всі ці параметри, коли використовуєте фонове зображення.
Після встановлення загальних параметрів наш віджет процесу виглядає так:
Параметри анімації
Віджет процесу може мати анімацію – елементи завантажуються один за одним і з’являються в тому самому порядку, і це місце, яке ми будемо коригувати, хочемо ми цього чи ні.
Параметри макета
Є два варіанти компонування – горизонтальний і вертикальний вид процесу. Поки що ми показали все горизонтально. Однак якщо ви виберете вертикальний дисплей, параметри точно такі самі. Єдине, на що варто звернути увагу, це кількість колон (про це ми говорили в загальних параметрах). Вертикальний процес завжди має один стовпець, якщо ми хочемо, щоб елементи були розташовані один під одним в одному стовпці.
Оскільки ми встановили три стовпці для нашого прикладу, оскільки у нас є 3 елементи, без зміни одного стовпця наш віджет виглядає так:
Звичайно, якщо поставити одну колонку, то все буде як має бути:
Інструменти розробника
Ця опція дає нам можливість бачити віджет у формі короткого коду, якщо він нам знадобиться.
Як ми вже згадували, тут ми можемо знайти документацію та допомогу від автора аддонів для самого віджета.
Віджет процесу – параметр вкладки «Стиль».
Вкладка «Стиль» містить параметри для стилізації частин процесу. Як ми вже зазначали, усе, що тут встановлено, застосовуватиметься до всіх елементів у нашому процесі, за винятком тих, у яких для самого елемента встановлено щось інше.
Параметри стилю
Тут ви можете знайти різні повторювані параметри самих елементів, наприклад ті, що стосуються кольорів, типографіки, зміщення.
Єдине, чого немає в елементах, це вирівнювання, яке визначає, як заголовок і текст будуть розташовані по центру.
Якщо ви хочете, щоб усі елементи були однаковими, ви налаштуєте стиль тут. У нашому випадку ми здебільшого відкоригували елементи, оскільки у нас різні фонові кольори, різні розміри та положення. Тут ми встановлюємо Колір елемента, тобто колір піктограми, який за замовчуванням був сірим, а тепер для нас чорний.
Параметри стилю лінії
Стилізація технологічної лінії – у нас є кілька видів, можна регулювати колір і товщину.
Стиль інтервалів
Інтервал, пробіл над підзаголовком, над текстом і відступ навколо тексту. Цей відступ навколо тексту певним чином служить для «звуження» вмісту, розміщуючи відступ у полі, де не можна буде відобразити текст.
Додатковий стиль
Ми маємо ці налаштування лише тоді, коли наш елемент містить вставлену піктограму, тобто коли у нас є це додаткове поле, у якому знаходиться номер. Параметри стосуються цього номера та поля, у якому він розташований.
Колір додаткового тримача — це колір поля, у якому номер і типографіка додаткового тримача пов’язані з налаштуванням вигляду самого номера. Розмір додаткового власника — це розмір поля, і за допомогою Позиції додаткового власника ми можемо змінити положення поля.
Ми також можемо додати фон для звичайного поля елемента, але ми не можемо додати його для кожного поля окремо, він буде застосований до всіх полів загалом. Ми додали фонове зображення.
Давайте подивимося, чи добре ми розуміємо один одного і на основі презентації ми можемо побачити, як відбувалися ті чи інші процеси. Це може допомогти вам зробити свій власний і відразу знати, де що встановити.
Ми вже показали приклад горизонталі. Що ми можемо помітити з першого погляду, так це те, що у нас є 3 стовпці, і в них елементи, у яких є піктограми – додаткове поле з номером говорить нам, що елемент є піктограмою, а не малюнком, оскільки ми сказали, що лише тоді він з’являється .
Оскільки елементи мають різні кольори, ми знаємо, що ці налаштування були зроблені в самих елементах, а не в загальних параметрах.
Ми також можемо помітити, що зміщення можна регулювати, оскільки не всі елементи знаходяться в одній площині.
Усі значки та тексти мають однакові кольори, які вказують на те, що це встановлено в параметрах вкладки стилю.
Другий приклад хоч і здається складнішим, але ще легшим у виконанні. Тут рядок на сторінці поділено на дві частини. Зліва – зображення, а справа – процес.
Процес має вертикальне розташування, що означає, що кількість стовпців цього процесу дорівнює 1 і що всі 5 елементів розташовані один під одним.
Усі елементи розташовані симетрично один під одним, тобто зміщення не встановлено.
Усі тексти мають однакові характеристики, тому стиль задається у вкладці стилю.
Тут ми бачимо, що кожен елемент має фонове зображення (і що немає додаткових полів для номера), але ми також можемо помітити, що номер не знаходиться в середині елемента, як це відбувається за замовчуванням.
Існує хитрість, якою можна скористатися, щоб приховати номер, якщо ви не хочете, щоб він відображався. Все, що вам потрібно зробити, це встановити розмір типографіки елемента на 0 пікселів на вкладці «Стиль» у загальних параметрах. Таким чином номер не відображатиметься.
Це може бути корисним, якщо ви не хочете показувати процес, а просто використовуєте цей віджет для інших потреб, і вам заважає відображати кількість або кроки.
На закінчення
Додати віджет процесу на свій веб-сайт за допомогою Qi Addons для Elementor – це не тільки легко, але й весело, і ви також зможете виразити свою творчість. Ми заохочуємо вас продовжувати досліджувати шляхи, за допомогою яких ви можете збагатити дизайн і функціональність свого веб-сайту. Якщо ваш веб-сайт зосереджений переважно на візуальному вмісті, вам також може бути цікаво дізнатися більше про додавання сторінки та рядка повної ширини на ваш веб-сайт WordPress, або якщо ви хочете досягти кращої структури вмісту, вам може бути цікаво дізнатися більше про вкладки WordPress. Як ми вже згадували, Qi Addons постачається з 60 безкоштовними віджетами, тож експериментування та випробування нових можливостей не буде загрозою для вашого бюджету, а може лише надихнути вас покращити свій веб-сайт і додати до нього більше корисних функцій.