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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Щоб виправити проблеми з чутливою шириною, використовуйте приповнений прилив

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

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

Налаштування макета > Установіть для Переповнення значення Приховано

Роблячи це, перевищена площа буде обрізана, і не буде потреби в горизонтальній прокрутці

Турбота про позиціонування

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

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

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

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

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

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

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

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

Трюк про повторювану функціональність

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

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

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

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

Компенсації

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

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

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

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

Висновок

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