Веб-сайт, що реагує на мобільні пристрої, є важливою частиною будь-якого онлайн-бізнесу.
Google використовує швидкість завантаження сторінок для мобільних пристроїв як ключовий фактор для будь-якого рейтингу пошуку веб-сайтів. Це головним чином тому, що більше половини глобального веб-трафіку надходить з мобільного трафіку.
Тому мобільний адаптивний веб-сайт є неминучим як для здоров’я вашого сайту, так і для кращого рейтингу в пошуковій системі Google. У цій статті ми зосередимося на тому, як створити адаптивний для мобільних пристроїв веб-сайт за допомогою конструктора сторінок Elementor.
Адаптивний макет працює інноваційно, автоматично масштабуючи весь вміст відповідно до кожного розміру екрана. Він автоматично змінює розмір зображень та вмісту на мобільному екрані, щоб глядачі могли переглядати ваш вміст без будь-яких зусиль.
Більшість із нас купують тему, яка також стверджує, що відповідає мобільності; однак, все може бути засмучуючим, коли дизайн вашої теми повністю зруйнується на екрані мобільного телефону.
Щоб подолати такі ситуації, ми розробили адаптивне рішення для мобільних пристроїв, де ви можете створити дизайн свого веб-сайту з нуля за допомогою інструментів адаптивного макета Elementor За допомогою цих адаптивних інструментів для мобільних пристроїв ви можете налаштувати будь-який куточок макета свого веб-сайту, зокрема типографіку, відступи, поля та вирівнювання для мобільних пристроїв. Крім того, ви зможете змінити налаштування колонок і порядок на мобільному пристрої.
Тепер ви можете відредагувати налаштування мобільної сторінки вашої сторінки, перейшовши в режим перегляду для мобільних пристроїв і перевірте наведені нижче параметри, щоб відрегулювати відповідно до компонування мобільного пристрою.
Тепер давайте розберемося глибше і з’ясуємо, як все вийде з конструктором сторінки Elementor.
Практично у всіх редагованих функціях є можливість налаштувати налаштування мобільних пристроїв, настільних ПК та вкладок. якщо ви натиснете на чуйний режим у нижній частині меню
Іноді ми хочемо сміливого та помітного заголовка на нашому веб-сайті, і це виглядає ідеально добре на дисплеї робочого столу, але коли ви перемикаєте перегляд мобільних пристроїв, заголовок займає весь екран і не схожий на вміст.
Ви можете налаштувати розмір тексту будь-якого текстового елемента на вкладці та мобільному пристрої. Ви також можете встановити різні розміри тексту для заголовків мобільних пристроїв, які чудово виглядають на екрані мобільних пристроїв і краще вписуються в екран. На цій демонстраційній сторінці я створив Заголовок, який чудово виглядає на сайті робочого столу, тоді як на мобільному екрані він займає весь екран.
Якщо я натискаю на опцію редагування стовпця заголовка, я можу перейти в розділ типографії, де я можу регулювати розмір заголовка, який добре виглядає на робочому столі, а також на екрані мобільного телефону. Я можу керувати обома окремо. Для перегляду мого сайту на робочому столі розмір заголовка становить 49 пікселів, але для перегляду мобільних пристроїв він не вміщується
Для корекції натисніть на мобільний адаптивний режим> стиль> типографіка> відрегулюйте розмір пікселів до 30, що легко поміщається на мобільному екрані.
Під час коригування прокладки рекомендується не використовувати значення в пікселях, а не встановлені значення в ЕМ або відсотках, оскільки це дозволить зберегти розмір відносно загального розміру екрана.
Ви можете бачити, що ми використовували набивання як 70px вправо і вліво, що добре виглядає на робочому столі; проте мобільний вигляд для цього налаштування - це повний безлад.
Ми можемо відрегулювати відступ до 17 пікселів з кожного боку, тоді це виявляється цілком нормально.
Крім того, ви можете встановити для всіх стовпців значення 750 пікселів, де ваш вміст відображатиметься у вікні без потреби регулювати екран як на робочому столі, так і на мобільному; він автоматично відрегулює вміст у коробці.
Після того, як ви створите стовпчик по горизонталі, який дизайнери віддають перевагу найбільше, тоді ви можете дублювати секції та економити час. Створіть по одному розділу за раз, а потім повторно використовуйте його, якщо це добре допоможе заощадити час.
Деякі фонові зображення добре виглядають на екрані робочого столу, але існує можливість, щоб зображення не виглядало настільки великим, як на екрані мобільних пристроїв. Отже, подумайте творчо та виберіть інше зображення на екрані мобільного телефону. Для вибору іншого мобільного перегляду натисніть на розділ> вкладка стилю> натисніть на значок пристрою та виберіть мобільний вигляд. Тепер, яке б зображення ви не вибрали, воно відображатиметься лише на мобільному вікні.
Ви також можете контролювати видимість будь-якої секції або стовпця відповідно до пристрою.
Іноді ми показуємо наш вміст чи зображення у двох-трьох розділах чи різних стовпцях, але нам не подобається відображати його на мобільному пристрої. Ось чому Elementor може приховати розділ, який вам не подобається відображати в мобільному режимі перегляду.
Перейдіть до> налаштування розділу> розширений> чуйний. Там ви побачите різні можливості чи візуальні налаштування; ви можете приховати розділ на робочому столі, сховатися на вкладці або сховатися на мобільному пристрої залежно від ваших уподобань.
Ви також можете змінити порядок стовпців у розділі налаштувань. Йти до; налаштування розділу> Додатково> Адаптивний> Зворотний стовпець і натисніть на так.
Створіть альтернативні розділи на перегляді мобільних пристроїв та на робочому столі. Іноді розділ слайдера виглядає не так корисно на мобільному, як на робочому столі, тому ви можете використовувати будь-який інший розділ замість цього. Для цього можна перейти на вкладку «Додатково»> увімкнути / вимкнути видимість розділу, який ви не бажаєте відображати, та додайте на нього альтернативне зображення.
Усі розділи стовпців отримують 100% ширину, коли ви переглядаєте їх на мобільному поданні. Однак ширина може бути змінена відповідно до ширини стовпця на мобільному пристрої. Якщо у вас є два стовпці, ви можете встановити максимальну ширину кожного розділу 50%.
Elementor постачається з усіма потужними функціями для управління адаптивним розташуванням стовпців усіх розмірів екрану. Це дозволяє вам відрегулювати кожен розділ відповідно до вибору режиму перегляду. Ведення веб-сайту, придатного для мобільних пристроїв, неминуче, оскільки алгоритм Google найбільше вважає рейтинг веб-сайтів, придатних для мобільних пристроїв. Адаптивні веб-сайти не тільки необхідні для покращення SEO, але і вам потрібно отримати більше трафіку, оскільки більше 80% трафіку надходить від переглядів на мобільних пристроях.
Зараз у програмі для створення сторінок Elementor є ексклюзивні функції, які дозволяють її користувачам без особливих зусиль створювати зручний для мобільних пристроїв сайт. Сподіваємось, ви вважаєте мою статтю корисною та отримали всі ваші відповіді про те, як створити чуйний веб-сайт за допомогою Elementor.
Верхні та нижні колонтитули веб-сайту є важливими елементами. У більшості випадків заголовок забезпечує навігацію…
Дві з найпопулярніших тем WordPress на ринку – Astra та OceanWP. Професійний…
Створення чудового веб -сайту з новинами не вимагає, щоб ви стали веб -дизайнером. Ми…
Тема «Газета» - одна з найважливіших тем WordPress, розроблена tagDiv,…
Що стосується створення інтернет-магазину, WooCommerce-це plugin . Це…
Заголовок - це загалом перше, що бачить людина, відвідуючи ваш веб -сайт,…
Переглянути коментарі
Ietwietny post! Bardzo odpowiada na moje potrzeby. Stworzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂
Супер! Nie mogłam samodzielnie znaleźć 2 rzeczy o których piszecie - zmiana kolejności kolumn i wyłączenie widoczności sekcji. Wielkie dzięki za pomoc :)
Привіт, щоб змінити порядок стовпців, ви можете використовувати drag'n drop безпосередньо або провідник розділів. Що стосується видимості, то це розширене налаштування розділу, вам потрібно буде вимкнути видимість на комп’ютері, планшеті та мобільному пристрої.
як зробити адаптивні відступи?
Вітаю, відступи не дуже чуйні, це фіксоване значення. Якщо у вас є проблема з реагуванням, вам потрібно визначити різні значення доповнення для комп’ютера, планшета та телефону