Elemei

Az elemek segítenek a tartalom hatékony strukturálásában és bemutatásában. Ezek a szövegalapú komponensektől, mint például a címek, listák és szövegkiemelések, az interaktív elemekig, mint például a gombok és hivatkozások, terjednek. Vizuális elemek, mint például képek, ikonok, videók, és animációk, szintén hozzáadhatók a tartalom bemutatásának és szervezésének javítása érdekében.

Weboldal elem hozzáadásához vagy módosításához:

  1. Navigáljon a megfelelő weboldal oldalra, és kattintson a Szerkesztés gombra.

  2. Kattintson az oldal azon részére, ahol elemet szeretne hozzáadni vagy módosítani.

  3. Végezze el a szükséges módosításokat.

  4. Kattintson a Mentés gombra.

Megjegyzés

A címsorok, gombok, hivatkozások és bekezdésszövegek alapértelmezett stílusai például a weboldal szerkesztő Téma fülén vannak meghatározva.

screenshot: website-elements-webdesign-elements
menu
Website ‣ Edit ‣ (text area)
shows
The powerbox drop-down menu opened by typing a forward slash in a text area, listing the website elements that can be inserted.
highlight
The powerbox menu (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Címek

A címek meghatározzák a fejléceket, és különböző szintekre szervezik a weboldal tartalmát a tisztaság és a struktúra érdekében. Cím beszúrásához írja be a /title parancsot, válassza ki a fejléc stílusát (Heading 1, Heading 2, vagy Heading 3), és írja be a szöveget.

Javaslat

Alternatív megoldásként írja be a szöveget, jelölje ki, és válassza ki a megfelelő stílust a Inline Text szakaszban a weboldal szerkesztő Customize fülén. További formázási lehetőségek, mint például a betűtípusok és színek, szintén elérhetők ebben a szakaszban.

Gombok

A gombok interaktív elemek, amelyek lehetővé teszik, hogy egy másik oldalra vagy egy oldal horgonyára hivatkozzanak. Gomb beszúrásához:

  1. Írja be a /button parancsot.

  2. Adja meg a gomb címkéjét a Link Label mezőben.

  3. Adja hozzá a URL vagy Email címet. Írja be a / jelet egy oldal kereséséhez és a # jelet egy horgonyra való hivatkozáshoz.

  4. Állítsa be a Style, Size, és Layout elemeket a gomb megjelenésének meghatározásához.

  5. Szükség esetén kapcsolja be a kapcsolót, hogy a hivatkozott oldal vagy horgony új lapon nyíljon meg.

  6. Kattintson a Alkalmaz gombra a változtatások mentéséhez.

Javaslat

Egy meglévő gomb módosításához kattintson a gombra, és szerkessze az opciókat a weboldal szerkesztő Inline text szakaszában.

Képek

Kép beillesztéséhez:

  1. Írja be: /image.

  2. Keresse meg az Unsplash adatbázist vagy kattintson a Kép feltöltése gombra, hogy fájlt válasszon a helyi képek közül.

  3. Kattintson a Hozzáadás gombra.

  4. A kép testreszabásához kattintson a képre, és szerkessze az opciókat a weboldal szerkesztő Kép szakaszában. Például:

    • A kép Cseréje.

    • Határozza meg az alt címkét a Leírás mezőben.

    • Adjon meg egy címkét a Tooltip mezőben. Ez a szöveg akkor jelenik meg, amikor a látogatók az egérrel a kép fölé viszik a kurzort.

    • Adjon hozzá egy Alakzat-ot; egyes alakzatok szín testreszabását is lehetővé teszik.

    • Állítsa be a kép Szélesség-ét, például a teljesítmény javítása érdekében. Kisebb méret javasolt, ha elegendő a megjelenítéshez.

    • Méretezze át a képet a Átalakítás eszközzel.

    • Állítsa be a Kitöltést, hogy helyet adjon (pixelekben) a kép körül.

    • Stb.

Videók

Videó hozzáadásához írja be a /video parancsot, illessze be az URL-t, és kapcsolja be a kívánt opciókat:

  • Automatikus lejátszás: a videó automatikus lejátszásához, amikor az oldal elérhető. Alapértelmezés szerint a videó automatikusan némítva van.

  • Ismétlés: a videó folyamatos lejátszásához.

  • Lejátszó vezérlők elrejtése

  • Teljes képernyős gomb elrejtése

Ikonok

Ikon beszúrásához írja be a /image parancsot, lépjen az Ikonok fülre, válasszon ki egy ikont, majd kattintson az Hozzáadás gombra. Az ikon módosításához kattintson rá, és használja a weboldal szerkesztő Ikon szekcióját az opciók testreszabásához, mint például Szín, Méret, Animációk, Forma, stb.

Listák

A listák segítenek a tartalom világos szervezésében, megkönnyítve az információk olvasását és javítva a weboldalak szerkezetét. Írja be a /list parancsot, és válasszon három különböző lista típus közül: Pontozott listák, Számozott listák, vagy Ellenőrző listák.

Szövegkiemelések

Kiemeléseket adhat hozzá címekhez és szövegekhez a weboldal szerkesztő Beágyazott szöveg szekciójában. Kiemelés hozzáadásához:

  1. Válassza ki a kiemelni kívánt szöveget vagy címet.

  2. A weboldal szerkesztőben kattintson a Kiemelés gombra.

  3. Válassza ki a kiemelés stílusát.

  4. Módosítsa a Színét.

  5. Válassza ki a Vastagságát.

screenshot: website-elements-highlights-elements
menu
Website ‣ Edit ‣ (selected text)
shows
A selected text with the text toolbar open on the highlight options, and a title already highlighted below it.
highlight
The highlight options in the toolbar (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Animációk

Az animációk mozgást adnak a építőelemekhez és a weboldal elemeihez, mint például képek és szövegek. Háromféle animáció érhető el: Görgetéskor, Megjelenéskor, és Rámutatáskor (csak képeknél).

Animáció hozzáadása egy weboldal elemhez:

  1. Kattintson az elemre.

  2. A weboldal szerkesztőjében lépjen a megfelelő szakaszhoz az elemhez (pl. Button, Column, Inline Text, stb.).

  3. A Animation mezőben válassza ki a kívánt animáció típusát.

  4. Személyre szabhatja az animáció beállításait szükség szerint. Az elérhető opciók az animáció típusától függően változnak.

Animációk görgetéskor

Görgetéskor történő animációk esetén lehetőség van:

  • Válassza a In lehetőséget, hogy az animáció akkor jelenjen meg, amikor az elem belép a képernyőre, és a Out lehetőséget, hogy akkor jelenjen meg, amikor elhagyja a képernyőt.

  • Válasszon egy Effect-et.

  • Válassza ki az effekt Direction-jét.

  • Alkalmazza az effekt Intensity-jét.

  • Határozza meg a Scroll Zone-t, ahol az első érték azt a százalékot jelenti, amikor az effekt kezdődik, a második érték pedig azt, amikor véget ér.

Animációk megjelenéskor

A megjelenéskor történő animációk esetén lehetőség van:

  • Különböző hatások közül választani.

  • Válassza ki az effekt Direction-jét.

  • Válasszon egy Trigger opciót annak meghatározására, hogy mikor történjen az animáció: vagy First Time only vagy Every Time.

  • Alkalmazza az effekt Intensity-jét.

  • Ha azt szeretné, hogy az animáció néhány másodperc után induljon el, adja meg ezt a számot a Start After mezőben.

  • Válasszon egy Duration az animációhoz.

Animációk hover esetén (csak képeknél)

Animációk On hover hozzáadhatók a képekhez. Kiválaszthatja az animáció Effect-jét, valamint a Color-t és a Stroke Width-et.

Lásd még

Odoo HTML szerkesztő