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

Бірінші бөлім. Жұмыстың басталуы.
Қадамдық нұсқаулық
Нөлдік блок өңдегішінде жұмыс істеу
Нөлдік блокпен жұмыс істеу туралы бейне оқулықты қараңыз немесе төмендегі егжей-тегжейлі нұсқауларды оқыңыз.
Zero Block - Tilda ішіндегі кәсіби редактор, ол өз дизайныңызбен блоктар жасау арқылы кез келген идеяны жүзеге асыруға мүмкіндік береді. Бұл танымал сурет редакторлары сияқты. Тек Тильда.
Негізгі мүмкіндіктерге шолу мақаласы
Контейнерлермен жұмыс істеу және «резеңке» элементтерді жасау туралы мақала
Жұмысты жылдамдату үшін барлық комбинациялардың тізімі
Сайттың барлық элементтерінің бір макетін құру
Негізгі анимация анықтамасы: мұздату, параллакс және анимацияны көрсету
Күрделі қадамдық анимация туралы мақала: негізгі принциптер, параметрлер және мысалдар
Күрделі триггер анимациясының анықтамасы: орнату және мысалдар

Орналасуды Figma-дан Нөлдік блокқа автоматты түрде импорттау әдісі

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

Тор контейнері Tilda сияқты торды, 12 бағанды (1200 пиксель) пайдаланады. Егер сіз нысандарды Тор контейнеріне байланыстыруды қоссаңыз және элементтерді Тор контейнерінің ішіне орналастырсаңыз, олар экран өлшеміне қарамастан әрқашан 12 баған ішінде болады.
Тор контейнері - негізгі, негізгі жұмыс аймағы.
Элементтерді қосу және өңдеу
Бетке элемент қосу үшін жоғарғы сол жақ бұрыштағы қосу белгісін басыңыз. Мәтінді, суретті, нысанды, түймені, бейнені, құралдар кеңесін, код блогын, пішінді немесе галереяны қосуға болады.
Кескінді кескінді қалтадан блок аймағына сүйреп апару арқылы да қосуға болады.
Тінтуірдің көмегімен элементті өңдеу
Нөлдік блок тінтуірмен орындалатын барлық негізгі манипуляцияларды қолдайды: элементтерді жылжытуға, масштабтауға, көшіруге (Alt пернесін ұстап тұру арқылы), бірнеше нысандарды таңдауға болады.
Кескіні бар элементтерде өлшемді өзгертуге болады, бірақ түпнұсқа кескіннің пропорциялары әрқашан сақталады .

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

Түйменің өлшемі мен пішіні барлық бағытта өзгереді.
Бірнеше нысандармен әрекеттерді орындау үшін: Cmd+A (барлық нысандарды таңдау) пернелерін басыңыз немесе Shift пернесін басып тұрып, тінтуірмен жұмыс істегіңіз келетін нысандарды таңдаңыз .
Бірнеше нысан таңдалғанда, олар бір-біріне қатысты немесе контейнерге қатысты көлденең және тігінен туралануы мүмкін
Пернетақтадан элементті өңдеу
Пернетақтадан өңдеу жұмысыңызды айтарлықтай жылдамдатады, сондықтан біз жылдам пернелерді пайдалануды ұсынамыз.
Экран түрін өзгерту
торды жасыру
Параметрлерді жасыру
Басқару элементтерін жасыру
Соңғы әрекетті болдырмау
Сақтау
Элементті көшіру
Элементті енгізу
Элементті жылжыту
Элементті жою
Мөлдірлікті өзгерту
Блок элементі
Қаріп өлшемін өзгерту
Жол аралығын өзгерту
Әріптер аралығын өзгерту
Барлығын таңдаңыз
Қабаттарды көрсету/жасыру
Көкжиек қосыңыз. бағыттаушылар
Верт қосыңыз. бағыттаушылар
⌘+1...5
Г
TAB
Ф
⌘+Z
⌘+С
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0...9
Л
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘+Shift+H
(Windows жүйесінде ⌘ орнына Ctrl пернесін пайдаланыңыз)
Сондай-ақ, «нөлдік блоктың» контекстік мәзірінде жылдам пернелер тізімін таба аласыз.
Параметрлер тақтасы арқылы өңдеу
(TAB пернесі)
1
Мәтін
Элементтің толық параметрлері экранның төменгі оң жақ бұрышындағы Параметрлер түймесін басу арқылы ашылады.
Tab пернесін басу арқылы параметрлер тақтасын ашуға/жабуға болады.
Әдепкі бойынша, параметрлер тақтасы жұмыс кеңістігін бос ұстау үшін әрқашан жиырылады.
Түймелердің жоғарғы қатары контейнерге қатысты элементті тігінен және көлденеңінен жылдам туралау үшін пайдаланылады .

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

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

Мұнда элемент параметрлері берілген: ені және биіктігі. Өлшем бірліктері - пиксельдер.
Қаріп өлшемін өзгерту үшін -/+ пернелерін пайдаланыңыз
Cmd+жоғары/төмен көрсеткілері жол аралығын өзгертеді.
Cmd+солға-оңға көрсеткілер әріптер аралығын өзгертеді.
Элементті көшіру үшін Alt пернесін басып тұрып, оны сүйреңіз .
Мөлдірлікті пернелер арқылы ыңғайлы реттеуге болады:
1 - 10%
2 - 20%
...
0 - 100%
2
Кескін
Жүктеу кезінде сурет жүктелген кадрдың өлшемін алады. Параметрлердегі Бастапқы өлшем түймесі кескінді бастапқы өлшеміне қайтарады.
Шеңберде суретке түсіргіңіз келсе, кескінге дөңгелектеу радиусын беріңіз.

Біркелкі шеңберді алу үшін түпнұсқа фотосурет төртбұрышты болуы керек, ал дөңгелектеу радиусы жағының ұзындығының жартысына тең болуы керек . Яғни, кескіннің өлшемі 100×100 пиксель болса, радиусты 50 етіп орнатыңыз.
Кескінге көлеңке қосуға болады. Ол үшін параметрлерде көлеңке түсін, мөлдірлікті, x және y осі бойынша ығысуды, бұлыңғырлық пен дисперсия дәрежесін таңдаңыз.
Әрбір суретке балама мәтін (alt тегі) берілуі мүмкін. Іздеу жүйелері балама мәтінді кілт сөздер ретінде қарастырады және оларды индекстеу кезінде ескереді. Мәтінді жалпы сайттың мазмұнына сәйкес келетіндей және суреттің мазмұнын көрсететіндей етіп жазыңыз.
Кез келген суретті басқан кезде пайдаланушы басқа бетке өтуі үшін сілтеме жасауға болады . Параметрлерде сілтеме мен мақсатты көрсетіңіз: сол терезеде немесе жаңа терезеде ашыңыз.
3
Пішін
Пішінді қосқанда, бетте төртбұрышқа, шеңберге немесе сызыққа түрлендіруге болатын шаршы пайда болады.

Тіктөртбұрыш : Басқару нүктелерін тінтуірмен сүйреу арқылы жақтардың ұзындығын өзгертіңіз.
Немесе элемент параметрлерінде мәндерді орнатыңыз.
Шеңбер. Шеңберді алу үшін параметрлерде дөңгелектеу радиусын шаршы жағының ұзындығының жартысына тең етіп орнатыңыз.
Түзу. Параметрлерде тіктөртбұрыштың биіктігін 1-5 пиксельге орнатыңыз, сіз сызық аласыз.
Пішіндерді көлеңкелеуге, сызуға және сілтеме жасауға болады.
4
Түйме
Түйме өлшемін, түсін, дөңгелектеу радиусын өзгертеді. Сіз штрих жасап, көлеңке қоса аласыз.

Түймедегі жазу мен сілтеме параметрлерде орнатылған . Мұнда типография да конфигурацияланған: қаріптің өлшемі, түрі, қанықтығы және түсі.
Түймеге реакция орнатуға болады: тінтуірді түйменің үстіне апарған кезде ол фонның, мәтіннің немесе штрихтың түсін өзгертеді.
5
Құрал кеңесі
Құрал кеңесі – меңзерді үстіне апарған кезде мәтін және/немесе кескіні бар кеңесті көрсететін интерактивті элемент.

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

Блоктағы барлық элементтерді таратқаннан кейін және құралдар кеңесін пайдаланғаннан кейін, тақтаның блоктың жоғарғы немесе төменгі жағында немесе оның шеттерінде кесіліп қалмауы үшін барлық экран ажыратымдылықтарындағы құралдар кеңесінің орнын тексеруді ұмытпаңыз.
Өнім мүмкіндіктерін көрсету үшін құралдар кеңесін пайдалану. Фото: SPERA.de
6
Пішін
Блок Нөлге көлденең немесе тік пішін қосуға және барлық қажетті параметрлерді қолдануға болады: енгізу өрістерін қосу, деректерді қабылдау қызметтерін қосу, сәттілік және қате туралы хабарларды орнату, пішінді стильдеу және оған анимацияны қолдану.
Пішін өрістерін өңдеу үшін Пішін элементінің параметрлері, одан кейін Енгізу өрістері тармағына өтіңіз. Мұнда кәдімгі пішін блогындағы сияқты өрістерді өңдеуге және теңшеуге болады.
Деректерді қабылдау қызметтерін қосу үшін Пішін элементінің параметрлері, содан кейін Қызметтер тармағына өтіңіз. Мұнда сайтпен біріктірілген деректерді қабылдау қызметтерін қосуға болады.
7
Галерея
Кескін жиынтығын Нөлдік блокқа қосуға болады. Кескін элементі сияқты галереяның ені мен биіктігін өзгертуге болады.
Галерея параметрлерін қарастырыңыз:

Созылу . Оның екі параметрі бар: Cover және Contain.

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

Contain параметрімен галереяның ішіндегі кескіндер әрқашан бастапқы пішімде болады, сондықтан галереялар ешбір пішімде кесілмейді.

позиция . Кескіннің галерея аймағына қатысты орнын анықтайды. Мысалы, Left Top параметрімен сурет галереяның жоғарғы сол жақ бұрышына қатысты орналасады.

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

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

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

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

Ешбір параметріне орнатылса, слайдтар анимациясыз жылжиды.

Баяу күйіне орнатылса, слайдтар баяу жылжиды.

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

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

масштабтауға болады. Галерея кескіндерін нұқу арқылы үлкейту мүмкіндігін қосады. Екі опциясы бар: «Басу бойынша масштабтау» және «Жоқ».

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

Ешқандай параметрі орнатылса, кескіндер басқанда үлкеймейді.

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

нүктелер. Галерея астындағы нүктелердің көрінісін анықтайтын параметрлер жинағы. Нүктелер слайдтар санын білдіреді.

Әрбір слайдтың (суреттің) жеке параметрлері бар:
Оларда слайд үшін тақырыпты (Image Caption), SEO үшін alt тегін орнатуға, YouTube немесе Vimeo-дан бейне қосуға және осы слайдты басқан кезде орындалатын сілтемені қосуға болады.
Әртүрлі экрандар үшін дизайн бейімделуі
Біз экрандардың негізгі түрлеріне бейімделуді ұсындық:
1200 - макс (компьютерлер)
980 - 1200 (көлденең планшет)
640 - 980 (тік планшет)
480 - 640 (көлденең смартфон)
320 - 480 (смартфон тік)

Бұл дизайн барлық құрылғыларда дұрыс көрсетілу үшін жеткілікті.

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

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

Тор контейнерінің биіктігі . Пернетақтадан пикселдермен көрсетілген. Оны контейнердің шетін тінтуірмен сүйреу арқылы да өзгертуге болады. Тор контейнерінің ені 1200 пиксельге бекітілген.
Фон түсі . Жұмыс тақтасының параметрлерінде бүкіл блоктың өң түсін орнатуға болады.
Фондық сурет . Жұмыс тақтасының параметрлерінде кескінді блок үшін фон ретінде жүктеп салуға болады.
Мұнда сонымен қатар фондық суреттің реңктерін (Сүзгіні бастау / сүзгіні аяқтау) және фондық кескінге қатысты мазмұн әрекетін орнатуға болады: Егер Fixed мәнін орнатсаңыз, мазмұн (мәтін, пішіндер) айналдыру кезінде қозғалады және сурет орнында қалады.
Нөлдік блокты қалқымалы терезе ретінде пайдалану
Түймені немесе сілтемені басқан кезде блокты қалқымалы ету үшін «Басқа» санатынан T1093 блок модификаторын қосыңыз.
Мазмұнды блоктау бөлімінде қажетті Нөлдік блоктың идентификаторын көрсетіңіз (немесе оны «Нөлдік блокты таңдау» сілтемесін басу арқылы қолмен таңдаңыз). Қалқымалы терезенің әдепкі сілтемесі #zeropopup сілтеме болады, оның атауын еркін түрде өзгертуге болады, бірақ басында фунт символын қалдыру керек. Осыдан кейін блок тұрақты қалқымалы терезе сияқты жұмыс істейді және бетте жасырылады.

Қалқымалы блоктардың қалай жұмыс істеп жатқаны туралы толығырақ «Қалқымалы блоктар» мақаласынан оқи аласыз.
T1093 блогының параметрлерінде фон параметрлерін (түс, мөлдірлік), жабу белгішесінің түсін, анимация жылдамдығын,
меншікті Z-индексі және басқа параметрлер.
Z-индекс беттегі блоктардың жинақталу ретін анықтайды. Сандық мәндерді пайдаланыңыз (z-индексі 10 болатын қорап z-индексі 5 болатын қораптың үстіне қойылады).
Біз Zero Block редакторының негізгі, негізгі параметрлерін және мүмкіндіктерін қамтыдық. Нұсқаулықтың екінші бөлігінде жауапты веб-дизайнға қатысты күрделірек параметрлерді бұзамыз.
екінші бөлім
Жауапты дизайн
Басқа бөлімдер
Made on
Tilda