Зробіть свій веб-сайт Elementor більш зручним для мобільних пристроїв

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

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

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

• Що таке адаптивний дизайн веб-сайту Elementor
• Як налаштувати параметри мобільного пристрою, комп’ютера та вкладки
• Налаштуйте заголовок на дисплеї мобільного телефону
• Налаштуйте відступ або поля для мобільних пристроїв
• Створіть кожен стовпець горизонтально, і він чудово налаштує на всіх пристроях
• Змініть фонове зображення відповідно до перегляду мобільного/настільного комп’ютера
• Змініть видимість будь-якого розділу на робочому столі/мобільному перегляді
• Змініть порядок стовпців
• Створіть альтернативний розділ
• Відрегулюйте ширину стовпця
• Висновок

Що таке адаптивний дизайн веб-сайту Elementor

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

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

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

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

1. Перевірте, чи заголовок виглядає занадто великим на екрані мобільного пристрою.
2. Перевірте відступи вмісту або пробіл з боків вмісту
3. Перевірте вирівнювання стовпців сторінки, як воно виглядає ідеально; по центру, праворуч або ліворуч
4. Перевірте порядок стовпців, якщо вони відображаються в правильному порядку або його потрібно змінити.

А тепер давайте розберемося глибше і дізнаємося, як все буде працювати з Elementor Page builder.

Як налаштувати параметри мобільного пристрою, комп’ютера та вкладки

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

Налаштуйте заголовок на дисплеї мобільного телефону

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

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

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

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

Налаштуйте відступ або поля для мобільних пристроїв

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

Ви бачите, що ми використали відступи як 70px праворуч і ліворуч, що добре виглядає на веб-сайті для робочого столу; однак мобільний перегляд для цього налаштування повний безлад.

Ми можемо відрегулювати відступ до 17 пікселів з кожного боку, тоді все буде цілком нормально.

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

Створіть кожен стовпець горизонтально, і він чудово налаштує на всіх пристроях

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

Змініть фонове зображення відповідно до перегляду мобільного/настільного комп’ютера

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

Змініть видимість будь-якого розділу на робочому столі/мобільному перегляді

Ви також можете керувати видимістю будь-якого розділу або стовпця відповідно до пристрою.

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

Перейдіть до > налаштування розділу > розширені > адаптивний. Там ви побачите різні можливості або візуальні налаштування; Ви можете приховати розділ на робочому столі, на вкладці або на мобільному пристрої залежно від ваших уподобань.

Змініть порядок стовпців

Ви також можете змінити порядок стовпців у розділі налаштувань. Перейти до; розділ «Параметри» > «Додатково» > «Адаптивний» > «Зворотний стовпець» і натисніть «Так».

Створіть альтернативний розділ

Створіть альтернативні розділи на мобільному та робочому столі. Іноді розділ повзунка виглядає не так корисно на мобільному пристрої, як на робочому столі, тому ви можете використовувати будь-який інший розділ замість розділу повзунка. Ви можете зробити це, перейшовши на вкладку «Додатково» > увімкніть або вимкніть видимість розділу, який ви не хочете відображати, і додайте до нього альтернативне зображення.

Відрегулюйте ширину стовпця

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

Висновок

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

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