Зохиогч: 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 өнгөний гарын авлагыг үзээрэй

  • Хувилбар 3.0: Хуудас бүтээгч хэрхэн ажиллах ёстойг дахин тодорхойлох нь

    version-3-0-rethinking-how-a-page-builder-should-workБид Page Builder Sandwich-ийг олон нийтэд хүргэснээс хойш 10 сар өнгөрчээ. Бид одоо 6,000 орчим идэвхтэй суулгалттай болоод байгаа бөгөөд энэ нь бидний хувьд том амжилт юм. Үүний үр дүнд бид сайн, муу маш их санал сэтгэгдэл хүлээн авсан. Гэсэн хэдий ч нийтлэг санал дүгнэлт нь хүмүүс зах зээл дээрх бусад хуудас бүтээгчидтэй харьцуулахад бүтэц (layout) угсрах, агуулга үүсгэхэд хэр хялбар байгаад сэтгэл хангалуун байдаг явдал юм.

    Бидний хүлээн авсан санал хүсэлтийн дийлэнх нь шинэ функц нэмэх хүсэлт байсан бөгөөд сүүлийн хэдэн сарын хугацаанд тэдгээрээс нэлээдийг нь нэмж оруулсан. Гэвч үүнийг үргэлжлүүлэн хийх явцдаа бид хэрэглэгчийн интерфэйсийг ч мөн аажмаар өөрчилж эхэлсэн юм. Үүний үр дүнд бид хэрэглэгчийн туршлагыг ч мөн… улам дордуулж өөрчилсөн байв. Улмаар интерфэйсийг дахин эргэж харах шаардлагатай тэр цэгт хүрсэн, учир нь энэ нь цаашид жигд, саадгүй ажиллахаа больж, янз бүрийн функцууд ч хоорондоо сайн зохицохгүй байлаа.

    Хуучирсан интерфэйс

    PBS-ийн өмнөх хувилбаруудад бид бүх зүйлийг товчлуур хэлбэртэй байлгахыг хүссэн. Яагаад? Учир нь товчлуурыг ашиглахад хялбар байдаг. Та зүгээр л… түүн дээр дарна. Инспекторын хуучин хувилбарууд дээр (дээрх зураг дээрх хажуугийн самбар) товчлуур дээр дарахад утга нь нэмэгдэж, shift+дарвал утга нь буурдаг байв. Энэ нь тун амархан сонсогдож байна. Гэвч карусель, таб, газрын зураг болон бусад шинэ элементүүд, функцууд нэмэгдсэнээр тэдгээр бүх товчлуурууд нь өөр өөр загвартай олон дүрс тэмдгүүдийн замбараагүй бөөгнөрөл болж, дажгүй интерфэйс гэхээсээ илүү эртний дүрс үсэг шиг харагдаж эхэлсэн. Энэ нь туршлагатай хэрэглэгчдэд асуудал биш байсан ч хэрэв та PBS-д шинээр хөл тавьж байгаа бол харахад сүрдмээр байсан юм.

    Дараа нь инспектор дээр хэд хэдэн асуудал гарч ирэв. Анхны санаа нь бүх зүйлийг энгийн бөгөөд инспекторын дотор нээлттэй байлгах явдал байлаа. Бүх зүйл гэдэгт би текстийг гарчиг болгох, дэвсгэрийн өнгө, фонтын өнгийг өөрчлөх гэх мэт бүхий л зүйлийг хэлж байсан юм. Гэвч одоогийн байдлаар инспектор нь хулганы гүйлгэгч дугуйг ашиглан дээш, доош байнга гүйлгэх шаардлагатай маш олон сонголтыг агуулж байна. Энэ нь миний анх хэрэглэгчдэд зориулж хийхийг хүссэн инспекторын төсөөллөөс тэс өөр болсон байв.

    Эцэст нь, бид саяхан таны дуртай залгаасуудад (plugins) зориулсан shortcode mapping буюу шорткод буулгалтыг. Энэхүү функц нь shortcode засварлах туршлагыг илүү тааламжтай болгоход шаардлагатай текст талбарууд, тоон гулсуур, сонголтын нүднүүд (checkboxes) болон нэмэлт шинэ сонголтын төрлүүдийг үүсгэхийг биднээс шаардсан. Анхандаа энэ нь сайн санаа байсан бөгөөд тийм ээ, энэ нь shortcode-той ажиллахад танд илүү хялбар болгосон. Гэвч дахин хэлэхэд энэ функц нь бидний зөвхөн “товчлуурт суурилсан” интерфэйсээс гажсан юм. Эргээд бодоход shortcode-ийн шинж чанаруудыг өөрчлөхөд зөвхөн товчлуур ашиглах нь үнэхээр боломжгүй зүйл байсан. Одоо хамгийн сүүлийн хувилбарт бид 2 төрлийн удирдлагатай үлдсэн: товчлуурууд болон shortcode талбарууд.

    Бидний интерфэйс цаашид үр дүнтэй байхаа больсон (эсвэл бидний хэрэгцээнд нийцэхээ больсон) гэж үзэхэд хүргэсэн өөр хэд хэдэн шалтгаан бий, гэхдээ дээрх зүйлс нь гол шалтгаанууд юм. Нэг зүйл үргэлж тодорхой байсан: бид интерфэйсийг шинэчлэх ёстойгоо мэдэж байсан.

    Хуудас бүтээгч төгс тохиолдолд хэрхэн ажиллах ёстойг тодорхойлох нь

    Шуудхан орж зүйлсийг яаран өөрчлөхийн оронд бид хуудас бүтээгчийн бүхэл бүтэн туршлагыг цогцоор нь харахын тулд зуун алхам ухарсан. Бид интерфэйст шинэ амьдрал бэлэглэхийг хүссэн. Үнэнийг хэлэхэд, жил бүр үүнийг дахин дахин шинээр хийхийг бид хүсээгүй. Энэ нь туйлын ядаргаатай бөгөөд WordPress-ийн нийгэмлэгт дорвитой тус нэмэр болохгүй. Энэ удаад бид бүх зүйлийг тайван бөгөөд няхуур хийхээр шийдсэн. Бид Page Builder Sandwich-ийн өнцөг булан бүрийг, түүнийг юу сайн хуудас бүтээгч болгодог болохыг судалж, эцэст нь бүх засварлах туршлагыг цөөн хэдэн үндсэн ойлголтод багтаан боловсруулсан.

    Үндсэн ойлголт #1: Зүйлсийг засахын тулд агуулга дээрээ шууд бичих

    Хуудас бүтээгч суулгах гол шалтгаануудын нэг нь WordPress-ийн backend текст засварлагчийн хязгаарлалтаас гарах явдал юм. Backend засварлагч нь муу гэсэн үг биш, гэхдээ вэб хуудсаа үүсгэх явцад энэ нь зочдод хэрхэн харагдахыг шууд харуулдаггүй бөгөөд нэг баганатай бүтцээс гадуур агуулгыг зохион байгуулах боломжийг олгодоггүй. Та тэнд зөвхөн өөрийн бичсэн текст болон зарим зургийг л харж чадах бөгөөд илүү нарийн төвөгтэй зүйлсийг (тухайлбал холбоо барих маягт гэх мэт) харах боломжгүй байдаг. Та shortcode нэмж чадах ч тэдгээр нь бодитоор дүрслэгдсэн хэлбэрээрээ харагдахгүй*.

    * Үүнийг шийдвэрлэхийн тулд бусдын хийсэн Shortcake UI зэрэг залгаасууд байдаг боловч энэ нь энд ярих гол сэдэв биш юм.

    Энд л frontend хуудас бүтээгчид гарч ирдэг. Тэд засварлах туршлагыг backend-ээс гаргаж, frontend руу авчирдаг бөгөөд та сайтаа зочдод яг яаж харагдах тэр байдлаар нь засварлах боломжтой болно. Pippin-ий хэлснээр: Юу харж байна, түүнийгээ авна (WYSIWYG).

    Frontend засварлагч байхын бас нэгэн давуу тал нь текстээ шууд засах боломжийг олгодог. Гарчиг болон догол мөрийг шууд бичих нь вэбсайт бүтээхэд ердийн үг боловсруулах программ (word processor) ашиглах мэт хялбар байдлыг өгдөг. Товчлуур болон табын шошгыг мөн зүгээр л түүн дээр дарж, бичих замаар өөрчлөх боломжтой байх ёстой.

    Энэ бол бусад ихэнх хуудас бүтээгчдийн сайн хийж чаддаггүй талбар юм. Тэдгээрийн ихэнх нь бүх зүйлийг засахын тулд текст оруулах талбарт бичихийг шаарддаг. Дахин хэлэхэд жинхэнэ frontend хуудас бүтээгчид ийм байх ёсгүй. Текстийг шууд бичиж, засах нь 2-р хувилбараас хойш Page Builder Sandwich-ийн давуу тал байсаар ирсэн бөгөөд бид 3-р хувилбарт үүнийг хадгалж үлдэхийг баталгаажуулсан.

    Үндсэн ойлголт #2: Түргэн тохируулга хийхэд хулганыг ашиглах

    Хулгана бол хуудас бүтээгчдэд ихэвчлэн анхааралгүй орхигддог хүчирхэг хэрэгсэл юм. Ихэнхдээ хуудас бүтээгчид үүнийг элементүүдийг чирч өөр өөр байршилд байрлуулах эсвэл товчлуур, оруулах талбар дээр дарахад ашигладаг. Энэ нь зүгээр л хэдий ч хуудас бүтээх тал дээр хулганаар хийж болох маш олон зүйл бий.

    Нэгдүгээрт, хуудсыг засварлах хэрэгсэл болгон хулганыг ашиглах нь ялангуяа зай (margins, paddings) болон хэмжээ зэрэг харагдах шинж чанаруудыг тохируулахад гайхалтай харааны хариу үйлдлийг өгдөг. Одоо элементүүдээ тохируулах нь төрөлхийн мэт мэдрэмж төрүүлнэ.

    PBS-ийн 3-р хувилбарт та хулганаа ашиглан олон зүйлийг тохируулах боломжтой болно. Та бие даасан элементүүдийн хоорондох зай (margins), багана доторх зай (paddings), мөн зураг, дүрс тэмдэг болон газрын зургийн хэмжээг тохируулах боломжтой. Бид мөн тоон утгыг өөрчлөх боломжийг олгодог товчлууруудыг гулсуураар сольсон.

    Үндсэн ойлголт #3: Текстийн хэв маягийг өөрчлөхөд хялбар байх ёстой

    Хэрэв та дэлгэцнээсээ нэг алхам ухраад харвал вэб хуудсандаа нэмдэг ихэнх зүйлс тань текстэн агуулга байдаг болохыг анзаарах болно. Мэдээж бидэнд тэдгээрийг дагалдах зураг, дүрс тэмдгүүд байдаг – сүүлийн үед бид сайтууддаа илүү том зургуудыг нэмэх хандлагатай болсон. Гэвч чухал агуулгын дийлэнх нь бүгд текст байдаг: гарчиг, жагсаалт, догол мөр, эшлэл гэх мэт. Үүний зэрэгцээ бид өөрсдийн загварт тохируулан текстээ хэрхэн хэлбэржүүлэх вэ гэдэг асуудал гарч ирдэг. Бид тэдгээрийн хэмжээ, өнгийг өөрчлөх эсвэл тод (bold), налуу (italic) болгодог. Энэ нь бидний агуулгыг уншигчдад илүү уншигдахуйц, ач холбогдолтой, сэтгэл татам болгоход чиглэгддэг.

    Бид текстийн хэв маягийг байнга өөрчилдөг тул загварыг өөрчлөх товчлуурууд нь маш хялбар хүрэх боломжтой байх ёстой. Тэдгээр нь бидний эхэлж нээх шаардлагатай гарч ирдэг цонхон (pop up) дотор нуугдсан байх ёсгүй. Ихэнх хуудас бүтээгчид энэ дутагдлаас болж зовдог. Хэрэглэгчийн интерфэйсийг “замбараагүй биш” гэж нэрлүүлэхийн тулд хамгийн их ашиглагддаг сонголтууд хүртэл ил нүднээс нуугдсан байдаг.

    Үүнийг шийдэхийн тулд бид хамгийн түгээмэл хэрэглэгддэг үг боловсруулах программуудыг судалж үзсэн. Тэдгээрийн дэлгэцийн дээд хэсэгт текстийг хэлбэржүүлэхэд ашиглагддаг олон товчлуур бүхий мөр байдгийг бид анзаарч, 3-р хувилбарт ижил байрлалыг хуулбарласан юм. Одоо бид дэлгэцийн тань дээд хэсэгт текстийн хэв маягийн бүх товчлуурыг үргэлж бэлэн байлгадаг болсон. Энэ нь хэв маягийг өөрчлөх ажлыг үнэхээр хурдан бөгөөд текст засах ердийн зуршил шиг болгож өгдөг.

    Үндсэн ойлголт #4: Ахисан түвшний хэв маягийн сонголтууд нь уян хатан боловч ойлгоход хялбар байх ёстой

    Хуудас бүтээгчийн гол зорилго бол хүмүүст гайхалтай загваруудыг хялбархан үүсгэх боломжийг олгох явдал юм. Энэ нь бид сурахад хүндрэлтэй байдлыг бий болгохгүйгээр олон төрлийн тохиргоо, сонголтуудыг өгөх ёстой гэсэн үг юм. Зайг (margins, paddings) тохируулах, текстийн хэв маягийг өөрчлөх боломжтой байх нь гайхалтай боловч тэдгээр нь тодорхой хэмжээнд л тусална. Ажлыг бүрэн дуусгахын тулд дэвсгэр зураг, хээ, хүрээ, бэхэлсэн дэвсгэр гэх мэт илүү нарийн сонголтууд танд хэрэгтэй болно. Эдгээр олон янзын тохиргоог нэг дор овоолох нь бага зэрэг төөрөгдүүлж болзошгүй тул бид тэдгээрийн заримыг нь хялбарчилж, 3-р хувилбарт илүү ээлтэй болгох үүднээс ангилалд хувааж зохион байгуулсан.

    Үндсэн ойлголт #5: Shortcode-ийн дэмжлэг

    Эцэст нь, манай хуудас бүтээгч нь WordPress дээр суурилдаг гэдгийг мартаж болохгүй. Бид уг платформыг болон түүний онцлог функцуудыг дэмжих ёстой бөгөөд тэдгээрийг хязгаарлах эсвэл тэдгээрээс хазайх ёсгүй. WordPress-ийн санал болгодог нэг том онцлог бол shortcode-ууд юм. Энэ нь нийт агуулга бүхэлдээ shortcode-оос бүрдэх ёстой гэсэн үг биш – тэгвэл замбараагүй болно – харин бид зүгээр л тэдгээртэй нийцтэй ажилладаг байх ёстой. Маш олон залгаасууд болон сэдвүүд shortcode ашигладаг бөгөөд тэдгээрийг бүгдийг нь үл тоомсорловол асар том алдагдал болно. Үнэндээ shortcode нь хуудас үүсгэх үед хэрэглэгчдэд хамгийн дээд зэргийн уян хатан байдлыг олгодог.

    Бид хэдэн долоо хоногийн өмнө shortcode mapping системээ танилцуулсан бөгөөд үүний ачаар хэдэн зуун залгаасын хэдэн зуун shortcode-ийг системдээ буулгасан. Бид WordPress-ийн залгаасын санд байгаа хамгийн түгээмэл залгаасуудыг эхэнд тавьсан тул та тэдгээртэй өөрийн сайт дээрээ таарах магадлалтай. Энэ нь 3-р хувилбарт улам бүр сайжирсан бөгөөд бид цаашид ч үүнийг сайжруулсаар байх болно.

    Дүгнэлт

    Бид дээрх бүх үндсэн шинж чанаруудыг тусган Page Builder Sandwich-ийн 3-р хувилбарыг бүтээсэн. Энэ бол бидний өнөөг хүртэл WordPress-д зориулан бүтээсэн хамгийн шилдэг хуудас бүтээгч юм. Энэ нь ашиглахад илүү ойлгомжтой бөгөөд аяндаа сурагдахуйц, илүү хурдан ажилладаг, ашиглахад илүү хялбар бөгөөд урьд өмнөхөөсөө илүү ээлтэй болсон.

    Хэрэв танд хуудас бүтээгчийн зайлшгүй байх шаардлагатай функцийн талаар ямар нэгэн санал бодол байвал доор сэтгэгдлээр бидэнд мэдэгдээрэй.

  • #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-ийн талаар товч дүгнэлт өгөхийг хүссэн бөгөөд зочин нийтлэлч Ann Taylor бидэнд маш бүтээлч, тустай хариу ирүүлсэн юм:

    “…I played around with a free version a bit. It shows a lot of promise: lots of modules, pretty intuitive UI, great WYSIWYG experience, everything is dragged around easily. However, when I had around 10 modules on the page, it became hard to continue working with it because of low editing speed…”

    Энэхүү үнэтэй санал хүсэлт нь PBS-ийн хурд болон гүйцэтгэлийг гүнзгийрүүлэн судлахад хүргэсэн. Бид олон янзын хувилбаруудыг туршиж үзээд хурдны асар том саад бэрхшээлүүдийг олж илрүүлсэн. Гүйцэтгэлийн асуудлын гол шалтгаан нь хүрээ, хэрэгслийн самбар болон бусад харагдах засварлах заавруудыг харуулахын тулд залгаас (plugin)-ийн хийж байсан олон тооны тооцоолол байв. Доор 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

    Хэрэгцээт зайгаа гаргахын тулд элементийн зайг (margin) тохируулахад хялбар байдаг. Зай үүсгэгч (spacer) элементийг үүний оронд ашиглах боломжтой. Энэ нь гар утасны дэлгэц дээр зарим мөрүүдийг хэт жижиг болгохгүй байлгахыг хүссэн үед онцгой ач холбогдолтой юм.

    Featurette Element

    Featurette элементийг ашиглан хуудасныхаа хэсгүүдийг илүү хурдан хугацаанд үүсгэх боломжтой. Эдгээр хэсгүүдэд hero header, сэтгэгдлийн карусель болон хуудасны үйл ажиллагааг сайжруулахад ашиглаж болох бусад зүйлс багтаж болно.

    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

    Team member элемент нь сайтын зочдод багийн гишүүдээ танилцуулахад нэн тохиромжтой. Ихэвчлэн ийм хэсэгт багийн гишүүний зураг, түүнчлэн доод хэсэгт нь товч тайлбар багтдаг.

    Gallery Element

    Энэ элементийг зургийн цомог хийхэд ашигладаг. Өмнө нь цомог үүсгэхийн тулд тусдаа элементүүдийг (товчлуур, жааз гэх мэт) PBS ажлын талбар луу нэг нэгээр нь чирэх шаардлагатай болдог байсан. Харин энэхүү шинэ элемент нь үүнийг таны өмнөөс хийдэг тул үйл явц нь ямар ч төвөггүй болсон.

    A Huge Thank You

    4.2 хувилбар бол бидний одоогийн байдлаар гаргасан хамгийн чухал шинэчлэлтүүдийн нэг юм. Эцсийн дүндээ гүйцэтгэл болон ажиллагаа нь аливаа шилдэг залгаас (plugin)-д хамгийн чухал билээ. Бидэнд бүтээлч санал шүүмж өгч, цаашдын замд маань амжилт хүссэн @Ann Taylor болон CodeInWP-д талархал илэрхийлье. Мөн биднийг үргэлж дэмжиж байдаг PBS-ийн бүх хэрэглэгчдэдээ маш их баярлалаа.

    Бид удахгүй бүр ч олон шинэчлэлтүүдийг хүргэх болно (үүнд бидний амласан Google Fonts функц болон бусад зүйлс багтана), тиймээс соргог байгаарай!

    Тэр болтол PBS багийн зүгээс сайтоо амжилттай бүтээн байгуулахыг хүсье!

  • 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 нь үнэ төлбөргүй дугаарт хөрөнгө оруулах нь хөрвүүлэлтийг сайн өсгөдөг гэдгийг нэмж онцолжээ.

    Хэрэв та бидэнтэй адил технологийн компани бол өөрийн имэйл хаягийг (эсвэл зочид тантай холбогдох боломжтой бусад аргуудыг) вэбсайт дээрээ харуулах нь зүйтэй.

    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-ийг үргэлж ашигладагт тань баярлалаа!

    Сайтаа амжилттай бүтээгээрэй!

  • Page Builder Sandwich-ийн анхны төрсөн өдрийг нижгэр тэмдэглэж байна!

    pbs-v4-ad-3 Тийм ээ, яг үнэн: Page Builder Sandwich 2017 оны 1-р сарын 14-нд анхны төрсөн өдрөө тэмдэглэх гэж байна. Одоо явагдаж буй Баярын хямдралын (хязгаарлагдмал хугацаанд 30% хөнгөлөлттэй, урамшууллын код шаардлагагүй) зэрэгцээ PBS та бүхэнд хэд хэдэн гэнэтийн бэлэг бэлдсэн байгаа бөгөөд манай баг тэдгээрийг хүн бүртэй хуваалцахыг тэсэн ядан хүлээж байна.

    Өнгөрсөн жилийн хугацаанд бид гайхалтай андууд, тун хэрэгтэй зарим нэг шүүмж, сэтгэгдлүүд болон PBS Slack нийгэмлэг дэх шинэхэн найзуудынхаа дэмжлэгтэйгээр ихээхэн өсөж хөгжлөө. Бид энэхүү амжилтад хүрэхэд тусалсан PBS-ийн хэрэглэгчид болох та бүхнийг мартаж болохгүй билээ. Тиймээс баяраа тэмдэглэх үүднээс бид та бүхэнд PBS Хувилбар 4.0-ийг гаргахаас илүү ямар сайн туршлага бэлэглэх билээ гэж бодсон юм. Конфеттигээ цацаарай.

    Хэрэв та анзаараагүй өнгөрсөн бол одоогийн хувилбар болох Хувилбар 3.0 нь хэд хэдэн томоохон өөрчлөлт, сайжруулалтыг авчирсан билээ. Үүнд илүү цэвэрхэн, жигд, хэрэглэхэд хялбар интерфэйс болон гар утасны илүү сайн нийцтэй байдал багтсан болно. Харин Хувилбар 4.0-ийн хувьд бид бүр ч илүү гайхалтай зүйлсийг нэмэх болно! Ирэх 1-р сард гарах хувилбараар бүх зүйл хамаагүй илүү хөгжилтэй, баяр баясгалантай, ажиллагаа сайтай болох тул бэлтгэлтэй байгаарай.

    Бүтэн хуудасны загварын функц

    Манай үндсэн функцүүдийн жагсаалтын хамгийн эхэнд цоо шинэ Бүтэн хуудасны загварууд (Full Page Templates) орж байна. PBS нь төрөл бүрийн хуудас бүтээхэд түгээмэл ашиглагддаг ч хэрэглэгчид маань янз бүрийн чиглэлээр (тиймээс өөр өөр төрлийн вэбсайтууд) үйл ажиллагаа явуулдаг болохыг бид нухацтай анхаарч үзсэн. Бизнес эсвэл хувийн үйл ажиллагааны аль нь ч байсан, хэрэглэгч бүрт өөр өөр хэрэгцээ шаардлага байдаг. Тийм учраас бид удахгүй гарах Бүтэн хуудасны загварын функцээрээ үүнийг шийдэхээр шийдсэн билээ.

    pbs-v4-ag-2 Тэгвэл эдгээр Бүтэн хуудасны загварууд хэрхэн ажилладаг вэ? Маш энгийн. Хувилбар 4.0-д бид олон тооны гайхалтай загваруудыг гаргах болно. Эдгээр нь тодорхой салбар, чиглэл бүрт зориулагдсан өөр өөр ангилалд хуваагдана. Загварууд нь таны хүссэн ямар ч сайтад төгс нийцүүлэхийн тулд байгууллагын хуудас, портфолио, цахим худалдааны сайтууд эсвэл ердийн хувийн блогуудад (бусад олон төрлүүдийн хамт) зориулсан элементүүд, бүтэц, боломжуудыг агуулах болно.

    Жишээлбэл, хэрэв та ресторан ажиллуулдаг бөгөөд тухайн төрлийн бизнест тохирсон хуудас эсвэл вэбсайт хэрэгтэй бол ердөө л рестораны загварыг сонгоход хангалттай. PBS нь уян хатан өөрчлөн тохируулах боломжийг олгодог тул та хүссэнээрээ загварчлах боломжтой хэвээр байх болно. Мөн таны сонгосон загвар (энэ тохиолдолд ресторан) нь рестораны сэдэвтэй бизнесийн сайтад тусгайлан зориулсан онцлог шинжүүдтэй ирэх тул тухайн төрлийн сайтын хэрэгцээг хангах PBS элементүүдтэй байна: тухайлбал хоолны цэсэнд зориулсан бүтэн хэсэг, хүргэлтийн функц, нийгмийн сүлжээний товчлуурууд болон бусад олон зүйлс. Одоо үүнийг өөрийн салбар чиглэлд төсөөлөөд үзээрэй – та байгууллагын оффис, хувийн бизнес эрхэлдэг эсвэл зүгээр л портфолиотой байсан ч санаа зовох хэрэггүй. Хувилбар 4.0 дээр бид тэдгээрт зориулсан загваруудыг мөн гаргах болно. Эдгээр нь таны дараагийн сайт хийх ажилд гарцаагүй ихээхэн тус болно!

    Илүү олон элемент, илүү олон сонголт

    Шинэ Бүтэн хуудасны загваруудаас гадна бидэнд өөр олон шинэ зүйлс бэлэн болоод байна! Бидний үргэлж хэлдэгчлэн, гайхалтай, сэтгэл татам зүйлсийг бүтээх нь хүн бүрийн төсөөлдөг шиг тийм хэцүү байх албагүй гэдэгт итгэдэг учраас л PBS оршин тогтнож байгаа юм. Үүнийг санаж, удахгүй гарах бусад функцүүдтэй маань танилцаж, PBS-ээр та ямар чамин, гайхалтай хуудас, сайтуудыг бүтээж болохыг өөрийн нүдээр хараарай!

    Параллакс дэвсгэр

    Параллакс гүйлгэх эффект нь хөтөч дээр өвөрмөц, 3D дэвсгэрийн эффектийг бий болгоход ашиглагддаг техник юм. Энэ нь ямар ч вэбсайтын хувьд анхаарал татахуйц гайхалтай элемент болдог бөгөөд зөв хийгдсэн тохиолдолд таны үзэгчдийн тоог гарцаагүй нэмэгдүүлж чадна. Итгэхгүй байна уу? Параллакс эффектийг төгс хэрэгжүүлсэн FireWatch-ийн энэхүү сонирхолтой вэбсайтыг үзээрэй.

    Видео дэвсгэр

    Видео дэвсгэр нь ялангуяа нүүр хуудас, буух хуудас болон хиро толгой хэсэгт вэбсайтуудад өргөн ашиглагддаг түгээмэл эффект юм. Тэдгээр нь мөн адил үнэхээр сэтгэл татам бөгөөд ийм их эрэлттэй байгаа нь цаанаа шалтгаантай, бидэнд итгээрэй! Харин хамгийн сүүлийн үеийн PBS шинэчлэлтийн ачаар та видео дэвсгэрийг туршиж үзэх боломжтой болно. Тэдгээрийг ашиглан үзэгчдийнхээ анхаарлыг татаж, сайтад зочлогсдын тоог нэмэгдүүлээрэй!

    Хугацаа тоологч (Date Countdown)

    Хувилбар 4.0-д бид цоо шинэ хугацаа тоологчийг гаргах гэж байна. Энэ нь таны тоолж буй яг тодорхой огноо, цагийг тохируулах үндсэн функцуудыг багтаахаас гадна танд гарцаагүй таалагдах уян хатан тохируулгын сонголтуудыг агуулна.

    Сошиал дүрсүүд

    Уншигчдаа нийгмийн сүлжээнд нийтлэлийг тань хуваалцахыг уриалмаар байна уу? Санаа зоволтгүй, PBS танд тусална! Шинэ сошиал дүрсүүдийн тусламжтайгаар уншигчид ердөө ганц товчлуур дараад л таны вэбсайт болон контентыг хуваалцах боломжтой болно.

    Гэхдээ бидэнд танд зориулсан үүнээс ч илүү зүйл бий! Үүнд:

    • Контентдоо нийтлэл нэмэх боломж
    • Явцын мөр (Progress bars)
    • Тоо өсгөн тоологч
    • WooCommerce, Advanced Custom Fields (ACF), Contact Form 7-д зориулсан элементүүд
    • Хэрэглэгчийн сэтгэгдэл (Testimonials)
    • Үнийн хүснэгт
    • Үйлдэлд дуудах (Click to action)
    • Зургийн хайрцаг (Image Boxes)
    • Дүрстэй хайрцаг (Icon Boxes)
    • Үнэгүй зураг хайх болон татах
    • Custom CSS нэмэх боломж
    • …болон бусад олон!

    Мобайл нийцтэй байдал

    Эцэст нь, эдгээр гайхалтай шинэ функцүүдээс гадна PBS нь бүр ч илүү сайжирсан утасны нийцтэй байдлаараа

    pbs-v4-ag-1 Өмнө нь гар утас дээр PBS хуудсаа үзэх болон засварлах нь тийм ч амар хялбар байгаагүй бөгөөд үсгийн хэмжээ таарахгүй байх, зургийн харьцаа алдагдах зэрэг асуудлууд гардаг байсан. Ерөнхийдөө мобайл дээрх PBS-ийн UI дээр ажиллах шаардлагатайг бид мэдэж байсан бөгөөд үүнийгээ ч хийж гүйцэтгэлээ. Бид энэхүү функцийг сайжруулан тохируулж, UI талаасаа илүү гоёмсог төдийгүй илүү жигд, хэрэглэхэд хялбар болгосон. Одоо та гар утсан дээрээ ямар ч төвөггүйгээр вэбсайтаа үзэж, засах боломжтой болно. Таны нүд үүнд гарцаагүй баярлах болно, мөн таны уншигчид ч гэсэн талархах нь лавтай.

    Илүү жигд, илүү сайн, бүр ч илүү гайхалтай.

    Төгсгөлд нь хэлэхэд, бид PBS-д үнэнч байж, дэмжлэг үзүүлж ирсэн та бүхэнд чин сэтгэлээсээ талархаж байна. Бид бүгдийг гайхалтай аялал хүлээж байгаа тул та бүхэн бидэнтэй адил догдолж байгаа гэдэгт найдаж байна!

    Тэгэхээр удахгүй гарах эдгээр шинэчлэлтүүд таны хүлээлтэд нийцэж байна уу? v4 хувилбарт зориулж санал болгох өөр зүйл танд байна уу? Доор сэтгэгдлээ үлдээгээрэй, бид юу хийж чадахаа харъя!

    v4-ийн талаарх дэлгэрэнгүй шинэчлэлт (болон бусад гайхалтай зүйлс)-ийн талаар мэдээлэл авч байхын тулд доор байрлах ‘Subscribe’ товчийг дарж манай мэдээллийн товхимолд бүртгүүлээрэй! Санаа зоволтгүй, та хүссэн үедээ бүртгэлээ цуцлах боломжтой.

    Та бүхнийг баярын өдрүүдээ сайхан өнгөрүүлсэн гэдэгт найдаж байна,

    PBS баг

    Сайтаа бүтээх үйлсэд тань амжилт хүсье!

  • Долоодугаар сарын 4-ний баярын мэнд хүргэе! 7-р сарын 6 хүртэл БҮХ лиценз 20% хямдарлаа!

    2017 оны 7-р сарын 4-өөс 7-р сарын 6 хүртэл Page Builder Sandwich-ийн бүх лицензэд 20%-ИЙН ХЯМДРАЛ аваарай! Өнөөдөр хөнгөлөлтөө эдлэхийн тулд ердөө 4JULY2017 промо кодыг оруулахад л хангалттай!

  • PBS ШИНЭЧЛЭЛТ: 4.1 хувилбар ба ашиглахад хялбар байдал

    Өнгөрсөн нэгдүгээр сард 4.0 хувилбар гарснаас хойш бид PBS-ийн хөгжүүлэлт дээр үргэлжлүүлэн ажиллаж, алдаа засалт болон сайжруулалтуудыг нэмсээр ирсэн. Бид тэдгээрийг та бүхэнтэй хуваалцахдаа баяртай байгаа бөгөөд 4.1 хувилбарын шинэчлэлтэд юу бэлдсэнийг сонирхуулъя.

    Форматжуулах мөрний сайжруулалтууд

    Хамгийн сүүлийн үеийн 4.1 шинэчлэлт нь текст форматжуулах мөрөнд голлон чиглэсэн. Олон тооны алдааг шийдвэрлэсний дээр бид тус мөрөн дээрх зарим зүйлсийг сайжруулж, таны PBS-тэй ажиллах туршлагыг илүү хялбар бөгөөд үр ашигтай болгосон.

    Өнгө сонгогчийн шинэчлэлтүүд

    PBS-ийн өмнөх хувилбаруудад өнгө сонгогч нь засварлах явцад, ялангуяа текст болон текстийн өнгийг засахад зарим нэг хүндрэл учруулдаг асуудалтай байсан. Харин v4.1 хувилбарт бид энэ асуудлыг шийдэж, текстийг ямар ч төвөггүй засах шинэ тохиргоонуудыг хийсэн.

    • Өнгө сонгоход хялбар болгох үүднээс илүү олон өнгөний сонголт (swatch)
    • Өнгө сонгогч одоо тунгалаг байдлыг харуулдаг болсон
    • Текстийн өнгийг засахтай холбоотой алдаануудыг зассан

    Текст форматжуулалтын шинэчлэлтүүд

    Өмнө нь утгыг ихэсгэхийн тулд дахин дахин товших, харин багасгахын тулд CTRL/CMD товчийг дарангаа товших шаардлагатай зарим товчнууд байсан. Бид анхандаа үүнийг ойлгомжтой, ашиглахад хялбар гэж бодож байсан боловч хэрэглэгчид энэ нь тийм ч тодорхой биш байсныг хэлсэн. Бид энэхүү шинэчлэлтээр эдгээр зөрчилтэй байдлыг зассан.

    • Мөр хоорондын зайг тохируулахад илүү хялбар болсон: гулсагчийг чирж хүссэн хэмжээгээ тааруулах эсвэл өгөгдсөн зайд хүссэн хэмжээгээ шууд бичиж оруулна уу
    • Үсгийн хэмжээний товчийг ашиглахад илүү хялбар болгох үүднээс ихэсгэх, багасгах гэсэн хоёр товч болгон хуваасан
    • Үсгийн хэмжээг ихэсгэх/багасгах нь илүү ойлгомжтой болсон ба засварлахад хялбар болгох үүднээс хэмжих нэгжээр px-ийг ашигладаг боллоо. Өмнө нь ямар ч утгагүй “x” нэгжийг харуулдаг байсан
    • Харагдах товчны тоог багасгахын тулд зүүн/төв/баруун/хоёр тийш тэгшлэх товчнуудыг одоо нэгтгэн бүлэглэсэн
    • “Форматыг арилгах” товч нь өмнө нь арилгадаггүй байсан бусад хэв маягийг (мөр хоорондын зай гэх мэт) одоо арилгадаг болсон

    Хэвтээ зураасны сайжруулалтууд

    Өмнө нь хэвтээ зураас нь зарим асуудал үүсгэж байсан. Зарим загваруудад хэвтээ зурааснууд хэт жижиг байсан тул дээр нь дарахад хүндрэлтэй байдаг байв. Үүнийг засахын тулд бид хэвтээ зураасыг форматжуулах мөрнөөс хасаж, бие даасан элемент болгон өөрчилсөн. Үүнээс гадна та одоо өнгө сонгогчоор дамжуулан зураасны өнгийг өөрчлөх боломжтой болсон.

    Ирээдүйн шинэчлэлтүүд: PBS-д цаашид юу хүлээж байна вэ?

    Бидний хэлсэнчлэн, бидэнд хийгдэж буй шинэ зүйлс (болон цаашдын шинэчлэлтүүд) байгаа хэвээр байна. Ирээдүйд танд зориулж юу бэлтгэж буйг товчхон танилцуулъя:

    • Google Fonts (эцэст нь нэг юм!)
    • Бид текст форматжуулах мөрийг зөвхөн текст форматжуулах хэрэгсэл биш, түүнээс илүү боломжтой болгох санаан дээр ажиллаж байна. Хэрэв тухайн нөхцөл байдлаас шалтгаалан товчнууд өөрчлөгддөг болбол ямар вэ? Жишээлбэл, багана дотор текст засварлаж байх үед босоо тэгшилгээний товч гарч ирвэл маш аятайхан байх болно.

    PBS-ийн ирээдүйн шинэчлэлтүүдээс та юу үзэхийг хүсэж байна вэ?

    Бид PBS-ийг сайжруулахад үргэлж бэлэн байдаг тул хэрэв танд ямар нэгэн санал байвал бидэнд бичээрэй! Бидний өсөн нэмэгдэж буй жагсаалтад нэмүүлэхийг хүсэж буй функцийн хүсэлт байна уу? Одоогийн хувилбарт тохируулах шаардлагатай гэж бодож буй өөр зүйл байна уу? Доорх сэтгэгдэл хэсэгт бидэнд мэдэгдээрэй!

    Вэбсайтаа амжилттай бүтээн байгуулаарай!

  • Бага зэрэг техникийн тал руугаа орох үед: Бид өөрсдийн хувилбарын Shortcode Mapping-ийг хэрхэн бодит болгосон бэ

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2Өмнөх нийтлэлээрээ бид богино кодын буулгалтын (shortcode mapping) үндсэн ойлголтууд болон түүний гайхалтай давуу талуудыг хэрхэн ашиглах талаар ярилцсан билээ. Дараах нийтлэл маань бага зэрэг илүү техникийн шинж чанартай болж магадгүй тул бид Page Builder Sandwich хувилбарын Богино кодын буулгалтыг тусад нь нийтлэл болгон хуваахаар шийдсэн.

    Доор манай богино кодын буулгалтын боломжийн дотоод ажиллагаа болон бид үүнийг хэрхэн ажиллуулсан талаарх илүү дэлгэрэнгүй тайлбарыг хүргэж байна.

    Автоматжуулсан процесс

    Богино код буулгагчид аль залгаасуудыг оруулахыг шийдэхийн тулд бид дараах шалгуурт үндэслэн WordPress залгаасын сангаас шилдэг залгаасуудыг цуглуулах автомат скрипт бүтээсэн:

    • Хамгийн багадаа 4,000 идэвхтэй суулгалттай, хамгийн алдартай, өндөр үнэлгээтэй, шинэчлэгдсэн 1,000 залгаасын дотор байх,
    • Хамгийн багадаа 4,000 идэвхтэй суулгалттай байх,
    • Хамгийн багадаа 20 үнэлгээтэй байх, мөн;
    • Дунджаар хамгийн багадаа 3 одтой үнэлгээтэй байх

    Бид энэхүү хайлтыг WordPress залгаасын сан дээр өдөр бүр ажиллуулдаг. Эдгээр шүүлтүүр нь олон хүн ашигладаг, сайн чанарын залгаасуудын жагсаалтыг авахад тусалдаг. Үүнийг бичиж байх үед уг шалгуурын үр дүнд 800 залгаас гарч ирсэн. Энэ бол маш их тоо. Үнэхээр их шүү.

    Богино кодын буулгалтад илрүүлсэн хамгийн алдартай зарим залгаасууд.
    Богино кодын буулгалтад илрүүлсэн хамгийн алдартай зарим залгаасууд.

    Дараа нь бид залгаас бүрийн эх кодод богино код агуулагдаж байгаа эсэхийг шалгах хэд хэдэн автомат шалгалтыг ажиллуулж, улмаар тэдгээр бүх богино код болон тэдгээрийн бүх шинж чанаруудыг олж илрүүлэхийг хичээдэг. Өгөгдлийг боловсруулахад 2,000 гаруй богино код гарч ирсэн. Бүхэл бүтэн гайхалтай тоо! Илрүүлсэн богино кодыг дараа нь гараар шалгахын тулд богино кодын буулгалтын мэдээллийн санд оруулдаг.

    Энэхүү процессын төгсгөлд бид асар том залгаасуудын жагсаалт болон тэдгээрийн боломжит богино кодуудыг олж авдаг. Одоо бүх зүйл зөв эсэхийг баталгаажуулахын тулд энэхүү өгөгдлийг цэвэрлэх ажил л үлдэнэ.

    Гар ажиллагааны процесс

    Энэ бол буулгалтын системийн магадгүй хамгийн хэцүү хэсэг юм. Залгаасын код нь янз бүрийн хэлбэр, хэмжээтэй байдаг тул бүх богино кодыг манай скрипт автоматаар илрүүлж чаддаггүй. Хэдийгээр WordPress Codex-д богино кодын шинж чанаруудыг шүүхийн тулд `shortcode_atts` функцийг ашиглахыг заасан байдаг ч энэ нь ердөө зөвлөмж бөгөөд хүн бүр үүнийг дагадаггүй. Мөн залгаасыг суулгах үед богино кодын дотоод бүтцийг шалгах баталгаатай арга байдаггүй.

    Иймээс бүх богино код болон тэдгээрийн шинж чанаруудыг зөв тодорхойлохын тулд бид AngularJS болон Bootstrap ашиглан богино код, шинж чанаруудыг засварлахад зориулсан фронтенд хэсгийг бүтээсэн.

    Бүх буулгасан богино кодыг засахад зориулсан Bootstrap & AngularJS интерфэйс.
    Бүх буулгасан богино кодыг засахад зориулсан Bootstrap & AngularJS интерфэйс.

    Бид залгаас бүрийг гараар нэг бүрчлэн шалгаж, богино кодын баримт бичгийг үзэж, өөрт байгаа бүх өгөгдөл зөв эсэхийг нягтлах шаардлагатай болдог.

    Энэ нь маш их цаг шаардсан уйтгартай ажил боловч автоматжуулсан процесстой байх нь зарим давуу талтай:

    • Манай эхний статистик мэдээллээр 2 залгаас тутмын 1 нь л богино код агуулдаг.
    • Илрүүлсэн богино кодуудын тал хувь нь ямар ч шинж чанаргүй байсан (гэхдээ үүний зарим нь хуурамч эерэг илрэлт байж болзошгүй).
    • Зөвхөн сайн чанарын залгаасуудыг сонгосноор тэдгээр нь богино кодын баримт бичигтэй байх магадлал өндөр байдаг.

    Залгаасын бүх богино кодыг шалгаж дууссаны дараа л сервер тухайн залгаасын богино кодын буулгалтыг хэрэглэгчдэд түгээж эхэлнэ.

    Rest API дуудлага

    Энэхүү тааварын сүүлчийн хэсэг нь залгаас өөрөө юм. Эндхийн үзэл баримтлал нь энгийн: ямар залгаасууд идэвхтэй байгааг, тухайн сайт ямар сэдэв ашиглаж байгааг болон ямар богино кодууд байгааг тодорхойлж, дараа нь богино кодын буулгалтын мэдээллийн сангаас буулгалт байгаа эсэхийг асууна. Үүний тулд бид бүх үйлчлүүлэгч хамгийн сүүлийн үеийн богино кодын буулгалтыг авахын тулд хүсэлт илгээдэг тусгай WP REST API төгсгөлийн цэгийг үүсгэсэн.

    Ирээдүй: Олон нийтийн оролцоо (Crowdsourcing)

    Залгаас бүрийг гараар шалгах нь маш их цаг хугацаа, хүчин чармайлт шаарддаг. Богино кодын буулгалтын платформ тогтворжсоны дараа бид богино кодын буулгалтыг хүн бүрт нээлттэй болгохоор төлөвлөж байна. Энэ нь богино код нэмэхэд хүн бүр туслах боломжтой болно гэсэн үг юм.

    Та “Би яагаад богино код буулгахад туслах ёстой гэж? Надад ямар ашигтай юм бэ?” гэж бодож байж магадгүй. Хүмүүс яагаад туслахыг хүсэж болох талаар хэд хэдэн зүйл санаанд бууж байна:

    1. Хэрэв та залгаас бүтээсэн бөгөөд дээрх шалгуурын улмаас бид хараахан илрүүлээгүй байгаа бол (мөн энэ нь WordPress залгаасын санд байгаа бол) та буулгалтыг өөрөө нэмж болно. Ингэснээр таны залгаасыг PBS бүрэн дэмжих болно!
    2. Автомат процессын хувьд бид зөвхөн WordPress залгаасын санд байгаа зүйлстэй ажиллах тул төлбөртэй залгаас болон сэдэв зохиогчид хамрагдахгүй. Тиймээс хэрэв танд тийм зүйл байгаа бол тэдгээрт зориулж богино кодын буулгалтыг мөн хийж болно.
    3. Харин залгаас бүтээгч биш хүмүүсийн хувьд бид тусалсан хүмүүсийг урамшуулах боломжтой. Богино кодын буулгалтыг сонирхолтой ажил болгох үүднээс бид туслагчдыг хувийн лиценз эсвэл PBS-ийн премиум лицензийн шинэчлэлтээр шагнаж болно!

    Манай мэдээллийн товхимолд бүртгүүлээрэй

    Богино кодын буулгалтын функц нь манай хэрэглэгчдэд урьдчилсан байдлаар 2016 оны 8-р сарын 12  8-р сарын 15  8-р сарын 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.

    Ердийн үед та өөр нэмэлт өргөтгөл (plugin) суулгах, дараа нь хаа нэгтээ богино код (shortcode) нэмэх, эсвэл поп-ап цонхоор дамжин зарим талбаруудыг бөглөх, эсвэл бүр мэдээллийн товхимолд бүртгүүлэх маягтаа ажиллуулахын тулд виджет тохируулах шаардлагатай болдог байсан. Харин одоо мэдээллийн товхимолд бүртгүүлэх маягт нэмэх бүх төвөгтэй асуудлууд үгүй боллоо. Зүгээр л өөрийн хуудсандаа Newsletter элементийг нэмж, жагсаалтынхаа API түлхүүрүүдийг оруулахад л шууд ажиллах болно.

    Та бүртгэлийн маягтаа улам бүр өөрчлөн тохируулахын тулд имэйлийн талбар дээр дарж өнгө, хэмжээ, хүрээ болон бусад олон зүйлийг өөрчлөх, эсвэл товчлуур дээр даран дүрс тэмдэг (icon) нэмэх, товчлуурынхаа хэмжээг өөрчлөх, эсвэл зочин имэйл хаягаа бичиж эхлэх үед л харагддаг болгох боломжтой. Та өөрийн загварт нийцүүлэн гадаад төрхийг нь бүрэн өөрчлөх боломжтой. Хэрэглэгч бичих үед талбарын өнгө өөрчлөгддөг байхыг хүсэж байна уу? Үүнийг өнгө сонгогчийн тусламжтайгаар хялбархан хийх боломжтой. Талбар нь зөвхөн хүрээтэй минималист загвар хэрэгтэй байна уу, ямар ч асуудалгүй!

    Нэгэн давуу тал нь newsletter элемент нь хэрэглэгчийн таны сайт доторх шилжилтийг тасалдуулдаггүй. Тэд бүртгүүлсний дараа хуудас дахин ачааллахгүй бөгөөд бүртгэлийн маягт нь зүгээр л “баярлалаа” гэсэн мессежээр солигдох болно. Энэхүү мессеж болон түүний өнгийг ч мөн өөрчлөн тохируулах боломжтой.

    Page Builder Sandwich-ийн бусад хэсгүүдийн адил та цоо шинэ мэдээллийн товхимолд бүртгүүлэх маягтаа хүссэн газартаа байрлуулж болно, зүгээр л өөрийн мөр дотор эсвэл өөр байршилд чирж оруулаарай.

    Имэйлийн жагсаалт чухал уу?

    Товчхон хариулт бол тийм. Хэрэв танд Twitter хаяг байгаа бол бусад Twitter хэрэглэгчид таныг шууд “дагаж”, таны жиргээнүүдийг (Tweets) хардаг шиг, имэйлийн жагсаалт нь зочдод имэйлээр дамжуулан таны сайтыг дагах боломжийг олгодог арга юм.

    Одоохондоо имэйлийн жагсаалт байхгүй байна уу?

    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-ийн талаар дэлгэрэнгүй үзэх