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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блоктағы барлық элементтерді таратқаннан кейін және құрал-сайманды пайдаланғаннан кейін, құралдар жиынтығы блоктың жоғарғы немесе төменгі жағында немесе оның жиектерінде ажыратылмайтындай етіп экранның барлық ажыратымдылықтарында құрал-сайманның орналасуын тексеруді есте сақтаңыз.
Бұйымның сипаттамасын көрсету үшін құралдар жиынтығын пайдалану. Сурет:flag of SPERA.de.svg — Уикипедия
6
Пішін
«Нөлдік блокқа» көлденең немесе тік пішінді қосуға және барлық қажетті параметрлерді қолдануға болады: енгізу өрістерін қосу, деректерді қабылдау қызметтерін қосу, сәттілік және қате туралы хабарларды орнату, пішін мәнерін орнату және оған анимацияны қолдану.
Tilda жариялау блогындағы нөлдік блоктағы пішін
Пішін өрістерін өңдеу үшін Пішін элементінің параметрлері бөліміне өтіп, Өрістерді енгізу тармағына өтіңіз. Мұнда өрістерді тұрақты пішін блогындағыдай өңдеуге және конфигурациялауға болады.
Деректерді ішу қызметтерін қосу үшін Пішін элементінің параметрлері бөліміне өтіп, Қызметтер бөліміне өтіңіз. Мұнда сайтпен интеграцияланған деректерді қабылдау қызметтерін қосуға болады.
7
Галерея
Суреттер жиынтығын Нөлдік блокқа қосуға болады. Кескін элементі сияқты галереяның ені мен биіктігін өзгертуге болады.
Галерея параметрлерін қарап көрейікші:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Қалқымалы блоктардың қалай жұмыс істеп жатқаны туралы толығырақ «Қалқымалы блоктар» мақаласынан оқи аласыз.
T1093 блогының параметрлерінде фон параметрлерін (түсі, мөлдір еместігі), жабу белгішесінің түсі, анимация жылдамдығын орнатуға болады,
реттелетін Z-индексі және басқа параметрлер.
Z-индексі блоктардың бетке жиналу тәртібін анықтайды. Сандық мәндерді пайдаланыңыз (Z-индексі 10 болатын блок Z-индексі 5 болатын блоктың үстіне отырғызылады).
Нөлдік блок редакторының негізгі, негізгі және ерекшеліктерін қамтыдық. Нұсқаулықтың екінші бөлімінде жауапты веб-дизайнмен байланысты неғұрлым жетілдірілген параметрлерді бұзамыз.
Екінші бөлім
Жауап беру дизайны
Басқа бөлімдер
20__ жылғы «___» __________
Тильда