Як вирівняти розділи та стовпці Elementor

Працюючи з Elementor , ви помітите, що розташувати свої розділи та стовпці дещо складно. Вам потрібно вирівняти стовпці та розділи по вертикалі та горизонталі, щоб досягти адаптивного макета «розтягування до заповнення». Без цього вирівнювання елементи стовпців із різною висотою не вдасться налаштувати на екрані.

• Чому нам потрібно вирівнювати?
• Як стовпці або розділи працюють для адаптивного дизайну?
• Як вирівняти розділи та стовпці Elementor?
• Щоб виправити проблеми адаптивної ширини, використовуйте Overflow Hidden
• Піклування про позиціонування
• Відносні одиниці
• Контролюйте глибину кожного елемента за допомогою Z-індексу
• Хитрість щодо повторюваної функціональності
• Зміщення
• Золоте правило
• Висновок

Чому нам потрібно вирівнювати?

У кожному стовпці чи розділі вміст може мати різні категорії. Він може бути у вигляді картинок, тексту та оцінок. Для комплексного вигляду рекомендується, щоб зовнішній вигляд вмісту був однорідним. Його не слід просто кидати туди - скидати - просто так.

З гарним вирівнюванням ви можете зробити веб-сайт більш акуратним і стильним, щоб він не виглядав захаращеним. За допомогою параметра вирівнювання ви можете налаштувати кілька віджетів різного розміру поруч один з одним в одному стовпці.

Як стовпці або розділи працюють для адаптивного дизайну?

Elementor 2.5 дає змогу розміщувати дизайн і вміст на замовлення. Завдяки новій функції спеціального позиціонування ви можете переміщувати віджети в будь-яке місце. Але ви не можете зробити це за межами певного розділу. Ці віджети відносяться до стовпця, всередині якого вони знаходяться. Це може спричинити проблеми зі швидкістю відгуку дизайну.

Припустимо, у вас макет із трьох колонок. За допомогою спеціального позиціонування ви можете перетягнути віджет із правого стовпця в центральний стовпець або як завгодно.

Але від цього лише виграють відвідувачі робочого столу, оскільки для них це виглядатиме добре. Однак це спричинить проблему, якщо доступ до веб-сайту здійснюється з мобільного, оскільки Elementor розташовує стовпці вертикально на мобільному пристрої.

Таким чином, замість того, щоб мати три стовпці пліч-о-пліч, ви можете побачити всі три стовпці, складені один на одному. Елемент більше не відображатиметься в середньому стовпці, як це відбувається на комп’ютерах.

Хоча ви можете розумно налаштувати мобільний перегляд із прихованими налаштуваннями, але немає гарантії, що більшість людей зможуть його знайти. Отже, навіщо розчаровувати користувачів? Зробити дизайн адаптивним і адаптованим – це правильне рішення. Щоб нікуди не забилося.

З цього приводу вам потрібно звернути увагу на відношення віджета до стовпця, всередині якого він знаходиться.

Як вирівняти розділи та стовпці Elementor?

Для кожного розділу/стовпця перейдіть до розділу макета та встановіть такі параметри вирівнювання відповідно до ваших вимог:

• Вертикальне вирівнювання: ви можете вибрати параметри для віджетів з наступного. Але ви повинні пам’ятати про те, що вміст у стовпці не можна вирівняти за вертикальними параметрами перших трьох стовпців, тобто зверху, посередині та знизу.
• Топ
• Середній
• Дно

З цього приводу є ^* три нові опції, які роблять дуже зручним вирівнювання вмісту відповідно до ваших уподобань.

• ^*Інтервал між – встановлює відстань між віджетами на початку та в кінці на краю стовпця. Між елементами розміщено рівний простір, тобто рівний простір між ними.
• ^*Простір навколо – простір між віджетами рівний, а краї вдвічі менші від простору між віджетами.
• ^*Рівномірний простір – простір між віджетами рівномірний – він рівний між, до та після них.

• Горизонтальне вирівнювання: за допомогою цього параметра ви можете виконати вбудоване позиціонування та вирівняти вбудовані віджети, які знаходяться в одному рядку, по горизонталі. Ви можете вирівняти вміст стовпців по горизонталі за допомогою цих параметрів:
• Пуск - вирівнює всі піктограми зліва
• Центр: розташовує піктограми в середині стовпця
• End-встановлює всі піктограми праворуч
• Пробіл між – проміжок між віджетами на початку та в кінці на краю стовпця. Між елементами розміщено рівний простір, тобто рівний простір між ними
• Простір навколо – простір між віджетами рівний, а краї вдвічі менші від простору між віджетами
• Рівномірний простір – простір між віджетами рівномірний – він рівний між, до та після них

Щоб виправити проблеми адаптивної ширини, використовуйте Overflow Hidden

Коли мова заходить про зовнішній вигляд веб-сайту на мобільних пристроях, існує висока ймовірність того, що ви можете зіткнутися з проблемою, коли віджет із спеціальним позиціонуванням переповнює ширину стовпця.  

Це викликає справжнє розчарування у мобільних відвідувачів, коли вони можуть прокручувати горизонтально. І це не те, чого ви хотіли для свого сайту. Це можна виправити:

Параметри макета > встановіть «Переповнення» на «Прихований».

Таким чином, зайва область буде відрізана, і не потрібно буде прокручувати по горизонталі

Піклування про позиціонування

Також потрібно подбати про розташування колон. За допомогою Elementor 2.5 можна налаштувати спеціальне позиціонування — абсолютне та фіксоване.

Абсолютне позиціонування – це розташування елемента відносно розділу або стовпця, всередині якого ви перебуваєте. Отже, якщо ви використовуєте абсолютне позиціонування елемента або розділу, цей розділ не буде переміщатися вздовж вікна відвідувача.

Фіксована позиція відрізняється від абсолютної, оскільки вона дозволяє розділу/елементу залишатися фіксованими щодо точки огляду відвідувача. Отже, якщо користувач прокрутить сторінку, елемент залишиться там.

Відносні одиниці

Розробляючи веб-сторінку, ви побачите, що є кілька способів розміщення елементів. Для абсолютного позиціонування доцільно використовувати відносні одиниці, оскільки це зробить адаптивний дизайн більш функціональним, коли йдеться про інший розмір екрана.

Відносна одиниця налаштовується на основі відносної ширини та висоти екрана, отже, дозволяючи елементам або розділам змінювати розміри та покращуючи адаптивний дизайн. Якщо ви вирішите використовувати пікселі, вам потрібно створити кілька адаптивних розділів для різних розмірів екрана.

Контролюйте глибину кожного елемента за допомогою Z-індексу

Якщо ви збираєтеся використовувати «абсолютне» або «фіксоване» позиціонування для віджетів, виникне багато ситуацій, коли два чи більше віджетів можуть накладатися, тобто вони розташовані «поверх» один одного. Ви можете уникнути цього, використовуючи звичайне налаштування Z-index. Це дозволить вам контролювати глибину та вибирати, які віджети відображатимуться на передньому плані.

Хитрість щодо повторюваної функціональності

Якщо ви використовуєте клацання правою кнопкою миші, щоб скопіювати елемент із спеціальним позиціонуванням, може здатися, що клацання правою кнопкою миші не спрацювало.

Але тримайся. Це не правда. Функція дублювання працювала ідеально та дублювала елемент. Просто оскільки кожен елемент має однакове спеціальне позиціонування, дубльований елемент укладається ТОЧНО поверх іншого елемента (створюється враження, що дублікат не створено).

Простіше кажучи, якщо ви успішно створили один стовпець, ви можете дублювати стовпець, коли це буде потрібно. Також переконайтеся, що стовпці, які ви створюєте, не використовують спеціальне позиціонування. Якщо це так, дублювання не працюватиме з опцією правої кнопки миші. Однак ви можете скористатися функцією дублювання, щоб подолати обмеження та скопіювати стовпець.

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

Зміщення

Бувають випадки, коли потрібно встановити зміщення вмісту вашої веб-сторінки. За допомогою Elementor ви можете легко встановити зсув. Отже, якщо ви встановите зсув 500 пікселів зліва, тоді навколо вмісту залишиться простір на основі вашого введення. Подібним чином ви також можете встановити зміщення з правого боку. Рекомендується встановлювати однакові значення для зміщення ліворуч і праворуч, оскільки вміст буде правильно вирівняно на екрані.

Бувають випадки, коли потрібно встановити зміщення вмісту вашої веб-сторінки. За допомогою Elementor ви можете легко встановити зсув. Отже, якщо ви встановите зсув 500 пікселів зліва, тоді навколо вмісту залишиться простір на основі вашого введення. Подібним чином ви також можете встановити зміщення з правого боку. Рекомендується встановлювати однакові значення для зміщення ліворуч і праворуч, оскільки вміст буде правильно вирівняно на екрані.

Золоте правило

Для кращого адаптивного дизайну використовуйте відносні одиниці. Це тому, що абсолютне позиціонування може бути складним, якщо доступ до веб-сайту здійснюється з іншої платформи. Використання відносних одиниць для розробки ваших розділів призведе до більш адаптивного дизайну. Зміна ширини може бути ідеально оброблена за допомогою відносних одиниць. Під «відносним» ми маємо на увазі змінні одиниці, як-от відсоток або ширина огляду (VW), а не фіксовані одиниці, як-от пікселі.

Висновок

Elementor — надзвичайно зручний конструктор веб-сайтів. Часом це може створити проблеми з відображенням веб-сайту, якщо доступ до веб-сайту здійснюється з мобільного пристрою чи планшета. За допомогою вирівнювання розділів і стовпців ви можете дуже легко зробити ваші веб-сайти ідеальними.