Autor: Neil Lock

  • 4 błędy w projektowaniu stron internetowych, których musisz unikać w 2018 roku

    If there’s one thing you need to remember when building a website, it’s to never take good design for granted.

    As we’ve mentioned in a previous article, a site visitor’s first impression on your website can make or break you in just a matter of seconds.

    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.

    Mając to na uwadze, pamiętaj o tych 4 częstych błędach w projektowaniu stron internetowych. Dzięki temu będziesz mieć o jedno zmartwienie mniej, gdy w końcu zaczniesz tworzyć swoją witrynę.

    Błąd #1: Używanie więcej niż 3 fontów

    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.

    Ograniczenie fontów na stronie do maksymalnie 3 to powszechna praktyka projektowa stosowana przez profesjonalistów. Ponadto zwiększa czytelność i spójność Twojej witryny, które są kluczowe dla sukcesu w budowaniu ruchu na stronie.

    DON’T DO THIS:

    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.

    Mistake #2: Failing to Use White Space

    White space is one of the most important aspects of web design. But what is it?

    Put simply, white space is literally the empty space between elements in a composition.

    In other words, it’s negative space. This pertains to anything on your website that isn’t filled with text, photos, or other design elements.

    Now, the problem arises when website owners want to fill all 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.

    Sprawdź dwa poniższe przykłady, aby zobaczyć, co mamy na myśli.

    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.

    Projekt jest intuicyjny i ma logiczny układ: Po pierwsze, organizacja przedstawia się i zaznajamia odbiorców z podstawami; czym się zajmuje i co robi. Po drugie, dodaje wiarygodne dane liczbowe, aby zbudować zaufanie. Na koniec witryna podaje odbiorcom numery kontaktowe oraz listę wydarzeń, zachęcając ich do działania.

    Mistake #4: Trying to Fit in Every Bit of Information Onto Your Website

    Wstawianie bloków niepotrzebnego tekstu w miejscach, gdzie powinna być pusta przestrzeń, może odstraszyć Twoich odbiorców. Pamiętaj, aby zachować tylko najważniejsze szczegóły.

    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 visitors absolutely need to know.

    Conclusion

    Website design is important, and can be a huge deciding factor in whether or not you gain site traffic.

    Pamiętaj, aby nie brać tego za pewnik. Zawsze przeznacz czas na rozeznanie i czytaj artykuły o projektowaniu, które poprowadzą Cię po drodze. Zanim się obejrzysz, zauważysz, że ruch na Twojej stronie rośnie. ? Powodzenia!

    Design in less time!

    Check out how much faster Page Builder Sandwich let you design your web pages.

    Try Live Preview

    This week’s useful resource:

    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.

    Sprawdź ten świetny przewodnik po kolorach od Canva przy swoim kolejnym projekcie.

    Canva Design Wiki

    Uwolnij swoją kreatywność.

    Sprawdź przewodnik po kolorach Canva

  • Wersja 3.0: Nowe spojrzenie na to, jak powinien działać kreator stron

    version-3-0-rethinking-how-a-page-builder-should-workMinęło 10 miesięcy, odkąd udostępniliśmy Page Builder Sandwich publicznie. Mamy teraz około 6 000 aktywnych instalacji i jest to dla nas spore osiągnięcie. Otrzymaliśmy dzięki temu mnóstwo opinii, zarówno dobrych, jak i złych. Wszyscy są jednak zgodni co do tego, że ludzie uwielbiają to, jak łatwo buduje się układy i tworzy treści w porównaniu z innymi dostępnymi kreatorami stron.

    Duża część otrzymanych przez nas opinii dotyczyła próśb o nowe funkcje i w ciągu ostatnich kilku miesięcy dodaliśmy wiele z nich. Jednak w miarę jak to robiliśmy, zaczęliśmy powoli zmieniać także interfejs użytkownika. W konsekwencji zmienialiśmy również doświadczenie użytkownika… na gorsze. Doszło do punktu, w którym musieliśmy przemyśleć interfejs na nowo, ponieważ po prostu nie działał już płynnie, a różne funkcje ze sobą nie współgrały.

    Niefunkcjonujący już interfejs

    W poprzednich wersjach PBS chcieliśmy, aby wszystko miało formę przycisków. Dlaczego? Ponieważ przyciski są łatwe w użyciu. Po prostu… w nie klikasz. W starszych wersjach inspektora (pasek boczny na powyższym obrazku) kliknięcie przycisku zwiększało wartość, a kliknięcie z wciśniętym klawiszem Shift ją zmniejszało. Brzmi to całkiem prosto. Jednak wraz z dodaniem karuzel, zakładek, map oraz innych nowych elementów i funkcji, wszystkie te przyciski stały się mieszanką różnych ikon o odmiennych stylach i zaczęły wyglądać bardziej jak hieroglify niż fajny interfejs. Nie stanowiło to problemu dla doświadczonych użytkowników, ale wyglądało dość onieśmielająco, jeśli PBS był dla kogoś nowością.

    Kolejną kwestią było kilka problemów pojawiających się w inspektorze. Pierwotnym pomysłem było uczynienie wszystkiego prostym i dostępnym wewnątrz inspektora. A pod pojęciem „wszystko” miałem na myśli wszystko – od zamiany tekstu w nagłówki, po zmianę kolorów tła, kolorów czcionek i tak dalej. Jednak w swoim obecnym stanie inspektor zawiera teraz mnóstwo opcji, które zmuszają do ciągłego przewijania w górę i w dół kółkiem myszy. Dość mocno odbiega to od inspektora, jakiego wcześniej chciałem stworzyć dla użytkowników.

    Na koniec – niedawno wprowadziliśmy mapowanie shortcode’ów dla Twoich ulubionych wtyczek. Ta funkcja wymagała od nas utworzenia pól tekstowych, suwaków numerycznych, pól wyboru oraz dodatkowych nowych typów opcji potrzebnych do tego, aby edycja shortcode’ów była przyjemniejsza. Początkowo był to dobry pomysł i tak, ułatwił manipulowanie shortcode’ami. Ale znowu, funkcja ta odbiegała od naszego interfejsu opartego „wyłącznie na przyciskach”. Z perspektywy czasu używanie tylko przycisków do zmiany atrybutów shortcode’ów było naprawdę niemożliwe. Teraz, w najnowszej wersji, skończyliśmy z dwoma rodzajami kontrolek: przyciskami i polami shortcode’ów.

    Istnieje jeszcze kilka innych powodów, które skłoniły nas do uznania, że nasz interfejs nie jest już efektywny (lub dopasowany do naszych potrzeb), ale powyższe punkty są najważniejsze. Jedno było jednak zawsze pewne: wiedzieliśmy, że musimy zaktualizować interfejs.

    Definiowanie tego, jak idealnie powinien działać kreator stron

    Zamiast od razu rzucać się w wir pracy i zmieniać wszystko na bieżąco, zrobiliśmy sto kroków wstecz, aby spojrzeć na całe doświadczenie korzystania z kreatora stron. Chcieliśmy tchnąć w ten interfejs nowe życie. Szczerze mówiąc, nie chcieliśmy przebudowywać go rok po roku. To wyczerpujące i z pewnością nie przynosi znaczącej pomocy społeczności WordPressa. Tym razem postanowiliśmy zrobić wszystko powoli i ostrożnie. Zbadaliśmy każdy zakamarek Page Builder Sandwich i to, co czyni go dobrym kreatorem stron, i w końcu ujęliśmy całe doświadczenie edycji w kilku kluczowych koncepcjach.

    Kluczowa koncepcja #1: Pisanie bezpośrednio w treści w celu edycji elementów

    Jednym z głównych powodów instalowania kreatora stron jest chęć uwolnienia się od ograniczeń edytora tekstowego w panelu administracyjnym WordPressa. Nie chodzi o to, że edytor w panelu jest zły, ale podczas tworzenia stron internetowych nie pokazuje od razu, jak Twoja strona będzie wyglądać dla odwiedzających, ani nie pozwala na rozmieszczenie treści poza układem jednokolumnowym. Widać tam tylko tekst i niektóre obrazy, ale żadnych bardziej złożonych elementów (np. formularzy kontaktowych). Można dodawać shortcode’y, tak, ale nie wyświetlą się one w swojej wyrenderowanej formie*.

    * Istnieją wtyczki tworzone przez innych, aby rozwiązać ten problem, takie jak Shortcake UI, ale nie o to w tym chodzi.

    I tu właśnie wkraczają kreatory stron typu front-end. Przenoszą one doświadczenie edycji z panelu administracyjnego na stronę wizualną, dzięki czemu edytujesz swoją witrynę dokładnie tak, jak zobaczą ją Twoi goście. Jak ująłby to Pippin: To, co widzisz, jest tym, co otrzymujesz (WYSIWYG).

    Kolejną zaletą edytora front-end jest to, że pozwala edytować tekst bezpośrednio. Wpisywanie nagłówków i akapitów daje łatwość korzystania ze zwykłego edytora tekstu podczas tworzenia stron internetowych. Przyciski i etykiety zakładek również powinny być modyfikowalne przez proste kliknięcie na nie i wpisanie tekstu.

    Jest to obszar, w którym większość innych kreatorów stron radzi sobie słabo. Większość z nich zmusza do wpisywania tekstu w polu tekstowym, aby cokolwiek edytować. Powtórzmy: nie tak powinno to wyglądać w prawdziwych kreatorach front-endowych. Pisanie i edycja tekstu bezpośrednio na stronie były mocną stroną Page Builder Sandwich od wersji 2 i zadbaliśmy o to, aby zostało to zachowane w wersji 3.

    Kluczowa koncepcja #2: Wykorzystanie myszy do szybkich poprawek

    Mysz to potężne narzędzie, które w kreatorach stron jest często zaniedbywane. Bardzo często kreatory stron używają jej po prostu do przeciągania elementów i upuszczania ich w różnych miejscach lub do klikania przycisków czy pól wejściowych. Choć to w porządku, mysz daje znacznie więcej możliwości w zakresie budowania stron.

    Po pierwsze, użycie myszy jako narzędzia do edycji strony zapewnia fantastyczną wizualną informację zwrotną, zwłaszcza przy dostosowywaniu właściwości wizualnych, takich jak marginesy, dopełnienia (padding) i rozmiary. Teraz modyfikowanie elementów staje się naturalnym doświadczeniem.

    W PBS w wersji 3 będzie można dostosować za pomocą myszy wiele rzeczy. Możesz regulować marginesy/odstępy między poszczególnymi elementami, dopełnienia wewnątrz kolumn, a także rozmiary obrazów, ikon i map. Zastąpiliśmy również suwakami te przyciski, które pozwalały zmieniać wartości liczbowe.

    Kluczowa koncepcja #3: Tekst powinien być łatwy w stylowaniu

    Jeśli cofniesz się o krok od monitora, zauważysz, że większość tego, co dodajesz na swoich stronach internetowych, to treść tekstowa. Tak, mamy tam obrazy i ikony, które jej towarzyszą – a ostatnio mamy tendencję do dodawania na naszych stronach większych obrazów. Jednak większość ważnych treści to wyłącznie tekst: nagłówki, listy punktowane, akapity, cytaty itp. Wraz z nim pojawia się kwestia stylowania tekstu, tak aby pasował do naszych projektów. Zmieniamy jego rozmiary i kolory, pogrubiamy go lub stosujemy kursywę. Wszystko po to, aby nasze treści były bardziej czytelne, trafne i atrakcyjne dla naszych odbiorców.

    Ponieważ często stylujemy tekst, przyciski umożliwiające zmianę stylów powinny być łatwo dostępne. Nie powinny być schowane w wyskakującym okienku, które najpierw trzeba otworzyć. Na tę przypadłość cierpi większość kreatorów stron. Aby ich interfejs użytkownika można było nazwać „przejrzystym”, nawet najczęściej używane opcje są ukrywane przed wzrokiem.

    Aby to rozwiązać, przyjrzeliśmy się najczęściej używanym procesorom tekstu. Zauważyliśmy, że zwykle mają one w pobliżu górnej krawędzi ekranu pasek z mnóstwem przycisków służących do formatowania tekstu, i skopiowaliśmy ten sam układ w wersji 3. Mamy teraz rząd wszystkich przycisków stylizowania tekstu, który jest zawsze obecny na górze ekranu. Dzięki temu stylowanie staje się naprawdę szybkie i intuicyjne podczas edycji tekstu.

    Kluczowa koncepcja #4: Zaawansowane opcje stylowania powinny być elastyczne, a zarazem łatwe do zrozumienia

    Najważniejsze w kreatorze stron jest to, aby pozwalał ludziom łatwo tworzyć oszałamiające projekty. Oznacza to, że powinniśmy zapewniać wiele różnych ustawień i opcji bez konieczności pokonywania trudnej krzywej uczenia się. Możliwość dostosowywania marginesów, dopełnień i stylowania tekstu jest świetna, ale to za mało. Do wykonania zadania potrzebne są znacznie bardziej zaawansowane opcje, takie jak obrazy tła, desenie, obramowania, nieruchome tła i wiele innych. Nagromadzenie tych wszystkich różnych ustawień może być nieco przytłaczające, dlatego w wersji 3 uprościliśmy niektóre z nich i uporządkowaliśmy je w kategorie, aby wszystko było bardziej przyjazne.

    Kluczowa koncepcja #5: Obsługa shortcode’ów

    Na koniec nie zapominajmy, że nasz kreator stron opiera się na WordPressie. Powinniśmy korzystać z możliwości tej platformy i jej funkcji, a nie ograniczać je czy od nich odchodzić. Jedną z wielkich funkcji oferowanych przez WordPress są shortcode’y. Nie oznacza to, że cała treść powinna składać się z shortcode’ów – byłoby to chaotyczne – ale powinniśmy po prostu być z nimi zgodni. Wiele wtyczek i motywów korzysta z shortcode’ów i byłoby ogromną stratą, gdybyśmy je wszystkie zignorowali. W rzeczywistości shortcode’y dają użytkownikom maksymalną elastyczność podczas tworzenia stron.

    Kilka tygodni temu wprowadziliśmy nasz system mapowania shortcode’ów i dzięki niemu zmapowaliśmy setki shortcode’ów z setek wtyczek. Nadaliśmy priorytet najpopularniejszym wtyczkom znajdującym się w katalogu wtyczek WordPressa, więc istnieje duża szansa, że spotkasz je na własnych stronach. Zostało to dodatkowo wzmocnione w wersji 3 i będziemy nadal rozwijać ten aspekt w przyszłości.

    Podsumowanie

    Wzięliśmy wszystkie te kluczowe właściwości i wdrożyliśmy je w Page Builder Sandwich w wersji 3. To najlepszy kreator stron, jaki do tej pory stworzyliśmy dla WordPressa. Jest bardziej intuicyjny i naturalny w użyciu, działa szybciej, jest łatwiejszy w obsłudze i bardziej przyjazny niż kiedykolwiek.

    Jeśli masz jakieś przemyślenia na temat kluczowych funkcji kreatora stron, daj nam znać, zostawiając komentarz poniżej.

  • #PBSUpdate: 200% wzrostu wydajności i nowe elementy

    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

    Tym, co skłoniło nas do tej zmiany, był artykuł o oczekiwaniach wobec kreatorów stron z CodeInWP. Zawierał on krótką listę ich faworytów, oceniając każdego z nich pod kątem określonych kryteriów. Chociaż Page Builder Sandwich nie znalazł się na samej liście, wspomniano o nas krótko w artykule:

    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.

    Przeczytanie tego zmotywowało nasz zespół do dalszego ulepszania PBS. Biorąc pod uwagę, że nie znaleźliśmy się na liście, byliśmy również ciekawi, jakie dokładnie były nasze niedociągnięcia. Niedługo później skontaktowaliśmy się z CodeInWP z prośbą o krótką recenzję PBS, a autorka gościnna Ann Taylor udzieliła nam bardzo konstruktywnej i pomocnej odpowiedzi:

    “…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…”

    Ta wspaniała opinia skłoniła nas do dokładniejszego zbadania szybkości i wydajności PBS. Przetestowaliśmy wiele różnych scenariuszy i znaleźliśmy ogromne wąskie gardła w zakresie prędkości działania. Główną przyczyną problemów z wydajnością były różnorodne obliczenia wykonywane przez wtyczkę w celu wyświetlania obrysów, pasków narzędzi i innych wizualnych wskazówek edycyjnych. Poniżej znajduje się wykres wydajności PBS w wersji 4.1 w Chrome:

    Here are the important points of the graph in a nutshell:

    • Wysokie fioletowe obszary są złe
    • Szerokie fioletowe obszary są jeszcze gorsze
    • Znacznie przyspieszyliśmy działanie i teraz nasz wykres dla wersji 4.2 wygląda tak:

    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

    To, co najbardziej lubimy w tych 4 nowych elementach, to możliwość szybkiego i sprawnego tworzenia całych sekcji strony internetowej, bez konieczności przeciągania elementów na obszar roboczy PBS pojedynczo. Dajemy Ci również możliwość wyboru spośród różnych stylów, dzięki czemu masz więcej swobody w dostosowywaniu tych trzech nowych elementów do swoich potrzeb projektowych.

    Spacer Element

    Dostosowanie marginesów elementów, aby uzyskać potrzebną przestrzeń, jest proste. Element odstępu może być użyty jako alternatywa. Jest to szczególnie przydatne, jeśli chcesz, aby niektóre wiersze nie zmniejszały się zbytnio na ekranach urządzeń mobilnych.

    Featurette Element

    Element featurette może być używany do szybszego tworzenia sekcji strony. Sekcje te mogą zawierać nagłówki hero, opinie w formie karuzeli i inne elementy, których możesz użyć, aby zwiększyć funkcjonalność swojej strony.

    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

    Element członka zespołu jest idealny do zaprezentowania członków Twojego zespołu odwiedzającym witrynę. Zazwyczaj taka sekcja zawiera zdjęcie członka zespołu oraz krótki opis na dole.

    Gallery Element

    Ten element służy do tworzenia galerii zdjęć. Wcześniej, aby stworzyć galerię, trzeba było przeciągać pojedyncze elementy (takie jak przyciski, ramki itp.) na obszar roboczy PBS jeden po drugim. Ten nowy element robi to jednak za Ciebie, dzięki czemu cały proces staje się bezproblemowy.

    A Huge Thank You

    Wersja 4.2 to jedna z naszych najważniejszych dotychczasowych aktualizacji. W końcu wydajność i funkcjonalność są kluczowe dla każdej świetnej wtyczki. Chcielibyśmy podziękować @Ann Taylor i CodeInWP za przekazanie konstruktywnej opinii i życzenie nam powodzenia na naszej drodze. A wszystkim użytkownikom PBS również ogromnie dziękujemy za nieustające wsparcie.

    Wkrótce udostępnimy jeszcze więcej aktualizacji (w tym m.in. obiecaną funkcję Google Fonts), więc wypatrujcie nowości!

    Do tego czasu udanego tworzenia stron życzy zespół PBS!

  • Świętujemy pierwsze urodziny Page Builder Sandwich z przytupem!

    pbs-v4-ad-3 Tak, to prawda: Page Builder Sandwich obchodzi swoje pierwsze urodziny 14 stycznia 2017 roku. Wraz z naszą trwającą Wyprzedażą Świąteczną (30% zniżki przez ograniczony czas, kod promocyjny nie jest potrzebny), PBS przygotował dla Was kilka niespodzianek, a zespół nie może się doczekać, aby się nimi podzielić.

    Przez ostatni rok bardzo się rozwinęliśmy dzięki wsparciu wspaniałych znajomych, kilku bardzo pomocnym recenzjom oraz naszym nowo poznanym przyjaciołom ze społeczności PBS na Slacku. Nie moglibyśmy zapomnieć o Was – samych użytkownikach PBS, którzy pomogliście nam osiągnąć ten kamień milowy. Aby to uczcić, pomyśleliśmy: jaki jest lepszy sposób na zapewnienie Wam jeszcze lepszych wrażeń niż wydanie PBS w wersji 4.0? Czas na konfetti.

    Jeśli to przegapiliście, obecna wersja, Wersja 3.0, przeszła poważne zmiany i ulepszenia. Obejmuje to czystszy, płynniejszy i bardziej przyjazny dla użytkownika interfejs, a także lepszą responsywność. Jednak w wersji 4.0 dorzucimy jeszcze lepsze rzeczy! Przygotujcie się więc, ponieważ wraz z nadchodzącym styczniowym wydaniem wszystko stanie się o wiele bardziej przyjemne, świąteczne i funkcjonalne.

    Funkcja pełnostronicowych szablonów

    Pierwszą na naszej liście głównych funkcji są zupełnie nowe szablony całych stron. Choć PBS jest powszechnie używany do budowania najróżniejszych stron, wzięliśmy pod uwagę fakt, że nasi użytkownicy prowadzą swoje witryny w różnych niszach (a co za tym idzie, tworzą różne typy stron). W końcu różni użytkownicy mają różne potrzeby, czy to w celach biznesowych, czy osobistych. Dlatego postanowiliśmy wyjść temu naprzeciw dzięki nadchodzącej funkcji szablonów całych stron.

    pbs-v4-ag-2 Jak więc działają te szablony całych stron? To proste. W wersji 4.0 udostępnimy zestaw niesamowitych szablonów. Zostaną one podzielone na różne kategorie; każda zaprojektowana dla konkretnej niszy. Szablony będą zawierać elementy, układy i funkcje dla stron firmowych, portfolio, sklepów internetowych czy po prostu zwykłych blogów osobistych (między innymi), aby idealnie pasowały do każdej witryny, jakiej potrzebujesz.

    Przykładowo, jeśli prowadzisz restaurację i potrzebujesz strony lub witryny dopasowanej do tego rodzaju działalności, możesz po prostu wybrać szablon restauracji. A ponieważ PBS pozwala na elastyczne dostosowywanie, nadal będziesz mieć możliwość stylizowania jej według własnego uznania. Ponieważ wybrany szablon (w tym przypadku restauracji) będzie zawierał funkcje stworzone specjalnie z myślą o stronie o profilu gastronomicznym, zaoferuje on również elementy PBS odpowiadające potrzebom takiego serwisu: takie jak cała sekcja menu, funkcja dostawy, przyciski mediów społecznościowych i wiele więcej. Teraz wyobraź sobie coś takiego dla swojej niszy – niezależnie od tego, czy prowadzisz biuro korporacyjne, firmę jednoosobową, czy po prostu potrzebujesz portfolio – nie martw się. W wersji 4.0 wydamy szablony również dla nich. Bez wątpienia przydadzą się podczas Twojego kolejnego projektu tworzenia strony!

    Więcej elementów, więcej opcji

    Wraz z nowymi szablonami całych stron przygotowaliśmy także mnóstwo innych nowości! Jak zawsze powtarzamy, PBS istnieje, ponieważ wierzymy, że tworzenie niesamowitych, zachwycających rzeczy nie musi być tak trudne, jak wszyscy twierdzą. Mając to na uwadze, zachęcamy do zapoznania się z naszymi pozostałymi nadchodzącymi funkcjami, aby na własne oczy przekonać się, jak schludne i wspaniałe strony oraz serwisy będzie można tworzyć za pomocą PBS!

    Tła z efektem paralaksy

    Przewijanie z efektem paralaksy to technika służąca do tworzenia unikalnego, trójwymiarowego efektu tła w przeglądarce. Znakomicie przyciąga wzrok na każdej stronie internetowej, a odpowiednio zastosowana z pewnością może zwiększyć grono odbiorców. Wciąż nie jesteś przekonany? Sprawdź tę świetną stronę gry FireWatch, która perfekcyjnie wykorzystuje efekt paralaksy.

    Tła wideo

    Tła wideo to również popularny efekt stosowany na stronach internetowych, szczególnie na stronach głównych, stronach docelowych (landing page) oraz w sekcjach typu hero. Robią równie oszałamiające wrażenie i nie bez powodu cieszą się tak dużą popularnością – uwierzcie nam! Dzięki najnowszej aktualizacji PBS Ty również zyskasz możliwość przetestowania teł wideo. Śmiało używaj ich, aby przyciągnąć odbiorców i zdobyć więcej odwiedzin witryny!

    Odliczanie do daty

    W wersji 4.0 udostępnimy również zupełnie nowy licznik odliczający do danej daty. Będzie on zawierał podstawowe funkcje, takie jak ustawienie dokładnej daty i godziny, do której następuje odliczanie, a także nieodłączne, elastyczne opcje personalizacji, które z pewnością przypadną Ci do gustu.

    Ikony społecznościowe

    Chcesz zachęcić odbiorców do dzielenia się informacjami o Twoich wpisach w mediach społecznościowych? Bez obaw, PBS Ci w tym pomoże! Dzięki nowym ikonom społecznościowym czytelnicy będą mogli udostępniać Twoją witrynę i treści za pomocą jednego kliknięcia.

    Mamy jednak w zanadrzu o wiele więcej! W tym:

    • Możliwość dodawania wpisów do swoich treści
    • Paski postępu
    • Liczniki liczb (count up)
    • Elementy dla WooCommerce, Advanced Custom Fields (ACF), Contact Form 7
    • Referencje / Opinie
    • Tabele cenników
    • Wezwania do działania (Click to action)
    • Boksy ze zdjęciem
    • Boksy z ikoną
    • Darmowe wyszukiwanie i pobieranie obrazów
    • Możliwość dodania niestandardowego kodu CSS
    • …i wiele więcej!

    Responsywność

    I wreszcie, oprócz tych wszystkich świetnych nowych funkcji, PBS będzie mógł pochwalić się jeszcze lepszą responsywnością.

    pbs-v4-ag-1 W przeszłości przeglądanie i edycja strony PBS na urządzeniach mobilnych nie należały do najłatwiejszych – rozmiary czcionek się nie zgadzały, obrazy traciły proporcje. Krótko mówiąc, wiedzieliśmy, że musimy popracować nad mobilnym interfejsem PBS, i dokładnie to zrobiliśmy. Dopracowaliśmy tę funkcję i dostosowaliśmy ją tak, aby interfejs był nie tylko ładniejszy, ale także płynniejszy i bardziej dostępny. Teraz będziesz mieć możliwość przeglądania i edytowania swojej witryny na telefonie bez żadnych problemów. Twoje oczy z pewnością Ci podziękują, a Twoi odbiorcy również.

    Płynniej, lepiej, jeszcze wspanialej.

    Podsumowując, jesteśmy niezmiernie wdzięczni za całe Wasze wsparcie i lojalność wobec PBS. Mamy nadzieję, że jesteście tak samo podekscytowani jak my, ponieważ przed nami wszystkimi wspaniała przygoda!

    Czy te nadchodzące aktualizacje spełniają Wasze oczekiwania? Czy jest coś jeszcze, co chcielibyście zasugerować do wersji v4? Zostawcie komentarz poniżej, a zobaczymy, co da się zrobić!

    Aby być na bieżąco z kolejnymi aktualizacjami v4 (i innymi fantastycznymi rzeczami), zapiszcie się do naszego newslettera poniżej, klikając przycisk „Subskrybuj”! Bez obaw – w każdej chwili możecie zrezygnować z subskrypcji.

    Mamy nadzieję, że spędziliście wspaniały okres świąteczny,

    Zespół PBS

    Udanego tworzenia stron!

  • Jak samodzielnie dostosować wstępnie zaprojektowane sekcje Page Builder Sandwich

    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 maximize these 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 by you.

    Jeśli na przykład nie odpowiada Ci domyślny niebiesko-zielony odcień i obraz pola pszenicy w poniższej domyślnej gotowej sekcji…

    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 the button style, margin, padding, and font:

    …You can.

    Dla porównania:

    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

    Default Pre-Designed Section from Sandwich

    The same Pre-Designed Section, customized

    You can do it with our Full-Page Templates, too:

    Default Template from Sandwich

    The same Template, customized

    Conclusion

    Gotowe sekcje Page Builder Sandwich kryją w sobie więcej, niż myślisz.

    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.

    Pamiętaj, że Page Builder Sandwich jest po to, aby pomóc Ci projektować w krótszym czasie. Pełne wykorzystanie naszych gotowych sekcji i szablonów całych stron pomoże Ci właśnie to osiągnąć.

    Design in less time!

    Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.

    Try Live Preview
  • 10 sposobów, dzięki którym Twoja witryna może przodować w generowaniu leadów i jak PBS może Ci w tym pomóc

    Page Builder Sandwich helps you, well… build websites.

    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.

    W każdym razie warto wiedzieć, że za generowaniem leadów kryje się cała nauka. Choć sami nie jesteśmy marketerami cyfrowymi, należy podkreślić, że skuteczna konwersja leadów wiąże się również z właściwym wykonaniem projektu i treści. I tu właśnie wkraczamy my.

    „Ale jak wy możecie pomóc w aspekcie marketingowym tego wszystkiego?”

    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 that there could be lots of factors as to why your website isn’t generating the amount of leads you’d like. The first step is to identify 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.

    Innymi słowy, pierwsze wrażenie ma znaczenie.

    Podobnie jak kiepskie przesłuchania nie przynoszą aktorom głównych ról, czyjaś pierwsza wizyta na Twojej stronie może przesądzić o Twoim sukcesie lub porażce.

    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.

    Oto kilka stron internetowych, które mogą pomóc Ci na drodze do skutecznego pozyskiwania leadów:

    How PBS Can Help:

    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 by intuition (i.e. easy site-navigation and straightforward instructions), they’re more likely to stay glued on your site.

    Jeśli nawigacja po Twojej stronie okaże się frustrującym doświadczeniem, istnieje duże prawdopodobieństwo, że odwiedzający nie zostaną na niej wystarczająco długo, aby dowiedzieć się, co masz do powiedzenia i co masz im do zaoferowania.

    Straight North adds that getting 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 that bombarding 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 as second 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 our demo 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 a huge 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 that using 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.

    Oto kilka zasobów, które mogą pomóc Ci ulepszyć Twoje wezwania do działania (CTA):

    TIP #7: User-Friendly Forms

    Przesłanie swoich danych przez formularz na stronie to ostateczny wyznacznik udanej konwersji leada.

    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.

    How PBS Can Help:

    With PBS’ Shortcode Mapper feature, you can place awesome, reputable contact forms like Advanced Custom Fields (ACF) and Contact Form 7 on your site.

    TIP #8: Prominently Displayed Phone Numbers (or Contact Details)

    Contact number and social media buttons displayed prominently in PBS’ Restaurant Template

    Spójne, dobrze widoczne wyświetlanie numerów telefonów to konieczność, jeśli prowadzisz firmę oferującą wsparcie telefoniczne. Straight North dodaje, że inwestycja w numery bezpłatne może również przynieść znaczny wzrost konwersji.

    Jeśli jesteś firmą technologiczną, taką jak nasza, dobrym pomysłem jest również umieszczenie na stronie adresu e-mail (lub innych sposobów kontaktu dla odwiedzających).

    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.”

    Dotyczy to każdej strony internetowej, a nie tylko takiej, która próbuje konwertować leady. Dbanie o to, aby Twoja witryna była w doskonałym stanie, a klienci byli zawsze zadowoleni, pomoże Twojej firmie zajść naprawdę daleko.

    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 while only 23 percent of lead conversion rates come from 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.

    A jednym z największych błędów popełnianych podczas prób generowania leadów jest właśnie to: lekceważenie drobnych elementów składających się na stronę internetową (takich jak projekt, tekst i inne treści).

    Hopefully your website garners the success it very well deserves; it’s been built with PBS, after all. ?

    Życzymy powodzenia we wszystkich Twoich przedsięwzięciach i jak zawsze dziękujemy za korzystanie z Page Builder Sandwich!

    Udanego tworzenia stron!

  • AKTUALIZACJA PBS: Wersja 4.1 i użyteczność

    Po wydaniu wersji 4.0 w styczniu kontynuowaliśmy prace nad rozwojem PBS, wprowadzając zarówno poprawki, jak i ulepszenia. Z radością dzielimy się nimi z Wami, oto co przygotowaliśmy w aktualizacji do wersji 4.1.

    Ulepszenia paska formatowania

    Najnowsza aktualizacja 4.1 koncentruje się wokół paska formatowania tekstu. Oprócz rozwiązania wielu problemów z błędami, ulepszyliśmy także kilka elementów na pasku, co powinno sprawić, że korzystanie z PBS będzie płynniejsze i bardziej efektywne.

    Aktualizacje próbnika kolorów

    We wcześniejszych wersjach PBS próbnik kolorów miał pewne problemy, które stanowiły pewną niedogodność w procesie edycji, zwłaszcza jeśli chodzi o edycję tekstu i jego koloru. W wersji 4.1 rozwiązaliśmy ten problem i wprowadziliśmy nowe poprawki zapewniające bezproblemową edycję tekstu.

    • Więcej próbek kolorów ułatwiających wybór barwy
    • Próbnik kolorów wyświetla teraz przezroczystość
    • Poprawki błędów dotyczących edycji koloru tekstu

    Aktualizacje formatowania tekstu

    Wcześniej mieliśmy kilka przycisków, które trzeba było klikać wielokrotnie, aby zwiększyć wartość, a następnie przytrzymać CTRL/CMD i kliknąć, aby ją zmniejszyć. Początkowo sądziliśmy, że jest to intuicyjne, ale użytkownicy dali nam znać, że nie było to oczywiste. W tej aktualizacji naprawiliśmy te niespójności.

    • Wysokość linii (interlinia) jest teraz łatwiej dostępna: przeciągnij suwak, aby dostosować ją do pożądanego rozmiaru, lub po prostu wpisz wybrany rozmiar w wyznaczonym polu
    • Przycisk rozmiaru czcionki został podzielony na dwa przyciski: zmniejsz i zwiększ, co ułatwia korzystanie
    • Zwiększanie/zmniejszanie rozmiaru czcionki jest również łatwiej dostępne, teraz z jednostką px dla prostszej edycji. Poprzednio wyświetlała się jednostka „x”, która tak naprawdę nic nie znaczyła
    • Przyciski wyrównania do lewej/do środka/do prawej/wyjustowania są teraz zgrupowane, aby ograniczyć liczbę wyświetlanych przycisków
    • Przycisk „Wyczyść formatowanie” usuwa teraz także inne style (takie jak wysokość linii), czego wcześniej nie robił

    Ulepszenia linii poziomej

    Wcześniej linia pozioma stwarzała pewne problemy. W niektórych motywach linie poziome były tak małe, że trudno było w nie kliknąć. Aby to naprawić, usunęliśmy linię poziomą z paska formatowania i przekształciliśmy ją w osobny element. Ponadto możesz teraz także zmieniać kolory linii za pomocą próbnika kolorów.

    Przyszłe aktualizacje: Co czeka PBS?

    Jak wspomnieliśmy, wciąż pracujemy nad nowościami (i kolejnymi aktualizacjami). Oto krótka zapowiedź tego, co szykujemy dla Was w przyszłości:

    • Google Fonts (w końcu!)
    • Rozważamy pomysł, aby pasek formatowania tekstu był czymś więcej niż tylko miejscem do formatowania wyłącznie tekstu. Co jeśli przyciski zmieniałyby się w zależności od aktualnego kontekstu? Na przykład byłoby świetnie, gdyby przycisk wyrównania w pionie pojawiał się podczas edycji tekstu wewnątrz kolumny.

    Co chcielibyście zobaczyć w przyszłych aktualizacjach PBS?

    Zawsze chętnie ulepszamy PBS, więc jeśli macie jakieś sugestie, dajcie nam znać! Czy macie jakieś prośby o nowe funkcje, które chcielibyście dodać do naszej rosnącej listy? Cokolwiek innego, co Waszym zdaniem wymaga poprawy w obecnej wersji? Dajcie nam znać w komentarzach poniżej!

    Udanego tworzenia stron!

  • Gdzie sprawy stają się nieco techniczne: jak stworzyliśmy naszą wersję mapowania shortcode’ów

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2W poprzednim artykule omówiliśmy podstawy mapowania shortcode’ów oraz to, jak można skorzystać z jego wspaniałych zalet. Zdecydowaliśmy się podzielić artykuł przedstawiający wersję mapowania shortcode’ów w Page Builder Sandwich, ponieważ poniższy tekst może stać się nieco bardziej techniczny.

    Poniżej znajdują się bardziej szczegółowe opisy wewnętrznego działania naszej funkcji mapowania shortcode’ów oraz tego, jak udało nam się ją uruchomić.

    Zautomatyzowany proces

    Aby zdecydować, które wtyczki uwzględnić w mapperze shortcode’ów, stworzyliśmy automatyczny skrypt, który gromadzi najpopularniejsze wtyczki z katalogu wtyczek WordPress w oparciu o następujące kryteria:

    • Wśród 1000 popularnych, najwyżej ocenianych i aktualizowanych wtyczek, z co najmniej 4000 aktywnych instalacji,
    • Z co najmniej 4000 aktywnych instalacji,
    • Z co najmniej 20 ocenami oraz;
    • Ze średnią oceną co najmniej 3 gwiazdek

    Uruchamiamy to zapytanie codziennie w katalogu wtyczek WordPress. Filtry te zapewniają, że otrzymujemy listę dobrej jakości wtyczek, z których korzysta wielu użytkowników. W momencie pisania tego tekstu kryteria te spełniało 800 wtyczek. To naprawdę dużo. Naprawdę bardzo dużo.

    Some of the most popular plugins detected for shortcode mapping.
    Niektóre z najpopularniejszych wtyczek wykrytych do mapowania shortcode’ów.

    Następnie przeprowadzamy serię automatycznych testów kodu źródłowego każdej wtyczki, aby sprawdzić, czy zawiera jakiekolwiek shortcode’y, a następnie próbujemy odnaleźć wszystkie te shortcode’y wraz ze wszystkimi ich atrybutami. Przetworzenie danych dało w efekcie ponad 2000 shortcode’ów. Podwójne wow. Wykryte shortcode’y są następnie wprowadzane do bazy danych mapowania shortcode’ów w celu ręcznej weryfikacji.

    Pod koniec tego procesu otrzymujemy ogromną listę wtyczek oraz ich potencjalnych shortcode’ów. Teraz pozostaje kwestia uporządkowania tych danych, aby upewnić się, że wszystko jest poprawne.

    Ręczny proces

    To prawdopodobnie najtrudniejsza część całego systemu mapowania. Kod wtyczek przybiera różne formy i rozmiary, a nie wszystkie shortcode’y są automatycznie wykrywane przez nasze skrypty. Mimo że WordPress Codex zaleca używanie funkcji `shortcode_atts` do filtrowania atrybutów shortcode’a, jest to jedynie zalecenie i nie każdy się do niego stosuje. Nie ma też niezawodnego sposobu na sprawdzenie wnętrza shortcode’a po zainstalowaniu wtyczki.

    Aby więc upewnić się, że poprawnie pobieramy wszystkie shortcode’y i ich atrybuty, stworzyliśmy sekcję front-endową dedykowaną do edycji shortcode’ów oraz atrybutów, zbudowaną przy użyciu AngularJS i Bootstrapa.

    Bootstrap & AngularJS interface for fixing up all the mapped shortcodes.
    Interfejs Bootstrap & AngularJS do poprawiania wszystkich zmapowanych shortcode’ów.

    Musimy ręcznie przejrzeć każdą wtyczkę, sprawdzić jej dokumentację shortcode’ów i upewnić się, że wszystkie posiadane przez nas dane są poprawne.

    Chociaż jest to żmudne i uciążliwe, posiadanie zautomatyzowanego procesu ma swoje jasne strony:

    • Według naszych wczesnych statystyk tylko około 1 na 2 wtyczki posiada shortcode’y.
    • Połowa wykrytych shortcode’ów nie ma żadnych atrybutów (choć część z nich może być fałszywymi trafieniami)
    • Dzięki wybieraniu tylko wtyczek dobrej jakości, z dużym prawdopodobieństwem posiadają one dokumentację shortcode’ów

    Dopiero gdy wszystkie shortcode’y danej wtyczki zostaną sprawdzone, serwer rozpocznie dystrybucję mapowań shortcode’ów tej wtyczki do użytkowników.

    Wywołanie REST API

    Ostatnim elementem układanki jest sama wtyczka. Koncepcja jest prosta: ustalić, jakie wtyczki są aktywne, z jakiego motywu korzysta witryna i jakie shortcode’y są dostępne, a następnie zapytać bazę danych mapowania shortcode’ów, czy posiada dla nich mapowania. W tym celu stworzyliśmy niestandardowy punkt końcowy WP REST API, który wszyscy klienci odpytują, aby pobrać najnowsze mapowania shortcode’ów.

    Przyszłość: Crowdsourcing

    Ręczne sprawdzanie każdej wtyczki wymaga mnóstwa czasu i wysiłku. Gdy platforma mapowania shortcode’ów będzie stabilna, planujemy udostępnić mapowanie shortcode’ów dla każdego. Oznacza to, że każdy będzie mógł pomóc w dodawaniu shortcode’ów.

    Możesz pomyśleć: „dlaczego miałbym pomagać w mapowaniu shortcode’ów? Co z tego będę mieć?”. Otóż przychodzi na myśl kilka powodów, dla których warto pomóc:

    1. Jeśli stworzyłeś wtyczkę, a my jeszcze jej nie wychwyciliśmy ze względu na powyższe kryteria (i znajduje się ona w katalogu wtyczek WordPress), możesz samodzielnie dodać mapowania. Twoja wtyczka zyska pełne wsparcie w PBS!
    2. Ponieważ w procesie automatycznym zajmujemy się tylko wtyczkami z katalogu WordPress, twórcy wtyczek i motywów premium nie zostaną uwzględnieni. Jeśli więc taki posiadasz, możesz również dodać swoje mapowania shortcode’ów dla nich.
    3. A dla osób, które nie tworzą wtyczek – możemy nagrodzić tych, którzy pomagają. Aby mapowanie shortcode’ów było kuszącym przedsięwzięciem, możemy nagradzać chętnych pomocników licencją osobistą lub uaktualnieniem do licencji premium PBS!

    Zapisz się do naszego newslettera

    Funkcjonalność mapowania shortcode’ów zostanie udostępniona naszym klientom wstępnie 12 sierpnia  15 sierpnia  16 sierpnia 2016 r. Do tego czasu nie wszystkie shortcode’y zostaną zmapowane (szacujemy, że może około 100 wtyczek), ale mapowanie będzie prowadzone na bieżąco, a klienci otrzymają je, gdy tylko pojawią się nowe.

    Zapisz się do naszego newslettera, aby otrzymywać wiadomości na temat mapowania shortcode’ów, daty jego premiery oraz otwarcia mapowania shortcode’ów dla społeczności!

  • Wszystkiego najlepszego z okazji 4 lipca! 20% rabatu na WSZYSTKIE licencje do 6 lipca!

    Zyskaj 20% ZNIŻKI na wszystkie licencje Page Builder Sandwich od 4 do 6 lipca 2017 r.! Po prostu wpisz kod promocyjny 4JULY2017, aby otrzymać zniżkę już dziś!

  • Środki bezpieczeństwa w WordPressie: Znaczenie kopii zapasowych

    safety-measures-in-wordpress-the-importance-of-backupsWyobraź sobie to: Twoja pierwsza strona na WordPressie wreszcie działa. Od miesięcy nie czułeś takiej satysfakcji. Klepiesz się z uznaniem po plecach – podobnie jak ludzie, którzy pomogli Ci zebrać owoce Twojej pracy. Instalujesz potrzebne wtyczki i zaczynasz planować dalszą przyszłość swojej witryny. Wszystko wygląda obiecująco i układa się znakomicie.

    Aż wydarza się niewyobrażalne. Twoja strona pada.

    Wzruszasz ramionami. Słyszałeś, że takie rzeczy się zdarzają, nawet najlepszym. Przecież Markowi Zuckerbergowi i Davidowi Karpowi na pewno też się to kiedyś przytrafiło, a obaj radzą sobie teraz świetnie, prawda?

    Próbujesz więc przywrócić ją do życia, gorączkowo szukając rozwiązań w Google. Za pierwszym razem się nie udaje. Za drugim też nie – ani za trzecim, czwartym, siedemnastym, a nawet dwudziestym drugim. Twoje oczy rozszerzają się z przerażenia na myśl, że jesteś całkowicie i bezpowrotnie zgubiony; Twoja strona przepadła na zawsze. Przeszukujesz sieć w poszukiwaniu ratunku, ale prawie wszystkie poradniki mówią to samo:

    Trzeba było od samego początku tworzyć kopię zapasową plików WordPressa.

    Trzeba było od samego początku tworzyć kopię zapasową plików WordPressa.

    Trzeba było od samego początku tworzyć kopię zapasową plików WordPressa.

    W najlepszym razie to jeden z najgorszych koszmarów właściciela strony internetowej. To dokładnie to, czego chcemy uniknąć, więc jak temu zapobiec? Cóż, odpowiedź jest dość prosta: musimy zainstalować dobrą wtyczkę do tworzenia kopii zapasowych.

    "a very "secure" bridge" by Garrett LeSage is licensed under CC BY-SA
    „a very „secure” bridge” autorstwa Garrett LeSage na licencji CC BY-SA

    Jak i od czego zacząć?

    Pierwszym krokiem do zabezpieczenia witryny WordPress za pomocą kopii zapasowej jest dokładne zrozumienie, co właściwie musisz zarchiwizować. Serwis WPBeginner, w artykule „Which WordPress Files Should You Backup? And the Right Way To Do It”, wymienia następujące kluczowe elementy wymagające kopii zapasowej:

    • Pliki bazowe WordPressa (Core)
    • Pliki w folderze wp-content (Twój motyw, wtyczki i przesłane media)
    • Plik konfiguracyjny WordPressa
    • Twoja baza danych WordPressa

    Kopie zapasowe wyjaśnione nieco dokładniej

    Sam WordPress nie posiada wbudowanych systemów bezpieczeństwa ani automatycznego tworzenia kopii zapasowych (możesz wprawdzie nauczyć się konfigurować je ręcznie – ale zajmie to mnóstwo czasu), dlatego to Ty musisz zadbać o uniknięcie komplikacji. Aktualizowanie witryny jest zawsze sprawą oczywistą (na wypadek, gdybyś chciał dodać coś nowego, na przykład kolejną wtyczkę, lub coś usunąć), a kopie zapasowe to absolutna konieczność, chyba że chcesz stracić dane (a tego nie chcesz). Inne powody, dla których warto tworzyć kopie zapasowe i wzmacniać bezpieczeństwo, to pewność, że witryna jest wolna od hakerów i nikt nie ukradnie żadnych Twoich danych.

    „Na to też jest wtyczka.”

    WordPress oferuje mnóstwo wtyczek do wszelkiego rodzaju funkcji, w tym (tak, zgadłeś) wiele do zabezpieczeń i tworzenia kopii zapasowych. Wybór jest ogromny; do bardziej popularnych należą BackupBuddy oraz UpDraftPlus. Recenzje tych wtyczek (i wielu innych) znajdziesz niemal wszędzie, więc bez obaw – magia internetu Ci pomoże. Osobiście do celów bezpieczeństwa i tworzenia kopii zapasowych używamy VaultPress z następujących powodów:

    1. VaultPress został stworzony przez firmę Automattic – założoną przez Matta Mullenwega– tę samą osobę, która stworzyła samego WordPressa. Wiele, jeśli nie większość produktów i usług Automattic jest niezawodnych i zawsze warto korzystać z wtyczek, które zostały już wypróbowane i przetestowane.
    2. W przeciwieństwie do większości wtyczek do kopii zapasowych, VaultPress nie zużywa miejsca na Twoim serwerze. Przechowują Twoje dane na własnych serwerach, dzięki czemu Twój hostingodawca nie przyśle Ci ostrzeżeń w stylu „zajmujesz za dużo miejsca na dysku”.
    3. Prostota. Aby z niego korzystać, wystarczy zalogować się do panelu użytkownika, skąd masz podgląd wszystkich szczegółów kopii zapasowych i możesz wykonywać wszelkie operacje.

    Ponieważ VaultPress spełnia nasze osobiste wymagania, sprawdza się u nas idealnie. Jeśli jednak VaultPress Ci nie odpowiada, wiele serwisów – takich jak WPBeginner czy wpmudev – oferuje standardowe artykuły porównawcze, gdybyś miał trudności z podjęciem decyzji.

    Wszystko zależy od Ciebie

    Ostatecznie decyzja o zabezpieczeniu i tworzeniu kopii zapasowej witryny należy do Ciebie. Niektórzy są pewni, że poradzą sobie z ryzykiem, jakie niesie ze sobą niezabezpieczona strona… a inni nie – i to też jest w porządku. W końcu lepiej dmuchać na zimne.

    Niezależnie od podjętej decyzji, zawsze pamiętaj o rozważeniu wszystkich opcji. W końcu tylko Ty wiesz, z czym jesteś w stanie sobie poradzić.

    Powodzenia!