Skilčių pridėjimas, perkėlimas ir dydžių tempimas

3 modulis: Tekstai, nuotraukos ir sekcijos · Skaitymo laikas: 10 min.

Mokymosi tikslas: Po šios pamokos galėsite sudaryti puslapį iš skilčių: pridėti skiltį per pasirinkimo langą arba pokalbį, ją perkelti, nukopijuoti ir pašalinti, tempti tarpus ir dydžius, o kiekvienai skilčiai pasirinkti stulpelius, kampus, foną ir matomumą telefone.

Pagrindinės sąvokos: skiltis, Skiltys, Pridėti skiltį, forma, Skiltis žemiau, trys dizainai, Sukurti su DI, Redaguoti skiltį, Tarpas, Tarpas tarp elementų, Stulpeliai, Kampai, Slėpti mobiliajame, rankenėlė, Savas HTML

Puslapis yra skilčių krūvelė

Kiekvienas Jūsų svetainės puslapis sudarytas iš skilčių: horizontalių juostų, išdėstytų viena po kitos. Viršuje dažniausiai yra Pradžios skiltis (didelė pradžia su antrašte, tekstu ir mygtuku), po ja, pavyzdžiui, Kortelės su Jūsų paslaugomis, Atsiliepimai, Darbo laikas, o apačioje Kontaktai. Kūrimo įrankis turi 35 skilčių rūšis, kiekviena turi vieną ar daugiau formų: tas pats turinys, tik kitaip išdėstytas.

Kas taip mąsto, sukuria geresnį puslapį. Svarbiausią informaciją dėkite viršuje, vienoje skiltyje laikykitės vienos temos, o pabaigoje nurodykite, ką lankytojas turėtų padaryti (paskambinti, parašyti el. laišką, paprašyti pasiūlymo). Schildersbedrijf Example pagrindinis puslapis atrodo taip: Pradžios skiltis su mygtuku "Gauti pasiūlymą", Kortelės su trimis paslaugomis, Nuotrauka ir tekstas apie darbo eigą, Atsiliepimai, Klausimai ir Kontaktai.

Skilties pridėjimas: trys būdai

1. Pasirinkti patiems pasirinkimo lange (nemokamai)

Šoninėje juostoje atidarykite skydelį Skiltys arba peržiūroje spustelėkite Skiltis žemiau: šis mygtukas yra pasirinktos skilties įrankių juostoje ir ant linijos su +, kuri atsiranda, kai pelę vedate tarp dviejų skilčių. Po peržiūra taip pat yra mygtukas Pridėti skiltį.

Pasirinkimo langas rodo rūšis grupėmis: Populiarios, Pradžia ir antraštė, Tekstas ir istorija, Paslaugos ir produktai, Kainos ir akcijos, Pasitikėjimas ir komanda, Nuotraukos ir vaizdo įrašai, Praktinė informacija, Kontaktai ir raginimas veikti ir Savas kodas ir valdikliai. Yra paieškos laukelis ("Ieškokite, pavyzdžiui, atsiliepimų, kainų ar komandos"). Kiekvieną rūšį matote kaip pavyzdį Jūsų firminiu stiliumi. Spustelėkite rūšį, kad pamatytumėte jos formas, ir pasirinkite vieną mygtuku Pridėti. Jei atėjote ne per konkrečią skiltį, kūrimo įrankis paklaus "Kur turi būti ...?": spustelėkite žalią liniją puslapyje arba pasirinkite Viršuje ar Apačioje. Skiltį taip pat galite tiesiog nutempti iš skydelio į savo puslapį.

Tai nieko nekainuoja. Nauja skiltis atsiranda su pavyzdiniais tekstais, kuriuos vėliau pakeičiate patys (pamoka 3.2) arba leidžiate užpildyti DI (pamoka 3.1). Svarbu: kol svetainėje dar yra tokio pavyzdinio teksto, kūrimo įrankis svetainės nepaskelbs. Tuomet pamatysite pranešimą "Svetainėje dar yra pavyzdinio teksto. Pirmiausia jį užpildykite arba pašalinkite skiltį."

2. Paprašyti pokalbyje: trys dizainai

Jei pokalbyje parašysite "Noriu skilties, kurioje mūsų darbo eiga aprašyta keturiais žingsniais", DI pirmiausia parodys tris tinkamus dizainus iš skilčių bibliotekos, Jūsų firminiu stiliumi. Pasirenkate mygtuku Šis dizainas arba spustelite Leisti pasirinkti DI. Tada DI užpildo skiltį turiniu, kaip pasiūlymą. Kadangi atsiranda nauja skiltis, tai kainuoja 2 redagavimus.

Jei nurodote, kad kažkas turi atsirasti esamoje skiltyje ("įdėkite darbo laiką į kontaktų bloką"), arba paminite paslaugą, pavyzdžiui, Spotify ar Calendly, su nuoroda, kūrimo įrankis trijų dizainų nerodo: tada ir taip aišku, ko norite.

3. Leisti sukurti savo skiltį

Nerandate to, ko ieškote? Pasirinkimo lango viršuje yra Sukurkite savo skiltį su DI. Aprašykite, ką lankytojai turėtų galėti padaryti, pavyzdžiui, kainų skaičiuoklę ar trumpą viktoriną, ir spustelėkite Sukurti su DI. Tai kainuoja 2 redagavimus, nes atsiranda nauja skiltis.

Perkėlimas, kopijavimas ir šalinimas

Užveskite pelę ant skilties. Atsiras įrankių juosta su mygtukais Keisti su DI, Perkelti aukštyn, Perkelti žemyn, Dubliuoti, Skiltis žemiau ir Ištrinti, taip pat rankenėlė skilčiai tempti ("Nutempkite šią skiltį į kitą vietą"). Spustelėjus Ištrinti, kūrimo įrankis pirmiausia paklausia "Tikrai?". Atskirus elementus eilutėje, pavyzdžiui, vieną kortelę ar vieną atsiliepimą, taip pat galite tempti, dubliuoti ir šalinti.

Visi šie mygtukai yra nemokami. Kiekvienas veiksmas sukuria naują versiją ("Skiltis perkelta (versija ...)"), todėl per klaidą pašalintą skiltį galite atkurti per Versijos (pamoka 3.5). Šalinimas per užduotį pokalbyje kainuoja redagavimą, todėl naudokite mygtuką.

Dydžių tempimas

Peržiūroje užveskite pelę ant skilties, nuotraukos ar teksto, ir atsiras rankenėlės. Tempimas yra nemokamas ir vyksta be DI:

• Apatinis skilties kraštas: daugiau ar mažiau tarpo virš ir po skiltimi.
• Pradžios skiltis: aukštesnė arba žemesnė.
• Nuotrauka: platesnė ar siauresnė, aukštesnė ar plokštesnė (forma), apvalesni ar statesni kampai ir fokusavimo taškas (pamoka 3.3).
• Teksto blokas: platesnis ar siauresnis (dešinysis kraštas).
• Antraštė: didesnė ar mažesnė, taip pat tarpas po ja.
• Kortelių ar stulpelių eilutė: visos eilutės plotis.

Dukart spustelėkite rankenėlę, ir grįš standartinis dydis; pradžios skilties aukštį kūrimo įrankis tada vėl parenka pats.

Kodėl tempti geriau nei prašyti "padarykite didesnį": iš karto matote, kas vyksta, tai nieko nekainuoja, o DI tuo pačiu nepakeičia jokio teksto.

Redaguoti skiltį: vienos skilties nustatymai

Spustelėkite skiltį ir pasirinkite Redaguoti skiltį. Atsidarys langas su šiais nustatymais:

Žemiau yra tie patys mygtukai kaip įrankių juostoje (Perkelti aukštyn, Perkelti žemyn, Dubliuoti, Skiltis žemiau, Ištrinti), o po užrašu "Arba paklauskite DI ko nors kito:" yra teksto laukelis DI užduočiai, susijusiai tik su šia skiltimi.

Keli patarimai. Kaitaliokite fonus (šviesi plokštuma, nėra, atspalvis), kad lankytojai matytų, kur baigiasi viena tema. Kortelių eilutėje naudokite ne daugiau kaip tris ar keturis stulpelius; telefone jos vis tiek išsidėsto viena po kita. Saikingai naudokite Slėpti mobiliajame: niekada neslėpkite savo kontaktinių duomenų ar ko nors, ko reikia lankytojui telefone. Jei norite patikrinti, kaip tai atrodo, viršutinėje juostoje pasirinkite Telefonas.

Savas HTML

Grupėje Savas kodas ir valdikliai taip pat yra Savas HTML: skiltis, į kurią patys įklijuojate HTML ir, jei norite, CSS. Įdėję skiltį, ją keičiate mygtuku Redaguoti HTML. Spalvos ir šriftai atitinka Jūsų firminį stilių per kintamuosius, tokius kaip var(--acc), var(--tekst) ir var(--kop-font). CSS galioja tik šiai skilčiai.

Apribojimai yra sąmoningi: skriptai, iframe ir formos čia neveikia. Kitos paslaugos grotuvui, kalendoriui, žemėlapiui ar formai naudokite Valdiklis (pamoka 4.3). Savas HTML skirtas tiems, kas išmano HTML; visiems kitiems paprastos skiltys ir DI yra greitesnis kelias.

Dažnos klaidos

• Paliktas pavyzdinis tekstas skiltyje iš pasirinkimo lango: tada svetainės paskelbti negalėsite.
• Per daug skilčių. Ilgas puslapis su dešimčia skilčių nebus perskaitytas. Pašalinkite tai, kas nieko neprideda. Puslapyje gali būti ne daugiau kaip 40 skilčių, bet tiek Jums niekada neprireiks.
• Tarpų reguliavimas per pokalbį. Tai kainuoja redagavimus ir yra mažiau tikslu nei tempimas.
• Tikrinimas tik kompiuteryje. Stulpeliai, tarpai ir slėpimas telefone veikia kitaip.
• Šalinimas pokalbyje, nors mygtukas Ištrinti yra nemokamas.

Kūrimo įrankyje: kaip tai padaryti

1. Peržiūroje spustelėkite Skiltis žemiau arba atidarykite Skiltys.
2. Pasirinkite grupę, rūšį ir formą, tada spustelėkite Pridėti.
3. Pakeiskite pavyzdinius tekstus patys arba su DI.
4. Perkelkite mygtukais Perkelti aukštyn, Perkelti žemyn arba rankenėle; dubliuokite ar ištrinkite per įrankių juostą.
5. Tempkite apatinį kraštą, kad pakeistumėte tarpą; dukart spustelėkite, kad grįžtumėte prie standartinio.
6. Atidarykite Redaguoti skiltį fonui, stulpeliams, kampams, pradžios skilties aukščiui ir Slėpti mobiliajame nustatyti.
7. Patikrinkite rodinyje Telefonas.

Santrauka

• Puslapis yra skilčių krūvelė; 35 rūšys, kiekviena su viena ar daugiau formų.
• Pridėjimas per pasirinkimo langą nemokamas ir suteikia pavyzdinio teksto, kurį turite pakeisti prieš paskelbdami; per pokalbį gaunate tris dizainus, o tai kainuoja 2 redagavimus.
• Perkėlimas, dubliavimas, šalinimas ir dydžių tempimas nemokami; dukart spustelėjus rankenėlę grįžta standartinis dydis.
• Redaguoti skiltį leidžia nustatyti foną, tarpą, tarpą tarp elementų, stulpelius, kampus, pradžios skilties aukštį ir Slėpti mobiliajame.
• Savas HTML galimas, bet be skriptų, iframe ir formų; jiems skirtas valdiklis.

Testas (quiz)

Užduotis

Užduotis D3.4: Viena skiltis daugiau, viena mažiau. Patobulinkite savo pagrindinio puslapio sandarą mygtukais ir rankenėlėmis, be nereikalingų užduočių DI.

Kontrolinis sąrašas:

• [ ] užsirašėte pagrindinio puslapio skiltis iš viršaus į apačią;
• [ ] pridėjote vieną skiltį per pasirinkimo langą ir pakeitėte visą pavyzdinį tekstą;
• [ ] mygtuku Ištrinti pašalinote arba sujungėte vieną skiltį, kuri nieko nepridėjo;
• [ ] perkėlėte vieną skiltį mygtuku Perkelti aukštyn, Perkelti žemyn arba rankenėle;
• [ ] nutempėte bent vienos skilties tarpą ir vieną kartą grąžinote jį dvigubu spustelėjimu;
• [ ] lange Redaguoti skiltį pakeitėte foną arba stulpelius;
• [ ] peržiūrėjote puslapį rodinyje Telefonas.

Klausimai:

1. Kokia buvo Jūsų skilčių tvarka prieš ir po, ir kodėl pasirinkote būtent tokią tvarką?
2. Kurią skiltį pašalinote ir ko lankytojui dabar netrūksta?
3. Kiek redagavimų Jums kainavo ši užduotis ir kuris žingsnis per pokalbį būtų kainavęs redagavimų?

Paspaudę "atlikta" pamatysite atsakymo pavyzdį: iš Pradžios skiltis, Skaičiai, Kortelės, Atsiliepimai, Kontaktai į Pradžios skiltis, Kortelės, Nuotrauka ir tekstas (darbo eiga), Atsiliepimai, Klausimai, Kontaktai, kad paslaugos būtų iš karto po pradžia; skiltis Skaičiai pašalinta, nes skaičiai buvo išgalvoti; užduotis kainavo 0 redagavimų, o šalinimas ar nauja skiltis per pokalbį būtų kainavę 1 ar 2.

Skaitykite daugiau

• Nemokamas kursas „Matomumas internete“ 3.2: Antraštės ir puslapio struktūra
• Nemokamas kursas „Matomumas internete“ 4.2: Pirmiausia mobilieji įrenginiai ir viewport
• Sitebuilder ir AI Builder: kurį pasirinkti ir kaip jį atidaryti?