Промосайт стартапу — онлайн-сервісу для організації роботи
Закласти сайт з огляду на масштабованість бізнесу вдається далеко не всім. Як наслідок, каталог товарів, послуг і решти даних тріщить по швах, а додавання нових функцій тільки шкодить дизайну та швидкості сайту. «Якби знав де впаду, то й соломки б підстелив» — часто читаємо по очах клієнтів, закочуємо рукави та влаштовуємо великий переїзд. І це якраз одна з таких історій — кейс про те, як ми дочиста перенесли промосайт на WordPress — з фірмовим дизайном, доволі стандартним функціоналом і прямо-таки незмірним контентом.
Про проєкт і завдання
Наш клієнт, онлайн-сервіс для організації роботи та життя xTiles, називає себе дитиною Notion і Miro. Як відомо, діти ростуть швидко, і так само швидко сайт стартапу переріс свою першу платформу Webflow. Він конче потребував нового рішення, за яким і звернувся до команди Webnauts.
Разом з нескладним функціоналом сайт мав надзвичайно складну структуру. Щоб уявити весь масштаб контенту для експорту, достатньо сказати, що одне тільки меню навігації займало декілька рівнів, а футер сайту — ледь не цілий екран. Тут тобі і блог з купою статей, і здавалося б звичний для всіх, однак незвично масштабний розділ FAQ, через що він отримав назву «Академії».
Словом, перенести контенту ми мали багато, причому двома мовами. А перед цим — «натягнути» фірмовий дизайн на WordPress і реалізувати максимально зручну адмін-панель для легкого керування величезним масивом інформації.
Верстка за унікальним дизайном
Бувалий користувач xTiles навряд чи помітить «підміну» платформи, тому що ми повністю зберегли дизайн і покращили функціонал сайту. Збирали сторінки за допомогою Elementor Pro — плагіну WordPress, який дає змогу не тільки відтворити дизайн фірмового стилю, а й зробити його адаптивним для кожного пристрою — від дисплея смартфона до стаціонарного комп’ютера.
Що стосується адаптації сайту на WordPress до нестандартних потреб клієнта, то готові програмні інструменти не завжди можуть їх задовольнити. Щоб реалізувати на сайті кастомні віджети, як-то секції з табами та прайсами, ми пустили в хід мову програмування JavaScript:
Іноді ми обмежувалися старими добрими шорткодами, зокрема в розробці деяких слайдерів і секцій розділу FAQ:
Блог
Важливою частиною будь-якого сайту є блог. Особливо плодовитий на статті промосайт xTiles використовує цей інструмент не тільки для налагодження комунікації з авдиторією, а й SEO-просування свого продукту. Тому ми потурбувались, аби блог був максимально зручним для читачів і ефективним — для бізнесу.
Синхронізація з Pinterest. До 40% людей краще сприймають статті з візуальним доповненням. А якщо візуальний контент не просто привабливий, а ще й корисний, — його часто хочеться зберегти. Щоб читачі блогу могли миттєво «запінити» (з англ. pin — пришпилити) вподобані зображення на візуальну дошку, ми під’єднали до сайту код популярної платформи Pinterest.
Користувач сайту може довідатися про цю функцію під час наведення курсора миші на прев’ю, обкладинку чи будь-яке інше зображення статті, а під час тапу чи натискання — зберегти його до свого облікового запису Pinterest.
Час читання статті. Як каже король юзабіліті Якоб Нільсен: «Тримайте користувачів у курсі того, що відбувається». Так ми і зробили — реалізували автоматичний розрахунок часу, необхідний для прочитання кожної статті. Якщо враховувати те, що це блог онлайн-сервісу з планування та організації, така фіча логічна та доречна. Перш ніж приділити статті свій дорогоцінний час, спершу користувач має змогу його оцінити. Що це, як не турбота про авдиторію?
Ієрархічний зміст статті. Щоб заощадити час і забезпечити зручну орієнтацію в контенті, ми реалізували віджет зі змістом публікації. Він автоматично формується із заголовків рівня <h2> і <h3>, клік на які переносить читача в потрібні розділи статті.
Шеринг статті в соцмережах — ще одна корисна функція на сторінках блогу xTiles. Вона суттєво спрощує поширення публікацій і дозволяє залучити більше читачів. Або ж, якщо говорити мовою SEO — збільшити обсяг органічного трафіку на сайт з Х, Facebook і LinkedIn.
Розробка промосайту на WordPress
Кастомізація адміністративної панелі
Орієнтуватися на сайті з величезним обсягом контенту має бути так само зручно, як і керувати цим контентом — додавати, редагувати та оновлювати вміст сторінок:
Для цього ми адаптували традиційну адмін-панель WordPress під потреби клієнта та створили кастомні типи записів, як-то:
- Templates — для створення унікальних сторінок для різних типів записів;
- Products — для додавання товарних сторінок з тарифами та цінами;
- Internal FAQs — для керування розділом FAQs на сайті;
- Changelog — для журналізації будь-яких змін, внесених на сайт.
Ми кастомізувати інтерфейс CMS за допомогою плагіну Advanced Custom Fields (ACF). Усе для того, щоб адміністратор мав більше контролю над зовнішнім виглядом і функціональністю сайту без допомоги програміста.
Контактні форми
За допомогою вищезгаданого плагіну Elementor Pro, який лежить в основі всього сайту, були створені контактні форми. Одні збирають запити користувачів, зацікавлених у партнерстві з xTiles, інші — претензії щодо порушення авторських прав:
Мультимовність
Завдяки плагіну WordPress Multilingual (WPML) промосайт xTiles досконало опанував дві мови — українську та англійську. Цей популярний інструмент допомагає перекласти не лише користувальницький інтерфейс, а й адміністративну частину сайту — записи, віджети, поля тощо. Крім того, він сприяє коректній SEO-оптимізації сайту згідно з мовою пошуку завдяки перекладу слагів URL-адрес сторінок, заголовків і метатегів.
SEO сайту на WordPress
Коли ми вже торкнулися теми SEO, варто згадати про ще один інструмент, який працює на залучення трафіку. Це Yoast — плагін, який автоматизує технічну пошукову оптимізацію та не дозволить загубитися насиченому на корисний контент сайту xTiles у пошуковій видачі. Тільки уявити, якими барвами може заграти цей і ще безліч інструментів у руках SEO-спеціаліста Webnauts. Хоча, що це ми… Не треба уявляти — про численні кейси SEO-просування можна довідатися з нашого портфоліо.
Швидкість завантаження сторінок
Величезна кількість контенту, що постійно оновлюється, не має негативно впливати на продуктивність сайту — і користувачі не чекатимуть, і Google не пробачить. Аби прискорити час завантаження, ми встановили на сайт:
- ShortPixel Image Optimizer — плагін для оптимізації зображень у фоновому режимі,
- WP Rocket — плагін для кешування сторінок, браузера та решти дієвих методів оптимізації.
Зрештою продуктивність сайту за оцінкою Google PageSpeed Insights значно покращилась:
Перенесення двомовного контенту
Ми перенесли весь вміст двома мовами з першої для сайту CMS Webflow на WordPress. За інструмент нам слугував плагін WP All Export: ми налаштували шаблони експорту даних у форматі XML / CSV і поступово, по одному типу публікації, перенесли весь контент:
Результат
WordPress, буквально створений для промосайтів і блогів, гідно замінив собою CMS Webflow. За допомогою плагінів ми відтворили дизайн, реалізували зручний функціонал і кастомізували адмін-панель під потреби продуктової компанії xTiles. Тепер масштабована та гнучка платформа забезпечує бездоганний користувальницький досвід і зручне управління сайтом двома мовами. В майбутньому компанія матиме більше свободи та можливостей для безболісного розширення структури та функціоналу промосайту.
Комментарии