Як редагувати мобільну версію сайту WordPress
Чому мобільна версія вашого сайту є вирішальною для вашого успіху?
Почнемо з того, що понад 50% глобального веб-трафіку надходить із мобільних телефонів. Це буквально означає, що більше половини ваших клієнтів перевіряють ваш сайт зі своїх мобільних пристроїв. Починаючи з 2018 року, коли Google запустив індексацію сайтів насамперед для мобільних пристроїв, адаптивний веб-дизайн став ще більш важливим, і зосередженість на мобільному досвіді веб-сайту логічно стала пріоритетом для всіх, хто серйозно ставиться до свого бізнесу. Ще одна важлива перевага мобільних веб-сайтів полягає в тому, що вони прості та інтуїтивно зрозумілі. Вони пропонують зручну взаємодію з користувачем, що полегшує потенційним клієнтам зв’язуватися з вами. Крім того, вони швидко завантажуються та роблять обмін вмістом простим і природним. Один із способів думати про адаптивний сайт — це розглядати його як безкоштовний спосіб покращити рейтинг у пошукових системах. Чому б ви втратили цю можливість? Чим кращий ваш рейтинг, тим більше звичайних результатів пошуку ви отримаєте, а це означає більше потенційних клієнтів і конверсій.
Як попередньо переглянути мобільну версію вашого сайту
Адаптивна тема WordPress гарантує багато переваг, але вам все одно потрібно перевіряти, як ваш сайт виглядає на смартфонах у режимі реального часу. Існує багато можливих варіацій розмірів екрана та веб-переглядачів, тому жоден із мобільних попередніх переглядів не може забезпечити ідеальний і 100% точний попередній перегляд. Ви завжди повинні покладатися на реальний досвід, який ви отримуєте, переглядаючи свій сайт на реальному смартфоні чи мобільному пристрої. Це може надихнути вас на оптимізацію ключових цільових сторінок і створення різних версій, оптимізованих для мобільних пристроїв.
Отже, давайте подивимося, як можна виконати попередній перегляд, якщо у вас є мобільний сайт WordPress двома різними способами.
Використання настроювача тем WordPress
Перший і найпростіший спосіб побачити попередній перегляд мобільної версії – це скористатися настроювачем тем WP. Процедура проста. Увійдіть на інформаційну панель WordPress і перейдіть до Вигляд > Налаштувати.
Після того як ви клацнете на налаштування теми WordPress і відкриєте його, ви побачите всі параметри в меню ліворуч. Залежно від теми, яку ви використовуєте, пропоновані варіанти можуть відрізнятися.
Зверніть увагу на значок мобільного телефону внизу екрана. Натисніть на нього, і ви побачите попередній перегляд того, як ваш сайт виглядає на мобільних пристроях.
Якщо сині символи редагування вас бентежать – не хвилюйтеся. Вони відображаються лише в засобі попереднього перегляду, але ніколи не на вашому сайті.
Порада: якщо ви ще не запустили свій блог або він знаходиться в режимі обслуговування, цей метод попереднього перегляду дуже зручний, оскільки він дозволяє вносити зміни та перевіряти, як вони виглядають, перш ніж запустити свій сайт.
Використання режиму пристрою інструментів розробника Google Chrome
Якщо вам з будь-якої причини незручно користуватися настроювачем тем WP, ви завжди можете перевірити, чи ваш WordPress підтримує мобільні пристрої з веб-переглядачем Google Chrome. Це також дуже проста і легка процедура, яка складається з кількох кроків.
Просто відкрийте браузер Google Chrome, як зазвичай, і перейдіть на сторінку, яку хочете перевірити. Потім клацніть сторінку правою кнопкою миші та виберіть Перевірити.
Зауважте, що таким чином ви можете переглянути попередній перегляд будь-якої сторінки на будь-якому сайті, а не лише на вашому. Це може бути навіть веб-сайт вашого конкурента.
З правого боку відкриється нова панель, яка виглядатиме так:
Перегляд розробника дозволяє побачити вихідний HTML-код вашого сайту.
Тепер натисніть кнопку Перемкнути панель інструментів пристрою, щоб перейти до мобільного перегляду.
Ви помітите кілька змін у мобільному попередньому перегляді: ваш веб-сайт зменшено, щоб відповідати розміру екрана мобільного пристрою, і можуть відбутися інші зміни. Подивіться та уважно помічайте відмінності та зауважте, що вам слід змінити.
Подивіться, що відбувається, коли ви намагаєтеся провести курсором миші по екрану мобільного пристрою – він стає колом.
Суть кола — імітувати сенсорний екран на мобільному пристрої.
Порада: якщо ви хочете побачити, як збільшується та зменшується екран вашого мобільного телефону, утримуйте клавішу Shift, клацніть і перемістіть мишу.
Перевага використання цього методу для попереднього перегляду вашого мобільного веб-сайту полягає в тому, що він дає змогу побачити, як сторінка виглядає на різних типах смартфонів. Ці додаткові параметри знаходяться над мобільним переглядом вашого сайту. Незалежно від того, яке вікно попереднього перегляду ви відкрили, натиснувши кнопку Перемкнути панель інструментів пристрою, тут ви можете змінити розмір екрана пристрою.
Порада. Використовуйте піктограму повороту у верхньому правому куті, щоб повернути екран мобільного телефону. Ви також можете перевірити елементи на сторінці, клацнувши правою кнопкою миші та вибравши опцію Перевірити.
Чому Page Builder важливий для RWD
RWD – це те, про що ви повинні ретельно подумати з самого початку створення свого веб-сайту. Потрібно проаналізувати багато речей, коли потрібно зробити свій сайт однаково привабливим, зручним для навігації та ефективним на екранах різних розмірів. Конструктори сторінок WordPress відіграють вирішальну роль у цьому процесі, вони забезпечують вас наріжними каменями дизайну вашого сайту, тому вам потрібно добре поінформувати себе, перш ніж зробити вибір. Отже, витративши деякий час на дослідження конструкторів сторінок, ви заощадите багато часу, який можете витратити на створення свого веб-сайту.
Виходячи з нашого досвіду, WPBakery та Elementor є чудовим вибором, оскільки вони можуть задовольнити широкий спектр різноманітних потреб.
Якщо у вас обмежений бюджет, Elementor — найкращий вибір. Це простий у використанні плагін, зручний для початківців, який має дуже щедру безкоштовну версію з надійним набором елементів. Він також добре інтегрується з іншими провідними плагінами та службами WP, такими як MailChimp, WooCommerce, HubSpot, Yoast SEO тощо. Якщо ви можете дозволити собі плагін преміум-класу, WPBakery Page Builder ніколи вас не розчарує. Він поставляється з неймовірно великою колекцією елементів, великою кількістю блоків і опцій. Він також простий у використанні та дозволяє багато творчості.
Хоча конструктори сторінок є важливими для RWD, тема, яку ви плануєте використовувати, також важлива, оскільки вона може запропонувати деякі чудові функції. Як ви, можливо, знаєте, автори тем розробляють спеціальні віджети та елементи, які можна налаштувати окремо від конструкторів сторінок. Багато з цих елементів дозволяють налаштувати швидкість реагування відповідно до ваших потреб. З цієї причини ви повинні вибрати тему, розроблену відомими, надійними авторами. Це особливо важливо, якщо ви хочете використовувати безкоштовну тему WordPress. Щоб заощадити ваш час і нерви, ми протестували безліч безкоштовних тем. Отже, якщо ви хочете використовувати адаптивну, багатофункціональну та надійну безкоштовну тему, ми рекомендуємо вам спробувати тему Qi.
Як редагувати мобільну версію вашого сайту в Elementor
Можна з упевненістю сказати, що Elementor є найкращим конструктором сторінок, коли справа доходить до редагування мобільної версії вашого веб-сайту. Може статися, що ви не помітили цей маленький значок, який називається Viewport Icon, у налаштуваннях :
Ця піктограма вказує на те, що будь-яке значення, яке має його поруч, можна редагувати окремо для настільної та мобільної версії сайту. Візьмемо, наприклад, параметри ширини стовпця – ви можете налаштувати значення для комп’ютера, мобільного пристрою та планшета. Значення, яке ви вводите для кожного пристрою, буде дійсним лише для вибраного пристрою. Зверніть увагу, що поруч із тегом HTML немає значка, що означає, що він має однакове значення для кожного пристрою.
Якщо ви хочете змінити значення для мобільного пристрою, все, що потрібно, це вибрати опцію мобільного макета та ввести потрібні значення (ці значення будуть реалізовані лише на мобільних пристроях). У правій частині екрана у вас є попередній перегляд усіх змін, які ви вносите, щоб ви могли негайно побачити, як нові значення виглядатимуть на пристрої.
Щоб повернутися до перегляду робочого столу, вам потрібно переключитися на параметр макета робочого столу. Ви можете зробити це, як ми згадували вище, або за допомогою цієї маленької піктограми в нижньому меню на сторінці :
Ще одна важлива річ, яку слід згадати, пов’язана зі швидкістю реагування, полягає в тому, що стовпці та рядки можна вимкнути для окремих пристроїв, тобто ми можемо сказати, що вони не будуть видимі (або будуть видимі) на екранах деяких розмірів.
Щоб отримати доступ до цієї опції, пройдіть шляхом:
- Клацніть правою кнопкою миші рядок/стовпець
- Виберіть Редагувати розділ
- Перейдіть на вкладку Додатково
- Виберіть спадне меню Адаптивний
Цей параметр дуже важливий, якщо у нас є розділ, який, як ми знаємо, має сенс відображати лише на робочому столі, тому ми скасуємо його на інших пристроях. І щоб компенсувати його відсутність, ми можемо зробити один розділ, який буде видно на всіх інших пристроях, крім робочого столу.
Що стосується стовпців, ми також можемо знайти опцію «Зворотний стовпець» (планшет / мобільний пристрій). Найкраще пояснити це на прикладі. Припустімо, у нас є такий розділ на робочому столі, де вміст поділено на два стовпці із зображеннями, за якими йде короткий текст :
Звичайно, на мобільних пристроях вміст буде змінено, як на зображенні нижче, дотримуючись початкового порядку на робочому столі:
Параметр зворотного стовпця дозволяє нам змінити порядок певного розділу для макетів мобільних пристроїв або планшетів. Коли ми робимо це для першого розділу на невеликих пристроях, результатом є більш ефективний відображений вміст:
Як редагувати мобільну версію вашого сайту за допомогою плагінів
Рано чи пізно у вас виникне спокуса використовувати різноманітні плагіни, які полегшать вам додавання бічної панелі, заклику до дії, віджета чи подібного елемента на ваш сайт. Це момент, коли багато хто забуває, що бічна панель або будь-який інший елемент, який ідеально працює на екрані настільного комп’ютера, може бути не таким чудовим на мобільному пристрої. Отже, перш ніж перейти до використання цих зручних інструментів, перевірте, чи вони також чуйні. Правда в тому, що багато з них є і можуть допомогти вам покращити UX. Але щоб знати це напевно, прочитайте огляди або знайдіть демо-версію перед установкою. Поки плагін добре працює на мобільних пристроях, ви можете бути впевнені, що ваш веб-сайт на шляху до успіху. Не забуваймо також, що ваші параметри дуже відрізняються залежно від теми, яку ви використовуєте. Преміальна темагарантує набагато більше можливостей.
Меню є основою взаємодії з користувачем. Це перша або одна з перших речей, на які хтось натискає, коли відвідує ваш сайт. Це впливає на те, як швидко відвідувач знайде те, за чим прийшов, як довго він залишиться та багато інших аспектів UX. Важливо мати красиве, добре структуроване меню, яке полегшує навігацію, але це не так просто, як здається. У вас може бути чудове меню, яке ідеально працює на настільному комп’ютері, але занадто важке для мобільного. Одне з рішень у цьому випадку — налаштувати версію для настільного комп’ютера також під розмір екрана мобільного пристрою. Але що, якщо це означає втрату забагато корисної інформації? У такому випадку ви можете створити інше меню, налаштоване лише для розміру екрана мобільного пристрою. У багатьох темах WP є така можливість. Якщо ваша тема не одна з них, не хвилюйтеся, їх багаточудові плагіни для адаптивних меню. Ми рекомендуємо плагін Responsive Menu, який містить понад 150 параметрів для налаштування та не вимагає жодних знань програмування. Він дозволяє додавати анімацію, фонові зображення, установлювати положення кнопок меню та багато іншого. Він неймовірно простий у використанні, тому особливо зручний для початківців.
Зображення та галереї
Зображення розмовляє тисячами мов, тож подбайте про те, щоб ваше виглядало так само приголомшливо на екрані будь-якого розміру. Ми живемо в візуально орієнтованій культурі, і в якій би ніші ви не знаходилися, чудові фотографії є обов’язковими. Але, незалежно від того, наскільки чудові зображення у вас є, якщо вони завантажуються повільно або представлені неакуратно, ви ризикуєте втратити значний відсоток своєї аудиторії. Отже, щоб уникнути такого сценарію, ми рекомендуємо плагін Envira Gallery Lite, який допоможе вам створювати потужні галереї, як професіонал. Деякі з його переваг полягають у тому, що він високо оптимізований для роботи в Інтернеті та сервері, що є чудовою новиною для вашого SEO.
Коли у вас є чудове адаптивне меню та приголомшливі галереї, наступне, про що варто подбати, — це кнопки спільного доступу в соціальних мережах. Їх розмір повинен бути налаштований відповідно до пристрою. Велика кнопка на маленькому екрані змушує відвідувача випадково натиснути, і це дуже дратує. З іншого боку, маленькі кнопки на великому екрані не так легко розпізнати. Плагін, який може допомогти вам налаштувати кнопки, це плагін Sassy Social Share. Простий у користуванні, абсолютно безкоштовний і зручний для початківців, він робить спільний доступ як для вас, так і для відвідувачів вашого сайту.
Мобільні веб-сайти Firendly
У ситуаціях, коли вам потрібно швидко реагувати на мобільні пристрої, немає кращого рішення, окрім плагіна, такого як WPtouch. Цей плагін створено таким чином, що він автоматично додає просту та елегантну тему для мобільних пристроїв на ваш сайт WP. Той факт, що він рекомендований Google, багато говорить про його ефективність. Отже, навіть якщо у вас немає мобільної версії вашого сайту, такий плагін може миттєво увімкнути зручну для мобільних пристроїв версію вашого веб-сайту, щоб ви не втратили свій рейтинг. Це також дозволяє налаштувати багато аспектів зовнішнього вигляду сайту.
Швидкість завантаження сторінки також є дуже важливим аспектом взаємодії з користувачем, особливо на мобільних пристроях. Якщо ви зіткнулися з деякими проблемами в цій області, подумайте про використання плагіна Accelerated Mobile Pages, оскільки це один із найшвидших і найпростіших способів покращити швидкість завантаження вашого сайту.
Уникайте додавання спливаючих вікон на мобільних пристроях
Спливаючі вікна рідко бувають забавними, але вони особливо дратують на мобільних телефонах. Вони займають значну частину екрана та вимагають від відвідувача закрити їх, перш ніж отримати доступ до вмісту сторінки. Тому найкраще повністю уникати їх у мобільній версії вашого сайту. Те, як ви збираєтеся їх уникати, здебільшого залежить від вашого постачальника послуг, але більшість із них мають можливість вимкнути нав’язливі спливаючі вікна на мобільних телефонах. Також майте на увазі, що Google карає сайти, які мають дуже нав’язливі спливаючі вікна.
На закінчення
Оскільки кількість людей, які використовують смартфони для доступу в Інтернет, постійно зростає, має сенс очікувати набагато більше рішень і опцій для мобільних версій сайтів. Дизайнери наполегливо працюють над вирішенням безлічі шаблонів використання, однак основи RWD ті самі – переконайтеся, що ви вибрали тему WP, зручну для мобільних пристроїв, і конструктор сторінок, який має всі необхідні параметри.
Отже, наскільки ваш сайт адаптивний? Вам потрібно внести багато змін, щоб зробити його більш зручним для мобільних пристроїв? Поділіться з нами своїми відповідями та не соромтеся запитувати більше інформації в розділі коментарів.