Page Builder Sandwich

Отримати PBS Pro

Автор: Neil Lock

  • Як створити сайт з нуля менш ніж за $100

    How-to-Create-a-Website-from-Scratch-for-Under-$100

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

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

    Давайте перелічимо, що ми отримаємо в результаті. До кінця статті ви матимете:

    1. Your own website that people can visit at http://supermegaawesomewebsite.com,
    2. Optionally have your own email address at [email protected],
    3. A certain zen-like state of mind.

    Що вам знадобиться

    Гаразд, перш ніж ми перейдемо до конкретних кроків, нам знадобиться таке:

    1. Уявлення про те, яким буде ваш вебсайт,
    2. Кредитна картка або рахунок PayPal зі 100 доларами на рахунку, та
    3. Газована вода або склянка води на випадок, якщо ви захочете пити — завжди корисно підтримувати водний баланс.

    Що таке вебсайт?

    Перш ніж щось робити, важливо спершу зрозуміти, що саме ми створюємо. Так, ми створюємо ваш власний вебсайт, але що це насправді таке?

    In a nutshell, a website is a bunch of files in a special computer, and this special computer can be accessed by using a special web address on your web browser. After accessing the web server, it’s going to crunch those files together and in the end we would be able to see a pretty looking web page.

    Sorta techy terms:

    • bunch of files = web pages
    • special computer = web server
    • special web address = domain name or URL

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

    Отримання місця в Інтернеті

    Я рекомендую обрати GoDaddy’s Managed WordPress Hosting – Basic Plan. Цей тарифний план дає нам усе необхідне для негайного створення сайту з мінімумом клопоту. Найкраще те, що нам не потрібно турбуватися про технічні деталі налаштування.

    Якщо вам цікаво, що таке тарифний план «Керований хостинг WordPress» (Managed WordPress Hosting), я поясню:

    • Managed – GoDaddy will be the ones who’ll make sure that everything runs smoothly, updated, fast and without any problems. And if you need any help, you can ask their customer support.
    • WordPress – This the content management platform that will be used. It’s what you’ll use to publish your content online. It’s awesome. If you want to know more about WordPress, WP101 has a great intro video on What WordPress Is
    • Hosting – Everything will be placed in GoDaddy’s servers, so everything can be accessed quickly and with almost no down time.

    When getting the plan from GoDaddy, they also provide you with a domain name for free. This is awesome since now we don’t have to do anything aside from signing up in order to get the full package!

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

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

    Ознайомтеся з тарифами керованого хостингу WordPress від GoDaddy

    Заповніть усі дані, знайдіть бажане доменне ім’я (вам не обов’язково використовувати supermegaawesomewebsite.com), а потім перейдіть до оформлення замовлення та оплатіть його.

    I recommend that you sign up for at least one year so that you can avail of their discounts. You can also scour the web to check if there are any promos available.

    Web Server Cost: $12.18 – $59.88 for 1 year (the key here is to find a promo) Email Cost: $0 for 1 year Domain Name Cost: $0 for 1 year

    Total Cost so far: $12.18 – $59.88

    Вітаємо, тепер у вас є сайт на WordPress!

    Після того, як ви отримали хостинг GoDaddy, ваш сайт має повноцінно працювати. Ви можете перейти за адресою свого домену http://supermegaawesomewebsite.com і побачити свій сайт.

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

    Доступ до вашого вебсайту

    Since you’ve signed up with GoDaddy, they’ll give you a URL where you can access the administration side of your website. If you can’t find it, you can add a /wp-admin at the end of your URL. e.g. http://supermegaawesomewebsite.com/wp-admin and log in from there. Once logged in, you’ll end up in your WordPress Dashboard.

    GoDaddy має власну систему «Швидкого налаштування» (Quick Setup), яка допомагає новачкам налаштувати свій сайт. Рекомендую пройти цей процес налаштування, якщо ви не знайомі з тим, як працює WordPress.

    Вивчення WordPress

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

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

    If you need guidance, there are a lot of tutorials on how to use WordPress online too. One of them is WP101. WP101 makes things super easy by providing lots of tutorials in video format, and they have a huge library of videos that will teach you all the ins and outs of WordPress.

    They have a few free videos in their site. For example, you can watch WP101’s video tutorial about the WordPress Dashboard.

    Ознайомтеся з відеоуроками від WP101

    Video Tutorials Cost: $15 per month (if you can obsess over all their videos within the first month, then you’re golden)

    Total Cost so far: $27.18 – $74.88

    Робимо ваш сайт красивим

    The next step is to change the design of your site to make it match your personality and/or needs. You’ll need themes for that. In short, themes are like “skins” for your WordPress site.

    There are a ton of free and paid themes out there. If you want free themes, then there’s no doubt that the WordPress.org theme directory is your number one option.

    Since there are a lot out there though, it’s sometimes hard to find the perfect one for you. Theme Friendly’s Find Themes helps by providing reviews for themes and gives them a score based on their review. They have a number of themes in their site, and probably the best thing there is that you can click on filters while browsing themes, so you can view only themes fit for portfolios, businesses or blogs, and many more.

    There are also paid themes, but for starters I would recommend the free ones first. If you decide to take the premium route check out Premium WordPress’ list of theme shops.

    If you’re wondering why I didn’t mention ThemeForest, it’s because there are a lot of themes there that add a lot of bloat (unnecessary features) to your site. So if you really want to find a theme from there, tread carefully.

    Theme Cost: $0 – $70 one time (I’d recommend looking for promos in theme shops too)

    Total Cost so far: $27.18 – $144.88

    Додавання більшої функціональності до вашого сайту

    As you create your site and continue to add content to it, you might find yourself wanting to add more stuff like contact forms, maybe some icons, or a Google Map, or something else. For these kinds of stuff, you’ll need plugins.

    As with themes, there are also a ton of free and paid options. And like themes, the number one choice for free plugins is the WordPress.org plugin directory. It’s a common saying within the WordPress community that if you need something in your site, “there’s a plugin for that.”

    For premium plugins, you can also find premium ones in CodeCanyon.net. But I would recommend going through the thousands of free ones in the WordPress.org plugin directory first.

    Plugin Cost: $0

    Total Cost so far: $27.18 – $144.88

    Conclusion

    You might have noticed that the total cost indicator is a range instead of a solid number. It’s because there are various ways to push the cost down like watching out for promotions, and opting for free themes & plugins.

    So if you play your cards right, you can actually have your own site from scratch (powered on for a full year), for only $27.18

    Most likely the succeeding years won’t be as cheap as the first year, but if you have your site up and running for at least a year already, then I would like to think that it’s a success and the other future costs aren’t a problem anymore.

    Hopefully you’ve learned a bunch from this article. And if you didn’t know about WordPress before and you’re now a proud WordPress user, consider joining the numerous WordPress communities online. Just search for a WordPress group in Facebook :)

    Зачекайте! Ще не закривайте вкладку!

    Зачекайте! Перш ніж ви закриєте цю вкладку, я хотів би згадати про Page Builder Sandwich. Вище я згадав багато чудових речей, але ви ще не бачили Page Builder Sandwich.

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

    You can try out the demo, or watch the video below. What’s cool is that we’re still below the $100 limit :)

    Спробуйте демоверсію Page Builder Sandwich

    Page Builder Sandwich Cost: $39 for 1 site

    Total Cost so far: $86.18 – $203.88

  • Що розмістити у верхній частині головної сторінки — поради щодо контенту «першого екрана»

    Tips-For-“Above-the-Fold”-ContentWhat you put in the top of your front page has a huge impact on the success or failure of your website. Put the wrong thing in, and you’ll probably see your visitors quickly navigating away from your site. Put the right content there and you may see your sales go up.

    This article isn’t an all-in-one guide for creating above the fold content, nor is about an all-encompassing rule on what you should put in. Rather, I will give you a few tips, recommendations and a little bit of helpful research about this topic.

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

    file000153814713_

    «Above the Fold»

    Вона називається Above the Fold («вище згину»). Чому? Тому що в давні часи, коли людство користувалося штуками під назвою «газети», їх зазвичай складали навпіл, тож одразу було видно лише верхню частину. Ця верхня частина, або частина «вище згину», містила найважливіші заголовки дня, а коли ви її розгортали — бачили решту менш важливих заголовків. Так само і на вебсайтах: верхня частина вашого сайту — це перше, що бачать люди, а коли ви гортаєте вниз, то бачите решту сайту, немов розгортаєте газету.

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

    Дослідження Нільсена

    Earlier I said that your above the fold content may make or break your site. Nielsen Normal Group has written a few research articles about this across the years. I’ll quote the summary of their article The Fold Manifesto: Why the Page Fold Still Matters

    The average difference in how users treat info above vs. below the fold is 84%.

    If you just got confused about the wording of the quote, I did too at the start. Let me clarify: That study doesn’t mean that 84% of people do not scroll down, on the other hand I’ve seen other research say that most people do scroll down to the bottom of the page. It also doesn’t mean that the lower part isn’t important. Instead it means that the behavior of your visitors in your site is largely impacted by your content above the fold.

    Це цілком логічно, оскільки верхня частина вебсайту — це перше, що ви бачите.

    Отже, знаючи, наскільки важливий контент на першому екрані вашої головної сторінки, що ж варто розмістити у верхній частині вашого сайту?

    Переходьте одразу до суті

    Одразу поясніть, про що ваш сайт. Ваша головна сторінка та зона першого екрана — це основа всього вашого сайту. Якщо відвідувачі відчують себе розгубленими, вони швидко підуть і закриють вкладку. Якщо ви автор-початківець, напишіть про це та покажіть свою останню книгу. Якщо ви весільний організатор, напишіть, що ви весільний організатор, який подарує відвідувачу найбільш незабутнє весілля в його житті. Або якщо ви створюєте сайт для свого невеликого готелю, напишіть, що ви найкращий готель типу «ліжко та сніданок» у місті. (Нижче я частіше використовуватиму ці приклади.)

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

    Цілеспрямовано залучайте відвідувачів

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

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

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

    Дизайн першого екрана

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

    Screen-Shot-2016-01-29-at-12.11.19-AM_Here’re a few examples of what you can do about your front page.

    Add a background image. A large background image behind your large statement is a great eye-catcher and can further encourage visitor engagement. For new book author, maybe adding a background image illustrating the setting of his free ebook would entice people more.

    Add an introduction video. Admit it, people can be lazy, especially when it comes to reading. So if your site is a bit complicated, it might be a good idea to add a short video that introduces your site/product quickly. For the wedding organizer, then this can be a video of their latest wedding. Or for our site for example, we can add in a quick intro about the features of our plugin.

    Add a video background. This is a bit of a trend nowadays, but I find it appealing at times. If this suits your taste, then this might be a good idea.. I know PayPal had a video background before in their site. For the small hotel, you can put in a stationary video of a scenic area of your hotel as the backdrop.

    Висновок

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

    If you have tips on creating above the fold content, kindly share them in the comments!

    Page Builder Sandwich can Help You Design Your Front Page & Above The Fold Content

    Page Builder Sandwich is a WordPress plugin that allows you to create any design you want without writing any piece of code.

    Дізнайтеся більше про Page Builder Sandwich

  • Page Builder Sandwich Lite тепер доступний у репозиторії плагінів WordPress

    PBS-Lite-Is-Now-Available-In-The-WP-Plugin-RepoNow you can download the Lite version of Page Builder Sandwich from the WordPress.org plugin repository!

    Версія Lite — це скорочена версія преміум-плагіна, але вона все одно повністю функціональна. Ось список функцій та інструментів, доступних у версії Lite:

    • Редагування у реальному часі на фронтенді
    • Пряме редагування за принципом «клікни й пиши» без клопоту зі спливаючими вікнами
    • Інструменти форматування тексту: кольори, жирний, курсив, підкреслення, горизонтальна лінія, вирівнювання тощо, по суті все, що можна робити в редакторі TinyMCE у панелі керування.
    • Зображення та робота із зображеннями за допомогою медіафайлів WordPress
    • Створення посилань за допомогою діалогового вікна посилань WordPress
    • Блокові елементи: заголовки, цитати, марковані та нумеровані списки
    • Відображення та редагування шорткодів у реальному часі разом із повним списком усіх доступних шорткодів
    • Макетування з рядками та колонками з можливістю вкладення
    • Властивості рядків і колонок: колір фону, зовнішні та внутрішні відступи й рамки
    • Працюючі скасування та повторення дій
    • І багато іншого!

    Завантажте версію Lite зараз

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

    Чи працюватиме це з моєю темою?

    Технічно це має працювати з будь-якими темами без винятку. Разом із нашими користувачами та клієнтами ми успішно використовували Page Builder Sandwich з великою кількістю тем, включаючи теми з репозиторію тем WordPress.org, Genesis Themes, StudioPress Themes, Elegant Themes та теми з ThemeForest. Якщо він не працюватиме з вашою темою, будь ласка, повідомте нам, і ми це виправимо.

    Чи працюватиме це з моїм поточним вмістом?

    Page Builder Sandwich має добре працювати з вашим наявним контентом. Ваш контент можна буде редагувати одразу на фронтенді!

    Якщо ваш вміст переповнений шорткодами, вкладеними в інші шорткоди (наприклад, якщо ви використовуєте шорткоди колонок), ми радимо спочатку очистити та видалити ці шорткоди колонок. Page Builder Sandwich постачається з адаптивними колонками на чистому CSS без використання шорткодів. Буде краще, якщо ви скористаєтеся ними, оскільки вони швидші та надійніші.

    Спеціальна ознайомча знижка

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

    For the next few days, we’re offering you a 50% introductory discount. Take advantage of this now!

    If you’re unsure, give the lite version a spin on your own setup first, or check out the live demo from the top menu ?

  • Відтепер підтримується Markdown, а також кілька крутих інструментів форматування

    Markdown-Now-Supported,-Plus-A-Few-Cool-Formatting-ToolsРадий повідомити, що починаючи з версії 2.4, тепер ви можете редагувати свій контент безпосередньо у фронтенді за допомогою Markdown!

    Підтримка синтаксису Markdown

    Що таке Markdown? По суті, це схоже на гарячі клавіші, але замість натискання комбінації кнопок ви вводите символи, і форматування застосовується миттєво. Нещодавно у WordPress також з’явилася підтримка Markdown, а тепер ви можете використовувати її і в Page Builder Sandwich. За допомогою Markdown ви можете додавати різні заголовки, цитати, попередньо відформатований текст або код, горизонтальні розділювачі, марковані чи нумеровані списки та посилання.

    Сприймайте це як альтернативу натисканню кнопок форматування мишею. Наприклад, під час написання допису в блозі ви вирішили додати ще один заголовок: тепер можна просто ввести два знаки решітки (##), а потім текст заголовка. Щойно ви натиснете Enter, увесь рядок перетвориться на тег <h2> . Хіба це не чудово?

    Зі списком усіх підтримуваних синтаксисів Markdown можна ознайомитися на нашій сторінці документації: http://pagebuildersandwich.helpscoutdocs.com/article/4-how-to-use-markdown

    Ви також можете випробувати це в живому демо

    Кілька класних інструментів та функцій форматування

    Також варто зазначити, що тепер у вашому розпорядженні є кілька нових інструментів:

    • Інструмент «Кнопка» – тепер ви можете створювати кнопки без шорткодів! Раніше ви були обмежені лише створенням посилань, але більше ні! Чудово те, що ви можете безпосередньо редагувати напис і кольори кнопки без жодних надокучливих спливаючих вікон.
    • Інструмент «Код» – розробники, радійте: тепер ви можете оформлювати інлайн-текст як code.
    • Інструмент «Горизонтальна лінія» – чудово підходить для розділення вашого контенту. Для цього також є синтаксис Markdown: просто введіть одне або кілька тире в рядку, і вони перетворяться на горизонтальну лінію.

    Крім того, з’явилися нові зручні функції:

    • Щоразу, коли ви вставляєте посилання, воно автоматично перетворюється на тег посилання (якщо тільки це не URL-адреса для вбудовування, наприклад відео з YouTube, тоді вміст буде вбудовано).
    • Перетягування зображення з Finder або Провідника безпосередньо у вікно завантажує ваше зображення в Медіабібліотеку. Це неймовірно економить час.

  • Оновлення про хід розробки версії 2.2

    Version-2-2-Progress-UpdateМинулого тижня ми випустили версію 2.1, яка виправила багато помилок і додала діалогове вікно редактора посилань WordPress до Page Builder Sandwich.

    Тепер ми реалізували дві найпопулярніші функції в Page Builder Sandwich:

    1. Більш раціональний, чистіший, простіший та оновлений інтерфейс користувача.
    2. Можливість додавати/редагувати власні класи CSS та ID для елементів, рядків і стовпців.

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

    Я був здивований тим, скільки було запитів щодо можливості редагування власних класів та ID для окремих елементів. Особисто я, коли користуюсь конструкторами сторінок, рідко використовую ці інструменти, але це лише я. Складність додавання власних класів та ID полягає в тому, що воно має зберігати філософію Page Builder Sandwich, де все завжди має бути максимально простим та інтуїтивно зрозумілим. Тож у версії 2.2, коли ви вибираєте будь-який елемент на сторінці, ви маєте побачити область властивостей в інспекторі, де можна додавати або змінювати власні класи CSS та ID. Це також працює для рядків і стовпців, тож ви можете повністю налаштувати їх відповідно до будь-яких своїх потреб.

    Дякуємо всім за підтримку розробки Page Builder Sandwich! Слідкуйте за новими майбутніми оновленнями ?

  • Вбудовування відео, аудіо та іншого вмісту тепер підтримується

    Embedding-Video-Audio-and-Other-Content-Now-SupportedЗ Новим роком усіх!

    Я радий повідомити вам, що починаючи з версії 2.3, oEmbed тепер доступні у Page Builder Sandwich! Тепер ви можете вбудовувати відео, зображення, треди та багато іншого вмісту з YouTube, Vimeo, Twitter, Flickr, Instagram тощо.

    oEmbed

    Досі не було можливості додавати відео чи будь-який інший тип вмісту для вбудовування (окрім шорткодів) у фронтенді. Я радий повідомити, що oEmbed тепер підтримуються повністю. Просто вставте URL-адресу oEmbed у будь-якому місці та натисніть Enter, після чого вміст буде вбудовано.

    oembed_cast
    Вставка URL-адреси в окремому рядку перетворює її на вбудований вміст.

    Які URL-адреси підтримуються? Будь-які з URL-адрес для вбудовування, які підтримує WordPress! Крім того, якщо у вас є плагін, який додає провайдерів oEmbed (наприклад, Jetpack від WordPress.com), вони також будуть підтримуватися.

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

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

    Інші покращення та виправлення помилок

    • Кнопки інструментів типу вмісту (p, h2, h3 тощо) тепер підсвічуватимуться залежно від вибраного.
    • Висота рядка тепер застосовується до всього елемента замість менших елементів span.
    • Виправлено: елементи іноді отримують непотрібні інлайн-стилі
    • Виправлено: інспектор міг ховатися за панель адміністрування та ставати недоступним для перетягування
    • Виправлено: покращено обробку станів кнопок
    • Виправлено: форматування/зняття форматування видаляє текст посилання
    • Виправлено: неможливість форматувати вміст, що містить теги strong, em, i, b
    • Виправлено: деякі інструменти форматування не можна було використовувати всередині колонок і таблиць

  • Як додавати та вбудовувати відео, зображення, твіти та інший контент на свій сайт

    How-to-Add-and-Embed-Videos-Images-Tweets-and-Other-Content-in-Your-SiteThere may be times where you want to add supporting videos from YouTube or Vimeo into your site. Or maybe you want to add Tweets from Twitter, or content from other websites like Flickr and Instagram. You can embed these content easily in your WordPress site.

    To do this, all you need to do is find the permalink for the content. In some sites like YouTube, the permalink is simply the current URL. For other sites like Reddit or Vimeo, you’ll have to find the “permalink”, “share” or “embed” button to get the URL. In some sites like Facebook, you’ll have to click the date of the status or post in order to get the permalink.

    Постійні посилання бувають різних видів і форм, але зазвичай вони виглядають так, як показано нижче. Це посилання з YouTube:

    https://www.youtube.com/watch?v=dQw4w9WgXcQ​

    Ви можете вставити ці URL-адреси в редактор вмісту, щоб вбудувати вміст. Якщо його можна вбудувати, ви побачите, що URL-адреса перетвориться на саме відео або вміст. Якщо ні, це означає, що ви не можете вставити вміст із цього сайту.

    Які сайти я можу вбудувати на свій сайт?

    Not all sites can be embedded into your WordPress site. The WordPress Codex has a list of sites which you can embed: https://codex.wordpress.org/Embeds

    Встановлення плагінів може додати більше сайтів для вбудовування

    If the content you want to embed isn’t in the list in the WordPress Codex, there is another way. Installing plugins can add more embeddable sites. For example, installing Jetpack allows you to embed wall posts from Facebook.

    There are plenty more out there that add more sites, do a search for “oEmbed provider” in the WordPress.org plugin repository to find more. Here’s a link to the plugin repo for your convenience: https://wordpress.org/plugins/search.php?type=term&q=oembed+provider

    Інший спосіб додати вміст — коди вбудовування Iframe

    Якщо вставлення лише URL-адреси не працює, існує ще один спосіб вбудувати вміст. Спробуйте перевірити параметри поширення на сайті, який ви хочете додати: окрім постійного посилання, вам також можуть надати невеликий фрагмент «коду для вбудовування». Коди вбудовування виглядають так:

    <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>​

    Copy that then in your WordPress content editor, click on the text tab on the top of the editor and paste that in. After you’ve pasted that in, head back to the visual tab, you’ll see if it works when the embed code now looks like the actual content that will get embedded. You can’t do this in the visual tab, pasting it from there would just show the pasted code in your site, it won’t get converted into the content.

    Використовуйте Page Builder Sandwich, щоб додавати вміст з інших сайтів прямо з фронтенду

    While adding content from other sites seem easy, doing things in the administration side of WordPress is a bit of a hassle. You have to know whether to add it in the visual tab or text tab, and you’ll have to preview your page or post in order to see how it would look like when viewed by your site’s visitors.

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

    З Page Builder Sandwich просто вставте постійне посилання або iframe-код для вбудовування будь-де на видимій частині вашого сайту, і його буде відразу перетворено на вбудований вміст — більше не потрібно знати, у яку вкладку потрібно вставляти матеріали.

    Отримайте Page Builder Sandwich просто зараз.