Sektsioonide lisamine, teisaldamine ja mõõtude lohistamine

Moodul 3: Tekstid, fotod ja sektsioonid · Lugemisaeg: 10 minutit

Õpieesmärk: Pärast seda õppetundi oskad lehte sektsioonidest üles ehitada: lisada sektsiooni valijast või vestluse kaudu, seda teisaldada, kopeerida ja eemaldada, lohistada vahesid ja mõõte ning valida iga sektsiooni jaoks veerud, nurgad, tausta ja nähtavuse mobiilis.

Põhimõisted: sektsioon, Plokid, Lisa plokk, kuju, Sektsioon allapoole, kolm kujundust, Loo AI abil, Muuda sektsiooni, Vahe, Vahe elementide vahel, Veerud, Nurgad, Peida mobiilis, haarats, Oma HTML

Leht on sektsioonide virn

Iga su veebilehe leht koosneb sektsioonidest: horisontaalsetest ribadest, mis on üksteise all. Kõige üleval on tavaliselt Hero (suur avaplokk pealkirja, teksti ja nupuga), selle all näiteks Kaardid sinu teenustega, Arvustused, Lahtiolekuajad ja allosas Kontakt. Koostajas on 35 tüüpi sektsioone, igaüks ühes või mitmes kujus: sama sisu, aga teistsuguse kujundusega.

Kes nii mõtleb, ehitab parema lehe. Pane kõige olulisem info ülesse, üks teema sektsiooni kohta, ja lõpeta sellega, mida külastaja peaks tegema (helistama, kirjutama, pakkumist küsima). Schildersbedrijf Example avaleht näeb välja nii: Hero nupuga "Küsi pakkumist", Kaardid kolme teenusega, Foto ja tekst töö käigu kohta, Arvustused, Küsimused ja Kontakt.

Sektsiooni lisamine: kolm teed

1. Vali ise valijast (tasuta)

Ava külgribal paneel Plokid või klõpsa eelvaates nupul Sektsioon allapoole: see nupp on valitud sektsiooni tööriistaribal ja ka +-märgiga joonel, mis ilmub, kui liigud kahe sektsiooni vahele. Eelvaate all on ka nupp Lisa plokk.

Valija näitab tüüpe rühmadena: Populaarne, Avaplokk ja päis, Tekst ja lugu, Teenused ja tooted, Hinnad ja pakkumised, Usaldus ja meeskond, Foto ja video, Praktiline teave, Kontakt ja üleskutse ning Oma kood ja vidinad. Seal on ka otsingukast ("Otsi, näiteks arvustused, hinnad või meeskond"). Iga tüüpi näed eelvaatena oma firmastiilis. Klõpsa tüübil, et näha selle kujusid, ja vali üks nupuga Lisa. Kui sa ei tulnud valijasse mõne kindla sektsiooni kaudu, küsib koostaja "Kus peaks ... asuma?": klõpsa lehel rohelisel joonel või vali Ülaossa või Allossa. Ploki võid ka otse paneelilt oma lehele lohistada.

See ei maksa midagi. Uus sektsioon tuleb näidistekstidega, mida kohandad hiljem ise (õppetund 3.2) või lased tehisintellektil täita (õppetund 3.1). Tähtis: seni, kuni su veebilehel on veel selliseid näidistekste, ei avalda koostaja su lehte. Siis näed teadet "Sinu saidil on veel näidisteksti. Täida see esmalt või eemalda sektsioon."

2. Küsi vestluses: kolm kujundust

Kui kirjutad vestlusesse "Soovin sektsiooni, kus on meie töö käik neljas sammus", näitab tehisintellekt kõigepealt sektsioonide teegist kolme sobivat kujundust sinu firmastiilis. Vali nupuga See kujundus või klõpsa Lase AI-l valida. Seejärel täidab tehisintellekt sektsiooni sisuga, ettepanekuna. Kuna lisandub sektsioon, maksab see 2 muudatust.

Kui ütled, et midagi peab tulema olemasolevasse sektsiooni ("pane lahtiolekuajad kontaktiplokki"), või nimetad lingiga teenust nagu Spotify või Calendly, jätab koostaja kolm kujundust vahele: siis on selge, mida soovid.

3. Lase ise plokk teha

Kas otsitavat pole valikus? Valija ülaosas on Loo oma plokk AI abil. Kirjelda, mida külastajad peaksid saama teha, näiteks hinnakalkulaator või lühike viktoriin, ja klõpsa Loo AI abil. See maksab 2 muudatust, sest lisandub uus plokk.

Teisaldamine, kopeerimine ja eemaldamine

Liigu hiirega sektsiooni kohale. Ilmub tööriistariba nuppudega Muuda AI abil, Üles, Alla, Dubleeri, Sektsioon allapoole ja Kustuta ning haarats sektsiooni lohistamiseks ("Lohista see sektsioon teise kohta"). Nupu Kustuta puhul küsib koostaja enne "Kindel?". Ka üksikuid osi rea sees, näiteks ühte kaarti või ühte arvustust, saad lohistada, dubleerida ja eemaldada.

Kõik need nupud on tasuta. Iga tegevus loob uue versiooni ("Sektsioon teisaldatud (versioon ...)"), nii et kogemata eemaldatud sektsiooni saad tagasi paneelist Versioonid (õppetund 3.5). Eemaldamine vestluses antud juhisega maksab aga muudatuse: kasuta seega nuppu.

Mõõtude lohistamine

Liigu eelvaates sektsiooni, foto või teksti kohale ja ilmuvad haaratsid. Lohistamine on tasuta ja käib ilma tehisintellektita:

• Sektsiooni alumine serv: rohkem või vähem vahet sektsiooni kohal ja all.
• Hero: kõrgemaks või madalamaks.
• Foto: laiemaks või kitsamaks, kõrgemaks või lamedamaks (kuju), ümaramad või teravamad nurgad ning fookuspunkt (õppetund 3.3).
• Tekstiplokk: laiemaks või kitsamaks (parem serv).
• Pealkiri: suuremaks või väiksemaks ning vahe selle all.
• Kaartide või veergude rida: kogu rea laius.

Tee haaratsil topeltklõps ja vaikimisi mõõt tuleb tagasi; Hero puhul valib koostaja siis kõrguse jälle ise.

Miks on lohistamine parem kui palve "tee see suuremaks": näed kohe, mis juhtub, see ei maksa midagi ja tehisintellekt ei muuda vahepeal teksti.

Muuda sektsiooni: ühe sektsiooni seaded

Klõpsa sektsioonil ja vali Muuda sektsiooni. Avaneb aken järgmiste seadetega:

Nende all on samad nupud mis tööriistaribal (Üles, Alla, Dubleeri, Sektsioon allapoole, Kustuta) ja teksti "Või küsi AI-lt midagi muud:" all tekstikast, kuhu saad kirjutada AI-juhise ainult selle sektsiooni kohta.

Mõned nõuanded. Vaheta taustu (hele pind, puudub, toon), et külastajad näeksid, kus üks teema lõpeb. Kasuta kaartide real kõige rohkem kolme või nelja veergu; telefonis lähevad need niikuinii üksteise alla. Ole säästlik valikuga Peida mobiilis: ära kunagi peida oma kontaktandmeid ega midagi, mida mobiilikülastaja vajab. Kui tahad kontrollida, kuidas see välja näeb, vali ülaribal Mobiil.

Oma HTML

Rühmas Oma kood ja vidinad on ka Oma HTML: sektsioon, kuhu kleebid ise HTML-i ja soovi korral CSS-i. Pärast paigutamist muudad seda sektsiooni nupuga Muuda HTML-i. Värvid ja kirjatüübid järgivad su firmastiili muutujate kaudu, näiteks var(--acc), var(--tekst) ja var(--kop-font). CSS kehtib ainult selle sektsiooni kohta.

Piirangud on teadlikud: skriptid, iframe'id ja vormid siin ei tööta. Mõne teise teenuse mängija, kalendri, kaardi või vormi jaoks kasuta Vidinat (õppetund 4.3). Oma HTML on neile, kes HTML-i tunnevad; kõigile teistele on tavalised sektsioonid ja tehisintellekt kiirem tee.

Lõksud

• Näidisteksti alles jätmine valijast lisatud sektsioonis: siis ei saa sa lehte avaldada.
• Liiga palju sektsioone. Pikka kümne sektsiooniga lehte ei loeta. Eemalda see, mis midagi juurde ei anna. Lehel võib olla kuni 40 sektsiooni, aga nii palju ei vaja sa kunagi.
• Vahede reguleerimine vestluses. See maksab muudatusi ja on ebatäpsem kui lohistamine.
• Ainult arvutist vaatamine. Veerud, vahed ja peitmine toimivad telefonis teisiti.
• Eemaldamine vestluses, kuigi nupp Kustuta on tasuta.

Koostajas: nii teed seda

1. Klõpsa eelvaates Sektsioon allapoole või ava Plokid.
2. Vali rühm, tüüp ja kuju ning klõpsa Lisa.
3. Asenda näidistekstid ise või tehisintellekti abil.
4. Teisalda nuppudega Üles, Alla või haaratsiga; dubleeri või kustuta tööriistaribalt.
5. Lohista alumist serva, et muuta vahet; topeltklõps viib tagasi vaikimisi mõõdule.
6. Ava Muuda sektsiooni, et muuta tausta, veerge, nurki, Hero kõrgust ja valikut Peida mobiilis.
7. Kontrolli vaates Mobiil.

Kokkuvõte

• Leht on sektsioonide virn; 35 tüüpi, igaüks ühes või mitmes kujus.
• Valijast lisamine on tasuta ja annab näidisteksti, mille pead enne avaldamist asendama; vestluse kaudu saad kolm kujundust ja see maksab 2 muudatust.
• Teisaldamine, dubleerimine, eemaldamine ja mõõtude lohistamine on tasuta; topeltklõps haaratsil taastab vaikimisi mõõdu.
• Muuda sektsiooni määrab tausta, vahe, vahe elementide vahel, veerud, nurgad, Hero kõrguse ja valiku Peida mobiilis.
• Oma HTML on võimalik, aga ilma skriptide, iframe'ide ja vormideta; nende jaoks on vidin.

Test

Ülesanne

Ülesanne D3.4: Üks sektsioon juurde, üks ära. Paranda oma avalehe ülesehitust nuppude ja haaratsitega, ilma tarbetute AI-juhisteta.

Kontrollnimekiri:

• [ ] kirjutasid oma avalehe sektsioonid üles ülevalt alla;
• [ ] lisasid valijast ühe sektsiooni ja asendasid kogu näidisteksti;
• [ ] eemaldasid või liitsid nupuga Kustuta ühe sektsiooni, mis midagi juurde ei andnud;
• [ ] teisaldasid ühe sektsiooni nupuga Üles, Alla või haaratsiga;
• [ ] lohistasid vähemalt ühe sektsiooni vahet ja taastasid selle korra topeltklõpsuga;
• [ ] muutsid aknas Muuda sektsiooni tausta või veerge;
• [ ] vaatasid lehte vaates Mobiil.

Küsimused:

1. Milline oli su sektsioonide järjekord enne ja pärast ning miks valisid just selle järjekorra?
2. Millise sektsiooni eemaldasid ja miks ei tunne külastaja sellest nüüd puudust?
3. Mitu muudatust see ülesanne sulle maksis ja milline samm oleks vestluse kaudu muudatusi maksnud?

Pärast valikut "tehtud" näed näidisvastust: järjekorrast Hero, Arvud, Kaardid, Arvustused, Kontakt sai Hero, Kaardid, Foto ja tekst (töö käik), Arvustused, Küsimused, Kontakt, nii et teenused on kohe avaploki all; sektsioon Arvud on eemaldatud, sest arvud olid välja mõeldud; ülesanne maksis 0 muudatust, samas kui eemaldamine või uus sektsioon vestluse kaudu oleks maksnud 1 või 2.

Loe edasi

• Tasuta kursus Leitav veebis 3.2: Pealkirjad ja lehe ülesehitus
• Tasuta kursus Leitav veebis 4.2: Mobiil eelkõige ja viewport
• Sitebuilder ja AI Builder: kumba valida ja kuidas seda avada?