Sadaļu pievienošana, pārvietošana un izmēru vilkšana

3. modulis: Teksti, fotoattēli un sadaļas · Lasīšanas laiks: 10 min.

Mērķis: Pēc šīs nodarbības Jūs varēsiet veidot lapu no sadaļām: pievienot sadaļu, izmantojot izvēlni vai tērzēšanu, pārvietot, kopēt un dzēst to, vilkt atstarpes un izmērus, kā arī katrai sadaļai izvēlēties kolonnas, stūrus, fonu un redzamību mobilajā.

Pamatjēdzieni: sadaļa, Bloki, Pievienot bloku, forma, Sadaļa zemāk, trīs dizaini, Izveidot ar MI, Rediģēt sadaļu, Atstarpe, Atstarpe starp elementiem, Kolonnas, Stūri, Slēpt mobilajā, rokturis, Pielāgots HTML

Lapa ir sadaļu kaudze

Katra Jūsu vietnes lapa sastāv no sadaļām: horizontālām joslām, kas izvietotas cita zem citas. Augšā parasti ir Galvenais baneris (lielais sākums ar virsrakstu, tekstu un pogu), zem tā, piemēram, Kartītes ar Jūsu pakalpojumiem, Atsauksmes, Darba laiks un apakšā Kontakti. Veidotājā ir 35 veidi, katrs vienā vai vairākās formās: tas pats saturs, tikai citādi noformēts.

Kas domā šādi, izveido labāku lapu. Svarīgāko informāciju novietojiet augšā, vienu tēmu katrā sadaļā, un beigās norādiet, kas apmeklētājam jādara (jāzvana, jāraksta e-pasts, jāpieprasa piedāvājums). Uzņēmuma Schildersbedrijf Example sākumlapa izskatās šādi: Galvenais baneris ar pogu "Pieprasīt piedāvājumu", Kartītes ar trim pakalpojumiem, Foto un teksts par darba gaitu, Atsauksmes, Jautājumi un Kontakti.

Sadaļas pievienošana: trīs ceļi

1. Izvēlēties pašam izvēlnē (bez maksas)

Atveriet paneli Bloki sānjoslā vai priekšskatījumā noklikšķiniet uz Sadaļa zemāk: šī poga ir izvēlētās sadaļas rīkjoslā un uz līnijas ar +, kas parādās, kad virzāt peli starp divām sadaļām. Zem priekšskatījuma ir arī Pievienot bloku.

Izvēlne rāda veidus grupās: Populāri, Sākums un galvene, Teksts un stāsts, Pakalpojumi un produkti, Cenas un akcijas, Uzticamība un komanda, Foto un video, Praktiska informācija, Kontakti un aicinājums un Savs kods un logrīki. Ir meklēšanas lauks ("Meklējiet, piemēram, atsauksmes, cenas vai komanda"). Katru veidu redzat kā paraugu Jūsu korporatīvajā stilā. Noklikšķiniet uz veida, lai redzētu formas, un izvēlieties vienu ar Pievienot. Ja nenonācāt tur no kādas konkrētas sadaļas, veidotājs jautā "Kur jānovieto ...?": noklikšķiniet uz zaļas līnijas lapā vai izvēlieties Augšā vai Apakšā. Bloku varat arī tieši ievilkt lapā no paneļa.

Tas neko nemaksā. Jaunā sadaļa tiek pievienota ar parauga tekstiem, kurus pēc tam pielāgojat paši (nodarbība 3.2) vai ļaujat aizpildīt MI (nodarbība 3.1). Svarīgi: kamēr Jūsu vietnē vēl ir šāds parauga teksts, veidotājs vietni tiešsaistē nepublicē. Tad redzēsiet paziņojumu "Jūsu vietnē vēl ir parauga teksts. Vispirms aizpildiet to vai noņemiet sadaļu."

2. Pajautāt tērzēšanā: trīs dizaini

Ja tērzēšanā ierakstāt "Vēlos sadaļu ar mūsu darba gaitu četros soļos", MI vispirms parāda trīs piemērotus dizainus no sadaļu bibliotēkas Jūsu korporatīvajā stilā. Izvēlieties ar Šis dizains vai noklikšķiniet uz Ļaut izvēlēties MI. Pēc tam MI aizpilda sadaļu ar saturu kā priekšlikumu. Tā kā tiek pievienota sadaļa, tas maksā 2 labojumus.

Ja norādāt, ka kaut kam jābūt esošā sadaļā ("ielieciet darba laiku kontaktu blokā"), vai minat pakalpojumu, piemēram, Spotify vai Calendly, ar saiti, veidotājs trīs dizainus izlaiž: tad jau ir skaidrs, ko vēlaties.

3. Ļaut izveidot savu bloku

Vai meklētā nav sarakstā? Izvēlnes augšā ir Izveidojiet savu bloku ar MI. Aprakstiet, ko apmeklētājiem jāvar izdarīt, piemēram, cenu kalkulators vai īss tests, un noklikšķiniet uz Izveidot ar MI. Tas maksā 2 labojumus, jo tiek pievienots jauns bloks.

Pārvietošana, kopēšana un dzēšana

Virziet peli virs sadaļas. Parādās rīkjosla ar Mainīt ar MI, Pārvietot augšup, Pārvietot lejup, Dublēt, Sadaļa zemāk un Dzēst, kā arī rokturis sadaļas pārvilkšanai ("Pārvelciet šo sadaļu uz citu vietu"). Pie Dzēst veidotājs vispirms jautā "Tiešām?". Arī atsevišķus elementus rindā, piemēram, vienu kartīti vai vienu atsauksmi, varat pārvilkt, dublēt un dzēst.

Visas šīs pogas ir bez maksas. Katra darbība izveido jaunu versiju ("Sadaļa pārvietota (versija ...)"), tāpēc kļūdaini izdzēstu sadaļu varat atjaunot sadaļā Versijas (nodarbība 3.5). Dzēšana ar norādījumu tērzēšanā gan maksā labojumu: tāpēc izmantojiet pogu.

Izmēru vilkšana

Priekšskatījumā virziet peli virs sadaļas, fotoattēla vai teksta, un parādās rokturi. Vilkšana ir bez maksas un bez MI:

• Sadaļas apakšmala: vairāk vai mazāk atstarpes virs un zem sadaļas.
• Galvenais baneris: padarīt augstāku vai zemāku.
• Fotoattēls: platāks vai šaurāks, augstāks vai plakanāks (forma), apaļāki vai taisnāki stūri un fokusa punkts (nodarbība 3.3).
• Teksta bloks: platāks vai šaurāks (labā mala).
• Virsraksts: lielāks vai mazāks un atstarpe zem tā.
• Kartīšu vai kolonnu rinda: visas rindas platums.

Veiciet dubultklikšķi uz roktura, un atgriežas noklusējuma izmērs; galvenajam banerim veidotājs tad atkal pats izvēlas augstumu.

Kāpēc vilkšana ir labāka nekā lūgt "padari to lielāku": Jūs uzreiz redzat, kas notiek, tas neko nemaksā, un MI pa ceļam nemaina tekstu.

Rediģēt sadaļu: vienas sadaļas iestatījumi

Noklikšķiniet uz sadaļas un izvēlieties Rediģēt sadaļu. Atveras logs ar šādiem iestatījumiem:

Zemāk ir tās pašas pogas kā rīkjoslā (Pārvietot augšup, Pārvietot lejup, Dublēt, Sadaļa zemāk, Dzēst), un zem "Vai pajautājiet MI ko citu:" ir teksta lauks MI norādījumam tikai par šo sadaļu.

Daži padomi. Mainiet fonus (gaišs laukums, nav, tonis), lai apmeklētāji redzētu, kur beidzas viena tēma. Kartīšu rindā izmantojiet ne vairāk kā trīs vai četras kolonnas; tālrunī tās tik un tā tiek izvietotas cita zem citas. Esiet taupīgi ar Slēpt mobilajā: nekad neslēpiet savu kontaktinformāciju vai kaut ko, kas vajadzīgs mobilajam apmeklētājam. Ja vēlaties pārbaudīt, kā tas izskatās, augšējā joslā izvēlieties Mobilais.

Pielāgots HTML

Grupā Savs kods un logrīki ir arī Pielāgots HTML: sadaļa, kurā paši ielīmējat HTML un, ja vēlaties, CSS. Pēc ievietošanas to pielāgojat ar Rediģēt HTML uz sadaļas. Krāsas un burti seko Jūsu korporatīvajam stilam, izmantojot mainīgos, piemēram, var(--acc), var(--tekst) un var(--kop-font). CSS attiecas tikai uz šo sadaļu.

Ierobežojumi ir apzināti: skripti, iframe un veidlapas šeit nedarbojas. Cita pakalpojuma atskaņotājam, kalendāram, kartei vai veidlapai izmantojiet Logrīks (nodarbība 4.3). Pielāgots HTML ir paredzēts tiem, kas pārzina HTML; visiem pārējiem parastās sadaļas un MI ir ātrākais ceļš.

Biežākās kļūdas

• Atstāts parauga teksts sadaļā no izvēlnes: tad vietni nevar publicēt tiešsaistē.
• Pārāk daudz sadaļu. Garu lapu ar desmit sadaļām neviens neizlasa. Noņemiet to, kas neko nepievieno. Lapā var būt ne vairāk kā 40 sadaļas, taču tik daudz Jums nekad nevajadzēs.
• Atstarpju regulēšana tērzēšanā. Tas maksā labojumus un ir mazāk precīzi nekā vilkšana.
• Skatīšanās tikai datorā. Kolonnas, atstarpes un slēpšana tālrunī darbojas citādi.
• Dzēšana tērzēšanā, lai gan poga Dzēst ir bez maksas.

Veidotājā: kā to izdarīt

1. Priekšskatījumā noklikšķiniet uz Sadaļa zemāk vai atveriet Bloki.
2. Izvēlieties grupu, veidu un formu un noklikšķiniet uz Pievienot.
3. Aizstājiet parauga tekstus paši vai ar MI.
4. Pārvietojiet ar Pārvietot augšup, Pārvietot lejup vai rokturi; dublējiet vai dzēsiet ar rīkjoslu.
5. Velciet apakšmalu, lai mainītu atstarpi; veiciet dubultklikšķi, lai atgrieztos pie noklusējuma.
6. Atveriet Rediģēt sadaļu, lai iestatītu fonu, kolonnas, stūrus, galvenā banera augstumu un Slēpt mobilajā.
7. Pārbaudiet skatā Mobilais.

Kopsavilkums

• Lapa ir sadaļu kaudze; 35 veidi, katrs vienā vai vairākās formās.
• Pievienošana ar izvēlni ir bez maksas un dod parauga tekstu, kas jāaizstāj pirms publicēšanas tiešsaistē; tērzēšanā saņemat trīs dizainus, un tas maksā 2 labojumus.
• Pārvietošana, dublēšana, dzēšana un izmēru vilkšana ir bez maksas; dubultklikšķis uz roktura atjauno noklusējumu.
• Rediģēt sadaļu regulē fonu, atstarpi, atstarpi starp elementiem, kolonnas, stūrus, galvenā banera augstumu un Slēpt mobilajā.
• Pielāgots HTML ir iespējams, taču bez skriptiem, iframe un veidlapām; tam ir paredzēts logrīks.

Tests (quiz)

Uzdevums

Uzdevums D3.4: Viena sadaļa klāt, viena prom. Uzlabojiet savas sākumlapas struktūru ar pogām un rokturiem, bez liekiem MI norādījumiem.

Kontrolsaraksts:

• [ ] pierakstītas sākumlapas sadaļas no augšas uz leju;
• [ ] pievienota viena sadaļa ar izvēlni un aizstāts viss parauga teksts;
• [ ] ar Dzēst noņemta vai apvienota viena sadaļa, kas neko nepievienoja;
• [ ] pārvietota viena sadaļa ar Pārvietot augšup, Pārvietot lejup vai rokturi;
• [ ] izvilkta vismaz vienas sadaļas atstarpe un vienreiz atjaunota ar dubultklikšķi;
• [ ] sadaļā Rediģēt sadaļu mainīts fons vai kolonnas;
• [ ] lapa apskatīta skatā Mobilais.

Jautājumi:

1. Kāda bija Jūsu sadaļu secība pirms un pēc, un kāpēc izvēlējāties šo secību?
2. Kuru sadaļu noņēmāt, un kāpēc apmeklētājam tās tagad netrūkst?
3. Cik labojumu Jums izmaksāja šis uzdevums, un kurš solis tērzēšanā gan būtu maksājis labojumus?

Pēc "gatavs" redzēsiet atbildes paraugu: no Galvenais baneris, Skaitļi, Kartītes, Atsauksmes, Kontakti uz Galvenais baneris, Kartītes, Foto un teksts (darba gaita), Atsauksmes, Jautājumi, Kontakti, lai pakalpojumi būtu uzreiz zem sākuma; sadaļa Skaitļi ir noņemta, jo skaitļi bija izdomāti; uzdevums izmaksāja 0 labojumu, savukārt dzēšana vai jauna sadaļa tērzēšanā būtu maksājusi 1 vai 2.

Vairāk lasīt

• Bezmaksas kurss Redzamība internetā 3.2: Virsraksti un lapas struktūra
• Bezmaksas kurss Redzamība internetā 4.2: Mobilā versija vispirms un viewport
• Sitebuilder un AI Builder: kuru Jums izvēlēties un kā to atvērt?