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

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