빌딩 블록

You can design your website by dragging and dropping building blocks, then editing them to fit your content and layout needs.

더 보기:

Odoo 튜토리얼: 웹사이트 디자인: 텍스트 및 색상

빌딩 블록 추가하기

To add a block to a website page, access the page, click Edit, then drag and drop the desired building block into the appropriate location. Two types of building blocks are available: Categories and Inner Content. Inner Content building blocks can only be added into Categories building blocks.

When clicking a category block, a popup appears, allowing you to select between multiple templates for each category.

팁

Search for a specific block in the Insert a block popup using the search bar.

Once the category block is placed, you can drag and drop Inner content blocks within it. The Inner content blocks allow you to add elements, such as videos, images, social media buttons, etc., into pre-existing category blocks.

참고

• You can also add a building block on the login page. To do so, navigate to the website’s homepage, add /web/login to the URL and press Enter.

• Access to certain blocks requires installing their respective application or module (e.g., eCommerce for the Products block).

Example

Add all your social media accounts in one place with the inner content Social Media block. Toggle the switch on or off next to the desired platform and copy/paste your account URL.

양식

The Form block is used to collect information from website visitors and, if applicable, create records in your database. To add a form to a website page, drag and drop the Contact & Forms category block, then select a block in the popup.

추가 작업

By default, when the form is submitted, an email containing the information entered by the visitor is automatically sent. Depending on the apps installed on your database, additional actions that can automatically create records may become available. To choose a different action, click Edit, click the form, navigate to the Style tab, and select the desired Action:

• 채용 지원 (채용)

• 고객 생성 (이커머스)

• 티켓 생성 (헬프데스크)

• 영업기회 생성 (CRM)

• 뉴스레터 구독 (이메일 마케팅)

• 작업 생성 (프로젝트)

• More models: to generate other types of records

기본적으로 방문자가 양식을 제출하면 감사합니다 페이지로 리디렉션됩니다. 다른 페이지로 이동되게 하려면 URL 필드를 이용하면 됩니다. 또는 성공 시 필드에서 없음 또는 메시지 표시 를 선택하여 리디렉션하지 않고 양식 페이지에 그대로 머무르게 하는 것도 가능합니다.

필드

To add a new field to the form, navigate to the Style tab and click the + Field button next to the Form or Field section. To modify any field on the form, select the field, then use the options available in the Field section of the Style tab. For example, you can:

• 필드 유형 을 변경합니다.

  팁

  It is also possible to select an Existing Field from the database and use the data it contains. The fields available depend on the selected action. Property fields added to the database can also be used.

  Click here to preview all field types.

  

  일부 필드의 경우 비주얼 면에서는 유사하지만, 반드시 데이터를 특정 형식에 맞추어 입력해야 합니다.

• 필드의 라벨 을 편집하고 위치 를 조정합니다.

• Enable a field Description. Toggle the switch on and click the default description on the form to modify it.

• 자리 표시자 또는 기본값 을 추가합니다.

• :guilabel:`필수`필드인지 여부를 지정합니다.

• 필드 표시 여부 설정을 수정합니다.

• :ref:`애니메이션 <website/elements/animations>`을 추가합니다.

원하는 대로 변경을 완료한 후 저장 을 클릭합니다.

Odoo가 아닌 웹사이트에 Odoo 연락처 양식 추가하기

You can display an Odoo contact form on another website using an iframe. To do so, follow these steps:

1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header design and the footer design. Make sure only the contact form remains on the page.

2. Generate an embeddable code: Copy the URL of the Odoo form page and paste it into an iframe generator, such as La Digitale.dev or iFrame Generator . Adjust the width and height for proper display.

3. Add the embedded code to the non-Odoo website: Open the relevant page’s HTML (in the code editor or CMS) and insert the embedded code where the form should be displayed.

Example

임베디드 코드 예시:

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

코드 삽입

코드 삽입 기능으로 YouTube의 동영상, Google 지도, Instagram의 소셜 미디어 게시물 등과 같은 타사 서비스의 콘텐츠를 페이지에 통합할 수 있습니다.

After dragging and dropping the Embed Code block from the Inner Content section into a page, click the block, then go to the Style tab and click Edit. Replace the placeholder code with your custom embed code.

경고

Do not copy/paste code you do not understand, as it could put your data at risk.

Move, switch, duplicate or delete a building block

Pull the turquoise borders on the block to reduce or increase the space at the top or bottom of it.

블록 순서를 변경하려면 (위쪽 방향) 또는 (아래쪽 방향)을 클릭하여 (화살표)를 클릭하여 페이지에서 블록을 이동합니다. 여러 개의 열 이 있는 경우에는, (왼쪽 방향) 또는 (오른쪽 방향)을 클릭하여 열을 왼쪽이나 오른쪽으로 이동합니다.

To duplicate a building block, click (duplicate). Once duplicated, the new block appears on the page beneath the original one.

팁

Alternatively, click the (duplicate) icon at the top of the Style tab to duplicate the selected block.

블록을 삭제하려면 (휴지통)을 클릭하세요.

빌딩 블록 편집하기

To edit the content of a building block, click it and go to the Style tab. Available customization options vary depending on the type of block selected.

더 보기:

• 웹디자인 요소

• 가시성

배경

To modify the background of a building block, select the block, go to the Style tab, and click the color dot or another Background option. You can change the color and/or add an image, video, and/or shape. Once you’ve selected a shape, new fields appear to allow you to customize the shape.

팁

• Position an element (image, text, etc.) behind or in front of another one by using the Send to back or Bring to front icons.

  

• To resize a block, click and drag the dots around its edges to adjust it as needed.

  

더 보기:

일반 테마

레이아웃: 그리드 및 열

For most building blocks, you can choose between two layout styles: grid or columns (cols). To change the default layout style, click the block, go to the Style tab, and set the Layout field to Grid or Cols.

그리드

The Grid layout allows you to reposition and resize elements, such as images or text, by dragging and dropping them. When Grid is selected, additional options are available to Add Elements by clicking Image, Text, or Button.

분할

Choosing the Cols layout allows you to determine the number of elements per line within the block. To do so, select the block to modify, click the dropdown next to the Cols field, and adjust the number. You can then modify a specific column’s settings using the options in the Column section of the Style tab.

참고

기본적으로 모바일 장치에서는 작은 화면에서도 콘텐츠를 쉽게 읽고 액세스할 수 있도록 한 줄당 하나의 요소(열)가 표시됩니다. 이 값을 조정하려면 웹사이트 편집기 상단의 :icon:`fa-mobile`(:guilabel:`모바일 아이콘`)을 클릭한 후 열 숫자를 조정합니다. 모바일에서는 기본적으로 도형이 숨겨져 있습니다.

사용자 지정 빌딩 블록 저장하기

You can save a customized building block to reuse it elsewhere. To do so, select it, navigate to the Style tab, and click the (floppy disk) icon. Click the Save button in the popup to confirm saving your custom block.

To add a saved building block to the page, navigate to the Blocks tab and drag and drop the Custom block from the Categories section. In the popup that opens, click the desired block in the Custom category.

팁

In the Insert a block popup, click (edit) to rename the custom block or (delete) to delete it.

앵커 링크 생성하기

Anchor links are hyperlinks that direct users to a specific section of a page. To create an anchor link for a block, follow these steps:

1. 편집 을 클릭한 후 연결할 블록을 선택합니다.

2. Click (link) at the top of the Style tab.

3. To edit the default anchor name, click Edit in the green popup message that opens.

4. 고정 앵커 이름을 변경한 후 저장 및 복사 를 클릭합니다.

Once the anchor is saved, you can link to it from anywhere on your website.