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

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

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

В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.

В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Container и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Жол. Тіктөртбұрыштың биіктігін параметрлерде 1-5 px дейін орнатыңыз, сызық аласыз.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ілмек. Бұл параметр галереядағы слайдтарды (суреттерді) ілмектеу. Оның екі параметрі бар: 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-индексі және басқа параметрлер.