Нөлдік блок: Өз блоктарыңызды жасау

Бетке «Нөлдік блок» қосу үшін беттің төменгі жағындағы Нөл түймешігін басыңыз. Немесе оны блок кітапханасында таңдап алыңыз – ол ең төменгі жағында, «Басқа» санатынан кейін орналасқан.

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

Нөлдік блоктың екі жұмыс кеңістігі немесе екі «контейнері» бар: тор аймағы — Тор контейнері және Терезе контейнері — браузер экрандарының шекараларына арналған стенофор.

Тор контейнері Tilda сияқты торды, 12 бағанды (1200 px) пайдаланады. Егер нысанды Тор контанеріне байланыстыруға және элементтерді Тор контейнерінің ішіне орналастыруға мүмкіндік берсеңіз, олар экран өлшеміне қарамастан, әрқашан 12 бағанның шекарасында болады.

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

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

Кескіні бар элементтерде өлшемін өзгертуге болады, бірақ бастапқы суреттің пропорциялары әрдайым сақталады.

Мәтіні бар элементтерде мәтіннің көлеміне байланысты биіктік автоматты түрде өзгереді.

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

Бірнеше нысанды таңдаған кезде оларды көлденең және тігінен бір-біріне немесе контейнерге теңестіруге болады

Пернетақтадан өңдеу жұмысты айтарлықтай жылдамдатады, сондықтан хоткилерді қолдануды ұсынамыз.

Сондай-ақ, «нөлдік блок» контекст мәзірінде хоткилер тізімін табасыз.

Элементтің толық параметрлері экранның төменгі оң жақ бұрышындағы Параметрлер түймешігін басу арқылы ашылады.

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

Түймелердің жоғарғы қатары элементті контейнерге қатысты тігінен және көлденеңінен жылдам теңестіру үшін қолданылады.

Төменде элемент қалпының координаттары көрсетілген. Пикселдерде немесе пайыздарда көрсетуге болады. Төменде бұл мәселені егжей-тегжейлі қарастырамыз.

Координаттардың шығу тегі көк крестпен көрсетіледі.

Мұнда элементтің параметрлері де берілген: ені мен биіктігі. Агрегаттар — пиксельдер.

Жүктеу кезінде кескіндеме жүктелетін раманың өлшемін алады. Параметрлердегі Бастапқы өлшем түймешігі кескінді бастапқы өлшеміне қайтарады.

Өңдеу түймесі жүктелген кескінді өңдеуге арналған редакторды ашады.

Егер суретті шеңберге түсіргіңіз келсе, дөңгеленген суреттің радиусын орнатыңыз.

Біркелкі шеңбер алу үшін фотосуреттің түпнұсқасы шаршы, ал сүбе радиусы бүйір ұзындығының жартысына тең болуы тиіс. Яғни, егер кескін 100×100 px болса, радиусын 50-ге дейін орнатыңыз.

Суретке көлеңке қосуға болады. Ол үшін көлеңкелі түсті, мөлдірлікті, x және y офсетті және параметрлердегі бұлыңғырлық пен шашырау мөлшерін таңдаңыз.

Әр суретке баламалы мәтін (alt tag) берілуі мүмкін. Іздеу жүйелері альт мәтінін кілт сөздер ретінде қабылдайды және индекстеу кезінде оларды есепке алады. Мәтінді жалпы сайт мазмұнына қатысы бар және сурет мазмұнын көрсететіндей етіп жазыңыз.

Кескінді нұқу арқылы үлкейту үшін Масштабталатын кескін параметрлері элементінде «Басу кезінде масштабтау» опциясын таңдаңыз.

Жалқау жүктеу режимі әдепкі бойынша кескіндер үшін қосылады. Оны өшіру үшін Lazyload параметрлері элементінде Өшірулі опциясын таңдаңыз.

Кез келген суретті пайдаланушы оны басқанда басқа бетке өтетіндей етіп сілтеме жасауға болады. Сілтеме мен мақсатты параметрлерде көрсетіңіз: бір терезеде немесе жаңа терезеде ашыңыз.

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

Тіктөртбұрыш: басқару нүктелерінің үстіне тінтуірді апару арқылы бүйірлердің ұзындығын өзгерту.

Балама ретінде элемент параметрлерінде мәндерді орнатыңыз.

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

Сызық. Параметрлерде тіктөртбұрыштың биіктігін 1-5 пиксельге орнатыңыз, сіз сызық аласыз. Немесе Shape параметрін сызыққа орнатыңыз.

Кескіндер көлеңкеленген, штрихталған және сілтеме жасалуы мүмкін.

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

Түйме мен сілтемедегі жазу параметрлерде орнатылады. Онда типография да орнатылған: қаріп өлшемі, түрі, салмағы және түсі.

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

Құралдар жиынтығы - мәтіні және/немесе кескіні бар құрал пайда болатын интерактивті элемент.

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

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

«Нөлдік блокқа» көлденең немесе тік пішінді қосуға және барлық қажетті параметрлерді қолдануға болады: енгізу өрістерін қосу, деректерді қабылдау қызметтерін қосу, сәттілік және қате туралы хабарларды орнату, пішін мәнерін орнату және оған анимацияны қолдану.

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

Деректерді ішу қызметтерін қосу үшін Пішін элементінің параметрлері бөліміне өтіп, Қызметтер бөліміне өтіңіз. Мұнда сайтпен интеграцияланған деректерді қабылдау қызметтерін қосуға болады.

Суреттер жиынтығын Нөлдік блокқа қосуға болады. Кескін элементі сияқты галереяның ені мен биіктігін өзгертуге болады.

Галерея параметрлерін қарап көрейікші:

Созылыңқы. Оның екі параметрі бар: Мұқабасы және құрамында.

Мұқаба параметрі арқылы суреттер галерея аумағын толық толтырады, сондықтан олар галереядан пішімі бойынша ерекшеленсе қиып алуға болады.

Мазмұн параметрі көмегімен галерея ішіндегі суреттер әрқашан бастапқы пішімде болады, сондықтан олар қандай да бір галерея пішімінде қиып алынбайды.

Лауазымы ___________________________ (лауазым Суреттің галерея аймағына қатысты қалпын анықтайды. Мысалы, сол жақ жоғарғы параметрі таңдалса, сурет галереяның жоғарғы сол жақ бұрышына қатысты орналасады.

Ілмек. Бұл параметр галереядағы слайдтарды (суреттерді) ілмектеу. Оның екі параметрі бар: Loop және None.

Ілмек параметрі арқылы галереядағы слайдтар белгісіз мерзімге айналдырылады, яғни соңғы слайдтан кейін бірінші слайд болады.

Жоқ параметрімен ілмек болмайды және галерея соңғы слайдта аяқталады.

Слайд жылдамдығы. Слайд ауысу анимациясының көрінісін нақтылайды. Оның үш параметрі бар: Жоқ, Баяу және Жылдам.

Жоқ параметрі бар слайдтар анимациясыз ауысады.

Баяу параметрдің көмегімен слайдтар баяу айналады.

Жылдам параметрі көмегімен слайдтар жылдам айналдырылады.

Автоойнату. Слайдтар автоматты түрде, секундпен өзгеретін жылдамдықты келтіреді. Егер мәнді секундпен көрсетпесеңіз, автоматты слайд ауысуы болмайды.

Үлкейту. Галерея суреттерінде кішірейту мүмкіндігін басу арқылы қосады. Оның екі параметрі бар: Басу және ешқайсысын ұлғайту.

Басу түймешігін үлкейту түймешігін басқанда суреттерді үлкейтеді.

Жоқ параметрі бар суреттер басу арқылы үлкеймейді.

Көрсеткілер. Көрсеткілердің (түймелердің) сыртқы түрін анықтайтын параметрлер жиынтығы.

Нүктелер. Галереядан төмен нүктелердің пайда болуын анықтайтын прецедент. Нүктелер слайдтар санын білдіреді.

Әрбір слайдтың (суреттің) жеке параметрлері бар:

Оларда слайд тақырыбын (Сурет тақырыбы), SEO үшін альт-тег орнатуға, YouTube немесе Vimeo қызметінен бейне қосуға, сондай-ақ осы слайдты басқанда басылатын сілтемені қосуға болады.

Нөлдік блокқа қосылған барлық элементтер Қабаттар тақтасында пайда болады. Қабаттарды ⌘+ L пернелер тіркесімі арқылы немесе контекстік мәзір арқылы ашуға болады: экранның жоғарғы оң жақ бұрышындағы үш нүктені «...» басыңыз - мәзір тақтасы ашылады, қабаттарды қосу үшін «Қабаттар» түймесін басыңыз: «Жасыру/көрсету».

Қабаттарда элементтердің әртүрлі түрлері сәйкес белгішелер арқылы көрсетіледі. ⇧ (Shift) пернесін басып тұру арқылы бірнеше қабатты таңдауға болады, мысалы, элементтерді топқа біріктіру . Топтарға топтастырылған элементтер ашылмалы тізімде көрсетіледі.

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

Қабатты жасыру/көрсету үшін көз белгішесін басыңыз.

Таңдалған қабатты құлыптау үшін құлыптау белгішесін, параметрлер тақтасындағы Құлыптау түймесін немесе L пернесін басыңыз.

Қабаттардың ретін тінтуірдің көмегімен өзгертуге болады (тінтуірдің сол жақ түймесін басып тұрып, элементті тізімде жылжытыңыз) немесе элемент параметрлері арқылы (параметрлер тақтасының Реттеу элементінде әрекетті таңдаңыз - қабатты алға жылжытыңыз (Алға апару) ), оны артқа түсіріңіз (Артқа жіберіңіз), оны үстіңгі қабат етіңіз (Алдыңғыға әкеліңіз), төменгі қабат жасаңыз (Артқа жіберу)).

Сондай-ақ, қабаттар тақтасында сіз өңдеп жатқан блокпен бір бетте орналасқан блоктар тізімін көре аласыз. Әдепкі бойынша тізімде тек «нөлдік» блоктар көрсетіледі, ал стандартты блоктар жасырылады. «Тек нөлдік блоктарды көрсету» қосқышын өшірсеңіз, тізімде стандартты блоктар көрсетіледі.

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

Бірнеше элементтерді топқа біріктіру үшін қажетті элементтерді таңдап, ⌘ + G пернелер тіркесімін немесе параметрлер тақтасындағы Топ түймесін басыңыз.

Элементтерді контекстік мәзір арқылы топтастыруға болады: таңдалған элементтердің біреуін тінтуірдің оң жақ түймешігімен басып, Топтау опциясын таңдаңыз.

Топтарды кірістіруге болады (ұя салудың бес деңгейіне дейін).

Параметрлер тақтасындағы Топ тармағында топтың түрін таңдауға болады - логикалық (Логикалық) немесе нысанды (Объект).

Логикалық топта параметрлер топтағы әрбір элементке жеке қолданылады. Егер мәтін мен пішін топта біріктірілсе, өң түсі параметрлері (BG.COLOR) тек Shape элементіне қолданылады.

Параметрлер бөлек элемент ретінде Object түрі бар топқа қолданылады. Мысалы, фондық түс параметрі бүкіл топқа қолданылады.

Нысандар тобы үшін анимацияны, сілтемені, штрихты, көлеңкені, толтыруды, тегті орнатуға, сондай-ақ Auto Layout параметрін қосуға болады.

Мәтін элементтері, Пішіндер, құралдар кеңестері, түймелер, галереяның басқару элементтері және векторлық элементтер үшін градиентті қолдануға болады - сызықтық (Сызықтық) немесе дөңгелек (Радиалды).

Градиент қосу үшін элементтің түс параметрлеріне өтіп, Қатты күйден Сызықтық немесе Радиалдыға өзгертіңіз. Градиент палитрасы пайда болады, оны басу арқылы басқа түстерді қосуға болады.

Қажет емес түстерді жою үшін түсті таңдап, Backspace пернесін басыңыз. Бояғыштың астындағы сызықтық градиент үшін бағыт бұрышын орнатуға болады.

Адаптация в Zero Block настраивается вручную для каждого экрана. По умолчанию предусмотрены контрольные точки (Breakpoints) для основных типов экранов:


1200 – max (компьютеры)
980 – 1200 (планшет горизонтальный)
640 – 980 (планшет вертикальный)
480 – 640 (смартфон горизонтальный)
360 – 480 (смартфон вертикальный)

Если навести на панель переключения типов экрана, появляется иконка настроек, при нажатии на которую вы можете самостоятельно добавить нужные брейкпоинты для изменения диапазонов ширины экрана (от 360 до 2560 px).

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

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

Төмендегі мысалда мәтін элементіне арналған барлық параметрлер сұр болып табылады. Демек, экранның ағымдағы нұсқасы үшін олар алдыңғы нұсқадағыдай дәл солай қалады.

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

Бос бос орынды бассаңыз, параметрлер артборд параметрлерін көрсетеді.

Тор контейнерінің биіктігі. Пернетақтадан пикселге орнату. Сондай-ақ оны тінтуірмен бірге ыдыстың жиегін апару арқылы өзгертуге болады. Тор контейнерінің ені бекітілген және 1200 px тең.

Фон түсі. Жұмыс тақтасының параметрлерінде фон түсін - біртұтас түс немесе градиент орнатуға болады.

Фондық кескін. Артборд параметрлерінде кескінді блоктың фоны ретінде кері жүктеуге болады.

Мұнда сондай-ақ фондық кескіннің тонын (Filter Start / Filter End) және мазмұнның фондық кескінге қатысты мінез-құлқын реттеуге болады: Егер мәнді Бекітілгенге орнатсаңыз, онда мазмұн (мәтін, кескіндер) айналдыру кезінде ауысып, кескін орнында қалады.

Артқы тақта параметрлерінің "Орын және толып кету" элементінде беттегі басқа блоктарға қатысты өңделген блоктың орналасуы мен қабаттасуы параметрлерін өзгертуге болады.

Позиция. Параметрлері бар: Тұрақты және Абсолютті.


Fixed параметрін пайдаланып, блокты жоғарғы жағында (егер сіз туралау - терезенің жоғарғы жағында таңдасаңыз) немесе төменгі жағында (туралау - терезенің төменгі жағында) түзетіп, N пиксельден кейінгі көріністі орнатуға болады (белгідегі пикселдер санын көрсету арқылы). Офсет өрісі пайда болады).


Absolute параметрімен блок айналдыру кезінде бекітілмей, келесі блоктың үстіне қойылады.

Қабаттардағы блоктың орнын Z-индекс өрісінде орнатуға болады (сан неғұрлым жоғары болса, қабат соғұрлым жоғары болады).

Толып кету. Оның үш параметрі бар: көрінетін, жасырын және автоматты.

Visible параметрімен контейнер шекарасынан тыс орналасқан элементтер блоктан тыс көрсетіледі және басқа блоктармен қабаттасады.

Hidden параметрімен контейнер шекарасынан тыс орналасқан элементтер жасырылады.

Авто күйіне орнатылғанда, айналдыру контейнерден тыс элементтерге қолданылады. X немесе Y осі үшін параметрді таңдаған кезде көлденең және тік айналдыруды бөлек орнатуға болады.

Түймені немесе сілтемені басқанда блок қалқып шығу үшін «Басқа» санатынан T1093 түрлендіргіш блогын қосыңыз.

Мазмұнды блоктау бөлімінде қажетті Нөлдік блоктың идентификатқышын көрсетіңіз (немесе оны «Нөлдік блокты таңдау» сілтемесін басу арқылы қолмен таңдаңыз). Қалқымалы терезенің әдепкі сілтемесі #zeropopup сілтеме болады, оның атауын кез келген атауға өзгертуге болады, бірақ басында фунт символын қалдыру керек. Осыдан кейін блок тұрақты қалқымалы терезе сияқты жұмыс істеп, бетте жасырылады.

Қалқымалы блоктардың қалай жұмыс істеп жатқаны туралы толығырақ «Қалқымалы блоктар» мақаласынан оқи аласыз.

T1093 блогының параметрлерінде фон параметрлерін (түсі, мөлдір еместігі), жабу белгішесінің түсі, анимация жылдамдығын орнатуға болады,
реттелетін Z-индексі және басқа параметрлер.

T1093 блогымен қалай жұмыс істеу керектігі және Zero Block ішінде қалқымалы терезе жасау туралы бейне оқулықты қараңыз.