Kaip sukurti prisitaikantį dizainą Nicepage svetainių kūrimo programoje

Šiandien aktualu, kad lankytojai patogiai skaitytų jūsų interneto svetainės turinį skirtinguose įrenginiuose. Šioje pamokoje parodysime, kaip greitai ir lengvai padaryti prisitaikantį interneto svetainės dizainą.

Apie prisitaikymą (Responsiveness)

Kas yra prisitaikantis dizainas? Prisitaikantis dizainas yra tai, kaip jūsų interneto svetainė atrodo įvairiuose įrenginiuose, mobiliųjų telefonų ar planšetinių kompiuterių ekranuose.

Interneto svetainių draugiškas dizainas

Galimos problemos. Jei nesilaikoma prisitaikančio interneto dizaino taisyklių, internetinės svetainės turinį bus sunku perskaityti dėl labai mažų šriftų, mažų atvaizdų ir kai kurie elementai gali užlįsti vienas ant kito.

Blokų judėjimas. Kad suprastumėte, kaip sukurti prisitaikančią interneto svetainę, svarbu suprasti, kas nutinka su jūsų turiniu mobiliųjų įrenginių ekranuose. Nuolat jūsų svetainės plotis mažėja, o turinio blokai perkeliami vienas po kito.

Kaip pritaikyti interneto svetainę mobiliesiems

Perjungimo įrankiai. Nicepage programoje viršutinėje įrankių juostoje yra įrenginių piktogramos mobiliesiems vaizdams perjungti. Tai leidžia peržiūrėti ir modifikuoti kiekvieno konkretaus rodinio dizainą. Štai taip jūsų internetinė svetainė atrodys įvairiuose mobiliuosiuose įrenginiuose ir kompiuterio monitoriaus ekrane.

Pažiūrėkime, kokie populiariausi mobilieji įrenginiai („Responsive Modes“) palaikomi Nicepage programoje.

Vaizdai mobiliuosiuose telefonuose

Palaikomos peržiūros galimybės. Pirmasis rodinys yra kompiuterio ekranas, tai yra plačiausia peržiūros sritis. Kitas yra nešiojamojo kompiuterio ekranas, toliau - planšetinio kompiuterio ekranas, tada horizontalus telefono ekranas ir, pagaliau, siauriausias bet vienas iš populiariausių šiuolaikinių ekranų - vertikalus telefono ekranas.

Interneto svetainės rodymas mobiliuosiuose

Problemų įvairiuose prietaisuose sprendimas. Dažniausias klausimas yra, kaip sukurti interneto svetaines, kurios gražiai reaguotų į prisitaikančius režimus? Jei duomenys netinka mobiliesiems įrenginiams, turite naudoti tinklelio maketus ar stulpelius. Ir mes paaiškinsime, kodėl.

Responsive dizainas

Tinklelio maketo naudojimas

Turinio pritaikymas. Taigi, kaip tinklelis (stulpeliai) padeda tinkamai rodyti turinį mobiliuosiuose įrenginiuose? Paprastai yra daug turinio duomenų, kurie, pavyzdžiui, netelpa telefono ekrane. Nicepage tinklelio maketai yra sukurti taip, kad jei ekrano plotis nėra pakankamas, tinklelio langeliai automatiškai perkeliami vienas po kito. Mes rekomenduojame naudoti tinklelio maketus, kad jie iškart pritaikytų jūsų turinį mobiliesiems įrenginiams.

Tinklelių maketai

Vaizdo blokai (Sections). Nicepage programoje, Naujo bloko (New Section) sąraše, dauguma iš anksto suprojektuotų skyrių jau naudoja tinklelį. Pridėjus tas skiltis, jums nekyls problemų, nes visi nustatymai mobiliesiems jau padaryti teisingai ir jums nieko nereikės daryti.

Kaip įkelti piktogramą į interneto svetainę

Blokų (section) pridėjimas. Pridėkite naują bloką ("Add section"). Pasirinkite "Vaizdai" ("Images"). Pasirinkite temos kategoriją „Verslas“ ("Business"). Pasirinkite stilių kairėje. Pridėkime galerijos (Gallery) bloką su 3 vaizdais. Spustelėkite "Atlikta" ("Done"). Šiek tiek pakoreguokite sekcijų kraštus. Šiame skyriuje naudojamas tinklelis su trimis langeliais. Perjungdami mobiliuosius ekranus matome langų judėjimą.

Maketai be tinklelių

Pridedamas įvadinis blokas. Tačiau yra blokų, kuriuose yra mažiau turinio, pvz., Blokas „Įvadas“ (Introduction) (arba herojaus atvaizdas (Hero Image)). Pridėkite naują bloką. Pasirinkite „Įvadas“ ("Introduction"). Naujo bloko sąrašo viršuje pasirinkite temos kategoriją „Verslas“ ("Business"). Pasirinkite šį bloką. Spustelėkite Atlikta ("Done").

Svetainių maketai

Konteineriai vietoj tinklelių. Tokiose blokuose vietoj tinklelių naudojami konteineriai. Pridėkime demonstracinį skyrių „Įvadas“ ("Introduction"). Jei reikia, sumažinkite bloko aukštį. Norėdami pamatyti rezultatą, perjunkite ekranus.

Sukuriamas prisitaikantis blokas

Tuščio bloko pridėjimas. Dabar sukurkime paprastą bloką su dviem langeliais, kad parodytume, jog greitai ir lengvai galima sukurti prisitaikantį interneto svetainės dizainą naudojant Nicepage programą. Čia yra blokas, kurį naudosime kaip pavyzdį. Pridėkite naują bloką (Add Section). Pasirinkite tuščią bloką ("Blank"). Padidinkite bloko aukštį. Pridėkite tinklelį ("Gird"). Pasirinkite Pridėti ("Add") -> Tinklelis ("Grid"). Sąraše pasirinkite tinklelį su dviem langeliais. Spustelėkite "Atlikta" ("Done").

Kaip interneto svetainėje pritaikyti paveikslėlį

Bloko modifikavimas. Pagal numatytuosius nustatymus tinkleliai pridedami su numatytuoju fonu, todėl yra lengva atpažinti langelius. Sumažinkite tinklelio aukštį. Sulygiuokite tinklelį bloke. Judant matote raudonus magnetinius kreipiklius ir skaičius, kurie padeda suderinti turinį.

Turinio pridėjimas

Darbas su vaizdais. Pakeiskite vaizdą kairiajame langelyje, vilkdami ir numesdami atvaizdą iš vietinio aplanko. Pasirinkite tinkamą langelį. Išjunkite šio langelio užpildymą ("Fill").

Tekstų pridėjimas. Pridėkite antraštę. Spustelėkite Pridėti ("Add")-> Tekstas ("Text") -> Antraštė 2 ("Heading 2"). Pakeiskite teksto bloko plotį. Vėlgi labai praverčia magnetiniai kreiptuvai ir rodomi dydžiai. Įveskite antraštės tekstą. Pridėkite tekstą. Spustelėkite Pridėti ("Add")-> Tekstas ("Text") -> Tekstas ("Text"). Sulygiuokite tekstą. Pakeiskite tekstą.

Turinio redagavimas interneto svetainėje

Mygtuko pridėjimas. Pridėkite mygtuką kaip alternatyvą. Viršutiniame langelio kampe spustelėkite mažą pliusą. Pasirinkite mygtuką ("Button"). Sulygiuokite mygtuką. Įveskite mygtuko tekstą. Sulygiuokite langelio turinį.

Vaizdo patikrinimas mobiliuosiuose. Norėdami pamatyti rezultatą, perjunkite mobiliųjų  įrenginių ekranus „Mobile Views“. Matote, kad būtini prisitaikančių režimų (Responsive Modes) išdėstymo pakeitimai atliekami automatiškai.

Vaizdo pritaikymas mobiliajam telefonui

Visiškas prisitaikymas. Turime paminėti, kad visos prisitaikymo funkcijos palaikomos visuose mobiliųjų įrenginių ekranuose. Pereikime prie telefono horizontalaus ekrano. Pakeiskite paveikslėlio apkarpymą. Dabar pakeiskite antraštės dydį.

Paveikslėlių pritaikymas mobiliuosiuose

Paslėpti / Rodyti. Galite paslėpti bet kuriuos turinio elementus, pavyzdžiui, vaizdo elementą, tam tikrame ekrane, pavyzdžiui, telefono horizontaliame ekrane. Taip pat labai lengva įjungti šį elementą atgal. Jei reikia, keiskite tos pačios eilės langelių vietas.

Dažniausios klaidos

Kurti be konteinerių. Dabar apžvelgsime dažniausias pasitaikymo klaidas, kurias žmonės daro kurdami maketus. Galite nenaudoti tinklelį. Nicepage programoje tai įmanoma be jokių apribojimų, tačiau tada kiekviename mobiliajame įrenginio ekrane prireiks atlikti labai daug darbo ir išdėstymo modifikacijų.

Blokų (Section) pridėjimas. Pažiūrėkime į tai. Pridėkite tuščią (Blank) bloką. Padidinkite bloko aukštį. Pridėkite paveikslėlį. Spustelėkite Pridėti (Add)-> Paveikslėlis (Picture). Sulygiuokite vaizdą ir sumažinkite jo dydį. Pasirinkite vaizdą (Image).

Turinio pridėjimas ir modifikavimas. Pridėti antraštę 2 (Heading 2). Spustelėkite Pridėti (Add) -> Tekstas (Text) -> Antraštė 2 (Heading 2). Pakeiskite antraštės teksto bloko dydį ir vietą. Matote, kitaip nei tinklelio makete, tai yra sunkiau. Pakeiskite antraštės tekstą. Pridėkit tekstą. Spustelėkite Pridėti (Add) -> Tekstas (Text) -> Tekstas (Text). Pakeiskite tekstą. Pridėti mygtuką (button). Spustelėkite Pridėti (Add)-> Mygtukas (Button). Sulygiuokite mygtuką. Pakeiskite mygtuko tekstą.

Kaip sutvarkyti turinį

Vaizdų prisitaikymas mobiliesiems. Perjunkite mobiliųjų įrenginių ekranus. Nešiojamojo kompiuterio (Laptop) režime paspauskite mygtuką iš dešinę. Planšetinio kompiuterio režime mygtukas vėl yra ne savo vietoje. Dar blogesnė padėtis yra telefonų ekranuose. Telefono horizontaliame ekrane teksto blokas perdengia vaizdą, nes nepakanka pločio. Rankiniu būdu perkelkite, pakeiskite dydį ir sulygiuokite teksto blokus ir mygtuką. Pakartokite visus judesius vertikalaus telefono ekrane. Primename, kad palaikomos visos redagavimo funkcijos. Paslėpkime ir šio bloko vaizdą telefono horizontaliame ekrane.

Mes baigėme. Taigi ištrinkime šį bloką. Atidarykite meniu skyrių , esantį programos įrankių skydelyje esančiame iš kairės, ir pasirinkite Trinti (Delete).

Sudėtingi maketai

Perdengimo stilius . Yra modernių blokų su sudėtingais išdėstymais, kurie ne visai dera prie tinklelio išdėstymo. Taip pat šiais laikais labai populiarus yra internetinių svetainių dizainas su sudėtingą struktūra. Nicepage interneto svetainių kūrimo programoje tinkleliai paprastai nenaudojami blokuose su sudėtinga struktūra. Todėl tokie blokai mobiliems ekranams taip pat yra iš anksto sukurti.

Sudėtingų interneto svetainių maketai

Blokų su perdengimais (overlapping) pridėjimas. Pridėkime bloką, kuriame yra perdengimas. Pridėkite naują bloką (section). Pasirinkite Vaizdai (Images). Viršuje pasirinkite temų kategoriją „Verslas“ ("Business"). Kairėje pasirinkite stilių „Perdengimas“ ("Overlapping"). Pasirinkite bloką. Spustelėkite Atlikta (Done). Matote, kad šio bloko išdėstymas yra sukurtas naudojant konteinerius. Norėdami pamatyti, kaip juda blokai, perjunkite mobiliųjų įrenginių ekranus.

Pagaliau peržiūrėkite puslapį ("Preview").

Tikimės, kad jums patiko ši pamoka apie tai, kaip Nicepage programoje sukurti prisitaikantį interneto svetainės dizainą.

© 2020 Nicepage.lt

Paieška