Транскрипт
Увод
Као што смо већ научили, блокови представљају темељ изградње нашег веб места. Можемо их посматрати као праве блокове за изградњу веб-сајта. У овој лекцији надоградићемо знање о блоковима, истражити различите типове блокова, као и начин на који се блокови могу угнежђавати и груписати да бисмо направили различите распоредe.
Угнежђени блокови
Угнежђени блокови нам омогућавају да креирмо сложеније распореде додавањем једног или више блокова у други блок. Обично користимо блокове за груписање садржаја као што су блокови Група, Колоне, Насловна слика, Садржај и текст или Ред.
Подсећања ради, када отворимо Преглед документа, можмо да се крећеш између нивоа садржаја и угнежђених блокова. Погледајмо овај део наше почетне странице да видимо како то функционише. Изабраћемо блок Колоне. Када проширимо блок Колоне, видећемо све блокове унутар њега. У левој колони ћемо видети блок Заглавље, блок Размакница и блок Пасус. У десној колони видећемо блок Галерија са четири слике. Хајде да заједно направимо неке примере.
Блок Група
Прво ћемо груписати неке блокове користећи блок Група. Затим ћемо додати блок Заглавље и унети текст. У овом случају, уносимо текст „Смех је најбољи лек“. Затим ћемо притиснути Ентер и додати блок Колоне, изабрати две једнаке колоне, и онда додати текст у леву и десну колону. Након тога ћемо у Прегледу документа означити оба ова блока држећи Shift и кликнути мишем, што нам омогућава да изаберемо више блокова одједном и употребимо алатну траку блока да их групишемо у један блок Група.
Хајде да променимо ширину блока Група на широку ширину. Али пре тога, морамо да искључимо опцију „Унутрашњи блокови користе ширину садржаја“. Само када је ова опција искључена, унутрашњи блокови ће моћи да користе опције ширине као што су широка ширина и пуна ширина. Ако не искључимо ову опцију, нећемо моћи да променимо поравнање, на пример, на пуну ширину. Као што видимо, ништа се не дешава. Када искључимо ту опцију, можемо да се вратимо на алатну траку блока и променимо ширину на широку ширину без ограничења која поставља тема.
Затим, можемо отворити картицу Стилови да додатно стилизујемо наш блок. Прва ствар коју треба да урадимо је да променимо боју позадине блока Група. Имајте на уму да можемо додати и позадинску слику блоку Група. Кликом на три вертикалне тачке поред Типографије приказаће се све доступне опције. Затим ћемо додати мало унутрашњег размакa да створимо више простора око садржаја у блоку. По жељи, можемо наставити са стилизовањем блока Група.
Када имамо више нивоа садржаја на страници, можемо користити блок Група да променимо називе секција. У горњем примеру, видимо да се прва секција зове „Наша прича“. Сада можемо да изаберемо блок Група испод и преименујемо га, у нашем случају, у „Препоруке“. Ова функција блока Група нам омогућава да структуирамо и организујемо свој садржај.
Блок Садржај и текст
У следећем примеру, користићемо блок Садржај и текст да групишемо блокове заједно. Прво ћемо додати блок Садржај и текст. Лево ћемо додати слику из библиотеке садржаја. Десно ћемо почети да додајемо текст. На врху ћемо додати наслов и унети текст „Суши је уметност“. Притиснућемо тастер Ентер, па додати неки текст. На дну ћемо додати позив на акцију, односно блок Дугмад. Текст ће бити „Сазнај више“, а помоћу траке са алаткама ћемо текст учинити подебљаним и додати одговарајућу везу. Затим ћемо изабрати родитељски блок у Прегледу документа и променити поравнање на широку ширину. Можемо и помоћу траке са алаткама променити и приказ слике са десне стране. Испод Подешавања ћемо променити ширину садржаја на 40. Онда ћемо отворити картицу Стилови и додати још мало унутрашњег размакa око садржаја. На крају ћемо променити вертикално поравнање слике да буде по дну.
Блок Колоне
У следећем примеру користићемо блок Колоне. Блок Колоне је један од најефикаснијих блокова за креирање сложених распореда или дизајна. Хајде да додамо блок Колоне и изаберемо три једнаке колоне. У леву колону ћемо додати текст и назвати га Плоче, притиснути тастер Ентер, а затим додати пасус. Испод тога ћемо додати блок Слика и изабрати слику из библиотеке садржаја. Потом ћемо изабрати текст на врху, подебљати га и увећати, а затим центрирати текст оба пасуса. Када се текст поравна у средини, изабраћемо блок Слика и променити однос ширине и висине на квадратни. Затим ћемо изабрати главни блок Колоне или родитељски блок и променити поравнање на ширину са маргинама.
Након тога, идемо у Стилове да додамо мало унутрашњег размaka око садржаја блока, као и размак између три колоне. Када завршимо са стилизовањем блока, изабраћемо леву колону и дуплираћемо је два пута. Када се дуплирају, можемо обрисати празне колоне. Затим ћемо изменити садржај по жељи.
Блок Прекривач
У последњем примеру ћемо користити блок Прекривач. Блок Прекривач нам омогућава да прикажемо текст и други садржај преко слике или видеа. Одличан је за коришћење у заглављима и као банер стил приказа. Хајде да додамо наш блок Прекривач. Овде видимо да можемо изабрати боју као прекривач. Ипак, хајде да додамо слику из библиотеке садржаја као позадину. После тога, додаћемо текст, а затим и блок Дугмад. Написаћемо „Поручи“ и променити боју позадине и текста на дугмету за позив на акцију. Онда ћемо изабрати оба блока и спаковати их заједно користећи блок Поређај. Ово нам омогућава да истовремено прилагодимо оба блока. Затим ћемо центрирати тај блок Група, изабрати Прекривач и променити поравнање на широку ширину. Не заборавите да искључите опцију „Унутрашњи блокови користе ширину садржаја“. Сада можемо наставити са додатним изменама. Увећаћемо текст „Уживај у 20% попуста“ и блок Дугмад. Хајде да подебљамо текст на дугмету. Не заборавите да додате везу. Затим ћемо поново изабрати блок Прекривач. Имајте у виду да у алатној траци блока можете укључити режим пуне висине. Такође можете ручно смањити или повећати висину блока. Отворићемо и картицу Стилови и променити провидност блока Прекривач на 30 да би био светлији. Сада је нашј блок Прекривач спреман. Верујем да се сада осећате сигурније у коришћењу угнежђених и груписаних блокова заједно.
Уради сам
Иди у WordPress Playground и направи следеће примере да тестираш своје знање.
Пример 1:
Пример 2:
- Направи први пример
- Корак 1: Додај блок Наслов
- Корак 2: Додај блок Колоне са две једнаке колоне и упиши текст у леву и десну колону.
- Пример текста: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Корак 3: Изабери блок Заглавље и блок Колоне и групиши их. Затим промени ширину блока Група у широку ширину.
- Корак 4: Промени боју позадине блока Група у боју по свом избору.
- Корак 5: Подеси унутрашње размаке блока Група по свом избору.
- Направи други пример
- Корак 1: Додај блок Прекривач и позадинску слику. Ако немаš слику на свом рачунару, можеш користити сајт https://unsplash.com/.
- Корак 2: Промени ширину блока у Пуну ширину.
- Корак 3: Промени боју прекривача (у примеру је коришћена боја #2C3066) и подеси провидност прекривача на 80%.
- Корак 4: Промени унутрашње размаке на 4 са сваке стране блока.
- Корак 5: Додај блок Група, упиши „Уживај у“, притисни тастер Ентер, па упиши „20% попуста“. Промени слова у велика слова, увећај текст на 160 пиксела и подеси да буде подебљан.
- Корак 6: Додај блок Размакница са величином од 50 пиксела.
- Корак 7: Додај блок Дугмад, промени боју позадине у белу, а боју текста у црну.
- Корак 8: У блоку Дуґмад промени слова у велика слова и величину текста на 20 пиксела. На крају, додај унутрашње размаке по потреби за твој дизајн.