Kaip naudoti tinklelį tam kad pritaikyti interneto svetainę mobiliems įrenginiams

Šiais laikais didžiąją interneto svetainių dalį sudaro blokai (skyriai). Tinklelis padeda struktūruoti jame esantį turinį.

Kam reikalingas tinklelis?

Pagrindinis pranašumas. Didžiulis tinklelių pranašumas yra mobiliųjų vaizdų (Mobile Views) arba prisitaikymo režimų (Responsive Modes) automatinio nustatymo supaprastinimas. Svarbu, kad jūsų internetinės svetainės būtų patogios mobiliesiems.

Patogios interneto svetainės mobiliuosiuose

Paprasta pradžia. Nicepage programoje pradžioje pradėkite bloką, pridėkite „Tinklelį“ (Grid) iš meniu „Pridėti“ (Add) arba paspauskite „G“ mygtuką. „Nicepage svetainių kūrimo programoje yra daugiau nei šimtas skirtingo tipo ir sudėtingumo tinklelių. Kiekvienas tinklelio maketas (Grid Layout) taip pat turi išdėstymo variantus (Variations).

Tinkleliai interneto svetainėse

Maketas su tinkleliu. Taip pat galite pridėti tuščią skiltį, kurioje jau yra tinklelis (Grid). Mes einame šiuo keliu. Perjunkite skyrius puslapio navigacijoje iš kairės. Pakeiskite tinklelio aukštį, patraukdami mėlyną dydžio žymeklį ant tinklelio krašto.

Kaip pridėti tinklelį į interneto svetainę

Tinklelio pasirinkimas. Ką galite padaryti su tinkleliu? Spustelėkite tinklelio žymeklį viršutiniame kairiajame kampe, kad pasirinktumėte tinklelį.

Tinklelio pasirinkimas

Vilkite tinklelį aukštyn. Judant matote magnetinius kreipiklius, kurie padeda jį suderinti. Priklijuokite tinklelį prie kreiptuvų ir sulygiuokite su skyriaus centru.

Tinklelio aukščio nustatymai

Pridėti tarpus. Pakeiskime išdėstymą. Pasirinkite Tinklelis (Grid). Dešiniame skydelyje spustelėkite mygtuką Keisti (Change).

Tinklelio redagavimas

Pakeiskite tinklelio maketą. Pasirinkite Tinklelį su vienu dideliu langeliu ir keturiais mažais. Atminkite, kad tinklelio maketą galite pakeisti bet kada.

Tinklelio perkėlimas. Kaip jūs jau žinote, galite modifikuoti tinklelio matmenis. Pakeiskite tinklelio dydį spustelėdami ir patraukdami mėlynus dydžio žymeklius. Tada pasirinkite skyrių ir sureguliuokite viršutinę ir apatinę paraštes. Tinklelį galite susitraukti dar horizontaliau ir vertikaliau.

Kaip centruoti tinklelį

Tinklelio išlyginimas. Galite sulyginti su bloko centru arba perkelti tinklelį. Užfiksuokime brūkšneliais pažymėtą kairę lapo liniją (Sheet Line).

Pločio keitimas

Proporcingas dydžio keitimas. Dabar pakeiskite tinklelio dydį proporcingai pagal raudoną įstrižainę. Labai patogu.

Proporcingas dydžių keitimas

Dėžutėje ir paltus (Boxet and Wide)

Tinklelis per visą plotį. Galiausiai pritraukite brūkšneliais pažymėtą dešinę lapo liniją. Skyrius dabar yra plataus lapo, tokia būsena dar vadinama „Boxed Mode“.

Kaip padaryti paveikslėlį per visą ekrano plotį

Pločio keitimas. Padarykime skyrių platų (Wide). Pasirinkite skyrių. Dešiniajame skydelyje įgalinkite nuosavybę „Wide“. Peržiūrėkite. Dabar išjunkite „Wide“, kad tinklelio išdėstymas būtų langelyje. Viskas vyksta tik vienu paspaudimu. Peržiūrėkite.

Kopijavimas ir pašalinimas

Nukopijuokite ir įterpkite. Mes nukopijuosime Tinklelį (Grid). Dešiniuoju pelės mygtuku spustelėkite skilties žymeklį ir iš kontekstinio meniu pasirinkite Kopijuoti (Copy). Taip pat galite paspausti klavišus „CTRL + С“. Pasirinkite paskirties skyrių. Dešiniuoju pelės mygtuku spustelėkite ir kontekstinio meniu pasirinkite Įterpti (Past) arba paspauskite klavišus „CTRL + V“, kad įterpti. Sulygiuokite tinklelį. Dabar mes turime du identiškus skyrius.

Kaip kopijuoti elementus svetainėje

Ištrinkite tinklelį ir skyrių. Ištrinsime apatinę Tinklelį. Pasirinkite Tinklelis (Grid) ir dešiniame skydelyje spustelėkite mygtuką "Ištrinti tinklelį" (Delet Grid). Panaikinkime ir skyrių. Pasirinkite skyrių. Dešiniajame skydelyje spustelėkite mygtuką „Ištrinti skyrių“ (Delet Section) arba paspauskite klavišą "DELETE".

Kaip ištrinti iš interneto svetainės

Tinklelio aukščio reguliavimas. Padidinkite skyriaus aukštį traukdami mėlynus juostų žymeklius. Padidinkite tinklelio aukštį traukdami mėlyną taškų žymeklį, kol tinklelis bus išlygintas pagal skyriaus vidurinį snapelį prie raudono kreipiklio.

Tinklelio langelių (Cells) redagavimas

Langelių kopijavimas. Dabar redaguokime langelius. Pasirinkite didesnį langelį kairėje. Dešiniajame skydelyje pakeiskite vaizdo foną į fono spalvą. Nukopijuokite šį langelį, vilkdami jį per kitą langelį, laikydami paspaustą CTRL klavišą.

Kaip redaguoti langelius

Paskirties vietos patarimai. Kopijos metu virš langelių matote patarimus, kurie padeda suprasti, kas nutiks. Pakeiskite mažesnio langelio spalvą į šviesiai pilką.

Langelių keitimas vietomis. Skirtingai nuo kopijavimo, pažymėkite langelį ir vilkite jį per kitą, nespausdami jokių klavišų. Atminkite, kad langelių turinys taip pat perkeliamas.

Kaip pakeisti langelius vietomis

Langelių dydžio keitimas. Pakeiskite langelio dydį, patraukdami juostų žymeklius esančius ant langelio kraštų.

Langelių turinio redagavimas

Fono paveikslėlis. Pasirinkite didesnį langelį ir pakeiskite jo užpildymą atgal į paveikslėlį. Sutraukti vaizdo foną. Pakeiskite paveikslėlio dydį.

Turinio redagavimas

Perkelkite vaizdą aplink. Vėl judėdami pamatysite virš konteinerių pateiktus patarimus, rodančius, kur bus vaizdas. Išskleiskite vaizdą, kad jis taptų fonu. Ši operacija gali būti atliekama bet kuriuo metu.

Kaip perkelti turinį

Turinio pridėjimas ir redagavimas. Įtraukite turinį į mėlynąjį langelį. Viršutiniame dešiniajame langelio kampe spustelėkite mažą pliusą. Pridėti antraštę (Add Heading), tekstą ir mygtuką (Text and Button). Redaguokite antraštės (Heading) tekstą.

Langelis kaip konteineriai. Atminkite, kad langeliai elgiasi taip pat, kaip ir konteineris. Taip pat skaitykite pamoką apie konteinerius. Jei pridedate daugiau teksto, langelis išauga žemyn ir stumia visus žemiau esančius elementus, išlaikydamas paraštes, o tai labai patogu redaguoti.

Langelis kaip konteineris

Tarpinių (Padding)nustatymai. Pakeiskite horizontalią tarpinę spustelėdami ir vilkdami oranžinius taškų žymeklius esančius ant langelio viršutinio krašto. Galite laisvai judinti bet koriuos turinio elementus. Judinkite aplink antraštės. Virš langelių, konteineryje esantys patarimai yra labai naudingi.

Kaip pakeisti nustatymus

Tarpai ir išlyginimas. Pridėkite tarpus tarp turinio elementų, patraukdami oranžinį tašką žymeklį esanti elementų bloko viršuje. Automatiškai sulygiuokite langelio turinį horizontaliai ir vertikaliai spustelėdami dešinėje skydelyje esančias piktogramas „Išdėstyti“ (Arrange).

Mobiliųjų įrenginių ekranai

Prisitaikymas (Responsiveness). Pakeiskite langelio foną į baltą, pasirinkdami spalvą mažoje įrankių juostoje virš langelio. Pakeiskite pirmo langelio fono paveikslėlį. Kaip jau minėjome anksčiau, didžiulis tinklų pranašumas yra tai, kad jūsų blokai (skyriai) ir puslapiai automatiškai internete prisitaiko prie mobiliųjų ir tampa jiems draugiškais.

Mobiliųjų įrenginių interneto svetainės

Prisitaikymo režimų perjungimas. Išbandykime tai. Viršutinėje įrankių juostoje yra įrenginių piktogramos. Spustelėkite šias piktogramas, kad perjungtumėte įrenginio ekranus.

Langelių slėpimas įrenginiuose. Paslėpkime pilkuosius langelius planšetėms ir telefonams. Norėdami tai padaryti, dešiniame skydelyje įgalinkite nuosavybę Slėpti (Hide On). Tada spustelėkite planšetinio kompiuterio ir abi telefono piktogramas, kad paslėptumėte šį langelį tiems mobiliesiems vaizdams.

Kaip pritaikyti interneto svetainės dizainą

Atlikite tą patį ir su kitais dviem pilkais langeliais. Matote, kad pilkas langelis dabar yra paslėptas Planšetės ekrane, „Telefono horizontaliame ekrane“ ir „Telefono vertikaliame ekrane“.

Peržiūrėkite (Preview). Spustelėkite Peržiūra (Preview). Greitojoje peržiūroje spustelėkite įrenginių piktogramas.

Tuo mes užbaigiame šią pamoką apie tai, kaip naudotis tinkleliais Nicepage internetinių svetainių kūrimo programoje.

© 2020 Nicepage.lt

Paieška