Page Builder Sandwich

Отримати PBS Pro

Блог

  • Як працює Page Builder Sandwich

    Як працює Page Builder SandwichУ цій статті буде наведено короткий огляд того, як працює Page Builder Sandwich, і вона призначена як вступ для тих, хто цікавиться тим, як наш конструктор сторінок інтегрується з різними елементами у WordPress. Я не буду заглиблюватися в окремі функції Page Builder Sandwich; якщо вони вас цікавлять, перейдіть на нашу сторінку відео, де ми демонструємо кожну функцію окремо за допомогою коротких скринкастів.

    Якщо ви хочете дізнатися, чим Page Builder Sandwich відрізняється від інших конструкторів сторінок, перегляньте нашу статтю Чим Page Builder Sandwich відрізняється від решти.

    Де знаходиться конструктор сторінок?

    Де він знаходиться? І що я можу з ним редагувати?

    На відміну від багатьох інших конструкторів сторінок, Page Builder Sandwich працює безпосередньо у фронтенді вашого сайту. Якщо ви перебуваєте в бекенді, ми додали кнопку «Frontend» поруч із кнопками редактора вмісту, яка перенесе вас до фронтенду вашої сторінки.

    Page Builder Sandwich дозволяє редагувати ваші записи, сторінки та вміст користувацьких типів записів. Проте він не дозволяє безпосередньо редагувати агреговані дописи блогу на головній сторінці та інші не поодинокі розділи вашого сайту. Сприймайте це так: якщо те, що ви хочете редагувати, має редактор вмісту в бекенді (наприклад, «Новий запис» і «Нова сторінка»), то можна використовувати Page Builder Sandwich. Ви можете редагувати окремі сторінки та дописи блогу, і якщо, наприклад, у вас є плагін, який додає меню ресторану або елементи портфоліо, їх ви також можете редагувати.

    У фронтенді ми розмістили синю кнопку «Редагувати за допомогою Page Builder Sandwich» на вашій панелі адміністрування. Просто натисніть її, щоб почати редагування сторінки.

    Пряме редагування вмісту

    Завдяки Page Builder Sandwich ми зробили редагування вмісту максимально простим і безболісним. Редагувати вміст легко й зрозуміло: просто натисніть і пишіть. Усе так просто.

    Інспектор

    Знайомтеся: інспектор

    Ми помітили, що багато конструкторів сторінок мають величезну кількість спливаючих вікон. Особисто я не люблю спливаючі вікна, оскільки вони відволікають і фактично говорять: «Гей, припини те, що робиш, поки не заповниш ці поля». Вони руйнують процес, який міг би бути плавним та зручним редагуванням. Через це ми звели до мінімуму використання спливаючих вікон усюди, і натомість створили інспектор.

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

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

    Інтеграція з темами WordPress

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

    Інтеграція зі шорткодами

    Шорткоди є важливим аспектом у WordPress, і, найімовірніше, ви будете використовувати кілька шорткодів на своєму сайті. Page Builder Sandwich чудово справляється з ними: ваші шорткоди відображатимуться у відрендереному вигляді у фронтенді. Шорткоди також залишаються доступними для редагування, і найкраще те, що після їхнього редагування вони знову відобразяться разом із вашими змінами.

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

    Жодної перевантаженості

    А як щодо перевантаженості сайту?

    Хто любить повільні сайти? Точно не ми й однозначно не ви. Ми подбали про те, щоб Page Builder Sandwich мав практично нульовий вплив на продуктивність вашого сайту. Для неавторизованих користувачів щонайменше підключаються лише стилі CSS для рядків і колонок, а також необхідні скрипти JS і CSS для використаних вами шорткодів.

    Для розробників

    Якщо ви розробник і маєте шорткоди у своїх плагінах WordPress, Page Builder Sandwich надає Shortcode API, щоб ви могли легко надати своїм клієнтам поля для простого створення та редагування ваших шорткодів.

    Якщо ви бажаєте ще більше розширити можливості або інтегруватися з окремими частинами Page Builder Sandwich, у нас також є низка корисних хуків дій і фільтрів, які ви можете використовувати.

  • Що таке конструктор сторінок і чому важливий фронтенд

    What-is-a-Page-Builder-and-Why-Front-End-MattersЯкщо ви затятий блогер, для якого створення контенту зводиться лише до написання повноцінних статей з рідкісними ілюстраціями, тоді стандартного редактора контенту TinyMCE цілком може вистачити для ваших потреб. Поточний набір інструментів уже містить усе необхідне для написання статей: у вас є базове форматування тексту, таке як жирний шрифт, курсив, заголовки тощо. Але цим усе й обмежується.

    Жодних зручних можливостей для верстки

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

    Дехто намагався обійти цю проблему за допомогою шорткодів WordPress. Якщо коротко, шорткоди дозволяють вставляти фрагменти коду за допомогою спеціальних тегів. Існують плагіни WordPress, які додають різні шорткоди для створення контенту в кілька колонок. Наприклад, ви можете обернути свій контент у теги колонок, якщо хочете розмістити його у дві колонки. Хоча цей метод і «працює», він зовсім не зручний візуально, оскільки згодом, у міру додавання контенту, все перетворюється на суцільний безлад.

    Саме для того, щоб заповнити цю прогалину у верстці, і були створені конструктори сторінок (page builders).

    Page building blocks

    Конструктори сторінок спрощують створення структурованого контенту

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

    Окрім верстки, конструктори сторінок також спрощують створення та розміщення шорткодів. Раніше ви бачили шорткоди у всій їхній «сирій» красі: квадратні дужки з купою атрибутів та значень, змішаних із текстом. Конструктори зазвичай пропонують генератори шорткодів — спливаючі вікна, які роблять вибір параметрів набагато зручнішим, ніж ручне введення коду.

    Майбутнє — за фронтенд-конструкторами сторінок

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

    Щоб вирішити цю проблему, конструктори сторінок мають бути перенесені на фронтенд. Якщо редагувати сторінку безпосередньо на ній, це позбавить вас потреби вгадувати результат верстки, оскільки ви відразу бачитимете все на власні очі.

    Наразі існує безліч бекенд-конструкторів сторінок і лише невелика кількість фронтенд-рішень. Серед цієї жменьки — Page Builder Sandwich. Якщо ви хочете дізнатися більше про те, що робить Page Builder Sandwich унікальним і чому він підійде саме вам, прочитайте статтю How Page Builder Sandwich Is Different from the Rest.

  • Ексклюзивне промо Cloudways для користувачів PBS!

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

    Гарна новина полягає в тому, що ми об’єднали зусилля з Cloudways, щоб створити ексклюзивну акцію для шанувальників Page Builder Sandwich, які хочуть спробувати Cloudways, або як приємний бонус для наявних користувачів Cloudways! Просто введіть код Просто введіть код:

    CWPBS15

    ..щоб отримати $15 знижки під час оновлення вашого облікового запису Cloudways. Ця пропозиція також надає вам сервер 1GB DigitalOcean на Cloudways на 1 місяць. Це чудова пропозиція для тих, хто хоче змінити хостинг-провайдера або створити нові вебсайти чи вебдодатки.

    Сподіваємося, вам сподобається ця акція так само, як нам сподобалося працювати з Cloudways!

  • Page Builder Sandwich 2017: підсумки року

    У 2017 році ми почали розширювати можливості Page Builder Sandwich. Цей рік став для нас величезним стрибком уперед, і ми надзвичайно щасливі.

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

    So without further ado, let’s look back at Page Builder Sandwich’s 2017. Here are our favorite updates and releases from this year.

    Parallax Scrolling

    Parallax Scrolling is a background effect that gives your page a a 3D layered look while you scroll.  We made adding this effect easy for our users- simply select the Parallax Scrolling option in your row’s background to add the parallax effect.

    Video Backgrounds

    Як і у випадку з паралакс-скролінгом, Page Builder Sandwich дозволяє додавати ефектні відеотла, просто копіюючи та вставляючи посилання на Vimeo чи YouTube, або завантажуючи відео вручну.

    Ken Burns Backgrounds

    Помічали, як архівні кадри показують у більшості документальних фільмів? Як на екрані з’являється зображення, плавно наближаючись? Це називається ефектом Кена Бернса. І так, Page Builder Sandwich випустив цю функцію також у 2017 році.

    Blank Page Template

    Хочете почати з чистого аркуша? Page Builder Sandwich подбає про це. У 2017 році ми також випустили шаблон Blank Page, який дозволяє створювати дизайн вашого сайту на абсолютно чистому полотні.

    Full Page Templates

    Page Builder Sandwich released its very first set of Page Templates in January 2017. Niche-based and professionally designed, these templates also allow for manual editing so you can customize them the way you’d like.

    Mobile Responsiveness

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

    All 800+ Google Fonts

    Ми надали вам можливість додати родзинку та гнучкість вашому сайту за допомогою понад 800 шрифтів Google Fonts.

    200% Performance Increase

    Bigger, better, faster. Page Builder Sandwich increased its performance by 200% in 2017.

    What’s in Store for 2018?

    Page Builder Sandwich завжди був по-справжньому зручним, інтуїтивно зрозумілим і справжнім visual front-end конструктором сторінок. Наше прагнення надати вам найкращий досвід створення вебсторінок росте в міру того, як ви ділитеся своїми потребами.

    На основі ваших ідей ми створили дещо краще для 2018 року!

    Frontly Builder is the next step in our evolution and we’re at the final stages of development!

    Leave us your email to get first dibs on updates!

    ’til relaunch

    Ми б не досягли таких успіхів без вашої підтримки, тож величезне-величезне спасибі всім, хто був поруч із нами цього 2017 року! Нехай у 2018 році буде створено ще більше дивовижних речей. До зустрічі!

    З найкращими побажаннями,
    Команда Page Builder Sandwich

  • Сторінки та плагіни: максимізація вашого досвіду роботи з WordPress

    pages-and-plugins-maximizing-your-wordpress-experience

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

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

    Правда полягає в тому, що вам не потрібно настільки глибоко розуміти внутрішні принципи роботи програмного забезпечення та коду, щоб почати створювати сайт або налаштувати його роботу так, як вам потрібно. «Як це можливо?» — запитаєте ви. Що ж, один із способів досягти цього полягає у створенні сторінок на сайті та додаванні плагінів.

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

    20160824_Una_PBS_Article_2

    Визначення: сторінки проти записів

    У світі WordPress термін «сторінка» майже завжди асоціюється з терміном «запис» (як у виразі «сторінки та записи»), і часом люди вважають їх взаємозамінними поняттями. Безперечно, їх легко сплутати (особливо якщо ви ще робите перші несміливі кроки як новачок у WordPress). Зважаючи на це, зауважте: хоча ці речі можуть здаватися тривіальними, завжди корисно розібратися в тонкощах WordPress, особливо якщо ви тільки починаєте.

    Простий спосіб відрізнити записи від сторінок полягає в тому, що записи — це окремі публікації, які ви створюєте на своєму сайті (наприклад, ця стаття, яку ви зараз читаєте, є записом). Такі публікації не є обов’язковими для вебсайтів, якщо тільки у вас немає активного блогу, як у нас. Проте вирішальним елементом вашого сайту є налаштування сторінок, чому й буде більшою мірою присвячена ця стаття.

    Сторінки — це будівельні блоки

    Якщо ви раніше користувалися комп’ютером (що, як ми припускаємо, цілком імовірно), швидше за все, ви вже бачили вебсторінки чи чули про них або принаймні маєте уявлення про те, що це таке. Якщо ж ні — не хвилюйтеся; дуже ймовірно, що ви вже натрапляли на сторінки під час відвідування інших сайтів: розділи поширених запитань (FAQ) та/або «Про нас», контактні форми та галереї зображень. Для початківців і щойно створених сайтів вони в певному сенсі схожі на будівельні блоки. Поєднані разом, вони складають основу того, про що ваш сайт і що він пропонує.

    Отже, розуміти ці базові відмінності — це чудово. Але в поєднанні з базовими знаннями про плагіни ви опинитеся в ідеальному становищі, щоб скористатися набутими знаннями про сторінки WordPress, навіть якщо ви новачок. Питання тепер полягає в тому, як саме.

    20160824_Una_PBS_Article_1

    Використання на повну: базові плагіни, які ви можете встановити

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

    1. Плагіни для SEO (пошукової оптимізації)

    Зробити так, щоб про ваш сайт дізналися, вже досить складно, а завдання поширити інформацію про нього — ще складніше. Повірте. Ось чому невелика допомога від SEO-плагінів має вирішальне значення для покращення позицій вашого сайту в пошуковій видачі.

    Тут, у Sandwich, ми використовуємо Yoast, який часто називають провідним SEO-плагіном на сучасному ринку. Проте існує безліч інших варіантів для SEO, і є багато сайтів, таких як SitePoint, де порівнюються різні SEO-плагіни, якщо ви бажаєте зважити всі варіанти.

    1. Плагіни резервного копіювання

    Резервне копіювання — це один із найважливіших заходів безпеки під час запуску вашого сайту; обережності ніколи не буває забагато. Зрештою, краще витратити кілька хвилин (або годин, залежно від вашого досвіду) на налаштування хорошого плагіна резервного копіювання, ніж витрачати цілу вічність на налаштування сайту заново, якщо ваші дані випадково будуть стерті.

    1. Плагіни безпеки

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

    1. Антиспам-плагіни

    Ніхто не любить спам, хіба що їстівний. Смакота.

    Утім, якщо не зважати на відомі консерви, існує чимало шляхів, якими небажаний спам може проникнути на ваш сайт WordPress. За даними WPExplorer, хоча й можливо вручну налаштувати WordPress для захисту від спаму, ви також можете обрати швидше рішення: встановити на сайт антиспам-плагін.

    1. Кешування

    Встановлення плагіна кешування — це перевірений спосіб прискорити роботу вашого сайту та сервера. Ми вже деякий час використовуємо WP Fastest Cache, але є й безліч інших надійних плагінів кешування з високим рейтингом — таких як W3 Total Cache — які ви також можете спробувати.

    Ви можете дізнатися більше про кешування на сайті WordPress Codex.

    ЦІКАВИЙ ФАКТ: Слово «Cache» англійською вимовляється як ˈkash, а не kashè

    Додаткові плагіни для ваших сторінок

    1. Плагін контактної форми

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

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

    2. Плагін соціальних мереж

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

    3. Інструменти коментування / Disqus

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

    Disqus — це дуже популярний інструмент для коментування і один із найвідоміших на ринку. Kikolani також пропонує дуже зручну статтю, яка допоможе вам визначитися, який інструмент для коментарів підійде вашому сайту найкраще.

    Плагінів більше, ніж ви думаєте

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

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

    Успіхів у створенні сайту!

  • Дуже скоро ми випустимо щось масштабне.

    In a few short months, we’ll be relaunching as Frontly Builder.

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

    Від Page Builder Sandwich до Frontly Builder

    Before the idea of Sandwich, we noticed a little pattern with page builders everywhere: A lot of them were difficult to use.

    For example, some of these builders would have you go through numerous pop-ups and other settings if you want to add something as simple as an image, a row, a button.

    And if you wanted to change a column’s settings, clicking on the edit button takes you to yet another pop-up that requires you to input settings like size and margins through dropdown options that aren’t very flexible.

    It was frustrating because we knew that page builders should exist to make things easier for users, not the other way around.

    Other wordpress page builders
    Other WordPress Page Builders

    This is how we came up with Page Builder Sandwich.

    We wanted to introduce a builder that was going to maximize users’ experience when creating webpages, allowing them to create awesome things the fast and easy way.

    We received lots of great feedback that allowed Sandwich to evolve. And the more our audience grew, the more suggestions we received on how we could further improve the plugin.

    We were in a state of constant development, and we loved it.

    Page Builder Sandwich has true front-end power, and so will Frontly Builder.

    Переосмислення того, що означає працювати на СПРАВЖНЬОМУ Frontend

    Еволюція Sandwich була безперервною.

    Apart from the feedback (both negative— things we could work on; and positive ones— which we knew we had to retain), Sandwich’s capacity to grow increased, too. We kept finding more and more ideas and solutions to further improve PBS.

    And the more wants and needs from PBS arose, the more our code’s main foundation got tweaked.

    Уявіть справжній сендвіч із усіма вашими улюбленими начинками.

    Звісно, він був би неймовірно смачним, але як він поміститься у вашому роті? Як він виконає своє головне призначення — бути з’їденим?

    This is kind of what happened with PBS. We realized that so much more could be done with it with an even more efficient, stronger foundation. That we could take it further.

    Як ми вже згадували, Page Builder Sandwich постійно розвивається.

    Frontly is the next step to that evolution.

    You’ll still get an awesome support team, theme and plugin compatibility, and more.

    LIKE US ON FACEBOOK to see the logo!

    Це не прощання з Page Builder Sandwich.

    It’s a hello to Frontly.

    So what makes Frontly different from Page Builder Sandwich?

    We’ve been working really hard to maximize Frontly’s development. The goal now is to make it an insanely better version of PBS — to embody what it means to operate on true front-end.

    Right now, we’re focusing on further improving Frontly’s UX and UI. We’ve worked on giving it a smoother look, a more user-friendly experience, and features that’ll let you build professional-looking websites in even less effort and less time.

    Questions on Frontly?

    We have a short FAQ post you can check out. Add a comment below so we can add your questions to our list!

    Реліз вже зовсім скоро.

    While we’re crazy excited to show you guys what we’ve come up with, we wanna make sure everything is just right for you. So leave us your email to get first dibs on updates, tips and trick, and big promos on the release date.

    We are relaunching as Frontly Builder.

    Leave your email so you don’t miss out.

     

  • #PBSUpdate: повносторінкові нішеві шаблони

    PBS Version 4.0 has been our biggest update yet, and with its release, we’ve included a new game-changing feature, the Full Page, Niche-Based Templates.

    The Full Page Templates are a set of 10 professionally designed, niche-based templates. They’re ready to use upon downloading PBS, and can be used as is, or may be tweaked to fit your taste.

    Use as a Starting Point for Your Page

    Використання шаблонів — один із найефективніших способів створення вебсторінок. Їх зазвичай пропонують як швидке вирішення проблем, пов’язаних із дизайном та макетом сайту, надаючи користувачеві на вибір кілька варіантів (зазвичай різної тематики). З оновленням версії 4.0 Page Builder Sandwich нарешті випустив власний набір шаблонів.

    A screenshot of one of our templates, the PBS Farm Template

    The Benefits

    Повносторінкові шаблони PBS розроблені для того, щоб позбавити вас від необхідності створювати вебсторінку з нуля. Кожен шаблон створений для певної ніші й містить елементи, які підходять для конкретної галузі. Наприклад, шаблон «Готель» включає такі функції, як Google Карта, контактна форма та розділи, призначені для демонстрації зручностей вашого готелю. Шаблон «Мода», з іншого боку, містить карусель, де ви можете показати свої останні товари із зазначенням цін під ними.

    Tweak, Tweak, Tweak

    Оскільки шаблони вже попередньо оформлені, вони також полегшують процес створення сторінок, заощаджуючи час і ресурси. Але якщо обраний вами шаблон не містить потрібної функції (наприклад, якщо ви хочете фонове відео для головного банера в шаблоні «Промисловість»), не варто хвилюватися. Ви можете просто налаштувати дизайн шаблону відповідно до власного смаку та потреб, змінюючи властивості елементів безпосередньо в PBS.

    A section of the PBS Farm Template with tweaked colors and different photo that may cater to a different niche

    The 10 templates we currently have available (we’ll be releasing more soon!) are themed according to the following common niches and industries:

    1. Hotel Template

    • For hotels, spas, or similar business.
    • Includes video background hero header, carousel testimonials, contact form, Google Map, and more.

    2. Law/Corporate Template

    • For law firms and other corporate businesses.
    • Includes about us section, carousel testimonials, meet the team section, and more.

    3. Fashion Template

    • Use for online clothing stores and other e-commerce sites. Includes featured products carousel, call–to–action buttons, latest blogpost previews, and more.
    • Includes featured products carousel, call–to–action buttons, latest blogpost previews, and more.

    4. Farm Template

    • Ideal for subscription e–commerce sites.
    • Includes promo header, call–to–action buttons, subscription plan sections, and more.

    5. Restaurant Template

    • Perfect for restaurants and other delivery service businesses.
    • Includes hero header with space for delivery numbers, menu section, business hours section, and more.

    6. Concert Template

    • Ideal for concerts and other big events or gatherings.
    • Includes countdown, video background, affiliates section, prices section, subscription button, and more.

    7. Forum Template

    • Use for communities, small organizations, and more.Includes call-to-action buttons, about section, count up, meet the team section, and more.
    • Includes call-to-action buttons, about section, count up, meet the team section, and more.

    8. Portfolio Template

    • For photography or art portfolios, and more.
    • Includes iconified skillset section, gallery, social media buttons, and more.

    9. Industrial Template

    • Use for industrial or manufacturing businesses, and more.
    • Includes hero header with video background, about us/featured product sections, carousel testimonials, and more.

    10. Wedding Template

    • Perfect for weddings and other small intimate events.
    • Includes hero header with video background, photo gallery, RSVP section, Google Map, and more.

    Some samples of PBS’ Full Page Templates: the Law, Forum, and Hotel Templates

    The Future of Full Page Templates

    Хоча зараз у нас є 10 шаблонів, ми працюємо над створенням нових. Ми, звісно, прагнемо охопити всі поширені ніші та галузі, але якщо у вас є якісь пропозиції, сміливо напишіть нам.

    Успіхів у створенні сайтів!

  • Версія 3.0: переосмислення того, як має працювати конструктор сторінок

    version-3-0-rethinking-how-a-page-builder-should-workМинуло 10 місяців відтоді, як ми представили Page Builder Sandwich громадськості. Зараз у нас близько 6 000 активних встановлень, і для нас це чимале досягнення. Ми також отримали купу відгуків завдяки цьому — як позитивних, так і негативних. Проте всі сходяться на тому, що людям подобається, наскільки легко створювати макети та контент порівняно з іншими конструкторами сторінок на ринку.

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

    Застарілий інтерфейс

    У попередніх версіях PBS ми хотіли, щоб усе було у формі кнопок. Чому? Тому що кнопками легко користуватися. Ви просто… натискаєте на них. У старіших версіях інспектора (бічна панель на зображенні вище) натискання кнопки збільшувало значення, а натискання Shift + клік зменшувало його. Звучить досить просто. Але з додаванням каруселей, вкладок, карт та інших нових елементів і функцій усі ці кнопки перетворилися на мішанину різних іконок із різним дизайном і почали скидатися радше на ієрогліфи, ніж на класний інтерфейс. Для досвідчених користувачів це не було проблемою, але виглядає досить лячно, якщо ви новачок у PBS.

    Далі з’явилося кілька проблем в інспекторі. Початкова ідея полягала в тому, щоб зробити все простим і доступним всередині інспектора. І під усім я мав на увазі абсолютно все — від перетворення тексту на заголовки до зміни кольорів фону, кольорів шрифту тощо. Однак у своєму поточному стані інспектор тепер містить багато опцій, через які вам доводиться постійно прокручувати коліщатко миші вгору та вниз. Зовсім не схоже на той інспектор, який я колись сподівався створити для користувачів.

    Зрештою, нещодавно ми представили мапінг шорткодів для ваших улюблених плагінів. Ця функція вимагала від нас створення текстових полів, повзунків чисел, чекбоксів та додаткових нових типів опцій, необхідних для того, щоб зробити редагування шорткодів приємнішим. Спочатку це була чудова ідея, і так, вона спростила роботу з шорткодами. Але знову ж таки, ця функція відхилилася від нашого інтерфейсу «тільки кнопки». Оглядаючись назад, було дійсно неможливо використовувати лише кнопки для зміни атрибутів шорткодів. Тепер в останній версії ми отримали 2 типи елементів керування: кнопки та поля шорткодів.

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

    Визначення того, як в ідеалі має працювати конструктор сторінок

    Замість того, щоб кинутися змінювати все одразу, ми зробили сотню кроків назад, аби поглянути на весь процес роботи з конструктором сторінок загалом. Ми хотіли вдихнути нове життя в інтерфейс. Чесно кажучи, ми не хотіли продовжувати перебудовувати його рік за роком. Це виснажливо і точно не приносить значної користі спільноті WordPress. Цього разу ми вирішили діяти повільно й обережно. Ми вивчили кожен куточок Page Builder Sandwich і те, що робить його хорошим конструктором сторінок, та зрештою сформулювали весь досвід редагування у кількох ключових концепціях.

    Ключова концепція №1: пряме введення тексту в контент для його редагування

    Одна з головних причин встановлення конструктора сторінок — вийти за межі обмежень бекенд-редактора WordPress. Справа не в тому, що бекенд-редактор поганий, але під час створення вебсторінок він не показує відразу, як саме ваша сторінка виглядатиме для відвідувачів сайту, а також не дозволяє розміщувати контент за межами одноколонкового макета. Там можна побачити лише текст і деякі зображення, але нічого складнішого (наприклад, контактних форм). Ви можете додавати шорткоди, так, але вони не відображатимуться у своєму відрендереному вигляді*.

    * Для вирішення цієї проблеми інші розробники створюють плагіни, такі як Shortcake UI, але це вже інша річ.

    Ось де стають у пригоді фронтенд-конструктори сторінок. Вони переносять процес редагування з бекенду на фронтенд, завдяки чому ви редагуєте свій сайт саме так, як його справді бачитимуть ваші відвідувачі. Як висловився б Піппін: що бачиш, те й отримуєш (WYSIWYG).

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

    Це та сфера, де більшість інших конструкторів сторінок не справляються належним чином. Більшість із них змушують вас друкувати всередині текстового поля, щоб відредагувати будь-що. Знову ж таки, у справжніх фронтенд-конструкторах сторінок такого бути не повинно. Безпосереднє введення та редагування тексту було сильною стороною Page Builder Sandwich починаючи з версії 2, і ми подбали про те, щоб це збереглося й у версії 3.

    Ключова концепція №2: використання миші для швидких налаштувань

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

    По-перше, використання миші як інструмента редагування сторінки дає чудовий візуальний відгук, особливо під час налаштування візуальних властивостей, таких як зовнішні відступи (margins), внутрішні відступи (paddings) і розміри. Тепер точне налаштування елементів стає природним процесом.

    У версії PBS 3 ви зможете налаштовувати цілу низку параметрів за допомогою миші. Ви можете коригувати відступи/проміжки між окремими елементами, внутрішні відступи у ваших колонках, а також розміри зображень, іконок та карт. Ми також замінили повзунками кнопки, які дозволяли змінювати числові значення.

    Ключова концепція №3: стилізувати текст має бути легко

    Якщо відсторонитися на крок від монітора, ви помітите, що більшість того, що ви додаєте на свої вебсторінки, — це текстовий вміст. Так, ми маємо там зображення та іконки для його супроводу, а останнім часом ми схильні додавати на наші сайти більші зображення. Але більшість важливого вмісту — це суцільний текст: заголовки, марковані списки, абзаци, цитати тощо. Поряд із цим важливим є те, як ми стилізуємо наш текст відповідно до дизайну. Ми змінюємо розміри та кольори або робимо його жирним чи курсивним. Це робиться для того, щоб зробити наш контент більш читабельним, релевантним і привабливим для наших читачів.

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

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

    Ключова концепція №4: розширені параметри стилізації мають бути гнучкими, але простими для розуміння

    Головна суть конструктора сторінок полягає в тому, що він повинен дозволяти людям створювати приголомшливий дизайн легко. Це означає, що ми повинні надати безліч різноманітних налаштувань та опцій без ускладнення процесу навчання. Можливість налаштовувати відступи та стилізувати текст — це чудово, але цього недостатньо. Вам знадобляться набагато складніші опції для досягнення результату: такі як фонові зображення, візерунки, рамки, фіксований фон тощо. Нагромадження всіх цих різних параметрів може трохи приголомшити, тому ми спростили деякі з них і впорядкували їх за категоріями, щоб зробити роботу у версії 3 зручнішою.

    Ключова концепція №5: підтримка шорткодів

    Зрештою, не забуваймо, що наш конструктор сторінок базується на платформі WordPress. Ми повинні приймати платформу та її можливості, а не обмежувати їх чи відхилятися від них. Однією з найважливіших функцій, які надає WordPress, є шорткоди. Це не означає, що весь контент має складатися з шорткодів — це було б безладно — але натомість ми просто маємо бути сумісними з ними. Багато плагінів і тем використовують шорткоди, і було б великою втратою ігнорувати їх усі. Насправді шорткоди дають користувачам максимальну гнучкість при створенні сторінок.

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

    Висновки

    Ми взяли всі перелічені вище ключові властивості та втілили їх у Page Builder Sandwich версії 3. Це найкращий конструктор сторінок, який ми коли-небудь створювали для WordPress. Він інтуїтивніший та природніший у використанні, працює швидше, він простіший у користуванні та дружніший, ніж будь-коли.

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

  • Як додати ефект паралакса, відеофон та ефект Кена Бернса

    Page Builder Sandwich має функцію, яку ми всі любимо називати Fancy Background Effects. Їх усього три: ефект паралакса, відеофони та ефект Кена Бернса.

    What are the different Fancy Background Effects?

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

    Ефект паралакса

    Застосування ефекту паралакса на сторінці додає фону відчуття глибини, дозволяючи окремим елементам вашого сайту «виринати» під час прокручування. Ось приклад сторінки із застосованим фоном паралакса та без нього.

    With Parallax Scrolling

    The background image scrolls at a different rate as the rest of the elements in the page.

    Without Parallax Scrolling

    The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

    Video Backgrounds

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

    Кілька зразків відеофонів, які ви можете переглянути:

    The Ken Burns Effect

    Ken Burns, who popularized the Ken Burns effect in film.

    In documentaries, do you ever notice when they show photos that slowly zoom into detail? That’s called the Ken Burns Effect. You can access these effects on Page Builder Sandwich, too.

    How do I add the Fancy Background Effects?

    Ви можете знайти всі Fancy Background Effects, виконавши такі кроки:

    Step 1: Choose a row you’d like to add an effect on. Click on this row’s settings button (the gear icon on the left). This will open the Properties Inspector.

    Step 2: Once the Properties Inspector pops up, scroll down a bit until you find the option called “Fancy Background Effects”.

    Step 3: Once you’ve found it, you’ll see that you can click a dropdown button and select which background effect you’d like on your row.

    Step 4: Depending on which Fancy Background Effect you choose, you can adjust each effect’s settings. For example, for the Parallax effect, you can adjust its height and position.

    І все готово! Після цього ви маєте побачити, як ваші Fancy Background Effects на повну силу запрацювали на сайті.

    Have you used PBS’ Fancy Backgrounds yet?

    Чи є якісь інші фонові ефекти, які ви хотіли б запропонувати нам додати до можливостей? Або покажіть нам свій створений у PBS сайт з одним із цих ефектів! Поділіться з нами в розділі коментарів нижче!

  • Frontly Builder: Поширені запитання

    A few months ago, we announced the launch Frontly Builder, a bigger, better front-end page builder with increased performance and awesome new stuff. Think of it as a new and improved version of Page Builder Sandwich.

    Він все ще в розробці, але з’явиться зовсім скоро. А поки що ми впевнені, що у вас є кілька запитань щодо Frontly. Тож ось короткий FAQ для всіх!

    What will happen to my PBS-run site?/Will I lose everything I’ve built using PBS?/Will the Frontly update destroy my website?

    • No, definitely not! Everything you’ve made using Page Builder Sandwich will remain intact, and nothing will change.

    I purchased Page Builder Sandwich before the Frontly release. What do I do?

    • The only thing you have to do is… nothing. For current PBS users, Frontly will be released as an “update”. You’ll just be upgraded to a “better” version of PBS- Frontly.

    Will I have to repurchase Frontly?

    • No. If you’ve purchased PBS before the Frontly release, you don’t need to purchase anything. As mentioned, everything will be released as an “update” for old users, so you won’t have to lift a finger or shell anything out- we’ve sorted everything out for you guys. ?

    Наразі це все! Якщо у вас виникнуть додаткові запитання, залиште нам коментар нижче, щоб ми могли доповнити цей список поширених запитань.

    Сподіваємося, ви в захваті від Frontly так само, як і ми! До зустрічі там. ?

    Залиште свою електронну адресу, щоб першими дізнаватися про оновлення!