Blocuri de construcție¶

Poți proiecta site-ul tău prin tragerea și plasarea blocurilor de construcție, apoi editarea acestora pentru a se potrivi cu conținutul și aspectul dorit.

Adaugă un bloc de construcție¶

Pentru a adăuga un bloc la o pagină de site, accesați pagina, faceți clic pe Editare, apoi trageți și plasați blocul de construcție dorit în locul potrivit. Sunt disponibile două tipuri de blocuri de construcție: Categorii și Conținut intern. Blocurile de construcție Conținut intern pot fi adăugate doar în blocurile de construcție Categorii.

Când apeși pe un bloc de categorie, apare o fereastră pop-up care îți permite să selectezi între mai multe șabloane pentru fiecare categorie.

Sfat

Poți căuta un bloc specific în fereastra pop-up Inserează un bloc folosind bara de căutare.

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.

După ce blocul de categorie a fost plasat, poți trage și plasa blocuri de Conținut interior în interiorul acestuia. Blocurile de Conținut interior îți permit să adaugi elemente precum videoclipuri, imagini, butoane pentru rețele sociale etc. în blocurile de categorie deja existente.

Notă

Accesul la anumite blocuri necesită instalarea aplicației sau modulului respectiv (ex: eCommerce pentru blocul Produse).

Example

Adaugă toate conturile tale de social media într-un singur loc cu blocul de Social Media din conținutul interior. Comută butonul on/off de lângă platforma dorită și copiază/lipeste URL-ul contului tău.

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.

Formular¶

Blocul Formular este folosit pentru a colecta informații de la vizitatorii site-ului și pentru a crea înregistrări în baza dumneavoastră de date, dacă este cazul. Pentru a adăuga un formular la o pagină de site, trageți și plasați categoria Contact & Formulare, apoi selectați Bloc formular.

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.

Acțiune¶

Implicit, când formularul este trimis, un email cu informațiile introduse de vizitator este trimis automat. În funcție de aplicațiile instalate în baza ta de date, pot deveni disponibile acțiuni suplimentare care creează automat înregistrări. Pentru a alege o altă acțiune, apasă Editare, apasă pe formular, mergi la fila Personalizează și selectează Acțiunea dorită:

Aplică pentru un job (Recrutare)
Creează un client (eCommerce)
Creează o oportunitate (CRM)
Abonează-te la newsletter (Email Marketing)
Creează o sarcină (Project)

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.

Implicit, trimiterea formularului redirecționează vizitatorii către o pagină Mulțumim. Folosește câmpul URL pentru a-i trimite către o altă pagină. Alternativ, poți alege să nu redirecționezi și să-i păstrezi pe pagina formularului selectând Nimic sau Afișează mesaj în câmpul La succes.

Câmpuri¶

Pentru a adăuga un câmp nou în formular, mergi la fila Personalizează și apasă butonul + Câmp de lângă secțiunea Formular sau Câmp. Pentru a modifica câmpul nou (sau orice alt câmp) din formular, selectează câmpul, apoi folosește opțiunile disponibile în secțiunea Câmp din fila Personalizează. De exemplu, poți:

Schimbă Tipul câmpului.

Sfat
Este posibil să selectezi și un Câmp existent din baza de date și să folosești datele pe care le conține. Câmpurile disponibile depind de acțiunea selectată. Pot fi folosite și câmpuri de proprietate adăugate în baza de date.

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.
Unele câmpuri sunt similare vizual, dar datele introduse trebuie să urmeze un format specific.
Editează Eticheta câmpului și adaptează-i Poziția.
Activează Descrierea unui câmp. Apasă pe descrierea implicită din formular pentru a o modifica.
Adaugă un Placeholder sau o Valoare implicită.
Specifică dacă câmpul este Obligatoriu.
Editează setările de vizibilitate ale câmpului.
Adaugă o animație.

După ce ai făcut modificările dorite, apasă Salvează.

Adăugarea unui formular de contact Odoo pe un site non-Odoo¶

Puteți afișa un formular de contact Odoo pe un alt site folosind un iframe. Pentru aceasta, urmați acești pași:

Pregătiți formularul Odoo: creați un formular de contact pe o pagină din Odoo Website și eliminați designul antetului și designul subsolului. Asigurați-vă că pe pagină rămâne doar formularul de contact.
Generați un cod încorporabil: copiați URL-ul paginii formularului Odoo și lipiți-l într-un generator de iframe, precum La Digitale.dev sau iFrame Generator . Ajustați lățimea și înălțimea pentru o afișare corectă.
Adăugați codul încorporat pe site-ul non-Odoo: deschideți HTML-ul paginii relevante (în editorul de cod sau în CMS) și inserați codul încorporat în locul în care trebuie afișat formularul.

Example

Exemplu de cod încorporat:

<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>

Cod ascuns¶

Codul de încorporare vă permite să integrați într-o pagină conținut de la servicii terțe, cum ar fi videoclipuri de pe YouTube, hărți de pe Google Maps, postări pe rețelele sociale de pe Instagram etc.

După ce ai adăugat blocul pe o pagină, apasă pe bloc, mergi la fila Personalizează și apasă Editare. Înlocuiește codul placeholder cu codul tău de embed personalizat.

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.

Sfat

Cu modulul Website Code Editor — Insert Media (website_code_editor_media) instalat, un buton Media este disponibil în editorul de cod al blocului Cod încorporat — și în editorul de resurse HTML/CSS/JS al site-ului. Acesta deschide dialogul obișnuit pentru media și inserează URL-ul imaginii sau al documentului selectat la poziția cursorului, astfel încât o imagine din biblioteca media să poată fi referențiată în codul scris manual fără a-i căuta adresa.

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.

Atenționare

Nu copia/lipii cod pe care nu îl înțelegi, deoarece îți poate pune datele în pericol.

Mută, schimbă sau șterge un bloc de construcție¶

Trage marginile turcoaz ale blocului pentru a reduce sau mări spațiul de sus sau de jos.

Schimbă ordinea blocurilor apăsând (chevron sus) sau (chevron jos) și mută blocul pe pagină apăsând (săgeți). Dacă ai mai multe coloane, mută o coloană la stânga sau la dreapta apăsând (chevron stânga) sau (chevron dreapta).

Pentru a șterge un bloc, apasă (coș de gunoi).

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.

Sfat

Schimbă rapid categoria blocului apăsând (schimbă).

Editează un bloc de construcție¶

Pentru a edita conținutul unui bloc de construcție, apasă pe el și mergi la fila Personalizează. Opțiunile de personalizare disponibile variază în funcție de tipul blocului selectat.

Vezi și

Fundal¶

Pentru a modifica fundalul unui bloc de construcție, selectează blocul, mergi la fila Personalizează și apasă pe punctul de culoare sau pe o altă opțiune Fundal. Poți schimba culoarea și/sau adăuga o imagine, un videoclip și/sau o formă. După ce ai selectat o formă, apar câmpuri noi pentru a o personaliza.

Sfat

Pozitionează un element (imagine, text etc.) în spatele sau în fața altuia folosind pictogramele Trimite în spate sau Adu în față.

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.
Pentru a redimensiona un bloc, apasă și trage punctele din jurul marginilor pentru a-l ajusta după nevoie.

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.

Vezi și

Temă generală

Aspect: grilă și coloane¶

Pentru majoritatea blocurilor de construcție, poți alege între două stiluri de aranjare: grilă sau coloane (cols). Pentru a schimba stilul implicit, apasă pe bloc, mergi la fila Personalizează și setează câmpul Aranjare pe Grilă sau Coloane.

Grilă¶

Aranjarea Grilă îți permite să repoziționezi și să redimensionezi elemente precum imagini sau text, trăgându-le și plasându-le. Când este selectată Grilă, sunt disponibile opțiuni suplimentare pentru Adaugă elemente apăsând Imagine, Text sau Buton.

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.

Coloane¶

Alegând aranjarea Coloane, poți stabili numărul de elemente pe linie în bloc. Pentru aceasta, selectează blocul de modificat, apasă pe dropdown-ul de lângă câmpul Coloane și ajustează numărul. Poți apoi modifica setările unei coloane specifice folosind opțiunile din secțiunea Coloană a filei Personalizează.

Notă

Implicit, pe dispozitivele mobile, doar un element (coloană) este vizibil pe linie pentru a asigura lizibilitatea și accesibilitatea conținutului pe ecrane mici. Pentru a ajusta valoarea, apasă pe (iconiță mobil) din partea de sus a editorului de site și adaptează numărul de coloane. Formele sunt ascunse implicit pe mobil.

Duplică un bloc de construcție¶

Pentru a duplica un bloc de construcție, apasă pe pictograma (duplică) din partea de sus a filei Personalizează. După duplicare, noul bloc apare pe pagină sub cel original.

Salvează un bloc de construcție personalizat¶

Poți salva un bloc de construcție personalizat pentru a-l reutiliza în altă parte. Pentru aceasta, selectează-l, mergi la fila Personalizează și apasă pe pictograma (dischetă). Apasă butonul Salvează și reîncarcă din fereastra pop-up pentru a confirma salvarea blocului personalizat.

Pentru a adăuga un bloc de construcție salvat pe pagină, mergi la fila Blocuri și trage blocul Personalizat din secțiunea Categorii. În fereastra pop-up care se deschide, apasă pe blocul dorit din categoria Personalizat.

Sfat

În fereastra pop-up Inserează un bloc, apasă pe (editează) pentru a redenumi blocul personalizat sau pe (șterge) pentru a-l șterge.

Creează un link ancoră¶

Linkurile ancoră sunt hyperlinkuri care direcționează utilizatorii către o secțiune specifică a unei pagini. Pentru a crea un link ancoră pentru un bloc, urmează acești pași:

Apasă Editare și selectează blocul la care vrei să faci legătura.
Apasă pe (link) din partea de sus a filei Personalizează.
Pentru a edita numele implicit al ancorei, apasă Editare în mesajul pop-up verde care se deschide.
Înlocuiește numele ancorei și apasă Salvează & copiază.

După ce ancora a fost salvată, poți face legătură către ea de oriunde de pe site.