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

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

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

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

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

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

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

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

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

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

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

Тепер давайте розберемося глибше і з’ясуємо, як все вийде з конструктором сторінки Elementor.

Як налаштувати настройки для мобільних пристроїв, настільних ПК та вкладок

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

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

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

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

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

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

Відрегулюйте прокладку або поля для мобільних пристроїв

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

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

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

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

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

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

Змініть фонове зображення відповідно до перегляду для мобільних пристроїв / настільних ПК

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

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

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

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

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

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

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

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

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

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

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

Висновок

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

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