Építőelemek¶

Weboldalát úgy tervezheti meg, hogy építőelemeket húz és ejt, majd szerkeszti őket a tartalom és az elrendezés igényeinek megfelelően.

Építőelem hozzáadása¶

Egy blokk hozzáadásához egy weboldal oldalhoz, lépjen az oldalra, kattintson a Szerkesztés gombra, majd húzza és ejtse a kívánt építőelemet a megfelelő helyre. Kétféle építőelem áll rendelkezésre: Kategóriák és Belső tartalom. A Belső tartalom építőelemek csak a Kategóriák építőelemekbe adhatók hozzá.

Amikor egy kategória blokkra kattint, egy felugró ablak jelenik meg, amely lehetővé teszi, hogy több sablon közül válasszon minden kategóriához.

Javaslat

A Blokk beszúrása felugró ablakban a keresősáv segítségével kereshet egy adott blokkot is.

screenshot: website-building-blocks-insert-a-block

menu: Website ‣ Edit ‣ Blocks
shows: The website editor's block panel open on the left, with the block categories (Structure, Features, Dynamic Content, Inner content) and their previews.
highlight: The block panel (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Miután a kategória blokkot elhelyezte, húzással és ejtéssel helyezhet el Belső tartalom blokkokat benne. A Belső tartalom blokkok lehetővé teszik elemek, például videók, képek, közösségi média gombok stb. hozzáadását a már meglévő kategória blokkokba.

Megjegyzés

Bizonyos blokkok eléréséhez szükséges a megfelelő alkalmazás vagy modul telepítése (pl. eCommerce a Termékek blokkhoz).

Example

Adja hozzá az összes közösségi média fiókját egy helyen a belső tartalom Közösségi média blokkal. Kapcsolja be vagy ki a kívánt platform melletti kapcsolót, és másolja/beilleszti a fiók URL-jét.

screenshot: website-building-blocks-social-media-inner-content

menu: Website ‣ Edit ‣ Blocks ‣ Inner content
shows: A Social Media inner-content block placed in a page, showing the social network icons.
highlight: The Social Media block (red frame).
data: Facebook, LinkedIn and YouTube links set on the company.
module: website
notes: English UI, light theme, 1440px width.

Űrlap¶

A Űrlap blokkot arra használják, hogy információt gyűjtsenek a weboldal látogatóitól, és ha alkalmazható, rekordokat hozzanak létre az adatbázisban. Űrlap hozzáadásához egy weboldal oldalához húzza és ejtse a Kapcsolat és űrlapok kategóriát, majd válassza ki a Űrlap blokkot.

screenshot: website-building-blocks-form-block

menu: Website ‣ Edit ‣ Blocks ‣ Features
shows: A Form block placed in a page, with its default fields (Your Name, Email, Subject, Your Question) and the Send button.
highlight: The Form block (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Művelet¶

Alapértelmezés szerint, amikor az űrlapot beküldik, a látogató által megadott információkat tartalmazó e-mail automatikusan elküldésre kerül. Az adatbázisban telepített alkalmazásoktól függően további műveletek is elérhetővé válhatnak, amelyek automatikusan létrehozhatnak rekordokat. Másik művelet kiválasztásához kattintson a Szerkesztés gombra, kattintson az űrlapra, navigáljon a Testreszabás fülre, és válassza ki a kívánt Akció-et:

Jelentkezés állásra (Toborzás)
Ügyfél létrehozása (eCommerce)
Lehetőség létrehozása (CRM)
Feliratkozás hírlevélre (Email Marketing)
Feladat létrehozása (Projekt)

screenshot: website-building-blocks-inner-content-edit-form

menu: Website ‣ Edit ‣ (Form block)
shows: The website editor's right sidebar for a selected Form block, with the Action drop-down menu open on the available actions (Send an Email, Create a Lead, Apply for a Job, Create a Task, …).
highlight: The Action drop-down menu (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Alapértelmezés szerint az űrlap beküldése a látogatókat egy Köszönjük oldalra irányítja. Használja a Webcím mezőt, hogy másik oldalra küldje őket. Alternatív megoldásként választhatja, hogy nem irányítja át őket, és az űrlap oldalán tartja őket a Semmi vagy a Üzenet megjelenítése kiválasztásával a Siker esetén mezőben.

Mezők¶

Új mező hozzáadásához a űrlaphoz navigáljon a Testreszabás fül-re, és kattintson a + Mező gombra a Űrlap vagy Mező szakasz mellett. Az új (vagy bármely más) mező módosításához az űrlapon válassza ki a mezőt, majd használja a Mező szakaszban elérhető lehetőségeket a Testreszabás fülön. Például, megteheti:

Módosíthatja a mező Típusát.

Javaslat
Lehetőség van arra is, hogy kiválasszon egy Meglévő mezőt az adatbázisból, és használja a benne lévő adatokat. Az elérhető mezők a kiválasztott művelettől függenek. Az adatbázishoz hozzáadott tulajdonság mezők is használhatók.

screenshot: website-building-blocks-all-types-of-field
menu
Website ‣ Edit ‣ (Form block) ‣ (field)
shows
The field option panel of a form field showing the available field types (Text, Long Text, Number, Email, Telephone, Date, Selection, Checkboxes, Radio buttons, File Upload).
highlight
The field type list (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.
Néhány mező vizuálisan hasonló, de a bevitt adatoknak meg kell felelniük egy adott formátumnak.
Szerkessze a mező Felirat, és igazítsa annak Elhelyezkedés.
Engedélyezze a mező Leírását. Kattintson az alapértelmezett leírásra az űrlapon annak módosításához.
Adjon hozzá egy Helykitöltő vagy Alapértelmezett értéket.
Adja meg, hogy a mező Kötelező-e.
Szerkessze a mező láthatósági beállításait.
Adjon hozzá egy animációt.

Miután elvégezte a kívánt módosításokat, kattintson a Mentés gombra.

Adjon hozzá egy Odoo kapcsolatfelvételi űrlapot egy nem Odoo weboldalon¶

Megjeleníthet egy Odoo kapcsolatfelvételi űrlapot egy másik weboldalon egy iframe használatával. Ehhez kövesse az alábbi lépéseket:

Készítse elő az Odoo űrlapot: Hozzon létre egy kapcsolatfelvételi űrlapot az Odoo Weboldal egyik oldalán, és távolítsa el a fejléc dizájnt és a lábléc dizájnt. Győződjön meg róla, hogy csak a kapcsolatfelvételi űrlap marad az oldalon.
Hozzon létre beágyazható kódot: Másolja az Odoo űrlap oldalának URL-jét, és illessze be egy iframe generátorba, például a La Digitale.dev vagy az iFrame Generator használatával. Állítsa be a szélességet és a magasságot a megfelelő megjelenítés érdekében.
Adja hozzá a beágyazott kódot a nem Odoo weboldalhoz: Nyissa meg a releváns oldal HTML-jét (a kódszerkesztőben vagy CMS-ben), és illessze be a beágyazott kódot oda, ahol az űrlapot meg kell jeleníteni.

Example

Beágyazott kód példája:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

Beágyazási kód¶

A beágyazási kód lehetővé teszi, hogy harmadik féltől származó szolgáltatások tartalmát integrálja egy oldalba, például YouTube videókat, Google Maps térképeket, Instagram közösségi média bejegyzéseket stb.

Miután hozzáadta a blokkot egy oldalhoz, kattintson a blokkra, majd lépjen a Testreszabás fülre, és kattintson a Szerkesztés gombra. Cserélje le a helyőrző kódot a saját egyedi beágyazási kódjára.

screenshot: website-building-blocks-embed-code-pop-up

menu: Website ‣ Edit ‣ Blocks ‣ Inner content ‣ Embed Code
shows: The Embed Code pop-up window with the HTML code field where the external code is pasted.
highlight: The code field (red frame).
data: A short sample iframe snippet.
module: website
notes: English UI, light theme, 1440px width.

Javaslat

Ha a Website Code Editor — Insert Media modul (website_code_editor_media) telepítve van, egy Média gomb jelenik meg az Beépülő kód blokk kódszerkesztőjében – és a weboldal HTML/CSS/JS erőforrás-szerkesztőjében is. Ez a szokásos médiaablakot nyitja meg, és a kiválasztott kép vagy dokumentum URL-jét szúrja be a kurzorhoz, így a médiatárból származó kép a címének kikeresése nélkül hivatkozható kézzel írt kódban.

screenshot: website-building-blocks-code-editor-insert-media

menu: Website ‣ Edit ‣ (Embed Code block) ‣ Edit
shows: The embedded code editor with the Media button above the code area, and the media dialog opened over it.
highlight: The Media button (red frame).
data: One image selected in the media library.
module: website_code_editor_media
notes: English UI, light theme, 1440px width.

Figyelem

Ne másoljon/beillesztjen olyan kódot, amelyet nem ért, mivel ez veszélyeztetheti az adatait.

Mozgassa, cserélje vagy törölje az építőelemet¶

Húzza a türkiz határokat a blokkon, hogy csökkentse vagy növelje a helyet a tetején vagy az alján.

Változtassa meg a blokkok sorrendjét a (chevron fel) vagy (chevron le) kattintásával, és mozgassa a blokkot az oldalon a (nyilak) kattintásával. Ha több oszlop van, mozgasson egy oszlopot balra vagy jobbra a (chevron balra) vagy (chevron jobbra) kattintásával.

Egy blokk törléséhez kattintson a (kuka) ikonra.

screenshot: website-building-blocks-padding-building-block
menu
Website ‣ Edit ‣ (building block)
shows
A selected building block in the editor with its padding handles visible at the top and bottom.
highlight
The padding handles (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Javaslat

Gyorsan változtassa meg a blokk kategóriáját a (csere) kattintásával.

Szerkessze az építőelemet¶

Egy építőelem tartalmának szerkesztéséhez kattintson rá, majd lépjen a Testreszabás fülre. Az elérhető testreszabási lehetőségek az elem típusától függően változnak.

Lásd még

Háttér¶

Egy építőelem hátterének módosításához válassza ki az elemet, lépjen a Testreszabás fülre, és kattintson a színpontra vagy egy másik Háttér opcióra. Megváltoztathatja a színt és/vagy hozzáadhat képet, videót és/vagy formát. Miután kiválasztott egy formát, új mezők jelennek meg, amelyek lehetővé teszik a forma testreszabását.

Javaslat

Helyezzen el egy elemet (kép, szöveg stb.) egy másik mögé vagy elé a Hátraküldés vagy Előrehozás ikonok használatával.

screenshot: website-building-blocks-change-block-position
menu
Website ‣ Edit ‣ (building block)
shows
The toolbar of a selected building block with the move up / move down arrows used to change its position on the page.
highlight
The move arrows (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.
Egy blokk átméretezéséhez kattintson és húzza a pontokat a szélei körül, hogy szükség szerint állítsa be.

screenshot: website-building-blocks-adapt-block-size
menu
Website ‣ Edit ‣ (building block)
shows
A selected building block with its bottom resize handle being dragged to change the block height.
highlight
The resize handle (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Lásd még

Általános téma

Elrendezés: rács és oszlopok¶

A legtöbb építőelem esetében két elrendezési stílus közül választhat: rács vagy oszlopok (cols). Az alapértelmezett elrendezési stílus megváltoztatásához kattintson a blokkra, menjen a Testreszabás fülre, és állítsa be az Elrendezés mezőt Rács vagy Oszlopok értékre.

Rács¶

A Rács elrendezés lehetővé teszi az elemek, például képek vagy szövegek áthelyezését és átméretezését húzással és ejtéssel. Ha a Rács van kiválasztva, további lehetőségek állnak rendelkezésre az elemek hozzáadására a Kép, Szöveg vagy Gomb gombokra kattintva.

screenshot: website-building-blocks-grid-layout

menu: Website ‣ Edit ‣ (building block)
shows: A building block switched to the Grid layout in the right sidebar, with an image being dragged onto a grid cell.
highlight: The Grid layout option in the sidebar (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Oszlopok¶

Az Oszlopok elrendezés kiválasztása lehetővé teszi, hogy meghatározza az elemek számát soronként a blokkon belül. Ehhez válassza ki a módosítandó blokkot, kattintson az Oszlopok mező melletti legördülő menüre, és állítsa be a számot. Ezután módosíthatja egy adott oszlop beállításait a Testreszabás fül Oszlop szakaszában található lehetőségek segítségével.

Megjegyzés

Alapértelmezés szerint mobil eszközökön csak egy elem (oszlop) látható soronként, hogy a tartalom könnyen olvasható és hozzáférhető maradjon kisebb képernyőkön. Az érték módosításához kattintson a (mobil ikon) ikonra a weboldal szerkesztő tetején, és állítsa be az oszlopok számát. Az alakzatok alapértelmezés szerint rejtve vannak mobilokon.

Építőelem másolása¶

Egy építőelem másolásához kattintson a (másolat) ikonra a Testreszabás fül tetején. A másolás után az új blokk az eredeti alatt jelenik meg az oldalon.

Egyéni építőelem mentése¶

Menthet egy testreszabott építőelemet, hogy máshol újra felhasználhassa. Ehhez válassza ki, navigáljon a Testreszabás fülre, és kattintson a (floppy disk) ikonra. Kattintson a Mentés és újratöltés gombra a felugró ablakban az egyéni blokk mentésének megerősítéséhez.

Egy mentett építőelem oldalhoz való hozzáadásához navigáljon a Blokkok fülre, és húzza át a Egyéni blokkot a Kategóriák szekcióból. A megnyíló felugró ablakban kattintson a kívánt blokkra az Egyéni kategóriában.

Javaslat

Az Blokk beszúrása felugró ablakban kattintson a (szerkesztés) gombra az egyéni blokk átnevezéséhez vagy a (törlés) gombra annak törléséhez.

Horgony link létrehozása¶

A horgony linkek olyan hiperhivatkozások, amelyek a felhasználókat egy oldal konkrét szakaszához irányítják. Horgony link létrehozásához egy blokkhoz kövesse az alábbi lépéseket:

Kattintson a Szerkesztés gombra, és válassza ki a blokkot, amelyhez linket szeretne létrehozni.
Kattintson a (hivatkozás) ikonra a Testreszabás fül tetején.
Az alapértelmezett horgony név szerkesztéséhez kattintson a Szerkesztés gombra a megnyíló zöld felugró üzenetben.
Cserélje le a horgony nevet, és kattintson a Mentés és másolás gombra.

Miután a horgony el van mentve, bárhonnan hivatkozhat rá a weboldalán.