Автор: Neil Lock

  • 2018 жылы жол бермеу керек веб-сайт дизайнындағы 4 қателік

    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.

    Осыған байланысты, веб-дизайндағы осы 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.

    Веб-сайтыңыздағы қаріптер санын ең көбі 3-пен шектеу — кәсіпқойлар ұстанатын жалпы дизайн тәжірибесі. Сонымен қатар, бұл сайтыңыздың оқылымдылығы мен бірізділігін арттырады, ал бұл сайт трафигінің сәттілігіне тікелей әсер етеді.

    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.

    Не айтқымыз келгенін түсіну үшін төмендегі екі мысалды қараңыз.

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

    Мұны жеңіл қабылдамауды ұмытпаңыз. Әрқашан зерттеуге уақыт бөліп, сізге бағыт-бағдар беруі үшін дизайн мақалаларын қарап жүріңіз. Көп ұзамай-ақ сайтыңыздың трафигінің өсіп келе жатқанын байқайсыз. ? Сәттілік!

    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.

    Келесі дизайн бастамаңыз үшін Canva ұсынған осы тамаша түстер нұсқаулығын қарап шығыңыз.

    Canva Design Wiki

    Шығармашылығыңызға ерік беріңіз.

    Canva түстер нұсқаулығын қараңыз

  • #PBSUpdate: Өнімділіктің 200%-ға артуы және жаңа элементтер

    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) күтілімдері туралы мақала болды. Онда әрқайсысы белгілі бір критерийлер бойынша қаралған таңдаулылардың қысқаша тізімі берілген. 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-ке қысқаша шолу жасауды сұрадық, ал қонақ автор Энн Тейлор бізге өте сындарлы әрі пайдалы жауап берді:

    “…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 жылдамдығы мен өнімділігін тереңірек зерттеуге итермеледі. Біз көптеген түрлі сценарийлерді сынап көріп, жылдамдықтың үлкен кедергілерін таптық. Өнімділік мәселелерінің негізгі себебі — контурларды, құралдар тақтасын және басқа көрнекі өңдеу элементтерін көрсету үшін плагиннің орындаған әртүрлі есептеулері болды. Төменде Chrome браузеріндегі PBS 4.1 нұсқасының өнімділік графигі көрсетілген:

    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

    Қажетті кеңістікті алу үшін элемент жиектерін реттеу оңай. Бөлгіш (spacer) элементін бұған балама ретінде пайдалануға болады. Бұл әсіресе белгілі бір қатарлардың мобильді экрандарда тым кішірейіп кетпеуін қаласаңыз өте пайдалы.

    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 тобы сәтті сайт құрастыруды тілейді!

  • 3.0 нұсқасы: Бет құрастырушы қалай жұмыс істеуі керектігін қайта қарастыру

    version-3-0-rethinking-how-a-page-builder-should-workPage Builder Sandwich өнімін көпшілікке ұсынғанымызға 10 ай болды. Қазір бізде шамамен 6 000 белсенді орнатылым бар және бұл біз үшін айтарлықтай жетістік. Сонымен қатар, біз осыған байланысты көптеген жақсы да, жаман да пікірлер алдық. Дегенмен, жалпы пікір бойынша, адамдарға нарықтағы басқа бет құрастырушылармен салыстырғанда макеттер құру мен өз мазмұнын жасаудың оңайлығы өте ұнайды.

    Біз алған пікірлердің көпшілігі жаңа функцияларды қосу туралы өтініштер болды және соңғы бірнеше айда біз сол мүмкіндіктердің көбін қостық. Бірақ мұны істей келе, біз біртіндеп пайдаланушы интерфейсін де өзгерте бастадық. Нәтижесінде, пайдаланушы тәжірибесін де… нашар жаққа қарай өзгерттік. Ақырында интерфейсті қайта қарастыру қажет болатын деңгейге жеттік, өйткені ол бұдан былай бірқалыпты жұмыс істемеді және әртүрлі функциялар онымен үйлеспей қалды.

    Ескірген интерфейс

    PBS-тің алдыңғы нұсқаларында біз барлығының батырма түрінде болғанын қаладық. Неліктен? Өйткені батырмаларды пайдалану оңай. Сіз жай ғана… оларды басасыз. Инспектордың ескі нұсқаларында (жоғарыдағы суреттегі бүйірлік панель) батырманы басу мәнді арттыратын, ал shift+басу оны азайтатын. Бұл өте оңай естіледі. Бірақ карусельдер, қойындылар, карталар және басқа да жаңа элементтер мен функциялар қосылған соң, бұл батырмалардың барлығы әртүрлі дизайндағы белгішелердің былығына айналып, керемет интерфейстен гөрі иероглифтерге ұқсай бастады. Бұл тәжірибелі пайдаланушылар үшін қиындық тудырмағанымен, PBS-ке жаңадан келгендер үшін қорқынышты көрінетін.

    Одан кейін инспекторда бірнеше мәселе пайда болды. Бастапқы идея барлығын инспектордың ішінде қарапайым әрі қолжетімді ету еді. Және «барлығы» дегенде мен мәтінді тақырыпқа айналдырудан бастап өң түсін, қаріп түсін өзгертуге дейінгі бүкіл нәрсені – меңзедім. Алайда оның қазіргі күйінде инспекторда сізді тінтуір дөңгелегімен үнемі жоғары-төмен айналдыруға мәжбүрлейтін көптеген параметрлер пайда болды. Бұл менің бұрын пайдаланушылар үшін жасағым келген инспектордан мүлдем өзгеше.

    Соңында, біз жақында таңдаулы плагиндеріңізге арналған шорткодтарды салыстыруды. Бұл функция шорткодтарды өңдеуді ыңғайлы ету үшін мәтін өрістерін, сандық сырғытпаларды, құсбелгілерді және жаңа қосымша параметр түрлерін жасауды талап етті. Бастапқыда бұл жақсы идея болды және иә, ол шорткодтармен жұмыс істеуді жеңілдетті. Бірақ бұл мүмкіндік те біздің «тек батырмалар» интерфейсімізден ауытқып кетті. Өткенге көз жүгіртсек, шорткод төлсипаттарын өзгерту үшін тек батырмаларды пайдалану мүмкін емес еді. Енді, соңғы нұсқада, бізде басқару элементтерінің 2 түрі пайда болды: батырмалар және шорткод өрістері.

    Интерфейсіміз бұдан былай тиімді (немесе біздің қажеттіліктерімізге сәйкес) емес деген шешімге келуімізге тағы бірнеше себеп болды, бірақ жоғарыда айтылғандар – негізгілері. Дегенмен бір нәрсе анық еді: біз интерфейсті жаңарту керек екенін білдік.

    Бет құрастырушы мінсіз жағдайда қалай жұмыс істеуі керектігін анықтау

    Бірден кірісіп, бәрін өзгерте салудың орнына, біз бет құрастырушы тәжірибесіне тұтастай қарау үшін жүз қадам артқа шегіндік. Біз интерфейске жаңа тыныс бергіміз келді. Шынын айтсақ, біз оны жыл сайын қайта-қайта жасай бергіміз келмеді. Бұл өте қажытады және WordPress қауымдастығына айтарлықтай пайда әкелмейді. Бұл жолы біз бәрін асықпай әрі мұқият істеуге бел будық. Біз Page Builder Sandwich-тің әрбір тұсын және оны жақсы бет құрастырушы ететін нәрселерді зерттеп, соңында бүкіл өңдеу процесін бірнеше негізгі тұжырымдамаға жинақтадық.

    1-негізгі тұжырымдама: Мәліметтерді өңдеу үшін тікелей өз мазмұныңызға жазу

    Бет құрастырушыны орнатудың негізгі себептерінің бірі – WordPress-тің ішкі мәтін редакторының шектеулерінен құтылу. Ішкі редактор жаман деген сөз емес, бірақ веб-беттерді жасау кезінде ол сайтқа келушілерге веб-бетіңіздің қалай көрінетінін бірден көрсетпейді және мазмұнды бір бағанды макеттен тыс орналастыруға мүмкіндік бермейді. Онда сіз тек мәтінді және кейбір суреттерді көре аласыз, бірақ күрделірек элементтерді (мысалы, байланыс формаларын) көре алмайсыз. Шорткодтарды қосуға болады, иә, бірақ олар өздерінің дайын көрінісінде көрсетілмейді*.

    * Мұны шешу үшін басқалар жасаған Shortcake UI сияқты плагиндер бар, бірақ мәселе онда емес.

    Дәл осы жерде сыртқы (front-end) бет құрастырушылар көмекке келеді. Олар өңдеу процесін ішкі бөліктен сыртқы бөлікке шығарады, осылайша сіз сайтыңызды келушілер қалай көрсе, дәл солай өңдейсіз. Пиппин айтқандай: Не көрсеңіз, соны аласыз (WYSIWYG).

    Сыртқы редактордың тағы бір артықшылығы – ол мәтінді тікелей өңдеуге мүмкіндік береді. Тақырыптар мен азатжолдарды теру веб-сайтты жасау кезінде қарапайым мәтіндік редакторды пайдалану жеңілдігін сыйлайды. Батырмалар мен қойынды белгілерін де жай ғана басып, мәтін енгізу арқылы өзгертуге болуы керек.

    Бұл – көптеген басқа бет құрастырушылар жақсы орындай алмайтын тұс. Олардың көбі барлық нәрсені өңдеу үшін мәтін өрісінің ішіне теруге мәжбүрлейді. Қайталап айтқанда, нағыз сыртқы бет құрастырушыларда бұлай болмауы керек. Мәтінді тікелей теру және өңдеу 2-нұсқадан бері Page Builder Sandwich-тің мықты тұсы болып келеді және біз бұның 3-нұсқада да сақталуын қамтамасыз еттік.

    2-негізгі тұжырымдама: Жылдам түзетулер үшін тінтуірді пайдалану

    Тінтуір – бет құрастырушыларда жиі еленбейтін қуатты құрал. Көбінесе бет құрастырушылар оны элементтерді сүйреп әртүрлі орындарға тастауға немесе батырмалар мен енгізу өрістерін басуға ғана пайдаланады. Бұл жақсы болғанымен, бет құрастыру тұрғысынан тінтуірмен жасауға болатын нәрселер әлдеқайда көп.

    Біріншіден, бетті өңдеу құралы ретінде тінтуірді пайдалану, әсіресе сыртқы шегіністер (margins), ішкі шегіністер (paddings) және өлшемдер сияқты көрнекі сипаттарды реттеу кезінде тамаша көрнекі кері байланыс береді. Енді элементтеріңізді түзету табиғи әрі ыңғайлы болады.

    PBS 3-нұсқасында сіз тінтуірдің көмегімен бірқатар нәрселерді реттей аласыз. Сіз жеке элементтер арасындағы шегіністерді/арақашықтықты, бағандарыңыздың ішкі шегіністерін, сондай-ақ кескіндердің, белгішелердің және карталардың өлшемдерін реттей аласыз. Сондай-ақ біз сандық мәндерді өзгертуге мүмкіндік беретін батырмаларды жүгірткілермен алмастырдық.

    3-негізгі тұжырымдама: Мәтін стилін өзгерту оңай болуы керек

    Монитордан сәл алыстап қарасаңыз, веб-беттеріңізге қосатын нәрселердің көбі мәтіндік мазмұн екенін байқайсыз. Иә, олармен бірге суреттер мен белгішелер де бар – соңғы кездері біз сайттарымызға үлкенірек суреттер қосуға бейімбіз. Бірақ маңызды мазмұнның басым бөлігі – мәтін: тақырыптар, таңбаланған тізімдер, азатжолдар, дәйексөздер және т.б. Сонымен қатар, дизайнымызға сай болуы үшін мәтін стилін қалай келтіретініміз де маңызды. Біз олардың өлшемдері мен түстерін өзгертеміз немесе жуан я курсив етеміз. Бұл мазмұнымызды тиісті оқырмандар үшін оқылымдырақ, өзектірек және тартымдырақ ету үшін қажет.

    Мәтін стилін жиі өзгертетіндіктен, стильдерді өзгертуге мүмкіндік беретін батырмалар өте қолжетімді болуы керек. Олар алдымен ашуды талап ететін қалқымалы терезенің ішіне жасырылмауы тиіс. Көптеген бет құрастырушылар осы дерттен зардап шегеді. Пайдаланушы интерфейсі «артық затсыз» деп аталуы үшін, тіпті ең жиі қолданылатын параметрлердің өзі көзден таса жасырылады.

    Мұны шешу үшін біз ең жиі қолданылатын мәтіндік процессорларды қарап шықтық. Біз олардың көбінде мәтінді пішімдеуге арналған экранның жоғарғы жағында көптеген батырмалары бар қатар болатынын байқап, 3-нұсқа үшін дәл осындай орналасуды көшірдік. Енді экраныңыздың жоғарғы жағында барлық мәтін стилін өзгерту батырмалары бар қатар үнемі көрініп тұрады. Бұл стильдеуді өте жылдам әрі мәтінді өңдеудегі үйреншікті дағдыңызға ұқсас етеді.

    4-негізгі тұжырымдама: Кеңейтілген стильдеу параметрлері икемді әрі түсінуге оңай болуы керек

    Бет құрастырушының түпкі мақсаты – адамдарға таңғажайып дизайндарды оңай жасауға мүмкіндік беру. Бұл үйренуді қиындатпай, көптеген әртүрлі баптаулар мен параметрлерді ұсынуымыз керек дегенді білдіреді. Шегіністерді реттеу және мәтін стилін өзгерту керемет, бірақ олар тек шектеулі ғана мүмкіндік береді. Жұмысты сапалы аяқтау үшін фондық кескіндер, өрнектер, жиектер, бекітілген фондар және т.б. сияқты әлдеқайда күрделі параметрлер қажет болады. Осы барлық әртүрлі параметрлерді үйіп тастау шатастыруы мүмкін, сондықтан 3-нұсқада бәрін ыңғайлы ету үшін кейбіреулерін жеңілдетіп, санаттарға бөлдік.

    5-негізгі тұжырымдама: Шорткодтарды қолдау

    Соңында, біздің бет құрастырушымыз WordPress негізінде құрылғанын ұмытпайық. Біз платформаны және оның мүмкіндіктерін қабылдауымыз керек, оларды шектемеуіміз немесе олардан ауытқымауымыз қажет. WordPress ұсынатын үлкен мүмкіндіктердің бірі – шорткодтар. Бұл бүкіл мазмұн шорткодтардан тұруы керек дегенді білдірмейді – бұл бейберекет болар еді – оның орнына біз олармен жай ғана үйлесімді болуымыз керек. Көптеген плагиндер мен тақырыптар шорткодтарды пайдаланады және олардың барлығын елемеу үлкен шығын болар еді. Негізінде, шорткодтар беттерді жасау кезінде пайдаланушыларға барынша икемділік береді.

    Бірнеше апта бұрын біз шорткодтарды салыстыру жүйесін ұсындық, соның арқасында жүздеген плагиндерден жүздеген шорткодтарды салыстырып бейімдедік. Біз WordPress плагиндер каталогындағы ең танымал плагиндерге басымдық бердік, сондықтан оларды өз сайттарыңызда кездестіру ықтималдығы жоғары. Бұл мүмкіндік 3-нұсқада одан сайын күшейтілді және біз болашақта мұны жетілдіруді жалғастырамыз.

    Қорытынды

    Біз жоғарыда аталған барлық маңызды сипаттарды алып, оларды Page Builder Sandwich 3-нұсқасына біріктірдік. Бұл – біздің осы уақытқа дейін WordPress үшін жасаған ең үздік бет құрастырушымыз. Ол интуитивті әрі табиғирақ, жылдамырақ жұмыс істейді, пайдалануға оңай әрі бұрынғыдан да ыңғайлы.

    Егер бет құрастырушының маңызды мүмкіндіктері туралы ойларыңыз болса, төменде пікір қалдырып, бізге хабарлаңыз.

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

    Мәселен, төмендегі әдепкі алдын ала әзірленген бөлімдегі көкшіл-жасыл реңк пен бидай алқабының суреті сізге ұнамаса…

    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.

    Салыстыру үшін:

    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

    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.

    Try Live Preview
  • Сайтыңыздың лид тартуда үздік болуының 10 тәсілі және PBS оған қалай көмектесе алады

    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.

    Бірақ қалай болғанда да, лидтерді тартудың артында ғылым жатқанын білу маңызды, және біз өзіміз цифрлық маркетолог болмасақ та, сәтті лид конверсиясы дизайн мен мазмұнның дұрыс орындалуына да байланысты екенін атап өту керек. Міне, осы жерде біз көмекке келеміз.

    «Бірақ осының бәрінің маркетингтік бөлігіне қалай көмектесе аласыздар?»

    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.

    Басқаша айтқанда, алғашқы әсер өте маңызды.

    Сәтсіз тыңдалымдар актерлердің басты рөлдерді ала алмауына әкелетіні сияқты, біреудің сіздің веб-сайтыңызға алғашқы сапары да сізді не биікке көтереді, не құрдымға жібереді.

    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.

    Міне, табысты лидтер құру жолында сізге көмектесе алатын бірнеше веб-сайт:

    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.

    Егер веб-сайтыңыз бойынша навигация қиындық туғызса, келушілеріңіз сіздің айтарыңыз бен ұсынарыңызды тыңдау үшін сайтта ұзақ тұрақтамауы мүмкін.

    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.

    Міне, сіздің CTA деңгейіңізді көтеруге көмектесетін бірнеше ресурстар:

    TIP #7: User-Friendly Forms

    Адамның веб-сайтыңыздағы форма арқылы өз ақпаратын сізге жіберуі — бұл сайып келгенде сәтті лид конверсиясын өлшейтін көрсеткіш.

    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

    Егер сіз телефон қоңыраулары арқылы қолдау көрсететін бизнес түрі болсаңыз, телефон нөмірлерін тұрақты, көрнекті түрде көрсету міндетті болып табылады. Straight North қосымша ақысыз (toll-free) нөмірлерге инвестиция салу да конверсияны жақсы арттыра алатынын қосады.

    Егер сіз біз сияқты технологиялық компания болсаңыз, онда веб-сайтыңызда электрондық пошта мекенжайыңызды (немесе келушілер сізбен байланыса алатын басқа тәсілдерді) көрсету де жақсы идея болып табылады.

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

    Ал адамдардың лидтерді тартуға тырысқанда жасайтын ең үлкен қателерінің бірі осы: веб-сайтты құрайтын кішкентай аспектілерге (дизайн, мәтін және басқа да мазмұн сияқты) мән бермеу.

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

    Сізге және барлық бастамаларыңызға сәттілік тілейміз, сондай-ақ, әдеттегідей, Page Builder Sandwich қолданғаныңыз үшін рақмет!

    Сайт құруда сәттілік!

  • 4 шілде мерекесі құтты болсын! 6 шілдеге дейін БАРЛЫҚ лицензияларға 20% ЖЕҢІЛДІК!

    Барлық Page Builder Sandwich лицензияларына 2017 жылғы 4 шілдеден 6 шілдеге дейін 20% ЖЕҢІЛДІК алыңыз! Жеңілдігіңізді бүгін алу үшін жай ғана 4JULY2017 промокодын енгізіңіз!

  • PBS ЖАҢАРТУЫ: 4.1 нұсқасы және пайдалану қолайлылығы

    Өткен қаңтарда 4.0 нұсқасы шыққаннан кейін, біз PBS-ті әрі қарай дамыту бойынша жұмысты жалғастырып, қателерді түзетіп, жақсартулар енгіздік. Оларды сіздермен бөлісуге қуаныштымыз, міне, 4.1 нұсқасының жаңартуында сіздерге дайындағанымыз:

    Пішімдеу тақтасының жақсартулары

    Соңғы 4.1 жаңартуы мәтінді пішімдеу тақтасына бағытталған. Көптеген қателерді жоюдан бөлек, біз тақтадағы кейбір элементтерді жақсарттық, бұл PBS-пен жұмыс істеуді анағұрлым ыңғайлы әрі тиімді етеді.

    Түс таңдағыштың жаңартулары

    PBS-тің бұрынғы нұсқаларында түс таңдағышта өңдеу процесіне, атап айтқанда мәтінді және мәтін түсін өңдеуге қатысты біраз қолайсыздық тудырған ақаулар болды. Алайда 4.1 нұсқасында біз бұл мәселені шешіп, мәтінді кедергісіз өңдеу үшін жаңа түзетулер енгіздік.

    • Түсті оңай таңдау үшін көбірек түс үлгілері қосылды
    • Түс таңдағыш енді мөлдірлікті көрсетеді
    • Мәтін түсін өңдеуге қатысты қателер түзетілді

    Мәтінді пішімдеу жаңартулары

    Бұрын бізде мәнді үлкейту үшін бірнеше рет басу керек, ал азайту үшін CTRL/CMD пернесін басып тұрып басу қажет болатын кейбір батырмалар бар еді. Бастапқыда біз бұл интуитивті деп ойлағанбыз, бірақ пайдаланушылар мұның түсініксіз екенін айтты. Біз осы жаңартуда сол сәйкессіздіктерді түзеттік.

    • Жол биіктігін баптау оңайырақ болды: қалаған өлшемге реттеу үшін жүгірткіні сүйреңіз немесе берілген өріске қажетті өлшемді жай ғана енгізіңіз
    • Қаріп өлшемі батырмасы пайдалануға ыңғайлы болу үшін екі батырмаға бөлінді: кішірейту және үлкейту
    • Қаріп өлшемін үлкейту/кішірейту де қолжетімді бола түсті, енді өңдеу оңай болу үшін өлшем бірлігі ретінде px қолданылады. Бұрын ол ешқандай мағынасы жоқ «x» бірлігін көрсететін
    • Солға/ортаға/оңға/ені бойынша туралау батырмалары көрсетілетін батырмалар санын азайту үшін біріктірілді
    • «Пішімдеуді тазалау» батырмасы енді бұрын тазаламаған басқа да стильдерді (жол биіктігі сияқты) тазалайды

    Көлденең сызықтың жақсартулары

    Бұрын көлденең сызық кейбір мәселелер тудыратын. Кейбір тақырыптарда көлденең сызықтар тым жіңішке болғандықтан, оларды басу қиынға соғатын. Мұны түзету үшін біз көлденең сызықты пішімдеу тақтасынан алып тастап, оны жеке элементке айналдырдық. Сонымен қатар, енді сызықтың түсін түс таңдағыш арқылы өзгертуге болады.

    Алдағы жаңартулар: PBS-те алда не күтіп тұр?

    Жоғарыда айтқанымыздай, біз әлі де жаңа функциялар (және басқа да жаңартулар) үстінде жұмыс істеп жатырмыз. Болашақта сіздерге дайындап жатқан жаңалықтарымызға шағын шолу:

    • Google Қаріптері (ақыры!)
    • Біз мәтінді пішімдеу тақтасын жай ғана мәтінді пішімдейтін орыннан гөрі кеңірек мүмкіндік беретін құрал ету идеясын қарастырып жатырмыз. Батырмалар ағымдағы мәнмәтінге байланысты өзгеріп отырса ше? Мысалы, баған ішіндегі мәтінді өңдеп жатқанда тігінен туралау батырмасы шықса, өте ыңғайлы болар еді.

    Болашақ PBS жаңартуларынан не көргіңіз келеді?

    Біз PBS-ті жақсартуға әрқашан дайынбыз, сондықтан ұсыныстарыңыз болса, бізге хабарласыңыз! Біздің толығып жатқан тізімімізге қосқыңыз келетін қандай да бір функция бойынша сұраныстарыңыз бар ма? Ағымдағы нұсқада түзетуді қажет ететін тағы қандай да бір нәрсе бар деп ойлайсыз ба? Төмендегі пікірлерде бөлісіңіз!

    Сайт құрастыру сәтті өтсін!

  • Page Builder Sandwich-тің алғашқы туған күнін дүркіретіп тойлау!

    pbs-v4-ad-3 Иә, дәл солай: Page Builder Sandwich 2017 жылғы 14 қаңтарда өзінің ең алғашқы туған күнін тойлайды. Біздің қазіргі Мерекелік жеңілдікпен қатар (шектеулі уақытқа 30% жеңілдік, промокод қажет емес), PBS сіздерге бірнеше тосынсый дайындап қойды және команда оларды баршаңызбен бөлісуге асығуда.

    Өткен жылы біз керемет достарымыздың қолдауының, кейбір өте пайдалы пікірлердің және PBS Slack қауымдастығындағы жаңа достарымыздың арқасында айтарлықтай өстік. Осы белеске жетуге көмектескен сіздерді – PBS пайдаланушыларының өздерін де ұмыта алмаймыз. Сондықтан атап өту үшін біз ойландық: сіздерге бұдан да жақсырақ тәжірибе сыйлаудың PBS 4.0 нұсқасын шығарудан басқа қандай жақсы жолы бар? Конфетти шашылсын!

    Егер байқамай қалсаңыз, қазіргі 3.0 нұсқасы бірқатар ірі өзгерістер мен жақсартулардан өтті. Бұған таза, бірқалыпты әрі ыңғайлы интерфейс, сондай-ақ жақсартылған адаптивтілік кіреді. Ал 4.0 нұсқасына біз одан да керемет мүмкіндіктер қосамыз! Сондықтан дайын болыңыз, өйткені қаңтар айындағы алдағы шығарылыммен бәрі әлдеқайда қызықты, мерекелік әрі функционалды болмақ.

    Толық бет үлгілері функциясы

    Біздің негізгі мүмкіндіктер тізіміндегі бірінші орында – жаңа Толық бет үлгілері. PBS көбінесе әртүрлі беттерді құру үшін қолданылғанымен, біз қолданушыларымыздың сайттарын әртүрлі бағыттарда (демек, веб-сайттардың әртүрлі түрлерінде) жүргізетінін байыппен ескердік. Қалай болғанда да, бизнес үшін болсын, жеке жобалар үшін болсын, әртүрлі пайдаланушылардың қажеттіліктері де әртүрлі болады. Сондықтан біз бұл мәселені алдағы Толық бет үлгілері функциясы арқылы шешуді жөн көрдік.

    pbs-v4-ag-2 Сонымен, бұл Толық бет үлгілері қалай жұмыс істейді? Қарапайым. 4.0 нұсқасы үшін біз бірқатар керемет үлгілерді ұсынамыз. Олар әртүрлі санаттарға бөлінеді; әрқайсысы белгілі бір салаға арналған. Үлгілер корпоративтік беттерге, портфолиоларға, электрондық коммерция сайттарына немесе жай ғана әдеттегі жеке блогтарға (және т.б.) арналған элементтерді, макеттер мен мүмкіндіктерді қамтиды, осылайша сізге қажет кез келген сайтқа өте жақсы үйлеседі.

    Мәселен, егер сіз мейрамхана ісімен айналысып жүрсеңіз және дәл осы бизнес түріне бейімделген бет немесе веб-сайт қажет болса, мейрамхана үлгісін таңдай аласыз. PBS икемді баптауға мүмкіндік беретіндіктен, сіз оны өз қалауыңыз бойынша безендіре аласыз. Таңдалған үлгіңіз (бұл жағдайда мейрамханаңыз) арнайы мейрамхана тақырыбындағы бизнес-сайтқа арналған функциялармен бірге келетіндіктен, ол осындай сайт қажеттіліктерін қанағаттандыратын PBS элементтерімен де қамтылады: мәзірге арналған тұтас бөлім, жеткізу функциясы, әлеуметтік желі түймелері және тағы басқалар. Енді өзіңіздің нақты бағытыңыз үшін осындай бір нәрсені елестетіп көріңіз – егер сіз корпоративтік кеңсені, жеке бизнесті басқарсаңыз немесе тіпті жай ғана портфолио жасағыңыз келсе де, алаңдамаңыз. 4.0 нұсқасымен біз олар үшін де үлгілер шығарамыз. Олар келесі сайт құру жобаңызда сөзсіз пайдалы болады!

    Көбірек элементтер, көбірек опциялар

    Жаңа Толық бет үлгілерімен қатар бізде басқа да көптеген жаңалықтар бар! Біз әрдайым айтып жүргендей, PBS таңғажайып, керемет дүниелерді жасау барлығы айтатындай қиын болмауы керек деген сеніміміздің арқасында өмірге келді. Осыны ескере отырып, PBS арқылы қандай тамаша, ғажап беттер мен сайттар жасай алатыныңызды өз көзіңізбен көру үшін басқа алдағы мүмкіндіктерімізге назар аударуға шақырамыз!

    Параллакс фондары

    Параллакс айналдыру – браузеріңіз үшін бірегей, 3D фондық эффектісін жасауға арналған әдіс. Ол кез келген веб-сайттың назарын бірден аударады және дұрыс орындалған жағдайда, аудиторияңыздың санын сөзсіз арттыра алады. Әлі де сенімді емессіз бе? Параллакс эффектісін мінсіз жүзеге асырған FireWatch-тың мына керемет веб-сайтын көріңіз.

    Бейнефондар

    Бейнефондар да веб-сайттарда, әсіресе басты беттерде, лендингтерде және басты тақырыпшаларда (hero header) жиі қолданылатын танымал эффект болып табылады. Олар да сондай керемет көрінеді және олардың соншалықты сәнге айналуының белгілі бір себебі бар, бізге сеніңіз! Ал соңғы PBS жаңартуымен сізде де бейнефондарды байқап көру мүмкіндігі болады. Аудиторияңызды баурап алып, сайтқа кірушілер санын көбейту үшін оларды батыл пайдаланыңыз!

    Күн кері санағы

    4.0 нұсқасы үшін біз жаңа «Күн кері санағын» да ұсынамыз. Ол кері санақ жүргізілетін нақты күн мен уақытты орнату сияқты негізгі мүмкіндіктерді, сонымен қатар сізге ұнайтынына сенімді икемді баптау опцияларын қамтиды.

    Әлеуметтік желі белгішелері

    Аудиторияңыздың әлеуметтік желілерде жазбаларыңыз туралы бөлісуін ынталандырғыңыз келе ме? Қорықпаңыз, өйткені PBS сізге көмекке келеді! Жаңа әлеуметтік желі белгішелерінің арқасында оқырмандар сіздің веб-сайтыңыз бен мазмұныңызды бір ғана батырманы басу арқылы бөлісе алады.

    Дегенмен, біз сіз үшін бұдан да көп нәрсе дайындадық! Соның ішінде:

    • Мазмұныңызға жазбалар қосу мүмкіндігі
    • Прогресс жолақтары
    • Өсу бойынша санау сандары
    • WooCommerce, Advanced Custom Fields (ACF), Contact Form 7 үшін элементтер
    • Пікірлер
    • Бағалар кестесі
    • Әрекетке шақыру
    • Кескін блоктары
    • Белгіше блоктары
    • Тегін кескіндерді іздеу және жүктеп алу
    • Жеке CSS қосу мүмкіндігі
    • …және тағы басқалар!

    Адаптивтілік

    Осы барлық жаңа керемет мүмкіндіктермен қатар, PBS әлдеқайда жақсартылған адаптивтілігімен

    pbs-v4-ag-1 Бұрын мобильді құрылғыда PBS бетін көру және өңдеу оңай шаруа болмаған еді – қаріп өлшемдері сәйкес келмейтін, кескіндер үйлесімсіз болатын. Жалпы алғанда, мобильді нұсқада PBS пайдаланушы интерфейсін жетілдіру керектігін білдік және дәл солай істедік. Біз осы функция бойынша жұмыс істеп, оны тек интерфейс тұрғысынан әдемірек қана емес, сонымен бірге бірқалыпты және қолжетімді болатындай етіп реттедік. Енді сіз мобильді құрылғыда еш қиындықсыз сайтыңызды көріп, өңдей аласыз. Көздеріңіз сізге сөзсіз рақмет айтады, сондай-ақ аудиторияңыз да риза болары сөзсіз.

    Бірқалыптырақ, жақсырақ, әлдеқайда керемет.

    Қорытындылай келе, PBS-ке деген барлық қолдауыңыз бен адалдығыңыз үшін шын жүректен алғыс айтамыз және сіз де біз сияқты қуаныштысыз деп үміттенеміз, өйткені барлығымызды тамаша кезең күтіп тұр!

    Сонымен, бұл алдағы жаңартулар сіздің күткеніңізге сай келе ме? v4 нұсқасына ұсынғыңыз келетін басқа да нәрселер бар ма? Төменде пікір қалдырыңыз, біз не істей алатынымызды көреміз!

    v4 бойынша қосымша жаңартулардан (және басқа да керемет дүниелерден) хабардар болу үшін төмендегі «Жазылу» түймесін басу арқылы біздің ақпараттық бюллетеньге жазылыңыз! Алаңдамаңыз – кез келген уақытта жазылудан бас тарта аласыз.

    Мереке күндеріңіз керемет өтті деп үміттенеміз,

    PBS тобы

    Сайт құруда сәттілік!

  • Іс біраз техникалық сипат алатын тұс: Shortcode Mapping-тің өз нұсқасын қалай жүзеге асырдық

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2Алдыңғы мақалада біз шорткодтарды сәйкестендірудің негіздерін және оның пайдалы артықшылықтарына қалай қол жеткізуге болатынын талқылаған едік. Келесі жазба біршама техникалық сипатта болуы мүмкін болғандықтан, біз Page Builder Sandwich нұсқасындағы Shortcode Mapping туралы мақаланы бөлуді ұйғардық.

    Төменде шорткодтарды сәйкестендіру функциямыздың ішкі жұмыс механизмі және оны қалай жүзеге асырғанымыз туралы толығырақ сипатталған.

    Автоматтандырылған процесс

    Шорткодтарды сәйкестендіргішке қандай плагиндерді қосу керектігін анықтау үшін біз келесі критерийлер негізінде WordPress плагиндер каталогындағы ең танымал плагиндерді жинайтын автоматтандырылған скрипт әзірледік:

    • 1 000 танымал, ең жоғары бағаланған және жаңартылған плагиндер арасында, кемінде 4 000 белсенді орнатылымы бар,
    • Кемінде 4 000 белсенді орнатылымы бар,
    • Кемінде 20 бағалауы бар, және;
    • Орташа бағасы кемінде 3 жұлдызды

    Біз бұл сұранысты WordPress плагиндер каталогы бойынша күн сайын іске қосамыз. Бұл сүзгілер көптеген адамдар пайдаланатын сапалы плагиндердің тізімін алуға кепілдік береді. Бұл жазылған кезде аталған критерийлер 800 плагинді анықтады. Бұл өте көп. Шынымен өте көп.

    Шорткодтарды сәйкестендіру үшін анықталған ең танымал плагиндердің кейбірі.
    Шорткодтарды сәйкестендіру үшін анықталған ең танымал плагиндердің кейбірі.

    Содан кейін біз әрбір плагиннің бастапқы кодында шорткодтардың бар-жоғын анықтау үшін бірқатар автоматты тексерулер жүргіземіз, содан соң барлық шорткодтарды және олардың барлық атрибуттарын табуға тырысамыз. Деректерді өңдеу нәтижесінде 2 000-нан астам шорткод анықталды. Тіпті таңғаларлық. Анықталған шорткодтар кейіннен қолмен тексеру үшін шорткодтарды сәйкестендіру дерекқорына енгізіледі.

    Осы процестің соңында бізде плагиндердің және олардың ықтимал шорткодтарының үлкен тізімі пайда болады. Енді барлығының дұрыстығына көз жеткізу үшін осы деректерді тазарту ғана қалады.

    Қолмен орындалатын процесс

    Бұл бүкіл сәйкестендіру жүйесінің ең қиын бөлігі шығар. Плагиндер коды әртүрлі пішінде және көлемде болады, барлық шорткодтар біздің скрипттер арқылы автоматты түрде анықтала бермейді. WordPress Codex шорткод атрибуттарын сүзу үшін `shortcode_atts` функциясын пайдалану керектігін айтқанымен, бұл тек ұсыныс қана және оны бәрі бірдей орындай бермейді. Сондай-ақ плагин орнатылған кезде шорткодтың ішкі құрылымын тексерудің сенімді әдісі жоқ.

    Барлық шорткодтар мен олардың атрибуттарын дұрыс алу үшін, біз шорткодтар мен атрибуттарды өңдеуге арналған және AngularJS пен Bootstrap көмегімен жасалған пайдаланушы интерфейсін (front-end) құрдық.

    Барлық сәйкестендірілген шорткодтарды түзеуге арналған Bootstrap & AngularJS интерфейсі.
    Барлық сәйкестендірілген шорткодтарды түзеуге арналған Bootstrap & AngularJS интерфейсі.

    Бізге әрбір плагинді қолмен қарап шығып, олардың шорткод құжаттамасын тексеруге және барлық деректеріміздің дұрыстығына көз жеткізуге тура келеді.

    Бұл өте жалықтыратын іс болса да, автоматтандырылған процестің кейбір жағымды тұстары бар:

    • Біздің алғашқы статистикамызға сәйкес, шамамен әрбір 2 плагиннің тек біреуінде ғана шорткодтар бар.
    • Анықталған шорткодтардың жартысында атрибуттар жоқ (бірақ олардың бір бөлігі жалған нәтиже болуы мүмкін)
    • Тек сапалы плагиндерді іріктеп ала отырып, оларда шорткод құжаттамасының болу ықтималдығы жоғары болады

    Плагиннің барлық шорткодтары тексерілгеннен кейін ғана сервер осы плагиннің шорткод сәйкестіктерін пайдаланушыларға тарата бастайды.

    REST API сұранысы

    Пазлдың соңғы бөлшегі — плагиннің өзі. Мұндағы тұжырымдама қарапайым: қандай плагиндер белсенді екенін, сайт қандай тақырыпты қолданып жатқанын және қандай шорткодтар қолжетімді екенін анықтап, шорткодтарды сәйкестендіру дерекқорында олардың сәйкестіктері бар-жоғын сұрау. Ол үшін біз барлық клиенттер ең соңғы шорткод сәйкестіктерін алу үшін сұраныс жіберетін арнайы WP REST API соңғы нүктесін (endpoint) жасадық.

    Болашақ: Краудсорсинг

    Әрбір плагинді қолмен тексеру көп уақыт пен күш-жігерді қажет етеді. Шорткодтарды сәйкестендіру платформасы тұрақты жұмыс істей бастаған соң, біз шорткодтарды сәйкестендіруді барлығына ашуды жоспарлап отырмыз. Бұл кез келген адам шорткодтарды қосуға көмектесе алады дегенді білдіреді.

    Сіз: «Неге мен шорткодтарды сәйкестендіруге көмектесуім керек? Маған одан не пайда?» деп ойлауыңыз мүмкін. Адамдардың көмектескісі келуінің бірнеше себептері бар:

    1. Егер сіз плагин жасасаңыз және жоғарыдағы критерийлерге байланысты біз оны әлі анықтамаған болсақ (және ол WordPress плагиндер каталогында болса), онда сіз сәйкестіктерді өзіңіз қоса аласыз. Сіздің плагиніңізге PBS толық қолдау көрсететін болады!
    2. Автоматтандырылған процесте біз тек WordPress плагиндер каталогындағылармен ғана жұмыс істейтіндіктен, премиум плагиндер мен тақырыптардың авторлары оған кірмейді. Сондықтан, егер сізде сондай болса, олар үшін де өз шорткод сәйкестіктеріңізді қоса аласыз.
    3. Ал плагин жасаушысы емес адамдар үшін біз көмектескендерді марапаттай аламыз. Шорткодтарды сәйкестендіруді қызықты әрекетке айналдыру үшін біз белсенді көмекшілерді жеке лицензиямен немесе PBS премиум лицензиясына дейін жаңартумен марапаттай аламыз!

    Ақпараттық бюллетенімізге жазылыңыз

    Шорткодтарды сәйкестендіру функциясы біздің тұтынушылар үшін шамамен 12 тамыз  15 тамыз  2016 жылғы 16 тамызда қолжетімді болады. Бұл уақытқа дейін барлық шорткодтар сәйкестендірілмейді (біздің болжамымыз бойынша шамамен 100 плагин), бірақ сәйкестендіру үздіксіз жүргізіліп, жаңалары шыққан бойда тұтынушыларға ұсынылатын болады.

    Шорткодтарды сәйкестендіру туралы, оны қашан шығаратынымызды және көпшілікке қашан қолжетімді ететініміз туралы жаңалықтарды алу үшін біздің ақпараттық бюллетеньге жазылыңыз!

  • Электрондық пошта таратылымына жазылу формаларын оңай қосыңыз

    Easily-Add-Email-Newsletter-Signup-FormsAdding an email newsletter sign up form to your site is a great way to grow your website’s following and to keep your website visitors interested in your site or product. And now you can easily add and customize newsletter sign up forms directly in your designs.

    preview-newsletterNew in Page Builder Sandwich is the Newsletter Element (check the short gif above). Now you can add a newsletter sign up form for your MailChimp, AWeber or MailPoet newsletter lists directly into your designs.

    Әдетте басқа плагинді орнатуға, содан кейін бір жерге қысқа кодты (shortcode) қосуға, немесе қалқымалы терезе арқылы өтіп, кейбір өрістерді толтыруға, я болмаса жаңалықтар таратылымына жазылу формасы жұмыс істеуі үшін виджет орнатуға тура келетін еді. Енді жаңалықтар таратылымына жазылу формаларын қосудың барлық қиындықтары артта қалды. Тек бетіңізге Жаңалықтар таратылымы элементін (Newsletter Element) қосыңыз, тізіміңіздің API кілттерін енгізіңіз, сонда ол бірден жұмыс істей бастайды.

    Жазылу формасын одан әрі баптай аласыз: жай ғана электрондық пошта өрісін басу арқылы оның түстерін, өлшемін, жиектерін және тағы басқаларды өзгерте аласыз, немесе батырманы басып, белгішелер қосып, батырма өлшемін өзгерте аласыз, тіпті оны келуші электрондық пошта мекенжайын тере бастағанда ғана пайда болатындай ете аласыз. Сыртқы түрін дизайныңызға сәйкестендіріп толықтай баптай аласыз. Пайдаланушы мәтін терген кезде өріс түсінің өзгергенін қалайсыз ба? Түс таңдауыш арқылы мұны оңай жасай аласыз. Минималистік дизайн қажет пе және өріс тек жиектен тұруы керек пе, еш қиындықсыз!

    Тағы бір тамаша артықшылығы – бұл элемент пайдаланушының сайттағы әрекетіне кедергі келтірмейді. Олар жазылған кезде бет қайта жүктелмейді және жазылу формасы жай ғана «рахмет» хабарламасымен ауыстырылады. Бұл хабарламаны және оның түстерін де баптауға болады.

    Page Builder Sandwich-тің басқа бөліктері сияқты, жаңа жаңалықтар таратылымына жазылу формасын қалаған жеріңізге орналастыра аласыз, оны жай ғана жолдардың ішіне немесе басқа орынға сүйреп апарыңыз.

    Пошта тарату тізімдері маңызды ма?

    Қысқаша жауап – иә. Егер сізде Twitter аккаунты болса, басқа Twitter пайдаланушылары сізді «оқып», твиттеріңізді көре алатыны сияқты, пошта тарату тізімі де келушілерге сайтыңызды электрондық пошта арқылы бақылап отыруға мүмкіндік береді.

    Пошта тарату тізіміңіз әлі жоқ па?

    If you don’t have a mailing list yet, now is a good time to get started. Getting a newsletter service like MailChimp or AWeber is good since they do the heavy lifting of managing your subscribers and blasting an email to your subscribers easily. They also have newsletter builders that will let you create a newsletter campaign easily. The good thing is they have free plans, so you won’t need to shell out cash in order to try it out.

    If you’re more of a I-like-to-handle-it-myself guy or gal, then you might consider using MailPoet. It’s downloadable free from wordpress.org and they have a paid model as well. With MailPoet, you’ll be able to see your subscribers within your dashboard and you can also send out emails from there. It’s easy to use as well and just takes literally less than 5 minutes to fully set up in your site (Yes, I’ve tried).

    Page Builder Sandwich туралы көбірек біліңіз