Конструктор Bricks наступає на п’яти Elementor. Огляд Bricks 2023

Русский

Bricks – це візуальний конструктор веб-сайтів на WordPress, який допомагає створювати професійні сайти без необхідності знати програмування.

Bricks – об'єднав у собі готову тему WordPress і плагін конструктора. Цим він відрізняється від інших конструкторів, які вимагають попередньо встановленої теми.

Сайт Bricks

Можливості Bricks

Дизайн з нуля

На мій погляд, Bricks як інструмент для веб-розробки ідеально підходить для тих випадків, коли ви створюєте дизайн сайту з нуля. Наприклад, на основі макета Figma і буквально збираєте сайт по частинах, окремо створюючи шапку сайту, футер і всі сторінки. При цьому, поєднати Bricks і будь-яку іншу готову тему WordPress не вийде.

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

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

Динамічні сайти

У Bricks за замовчуванням є підтримка динамічних даних, що дає змогу використовувати його разом з іншими плагінами (CPT, ACF, Pods, Meta Box, Carbon Fields) для створення і виведення на сайті довільних типів записів і довільних полів. Крім популярних типів сайтів, на кшталт сайту-візитки або корпоративного сайту, ви зможете створити сайт нерухомості з оголошеннями, туристичний сайт, освітній сайт тощо. Звичайно, для розширення функціоналу особистого кабінету користувача ви повинні будете встановити додаткові плагіни.

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

Gutenberg

Дуже позитивним і сильним моментом є те, що Bricks підтримує і сумісний з редактором Gutenberg. Ви можете вставляти блоки Bricks всередині редактора Gutenberg і редагувати в них вміст, без втручання в дизайн. Присутня зворотня сумісність.

А де зберігати свій код?

А де зберігати свій код PHP, JS і CSS, якщо Bricks це готова тема?

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

А що щодо сумісності Bricks із плагіном WooCommerce?

Чи можна створити повноцінний інтернет-магазин на базі Bricks і WooCommerce? На сьогодні за допомогою Bricks можна створити простий, невибагливий за функціоналом інтернет-магазин. Bricks надає набір готових темплейтів для створення і налаштування сторінок магазину.

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

Ми спостерігаємо за розвитком проєкту і про всі важливі зміни будемо вас сповіщати.

Документація

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

Читайте:  Core Framework - CSS-фреймворк для проектування та розробки веб-сайтів на WordPress

Популярні плагіни для розширення можливостей Bricks

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

OxyProps – сучасний фреймворк CSS у вигляді плагіна WordPress для використання з Bricks і Oxygen Builder. Додає колекцію настроюваних властивостей CSS, фреймворк утилітарних класів, користувацькі компоненти і функції конструктора для швидкого доступу до властивостей. OxyProps дає змогу створювати узгоджений дизайн, використовувати світлі, темні та кольорові схеми, а також економити час під час розробки. Перейти на сайт

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

Доступні мови

Наразі Bricks доступний такими мовами: англійською, німецькою, португальською, іспанською, російською, японською, французькою, італійською, голландською, польською, болгарською, спрощеною китайською, традиційною китайською, румунською, малайзійською, шведською та хорватською.

Але я рекомендую ввімкнути і використовувати англійську мову. Тому що “Margin” – це коротко, зрозуміло і знайомо.

Огляд Bricks 2023

Учасники нашої WordPress-спільноти 10-03-2023 провели телеграм-конференцію, на якій розповіли про можливості Bricks, поділилися своїм практичним досвідом і дали поради веб-розробникам.

У це відео не ввійшла частина з розбором реальних кейсів (на прохання спікерів цю частину було представлено тільки на конференції, і до запису вона не увійшла).

Зміст:

00:00 Вступ.
00:52 Загальні налаштування Bricks.
12:13 Інтерфейс конструктора: панелі, віджети, брекпоїнти, темплейти і ін.
23:08 Приклад верстання сторінки.
1:22:30 Верстання шапки сайту та підтримка WooCommerce.
1:33:44 Сторінка Оформлення замовлення.
1:46:51 Плагіни для Bricks.
2:09:01 Bricks і Gutenberg – підтримка і поєднання при розробці сайту.
2:11:53 Поради новачкам.
2:17:45 Завершення.


Підпишіться на Youtube-канал InwebPress!

А чому в назві статті ви згадуєте конструктор Elementor?

Не секрет, що візуальний конструктор Elementor на сьогоднішній день є найпопулярнішим інструментом для створення та оформлення сайтів на WordPress. Його за замовчуванням інтегрують у безкоштовні та платні теми WordPress.

На маркетплейсі Envato більшість платних тем WordPress, напевно близько 80%, використовують як інструмент для оформлення зовнішнього вигляду конструктор Elementor. Elementor тримає впевнене лідерство серед конструкторів сторінок для WordPress. Але, нещодавно мені потрапила до рук одна вибірка щодо західних агентств, які займаються веб-розробкою. До статистики потрапило понад 600 компаній (не фрілансери, а саме компанії із середніми і високими чеками на ринку). Серед запитань було питання використання конструкторів. Проаналізувавши статистику, можна помітити певну тенденцію зниження популярності Elementor і підвищення інтересу до Gutenberg і Bricks.

Я не буду зараз аналізувати причини зміни трендів, але скажу тільки одне: тренди і мода на Заході через деякий час приходять до нас. Тому, якщо ви використовуєте тільки один інструмент, наприклад той самий Elementor, то я рекомендую вам починати сьогодні вивчати й інші конструктори (а краще копати ще глибше, вивчаючи PHP, CSS і JS). Ігноруючи тренди, ви можете опинитися поза ринком. Потім вам буде складніше наздогнати своїх конкурентів, які опанували різні інструменти і пропонують своїм клієнтам кращі можливості та умови.

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

Підписатися
Сповістити про
guest

0 комментариев
Найстаріші
Найновіше Найбільше голосів
Зворотній зв'язок в режимі реального часу
Переглянути всі коментарі