The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.
Визначення паралакс-скролінгу
Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.
Without Parallax Scrolling
The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.
With Parallax Scrolling
The background image scrolls at a different rate as the rest of the elements in the page.
Вплив паралакс-скролінгу на користувача
Утім, ця техніка далеко не нова: її використовували в традиційній анімації ще у 1920-х роках. Її також застосовували в багатьох класичних відеоіграх, таких як Super Mario Brothers.
Проте у сфері вебдизайну компанію Nike часто вважають однією з перших, хто застосував паралакс-скролінг у 2011 році. Відтоді термін «паралакс-скролінг» (іноді його називають «паралакс-фон/и») став звичним поняттям як серед дизайнерів, так і серед розробників, і його популярність невпинно зростає.
Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move in slightly varying speeds, as compared to Mario and the other characters in the foreground.
Що це дає користувачеві
Чудова особливість цього ефекту полягає в тому, що він спонукає користувачів взаємодіяти з вашим сайтом, посилюючи як залучення, так і привабливість. І, якщо все зроблено правильно, паралакс-скролінг здатний оживити навіть найпростіший вебсайт. Його можна використовувати навіть для створення приголомшливих історій, які миттєво захоплюють увагу відвідувачів сайту.
Поділіться своєю роботою з нами!
Тож що ви думаєте? Чи ви вже спробували нову функцію паралакс-фону з PBS v4? Чи працює вона на вашу користь? Діліться посиланнями на свої роботи або залишайте пропозиції в коментарях нижче.
In other words, if they don’t like what they see within that timeframe, chances are they’re going to close their browser windows and direct their attention elsewhere.
Fortunately, there are a lot of ways to prevent this from happening; one of them is to familiarize yourself with good web design practices. And the good news is you don’t need to be a professional web designer in order to do so.
Because while it’s true that not everyone has a good eye for design, preventing bad design becomes easier once you know what to avoid.
Зважаючи на це, обов’язково пам’ятайте про ці 4 поширені помилки вебдизайну. Так у вас буде на одну турботу менше, коли ви нарешті почнете створювати свій сайт.
Помилка №1: Використання понад 3 шрифтів
A rule of thumb when designing websites? Try not to have too much visual elements going on within your space. Having more than 3 fonts on your site design is a surefire way to break this one rule. It’ll also overwhelm your site visitors.
Don’t use more than 3 fonts and try to avoid “fancy fonts” as much as possible. These tend to make your site look unprofessional and outdated.
DO THIS:
Use only 2 fonts, or a maximum of 3 if you have to. Notice how the page below looks clean and sleek, all while keeping readability and consistency all throughout the design.
Try comparing the differences between this example and the previous one. The example below with only two fonts is a website that your visitors will likely take seriously. This previous one above with the overwhelming amount of fonts isn’t.
Put simply, white space is literally the emptyspacebetween elements in a composition.
In other words, it’s negative space.This pertains toanything on your website that isn’t filled with text, photos, or other design elements.
Now, the problem arises when website owners want to fillall of the white space in, which is an absolute no-no.
White space matters because it gives your site visitors and readers some breathing space when going through your site. Just how it was mentioned in the first design mistake to avoid, overwhelming your website with too much design elements is more than enough reason for your site visitors to leave and for your traffic to decrease significantly. It also makes for poorly executed design.
DON’T DO THIS:
In the example below, take a look at how the text is nearing the edges of the purple section’s margin. Notice as well how all elements leave almost zero room for white space.
DO THIS INSTEAD:
Give your site readers some room to breathe. If adding in long paragraphs is unavoidable, just remember to always take the rules of spacing into account—they’re pretty easy to remember anyway ?. It will leave your page looking cool, crisp, and professional.
Mistake #3: Designing Websites With Zero Flow in Your Site’s Content
It’s important to pay attention as to how information on your website is presented. Moreover, site content should generally follow a logical flow, taking the site viewer’s intuition into consideration.
Перегляньте два наведені нижче приклади, щоб зрозуміти, що ми маємо на увазі.
DON’T DO THIS:
Unless you’re a graphic designer by profession, it’s probably not a good idea to experiment with the standard flow of your website’s sections.
Below, you can see that the site’s design lacks both visual and logical flow; everything is all over the place. You don’t want your audience having a hard time navigating through your site, either. This is another surefire way to do it.
DO THIS INSTEAD:
Notice how the sections of the website flow depending on what actions the visitor is most likely to take.
Дизайн є інтуїтивно зрозумілим і має логічну структуру: по-перше, організація представляється та знайомить аудиторію з основами: чим вона займається та яка її мета. По-друге, вона додає достовірні цифри для формування довіри. Насамкінець сайт надає аудиторії свої контактні номери та список подій, спонукаючи її до дій.
Mistake #4: Trying to Fit in Every Bit of Information Onto Your Website
Додавання суцільних стін непотрібного тексту там, де має бути вільний простір, може відлякати вашу аудиторію. Не забувайте залишати лише важливі деталі.
Studies find that readers only visit 20% of your webpage; everyone else outside that percentage will probably just scroll through your site.
DON’T DO THIS.
Don’t overwhelm your visitors with inconsistent, giant walls of text,especially if it means having to sacrifice your website design’s cohesiveness and structure.
DO THIS INSTEAD:
Keep your copy short and concise, and take out chunks of unecessary text if you can help it. Only keep vital information that your site visitorsabsolutely need to know.
Conclusion
Website design is important, and can be a huge deciding factor in whether or not you gain site traffic.
Пам’ятайте, що не варто сприймати це як належне. Завжди виділяйте час на дослідження та переглядайте статті з дизайну, які допоможуть вам на цьому шляху. І не встигнете озирнутися, як трафік вашого сайту піде вгору. ? Успіхів!
Design in less time!
Check out how much faster Page Builder Sandwich let you design your web pages.
CANVA has hundreds of resources that you can access on their website. Apart from useful and easy-to-follow design tips, they also have photo editing tools, graphs, and a wide range of useful resources you can use for your creative projects.
Ознайомтеся з цим чудовим посібником із кольорів від Canva для вашого наступного дизайнерського проєкту.
Так, саме так: Page Builder Sandwich святкує свій найперший день народження 14 січня 2017 року. Разом із нашим поточним Святковим розпродажем (знижка 30% на обмежений час, промокод не потрібен), PBS підготував для вас кілька сюрпризів, і команда не може дочекатися, щоб поділитися ними з усіма.
За минулий рік ми значно виросли завдяки підтримці чудових друзів, дуже корисним оглядам та нашим новонабутим друзям у спільноті PBS у Slack. Ми не могли забути й про вас — самих користувачів PBS, які допомогли нам досягти цієї віхи. Тож щоб відсвяткувати, ми подумали: що може бути кращим способом подарувати вам ще більше приємних вражень, ніж випуск PBS версії 4.0? Час запускати конфеті.
Якщо ви пропустили, поточна версія, Версія 3.0, зазнала значних змін і вдосконалень. Серед них чистіший, плавніший та зручніший інтерфейс, а також краща адаптивність. Проте у версії 4.0 ми додамо ще крутіші речі! Тож готуйтеся, адже з майбутнім січневим релізом усе стане набагато веселішим, святковішим і функціональнішим.
Функція повносторінкових шаблонів
Першими в нашому списку головних функцій є абсолютно нові повносторінковішаблони. Хоча PBS зазвичай використовується для створення найрізноманітніших сторінок, ми взяли до уваги, що наші користувачі працюють у різних нішах (і, відповідно, з різними типами вебсайтів). Зрештою, у різних користувачів різні потреби, чи то для бізнесу, чи для особистих проєктів. Ось чому ми вирішили відповісти на цей запит майбутньою функцією повносторінкових шаблонів.
Як же працюють ці повносторінкові шаблони? Усе просто. Для версії 4.0 ми випустимо цілу низку чудових шаблонів. Їх буде поділено на різні категорії, кожна з яких створена під конкретну нішу. Шаблони міститимуть елементи, макети та функції для корпоративних сторінок, портфоліо, сайтів електронної комерції або просто звичайних особистих блогів (серед іншого), щоб ідеально підійти для будь-якого потрібного вам сайту.
Наприклад, якщо ви керуєте рестораном і вам потрібна сторінка або вебсайт, адаптований під такий вид бізнесу, ви можете просто вибрати ресторанний шаблон. А оскільки PBS забезпечує гнучке налаштування, ви все одно зможете стилізувати його досхочу. І оскільки вибраний вами шаблон (у цьому випадку для ресторану) постачатиметься зі спеціальними функціями, розробленими саме для сайту ресторанного бізнесу, він також матиме елементи PBS, що задовольняють потреби такого типу сайтів: наприклад, цілий розділ для меню, функцію доставки, кнопки соціальних мереж і багато іншого. А тепер уявіть щось подібне для вашої конкретної ніші: якщо ви керуєте корпоративним офісом, власним бізнесом або навіть просто маєте портфоліо — не хвилюйтеся. У версії 4.0 ми випустимо шаблони і для них. Без сумніву, вони стануть вам у пригоді під час створення наступного сайту!
Більше елементів, більше можливостей
Разом із новими повносторінковими шаблонами ми готуємо й купу інших речей! Як ми завжди кажемо, PBS існує тому, що ми віримо: створення дивовижних, приголомшливих речей не має бути таким складним, як заведено вважати. З огляду на це, ми закликаємо вас поглянути на інші наші майбутні функції, щоб ви могли на власні очі переконатися, які акуратні й чудові сторінки та сайти ви зможете створювати за допомогою PBS!
Паралакс-фони
Паралакс-прокручування — це техніка, яка використовується для створення унікального 3D-ефекту фону у вашому браузері. Це чудовий спосіб привернути увагу на будь-якому вебсайті, і за правильного використання він безперечно може збільшити вашу аудиторію. Усе ще не впевнені? Перегляньте цей крутий вебсайт FireWatch, де ефект паралакса реалізовано досконало.
Відеофони
Відеофони — це також популярний ефект, що використовується на вебсайтах, зокрема на головних сторінках, цільових сторінках та головних банерах. Вони мають не менш приголомшливий вигляд, і недарма користуються шаленою популярністю, повірте! А з останнім оновленням PBS ви також отримаєте можливість випробувати відеофони. Сміливо використовуйте їх, щоб зацікавити аудиторію та отримати більше відвідувань сайту!
Зворотний відлік дати
Для версії 4.0 ми також випустимо абсолютно новий зворотний відлік дати. Він міститиме базові функції, такі як встановлення точної дати й часу, до яких ведеться відлік, а також незмінно гнучкі параметри налаштування, які вам точно сподобаються.
Іконки соціальних мереж
Хочете заохотити свою аудиторію поширювати інформацію про ваші публікації в соціальних мережах? Не хвилюйтеся, адже PBS підтримає вас! Завдяки новим іконкам соцмереж читачі зможуть ділитися вашим вебсайтом і контентом простим натисканням кнопки.
Проте ми приготували для вас ще більше! Зокрема:
Можливість додавати публікації до вашого контенту
Індикатори прогресу
Лічильники чисел
Елементи для WooCommerce, Advanced Custom Fields (ACF), Contact Form 7
Відгуки
Таблиці цін
Заклик до дії (Click to action)
Блоки зображень
Блоки іконок
Безкоштовний пошук і завантаження зображень
Можливість додавати власний CSS
…і багато іншого!
Адаптивність
І нарешті, на додаток до всіх цих чудових нових функцій, PBS пишатиметься ще кращою адаптивністю.
Раніше перегляд і редагування сторінки PBS на мобільних пристроях не були легкою прогулянкою: розміри шрифтів не збігалися, зображення не відповідали пропорціям — загалом ми знали, що нам потрібно попрацювати над мобільним інтерфейсом PBS, і саме це ми й зробили. Ми попрацювали над цією конкретною функцією та налаштували її так, щоб вона не лише мала кращий вигляд з точки зору інтерфейсу, але й працювала плавніше та зручніше. Тепер ви зможете переглядати та редагувати свій сайт на мобільному без зайвого клопоту. Ваші очі точно подякують вам, і ваша аудиторія — теж.
Плавніше, краще, ще крутіше.
На завершення, ми щиро вдячні за всю вашу підтримку та лояльність до PBS, і сподіваємося, що ви в такому ж захваті, як і ми, адже на всіх нас чекає чудова пригода!
Тож чи відповідають ці майбутні оновлення вашим очікуванням? Чи є ще щось, що ви хотіли б запропонувати для версії 4? Залиште нам коментар нижче, і ми подивимося, що можна зробити!
Щоб бути в курсі нових оновлень версії 4 (та інших чудових речей), підпишіться на нашу розсилку нижче, натиснувши кнопку «Підписатися»! Не хвилюйтеся — ви можете скасувати підписку в будь-який час.
Only a few weeks ago, we released PBS Version 4.1. This update included tweaks on the formatting bar and some text formatting updates, among others. For Version 2.0 though, while we made additional features, we decided to focus more on PBS’ overall performance.
200% Performance Increase & A Little Help from CodeInWP
Поштовхом до цієї зміни стала стаття про очікування від конструкторів сторінок від CodeInWP. У ній було наведено короткий список їхніх фаворитів з оглядом кожного за певними критеріями. Хоча Page Builder Sandwich не потрапив до самого списку, про нас також коротко згадали у статті:
With Page Builder Sandwich you won’t also lose your content and will be able to continue updating the page easily via a default WordPress editor.
Прочитане підштовхнуло нашу команду до ще більшого вдосконалення PBS. І, оскільки ми не ввійшли до списку, нам також було цікаво дізнатися, у чому саме полягають наші недоліки. Трохи згодом ми зв’язалися з CodeInWP, щоб попросити про короткий огляд PBS, і запрошена авторка Ann Taylor дала нам дуже конструктивну та корисну відповідь:
“…I played around with a free version a bit. It shows a lot of promise: lots of modules, pretty intuitive UI, great WYSIWYG experience, everything is dragged around easily. However, when I had around 10 modules on the page, it became hard to continue working with it because of low editing speed…”
Цей чудовий відгук спонукав нас детальніше дослідити швидкість і продуктивність PBS. Ми протестували безліч різних сценаріїв і виявили величезні вузькі місця у швидкості. Першопричиною проблем із продуктивністю були різноманітні обчислення, які виконував плагін для відображення контурів, панелей інструментів та інших візуальних підказок для редагування. Нижче наведено графік продуктивності PBS версії 4.1 у Chrome:
Here are the important points of the graph in a nutshell:
Високі фіолетові ділянки — це погано
Широкі фіолетові ділянки — ще гірше
Ми значно все прискорили, і тепер наш графік для версії 4.2 виглядає так:
If you compare the tall and wide purple areas from the two graphs, that means that we have achieved a 200% performance increase!
4 New Elements
Що нам найбільше подобається в цих 4 нових елементах, так це можливість швидко й ефективно створювати цілі розділи вебсторінки без необхідності перетягувати елементи на робочу область PBS по одному. Ми також надамо вам можливість вибирати з різних стилів, щоб у вас було більше простору для налаштування цих трьох нових елементів відповідно до ваших дизайнерських потреб.
Spacer Element
Відступи елементів легко налаштувати, щоб отримати потрібний простір. Елемент-розпірку можна використовувати як альтернативу цьому. Це особливо корисно, якщо ви не хочете, щоб певні рядки занадто сильно зменшувалися на мобільних екранах.
Featurette Element
Елемент featurette можна використовувати для швидшого створення розділів вашої сторінки. Ці розділи можуть включати головні банери (hero headers), каруселі відгуків та інші елементи, якими можна розширити функціональність вашої сторінки.
Since all of the Featurette Elements are pre-designed, all you’ll have to do is simply drag the “Featurette” button from the Elements Tab, and choose what you want to add on your workspace from there.
Team Members Element
Елемент для представлення члена команди ідеально підходить для знайомства відвідувачів сайту з вашою командою. Зазвичай такий розділ містить фотографію члена команди, а також короткий опис знизу.
Gallery Element
Цей елемент використовується для створення фотогалерей. Раніше для створення галереї вам доводилося перетягувати окремі елементи (такі як кнопки, рамки тощо) на робочу область PBS по одному. Проте цей новий елемент робить це за вас, тож процес стає максимально простим.
A Huge Thank You
Версія 4.2 — це одне з наших найважливіших оновлень на сьогодні. Зрештою, продуктивність і функціональність мають вирішальне значення для будь-якого чудового плагіна. Ми хотіли б подякувати @Ann Taylor та CodeInWP за конструктивний відгук і побажання успіхів у нашому шляху. А всім користувачам PBS — величезне спасибі від нас за вашу постійну підтримку.
Незабаром ми випустимо ще більше оновлень (зокрема, обіцяну функцію Google Fonts та багато іншого), тож стежте за новинами!
А поки що — вдалого створення сайтів від команди PBS!
У попередній статті ми обговорювали основи зіставлення шорткодів і те, як ви можете отримати доступ до його чудових переваг. Ми вирішили виділити статтю про версію Shortcode Mapping для Page Builder Sandwich в окремий матеріал, оскільки наступний опис може бути дещо більш технічним.
Нижче наведено більш детальний опис внутрішніх процесів нашої функції зіставлення шорткодів і того, як ми змусили її працювати.
Автоматизований процес
Щоб вирішити, які плагіни включити до мапера шорткодів, ми створили автоматизований скрипт, який збирає найкращі плагіни в каталозі плагінів WordPress на основі таких критеріїв:
Серед 1 000 популярних, з найвищим рейтингом і оновлених плагінів, з щонайменше 4 000 активних встановлень,
З щонайменше 4 000 активних встановлень,
З щонайменше 20 оцінками, та;
З середнім рейтингом не менше 3 зірок
Ми щодня виконуємо цей запит до каталогу плагінів WordPress. Ці фільтри гарантують, що ми отримуємо список якісних плагінів, якими користується багато людей. На момент написання цього матеріалу ці критерії охоплювали 800 плагінів. Це багато. Дуже багато.
Деякі з найпопулярніших плагінів, виявлених для зіставлення шорткодів.
Потім ми запускаємо серію автоматичних перевірок вихідного коду кожного плагіна, щоб дізнатися, чи містить він якісь шорткоди, після чого намагаємося знайти всі ці шорткоди разом із усіма їхніми атрибутами. Опрацювання даних дало понад 2 000 шорткодів. Подвійне «ого». Виявлені шорткоди потім вносяться до бази даних зіставлення шорткодів для ручної перевірки.
Наприкінці цього процесу ми отримуємо величезний список плагінів та їхніх можливих шорткодів. Тепер справа лише за очищенням цих даних, щоб переконатися, що все правильно.
Ручний процес
Це, мабуть, найважча частина всієї системи зіставлення. Код плагінів буває різних форм і розмірів, тому не всі шорткоди автоматично виявляються нашими скриптами. Хоча WordPress Codex рекомендує використовувати функцію `shortcode_atts` для фільтрації атрибутів шорткоду, це лише рекомендація, і не всі її дотримуються. Також немає надійного способу перевірити внутрішню структуру шорткоду, коли плагін встановлено.
Тому, щоб переконатися, що ми правильно зібрали всі шорткоди та їхні атрибути, ми створили інтерфейсну панель для редагування шорткодів та атрибутів, розроблену за допомогою AngularJS і Bootstrap.
Інтерфейс на Bootstrap & AngularJS для налагодження всіх зіставлених шорткодів.
Нам доводиться вручну переглядати кожен окремий плагін, перевіряти документацію його шорткодів і переконуватися, що всі зібрані дані точні.
Хоча це надзвичайно клопітно, автоматизований процес має й світлі сторони:
За нашою ранньою статистикою, лише близько 1 з кожних 2 плагінів має шорткоди.
Половина виявлених шорткодів не мають атрибутів (але частина з цього може бути хибними спрацьовуваннями)
Отримуючи лише якісні плагіни, ми з великою ймовірністю маємо для них документацію щодо шорткодів
Лише після того, як усі шорткоди плагіна буде перевірено, сервер починає передавати зіставлення шорткодів цього плагіна користувачам.
Виклик Rest API
Останній елемент мозаїки — це сам плагін. Концепція тут проста: з’ясувати, які плагіни активні, яку тему використовує сайт і які шорткоди доступні, а потім запитати базу даних зіставлення шорткодів, чи є для них зіставлення. Для цього ми створили власний кінцевий пункт WP REST API, до якого звертаються всі клієнти, щоб отримати останні зіставлення шорткодів.
Майбутнє: Краудсорсинг
Ручна перевірка кожного плагіна вимагає багато часу та зусиль. Щойно платформа зіставлення шорткодів стане стабільною, ми плануємо відкрити процес зіставлення для всіх. Це означає, що кожен зможе допомогти додавати шорткоди.
Ви можете подумати: «Навіщо мені допомагати зіставляти шорткоди? Яка мені з цього користь?» Що ж, на думку спадає кілька причин, чому люди захочуть допомогти:
Якщо ви створили плагін, а ми ще не виявили його через зазначені вище критерії (і він є в каталозі плагінів WordPress), ви можете додати зіставлення власноруч. Ваш плагін отримає повну підтримку в PBS!
Оскільки в автоматизованому процесі ми працюватимемо лише з тими, що є в каталозі плагінів WordPress, автори преміум-плагінів і тем не будуть включені. Тож якщо у вас такий є, ви також зможете додати власні зіставлення шорткодів для них.
А для тих, хто не створює плагіни, ми можемо винагородити допомогу. Щоб зробити зіставлення шорткодів привабливим завданням, ми можемо винагороджувати охочих помічників персональною ліцензією або оновленням до преміум-ліцензії PBS!
Підпишіться на нашу розсилку
Функціонал зіставлення шорткодів стане доступним для наших клієнтів орієнтовно 12 серпня15 серпня 16 серпня 2016 року. До цього часу не всі шорткоди будуть зіставлені (за нашими оцінками, можливо, 100 плагінів), але процес зіставлення триватиме безперервно, і клієнти отримуватимуть їх одразу після появи нових.
Підпишіться на нашу розсилку, щоб дізнаватися новини про зіставлення шорткодів, дату виходу та відкриття процесу зіставлення для спільноти!
Після виходу версії 4.0 у січні минулого року ми продовжили роботу над розробкою PBS, додаючи як виправлення, так і покращення. Ми раді поділитися ними з вами, тож ось що ми приготували для оновлення версії 4.1.
Покращення панелі форматування
Останнє оновлення 4.1 зосереджене навколо панелі форматування тексту. Окрім усунення багатьох помилок, ми також вдосконалили деякі елементи на панелі, що зробить вашу роботу з PBS плавнішою та ефективнішою.
Оновлення інструмента вибору кольору
У попередніх версіях PBS інструмент вибору кольору мав деякі проблеми, що створювали певні незручності в процесі редагування, зокрема коли йшлося про редагування тексту та його кольору. Однак у версії 4.1 ми вирішили цю проблему й внесли нові корективи для легкого редагування тексту.
Більше зразків кольорів для легшого вибору кольору
Інструмент вибору кольору тепер відображає прозорість
Виправлення помилок щодо редагування кольору тексту
Оновлення форматування тексту
Раніше у нас були кнопки, на які потрібно було натискати кілька разів, щоб збільшити значення, а потім утримувати CTRL/CMD і натискати, щоб зменшити. Спочатку ми вважали це інтуїтивно зрозумілим, але користувачі зауважили, що це не очевидно. Ми виправили ці незручності в цьому оновленні.
Доступ до висоти рядка тепер простіший: перетягніть повзунок, щоб налаштувати бажаний розмір, або просто введіть потрібний розмір у відповідне поле
Кнопку розміру шрифту було розділено на дві кнопки: зменшення та збільшення для зручнішого використання
Збільшення/зменшення розміру шрифту також стало доступнішим, тепер з px як одиницею вимірювання для простішого редагування. Раніше там відображалася одиниця «x», яка насправді нічого не означала
Кнопки вирівнювання за лівим краєм/по центру/за правим краєм/по ширині тепер згруповані разом, щоб зменшити кількість відображуваних кнопок
Кнопка «Очистити форматування» тепер очищає інші стилі (наприклад, висоту рядка), чого вона не робила раніше
Покращення горизонтальної лінії
Раніше горизонтальна лінія створювала певні проблеми. У деяких темах горизонтальні лінії були настільки маленькими, що на них було важко натиснути. Щоб виправити це, ми прибрали горизонтальну лінію з панелі форматування та перетворили її на окремий елемент. Крім того, тепер ви також можете змінювати кольори лінії за допомогою інструмента вибору кольору.
Майбутні оновлення: що чекає на PBS?
Як ми вже говорили, ми все ще працюємо над новими функціями (і подальшими оновленнями). Ось невеликий попередній огляд того, що ми підготували для вас у майбутньому:
Google Fonts (нарешті!)
Ми експериментуємо з ідеєю, щоб панель форматування тексту була чимось більшим, ніж просто місцем для форматування виключнотексту. Що якби кнопки змінювалися залежно від поточного контексту? Наприклад, було б дуже зручно, якби кнопка вертикального вирівнювання з’являлася, коли ви редагуєте текст усередині колонки.
Що б ви хотіли побачити в майбутніх оновленнях PBS?
Ми завжди готові вдосконалювати PBS, тож якщо у вас є якісь пропозиції, звертайтеся до нас! Чи є у вас запити на нові функції, які ви хотіли б додати до нашого списку? Щось іще, що, на вашу думку, потребує коригування в поточній версії? Поділіться з нами в коментарях нижче!
Keeping your audience reeled into your page (and successfully generating leads) is a different story altogether, though.
Don’t get us wrong. Lots of sites can achieve this without a worry, but that’s usually because they spend a significant amount of time and research doing just that.
In contrast, some sites admittedly have a little trouble pulling it off, and more often than not, some of them don’t know where to begin. But don’t worry – Page Builder Sandwich will try to lend you a hand with that very same thing.
Why is it Important to Generate Leads?
One crucial thing to remember is that generating leads takes more than just buying a domain and setting a website up.
Now, before we get too into it, take note that Page Builder Sandwich isn’t a marketing website.
Але в будь-якому разі важливо розуміти, що за генерацією лідів стоїть ціла наука, і хоча ми самі не є цифровими маркетологами, варто зауважити, що успішна конверсія лідів також залежить від належної реалізації дизайну та контенту. Ось тут на допомогу приходимо ми.
«Але як ви можете допомогти з маркетинговою складовою всього цього?»
Great question! A few weeks ago we began corresponding with Straight North, a blog that specializes in digital marketing and lead conversion. They’ve given us some really tips which we hope you guys find helpful in your site-building journey.
Now, remember thatthere could belots of factors as to why your website isn’t generating the amount of leads you’d like. The first step is toidentify what these factors are, and hopefully, this list can help you out with doing just that.
TIP #1: Create Content that Stimulates Action
According to Straight North, 84% of website conversions occur on the first visit, and only 11% convert in the second.
Іншими словами, перше враження має значення.
Подібно до того, як невдалі прослуховування не приносять акторам головних ролей, перший візит користувача на ваш сайт може стати для вас як тріумфом, так і провалом.
That’s why it’s you and your team’s job to try and convince people to stay glued to your page.
Straight North suggests that posting copy and content (both text and images) is a great way to catch your visitors’ attention. Remember to always allot sufficient time to research on what makes good copy and good content, and never underestimate either.
Ось кілька сайтів, які можуть допомогти вам на шляху до створення успішних лідів:
Wow your site visitors by using interactive PBS elements like the Carousel, or use Parallax Scrolling, and Video Backgrounds to catch their attention. Remember to execute their placement in a balanced way though, as to not overwhelm your audience.
TIP #2: Intuitive Navigation
In the realm of web development and site-building, intuitiveness in the user interface (or UI) is key.
This means that when your visitors or users find their way around your site byintuition (i.e. easy site-navigation and straightforward instructions), they’re more likely to stay glued on your site.
Якщо навігація вашим сайтом виявиться заплутаною та неприємною, є велика ймовірність, що відвідувачі не затримаються надовго, щоб дізнатися, що ви хочете сказати та що можете їм запропонувати.
Straight North adds thatgetting too “clever and creative” with navigation labels is a bad idea,and suggest that you use terms like “Contact Us” for call-to-action buttons, rather than using vague labels like “Interact!” or “Dialog.” Remember thatbombarding your site with too much jargon can cause frustration to your audience as well.
So as long as navigating through your website comes to the user assecond nature, then you have one less thing to worry about when trying to convert leads.
How PBS Can Help:
Page Builder Sandwich’s UI is highly intuitive, and is akin to using a Word processor (like Google Docs and Microsoft Word). Check out ourdemo to get some inspiration on how you can apply intuitive changes to your site, too!
OTHER PAGE BUILDERS
…have too much stuff going on.
PAGE BUILDER SANDWICH
…gets straight to the point.
TIP #3: Use Relevant, Custom Imagery
Your images and how they’re presented also matter, and they matter a lot.
While it may seem trivial to some, uploading boring stock images, stretched out/pixelzed photos, or badly-presented typography is a huge factor that dictates whether your visitors stay on your site, or move to a better, more credible-looking alternative.
How PBS Can Help:
Because it’s WordPress-run,PBS lets you post high-quality photos in your website. As long as you have the right image dimensions, you shouldn’t have a problem with posting photos.
Additional lifehack: You can also check out Pexels.com and Unsplash.com to get awesome, high-quality stock photos!
TIP #4: Persuasive Credibility Elements
Skepticism is ahuge conversion killer.
That’s why more often than not, it’s always a good idea to add in elements that back up your credibility as a website (or business), like testimonials from credible sources, and logos of reputable companies or groups that you’ve worked with.So use customer testimonials, show logos of well-known customers, and include third-party mentions in your content.
How PBS Can Help:
Use PBS features to vouch for you. Display your customers’ testimonials in a Carousel, or use the Featurette element to showcase third-party mentions, or make use of the column element to effectively display logos of your well-known customers (like in the graphic above).
TIP #5: Get Personal!
Straight North says thatusing a lighter, casual tone makes all the difference when writing content (such as articles and bio’s) on your site. This lets your users know that you’re human too, and not just some bot trying to get a run for their money (which we hope you aren’t).
How PBS Can Help:
While this part is entirely up to you and your team, it wouldn’t hurt to use elements such as the Featurette, Gallery, and Image Box to liven up your bio’s as well. Adding in other PBS elements like Social Media Icons can help put a personal touch to your pages, too.
PBS’ Industry Template makes full use of the Image Box Elements for its About Us and Feature Sections.
TIP #6: Irresistible Calls-to-Action
Calls-to-Action (CTA) are a crucial part of generating leads.
You will FAIL to capture first-visit conversions unless you ASK. – Straight North
Just asking isn’t enough, though. According to Straight North, your calls-to-action should be executed both “skillfully and persuasively”.
The trick is to have effective Calls-to-Actions plus a good combination of smart consistent placement, offers that give off substance, time-sensitive offers (giving them offers for a set, limited time will give them a sense of urgency), and most importantly, guaranteed offers.
You want your site to trust you. “Take away all arguments for delay, and conversions will increase”, Straight North says.
How PBS Can Help:
PBS’ Call-to-Action Button – as well as other elements such as the Countdown and Page Heading element – can help ease your burden regarding this task.
Executing them correctly is up to you and your team though, so make sure to give time to research about CTA placements and other marketing tips.
Ось кілька ресурсів, які допоможуть покращити ваші заклики до дії (CTA):
Надсилання людиною своєї інформації через форму на вашому сайті є остаточним показником успішної конверсії ліда.
This is why placing user-friendly contact forms on your site is of the utmost importance. They’re the ultimate “make-or-break stage of a great conversion opportunity”, says Straight North.
A couple of PBS’ third-party plugins available for shortcode mapping
So don’t intimidate your site visitors by overwhelming them with too many question forms, or have them exhaust too much energy, like having them type long sentences instead of choosing their answers from a drop-down list.
Letting them know that you value their privacy is also a must. Be sure to place clean, good-looking forms on your site so as to boost credibility.
TIP #8: Prominently Displayed Phone Numbers (or Contact Details)
Contact number and social media buttons displayed prominently in PBS’ Restaurant Template
Послідовне та помітне відображення номерів телефонів є обов’язковим, якщо ви надаєте підтримку телефоном. Straight North додає, що інвестиції в безкоштовні номери також можуть суттєво підвищити конверсію.
Якщо ви є технологічною компанією, як ми, також варто вказати свою адресу електронної пошти (або інші способи зв’язку) на вашому сайті.
How PBS Can Help:
PBS’ Full Page Niche-Based Templates have fields that let you feature phone numbers and other contact information more prominently, so that your visitors can reach you right away.
TIP #9: Continuous Testing
Straight North attests to the importance of site maintenance and testing: “No matter how good your website is in converting leads, it can always be better.”
Це стосується будь-якого сайту, а не лише того, який намагається конвертувати ліди. Якщо переконатися, що ваш сайт перебуває в ідеальному стані, а клієнти завжди задоволені, це значно посприяє довгостроковому успіху вашого бізнесу.
How PBS Can Help:
This one is up to you, but if you’d like a tip: the PBS Team continuously tests the site and page builder for any bugs, and always work to make sure you guys are satisfied. We don’t exactly have a feature for making sure you do regular tests on your site, so this one’s entirely up to you and your team.Do it, and do it well!
TIP #10: Mobile-Friendly Design
Almost everyone has a cellphone or tablet; but whileonly 23 percent of lead conversion rates comefrom mobile devices, it absolutely will not do to ignore any sort of potential conversions, no matter the percentage (leads are still leads, after all).
“Users converting from desktop view may have seen the site initially on a mobile device,” Straight North says. “Mobile conversions are (also) likely to grow as mobile Internet access continues to soar at the expense of desktops.”
You can preview your site on mobile view directly on desktop
How PBS Can Help:
Page Builder Sandwich is Mobile Responsive. You can view PBS-built sites on mobile, as well as check previews of your mobile site directly through desktop while editing. This way, you won’t have to keep switching to your phone in order to check if your site looks good on mobile.
Everything Matters in Site-Building
At the root of it all, it’s very, very important to understand that everything on your website – down to the smallest of details – has an impact on your audience.
The quality of your copy, images, your layout – all of it matters, and it matters a lot.
І одна з найбільших помилок, яких припускаються люди при спробі генерувати ліди, полягає саме в цьому: нехтувати дрібними складовими сайту (як-от дизайн, текст та інший контент).
Hopefully your website garners the success it very well deserves; it’s been built with PBS, after all.
Бажаємо успіхів вам та всім вашим починанням і, як завжди, дякуємо за використання Page Builder Sandwich!
Уявіть собі: ваш перший сайт на WordPress нарешті працює. Ви вже кілька місяців не відчували такого тріумфу. Ви заслужено хвалите себе, і те саме роблять люди, які допомагали вам реалізувати плоди вашої праці. Ви встановлюєте потрібні плагіни та починаєте будувати плани щодо подальшого майбутнього вашого сайту. Воно виглядає світлим, і все йде як по маслу.
Аж доки не трапляється немислиме. І ваш сайт «падає».
Ви знизуєте плечима. Ви чули, що таке трапляється навіть із найкращими. Дідько, ви певні, що Марк Цукерберг і Девід Карп теж проходили через таке раніше, і зараз у них обох усе чудово, хіба ні?
Тож ви намагаєтеся повернути його до життя, гарячково шукаючи рішення в Google. З першої спроби нічого не виходить. Не виходить і з другої — чи з третьої, четвертої, сімнадцятої та навіть двадцять другої. Ваші очі округлюються від усвідомлення того, що ви приречені остаточно й безповоротно; ваш сайт втрачено назавжди. Ви перериваєте весь інтернет у пошуках виходу, але майже всі сайти з інструкціями твердять одне й те саме:
Вам слід було створити резервну копію файлів WordPress із самого початку.
Вам слід було створити резервну копію файлів WordPress із самого початку.
Вам слід було створити резервну копію файлів WordPress із самого початку.
У кращому випадку — один із найстрашніших кошмарів власника сайту. Це саме те, чого ми прагнемо уникнути, то як саме цьому запобігти? Що ж, відповідь досить проста: нам потрібно встановити гарний плагін для резервного копіювання.
Файли в папці wp-content (ваша тема, плагіни та завантажені медіафайли)
Файл конфігурації WordPress
Ваша база даних WordPress
Детальніше про резервне копіювання
Сам по собі WordPress не має вбудованих систем безпеки та резервного копіювання вашого сайту (хоча ви можете навчитися налаштовувати їх вручну — але це забере купу часу), тому саме вам належить подбати про те, щоб мінімізувати труднощі. Оновлення сайту — річ обов’язкова (про всяк випадок, якщо ви хочете додати щось нове, наприклад, ще один плагін, або якщо ви хочете щось прибрати), а резервне копіювання — це абсолютна необхідність, якщо ви не хочете втратити дані (а ви цього точно не хочете). Серед інших причин робити бекапи сайту та посилювати безпеку — впевненість у тому, що його захищено від хакерів і що ніхто не зможе викрасти будь-які дані вашого сайту.
«Для цього теж є плагін»
WordPress має безліч плагінів для різноманітних функцій, зокрема (так, ви вгадали) чимало для заходів безпеки та резервного копіювання. Існує величезна кількість таких плагінів на вибір; серед найпопулярніших — BackupBuddy та UpDraftPlus. Огляди цих плагінів (і не тільки) можна знайти майже всюди, тож не хвилюйтеся — магія інтернету вас підстрахує. Особисто ми використовуємо VaultPress як для безпеки, так і для бекапів, з таких причин:
VaultPress був створений компанією Automattic, яку заснував Метт Мулленвеґ– та сама людина, яка заснувала сам WordPress. Багато, якщо не більшість продуктів і сервісів Automattic є наднадійними, і завжди варто обирати плагіни, які вже перевірені часом та досвідом.
На відміну від більшості плагінів для резервного копіювання, VaultPress не потребує місця у вашому сховищі. Вони зберігають ваші дані на власних серверах, тож ви не отримуватимете від хостингу сповіщень на кшталт «ви з’їдаєте забагато дискового простору на сервері».
Простота. Щоб користуватися ним, вам потрібно лише увійти у свій інтерфейс, де ви зможете переглядати всі деталі резервних копій і виконувати необхідні операції.
Оскільки VaultPress відповідає нашим особистим вимогам, він підходить нам ідеально. Проте, якщо VaultPress вас не влаштовує, багато сайтів — наприклад, WPBeginner та wpmudev — пропонують звичні порівняльні статті на випадок, якщо вам складно визначитися з вибором.
Вибір за вами
Зрештою, рішення про те, чи варто захищати сайт і робити резервні копії, залежить лише від вас. Хтось упевнений, що зможе впоратися з ризиками, які несе незахищений сайт… а хтось ні — і це цілком нормально. Зрештою, береженого й Бог береже.
Яке б рішення ви не обрали, завжди пам’ятайте зважувати всі варіанти. Адже лише ви можете оцінити, з чим ви здатні впоратися.
We’ve been getting quite a few inquiries the past week about Pre-Design Sections (and by extension, the PBS Templates), what they are, and how they can be accessed.
So in this article, we’ll be teaching you how to not only access them, but also how to maximizethese features of Page Builder Sandwich: By customizing them and making them your own.
Accessing the Pre-Designed Sections
If you aren’t familiar yet, all you have to do to access the Pre-Designed sections is to hover your mouse onto the left side of your screen, and access the Elements Inspector. This is the sidebar that lets you drag and drop elements directly onto your content area.
Say hello to the Elements Inspector!
Once it’s accessed, simply scroll down to the bottom and select Pre-Designed Sections. A library of the sections will pop up. Select one from the collection, drag and drop, and it’ll show up on your content area, like so:
From here, you can move the elements within the section around, or move the entire thing and adjust its position. And there you have it! You’ve selected a Pre-Designed Section from Page Builder Sandwich.
Now it’s time to add in your own twist:By customizing and tweaking with the elements’ settings within the selected section.
Customizing the Pre-Designed Sections
Each element’s setting within any one Pre-Designed section can be edited and customized according to your website’s needs and your personal taste.
This means everything included in your selected Pre-Designed section – like text, colors, images, buttons,everything– can be edited and tinkered with byyou.
Так, наприклад, якщо вас не влаштовує стандартний синьо-зелений відтінок і зображення пшеничного поля в стандартній попередньо створеній секції нижче…
You can adjust it. For instance, if I wanted a different background tint on the left:
Or if you wanted to replace the image of the wheat field on the right:
Or even change thebutton style, margin, padding, andfont:
…You can.
Для порівняння:
Default PBS Pre-Designed Section
The same Pre-Designed Section, completely tweaked and customized. Notice the different font, color scheme, button style, photo, and margin width. You can actually take this further, and let your imagination run wild.
Here are a few more examples on how you can spice up our Pre-Designed Sections
DefaultPre-Designed Section from Sandwich
The same Pre-Designed Section, customized
You can do it with our Full-Page Templates, too:
DefaultTemplate from Sandwich
The same Template, customized
Conclusion
Попередньо створені секції Page Builder Sandwich мають більше можливостей, ніж ви думаєте.
Tweak and customize them to make them completely your own, or even use them as a starting point for when you don’t want to design your page from the ground up.
Пам’ятайте, що Page Builder Sandwich створений, щоб допомогти вам створювати дизайн швидше. Повноцінне використання наших попередньо створених секцій і шаблонів цілих сторінок допоможе вам саме в цьому.
Design in less time!
Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.
Отримайте ЗНИЖКУ 20% на всі ліцензії Page Builder Sandwich з 4 по 6 липня 2017 року! Просто введіть промокод 4JULY2017, щоб отримати знижку вже сьогодні!
У 
Після виходу версії 4.0 у січні минулого року ми продовжили роботу над розробкою PBS, додаючи як виправлення, так і покращення. Ми раді поділитися ними з вами, тож ось що ми приготували для оновлення версії 4.1.
Уявіть собі: ваш перший сайт на WordPress нарешті працює. Ви вже кілька місяців не відчували такого тріумфу. Ви заслужено хвалите себе, і те саме роблять люди, які допомагали вам реалізувати плоди вашої праці. Ви встановлюєте потрібні плагіни та починаєте будувати плани щодо подальшого майбутнього вашого сайту. Воно виглядає світлим, і все йде як по маслу.
