Szakaszok hozzáadása, áthelyezése és méretek húzása

Modul 3: Szövegek, fotók és szekciók · Olvasási idő: 10 perc

Tanulási cél: A lecke után Ön szakaszokból tud felépíteni egy oldalt: szakaszt ad hozzá a választóval vagy a chatben, áthelyezi, másolja és törli, húzással állítja a térközt és a méreteket, és szakaszonként kiválasztja az oszlopokat, a sarkokat, a hátteret és a mobilos láthatóságot.

Kulcsfogalmak: szakasz, Szakaszok, Szakasz hozzáadása, forma, Szakasz alá, három terv, Elkészítés AI-jal, Szakasz szerkesztése, Térköz, Térköz az elemek között, Oszlopok, Sarkok, Elrejtés mobilon, fogantyú, Egyéni HTML

Az oldal szakaszok egymásra rakott sora

A webhely minden oldala szakaszokból áll: egymás alatt elhelyezkedő vízszintes sávokból. Legfelül általában egy Nyitószakasz áll (a nagy nyitó rész címsorral, szöveggel és gombbal), alatta például Kártyák a szolgáltatásaival, Értékelések, Nyitvatartás, legalul pedig Kapcsolat. A szerkesztőben 35 fajta szakasz van, mindegyik egy vagy több formában: ugyanaz a tartalom, másképp formázva.

Aki így gondolkodik, jobb oldalt épít. Tegye a legfontosabb információt felülre, szakaszonként egy témát, és a végén azt, amit a látogatónak tennie kell (telefonálni, e-mailt írni, árajánlatot kérni). A Schildersbedrijf Example kezdőlapja így néz ki: Nyitószakasz „Kérjen árajánlatot” gombbal, Kártyák három szolgáltatással, Fotó és szöveg a munkamódszerről, Értékelések, Kérdések és Kapcsolat.

Szakasz hozzáadása: három út

1. Kiválasztás a választóban (ingyenes)

Nyissa meg a Szakaszok panelt az oldalsávban, vagy kattintson az előnézetben a Szakasz alá gombra: ez a gomb a kiválasztott szakasz eszköztárában található, valamint azon a + jeles vonalon, amely akkor jelenik meg, ha az egeret két szakasz közé viszi. Az előnézet alatt a Szakasz hozzáadása gomb is megtalálható.

A választó csoportokban mutatja a fajtákat: Népszerű, Nyitó rész és fejléc, Szöveg és történet, Szolgáltatások és termékek, Árak és ajánlatok, Bizalom és csapat, Fotó és videó, Gyakorlati információk, Kapcsolat és cselekvésre ösztönzés és Egyéni elemek és widgetek. Van egy keresőmező is („Keresés, például értékelések, árak vagy csapat”). Minden fajtát mintaként lát, a saját arculatában. Kattintson egy fajtára a formák megtekintéséhez, és válasszon ki egyet a Hozzáadás gombbal. Ha nem egy adott szakaszból érkezett ide, a szerkesztő megkérdezi: „Hová kerüljön a ...?”: kattintson az oldalon egy zöld vonalra, vagy válassza a Felülre vagy az Alulra lehetőséget. Egy elemet közvetlenül a panelről is az oldalra húzhat.

Ez semmibe nem kerül. Az új szakasz mintaszövegekkel érkezik, amelyeket utána Ön módosít (3.2. lecke), vagy az AI-jal töltet ki (3.1. lecke). Fontos: amíg ilyen mintaszöveg szerepel a webhelyén, a szerkesztő nem teszi közzé a webhelyet. Ilyenkor ezt az üzenetet kapja: „Az oldalán még mintaszöveg szerepel. Előbb töltse ki, vagy távolítsa el a szakaszt.”

2. Kérés a chatben: három terv

Ha a chatbe ezt írja: „Szeretnék egy szakaszt a munkamódszerünkről, négy lépésben”, az AI először három illő tervet mutat a szakaszkönyvtárból, az Ön arculatában. Az Ez a terv gombbal választhat, vagy rákattinthat a Válasszon az AI gombra. Ezután az AI javaslatként tartalommal tölti meg a szakaszt. Mivel új szakasz kerül az oldalra, ez 2 szerkesztésbe kerül.

Ha azt mondja, hogy valami egy meglévő szakaszba kerüljön („tegye a nyitvatartást a kapcsolati blokkba”), vagy egy szolgáltatást, például a Spotify-t vagy a Calendly-t említi egy linkkel, a szerkesztő kihagyja a három tervet: ilyenkor egyértelmű, mit szeretne.

3. Saját elem készíttetése

Nincs a kínálatban, amit keres? A választó tetején található a Készítse el saját szakaszát AI-jal lehetőség. Írja le, mit tudjanak tenni a látogatók, például egy árkalkulátort vagy egy rövid kvízt, és kattintson az Elkészítés AI-jal gombra. Ez 2 szerkesztésbe kerül, mert új elem kerül az oldalra.

Áthelyezés, másolás és törlés

Vigye az egeret egy szakasz fölé. Megjelenik egy eszköztár a Módosítás AI-val, Feljebb, Lejjebb, Másolás, Szakasz alá és Törlés gombokkal, valamint egy fogantyú, amellyel a szakaszt áthúzhatja („Húzza ezt a szakaszt egy másik helyre”). A Törlés előtt a szerkesztő megkérdezi: „Biztos?”. Egy soron belüli különálló elemeket, például egyetlen kártyát vagy egyetlen értékelést is áthúzhat, másolhat és törölhet.

Ezek a gombok mind ingyenesek. Minden művelet új verziót hoz létre („A szakasz áthelyezve (verzió ...)”), így a tévedésből törölt szakaszt a Verziók segítségével állíthatja vissza (3.5. lecke). A chatben adott utasítással végzett törlés viszont egy szerkesztésbe kerül: használja tehát a gombot.

Méretek húzása

Vigye az egeret az előnézetben egy szakasz, fotó vagy szöveg fölé, és megjelennek a fogantyúk. A húzás ingyenes, és nem használ AI-t:

• A szakasz alsó széle: több vagy kevesebb térköz a szakasz fölött és alatt.
• Nyitószakasz: magasabbra vagy alacsonyabbra állítás.
• Fotó: szélesebb vagy keskenyebb, magasabb vagy laposabb (a forma), kerekebb vagy szögletesebb sarkok, valamint a fókuszpont (3.3. lecke).
• Szövegblokk: szélesebb vagy keskenyebb (jobb oldali szél).
• Címsor: nagyobb vagy kisebb, és az alatta lévő térköz.
• Kártyák vagy oszlopok sora: a teljes sor szélessége.

Kattintson duplán egy fogantyúra, és visszaáll az alapértelmezett méret; a nyitószakasznál ilyenkor a szerkesztő ismét maga választja meg a magasságot.

Miért jobb a húzás, mint azt kérni, hogy „legyen nagyobb”: azonnal látja, mi történik, nem kerül semmibe, és az AI közben nem változtat a szövegen.

Szakasz szerkesztése: egy szakasz beállításai

Kattintson egy szakaszra, és válassza a Szakasz szerkesztése lehetőséget. Megnyílik egy ablak a következőkkel:

Alattuk ugyanazok a gombok találhatók, mint az eszköztárban (Feljebb, Lejjebb, Másolás, Szakasz alá, Törlés), a „Vagy kérdezzen mást az AI-tól:” felirat alatt pedig egy szövegmező, ahová csak erre a szakaszra vonatkozó AI-utasítást írhat.

Néhány tanács. Váltogassa a háttereket (világos felület, nincs, árnyalat), hogy a látogatók lássák, hol ér véget egy téma. Egy kártyasorban legfeljebb három vagy négy oszlopot használjon; telefonon úgyis egymás alá kerülnek. Takarékosan bánjon az Elrejtés mobilon beállítással: soha ne rejtse el az elérhetőségeit vagy bármit, amire egy mobilos látogatónak szüksége van. Ha ellenőrizni szeretné a megjelenést, válassza a felső sávban a Mobil nézetet.

Egyéni HTML

Az Egyéni elemek és widgetek csoportban található az Egyéni HTML is: egy szakasz, amelybe saját HTML-t és, ha szeretné, CSS-t illeszthet be. Elhelyezés után a szakaszon a HTML szerkesztése gombbal módosíthatja. A színek és betűk változókon keresztül követik az arculatát, például var(--acc), var(--tekst) és var(--kop-font). A CSS csak erre a szakaszra érvényes.

A korlátozások szándékosak: a scriptek, iframe-ek és űrlapok itt nem működnek. Egy másik szolgáltatás lejátszójához, naptárához, térképéhez vagy űrlapjához a Widget elemet használja (4.3. lecke). Az Egyéni HTML azoknak való, akik ismerik a HTML-t; mindenki más számára a hagyományos szakaszok és az AI a gyorsabb út.

Buktatók

• Bennhagyott mintaszöveg egy választóból hozzáadott szakaszban: ilyenkor nem teheti közzé a webhelyet.
• Túl sok szakasz. Egy tíz szakaszból álló hosszú oldalt senki nem olvas végig. Távolítsa el, ami nem tesz hozzá semmit. Egy oldalon legfeljebb 40 szakasz lehet, de ennyire soha nem lesz szüksége.
• Térköz beállítása a chatben. Ez szerkesztésekbe kerül, és kevésbé pontos, mint a húzás.
• Csak számítógépen ellenőrzés. Az oszlopok, a térköz és az elrejtés telefonon másképp működik.
• Törlés a chatben, holott a Törlés gomb ingyenes.

A szerkesztőben: így csinálja

1. Kattintson az előnézetben a Szakasz alá gombra, vagy nyissa meg a Szakaszok panelt.
2. Válasszon egy csoportot, egy fajtát és egy formát, majd kattintson a Hozzáadás gombra.
3. Cserélje le a mintaszövegeket saját maga vagy az AI segítségével.
4. Helyezze át a szakaszt a Feljebb, a Lejjebb gombbal vagy a fogantyúval; másoljon vagy töröljön az eszköztárral.
5. A térközhöz húzza az alsó szélt; dupla kattintással visszaállíthatja az alapértelmezett értéket.
6. Nyissa meg a Szakasz szerkesztése ablakot a háttér, az oszlopok, a sarkok, a nyitószakasz magassága és az Elrejtés mobilon beállításához.
7. Ellenőrizze Mobil nézetben.

Összefoglalás

• Az oldal szakaszok egymásra rakott sora; 35 fajta van, mindegyik egy vagy több formában.
• A választóval történő hozzáadás ingyenes, és mintaszöveget ad, amelyet közzététel előtt le kell cserélnie; a chatben három tervet kap, és ez 2 szerkesztésbe kerül.
• Az áthelyezés, a másolás, a törlés és a méretek húzása ingyenes; a fogantyúra történő dupla kattintás visszaállítja az alapértelmezett értéket.
• A Szakasz szerkesztése ablakban állíthatja a hátteret, a térközt, az elemek közötti térközt, az oszlopokat, a sarkokat, a nyitószakasz magasságát és az Elrejtés mobilon beállítást.
• Az Egyéni HTML használható, de scriptek, iframe-ek és űrlapok nélkül; ezekre a widget való.

Kvíz

Feladat

D3.4. feladat: Egy szakasz be, egy ki. Javítsa a kezdőlapja felépítését a gombokkal és a fogantyúkkal, felesleges AI-utasítások nélkül.

Ellenőrzőlista:

• [ ] felírta a kezdőlap szakaszait fentről lefelé;
• [ ] hozzáadott egy szakaszt a választóval, és lecserélte az összes mintaszöveget;
• [ ] a Törlés gombbal eltávolított vagy összevont egy szakaszt, amely nem tett hozzá semmit;
• [ ] áthelyezett egy szakaszt a Feljebb, a Lejjebb gombbal vagy a fogantyúval;
• [ ] legalább egy szakasz térközét húzással módosította, és egyszer dupla kattintással visszaállította;
• [ ] a Szakasz szerkesztése ablakban módosította a hátteret vagy az oszlopokat;
• [ ] megnézte az oldalt Mobil nézetben.

Kérdések:

1. Milyen volt a szakaszok sorrendje előtte és utána, és miért választotta ezt a sorrendet?
2. Melyik szakaszt távolította el, és mi az, ami most nem hiányzik a látogatónak?
3. Hány szerkesztésbe került ez a feladat, és melyik lépés került volna szerkesztésekbe a chatben?

A „kész” után egy mintaválaszt lát: Nyitószakasz, Számok, Kártyák, Értékelések, Kapcsolat helyett Nyitószakasz, Kártyák, Fotó és szöveg (munkamódszer), Értékelések, Kérdések, Kapcsolat, így a szolgáltatások közvetlenül a nyitó rész alatt vannak; a Számok szakasz kikerült, mert a számok kitaláltak voltak; a feladat 0 szerkesztésbe került, míg a törlés vagy egy új szakasz a chatben 1 vagy 2 szerkesztésbe került volna.

További olvasnivaló

• Ingyenes Online láthatóság tanfolyam 3.2: Címsorok és az oldal felépítése
• Ingyenes Online láthatóság tanfolyam 4.2: Mobil először és a viewport
• Sitebuilder és AI Builder: melyiket válassza, és hogyan nyithatja meg?