빌딩 블록¶
:ref:`구성 요소를 드래그 앤 드롭 <website/building_blocks/add>`하여 웹사이트를 디자인한 다음 콘텐츠 및 레이아웃 요구 사항에 맞게 :ref:`편집 <website/building_blocks/edit>`할 수 있습니다.
빌딩 블록 추가하기¶
웹사이트 페이지 <../structure/pages>`에 블록을 추가하려면 페이지에 접근하여 :guilabel:`편집`을 클릭한 다음 원하는 구성 요소를 적절한 위치로 드래그 앤 드롭하세요. 두 가지 유형의 구성 요소를 사용할 수 있습니다: :guilabel:`카테고리`와 :guilabel:`내부 콘텐츠. 내부 콘텐츠 구성 요소는 카테고리 구성 요소 내에만 추가할 수 있습니다.
카테고리 블록을 클릭하면 팝업이 나타나며 각 카테고리에 대해 여러 템플릿 중에서 선택할 수 있습니다.
팁
검색 바를 사용하여 블록 삽입 팝업에서 특정 블록을 검색하세요.
카테고리 블록을 배치한 후 내부 콘텐츠 블록을 그 안으로 드래그 앤 드롭할 수 있습니다. 내부 콘텐츠 블록을 사용하면 기존 카테고리 블록에 동영상, 이미지, 소셜 미디어 버튼 등과 같은 요소를 추가할 수 있습니다.
참고
Example
내부 콘텐츠 소셜 미디어 블록을 사용하여 모든 소셜 미디어 계정을 한 곳에 추가하세요. 원하는 플랫폼 옆의 스위치를 켜거나 끄고 계정 URL을 복사/붙여넣기하세요.
양식¶
양식 블록은 웹사이트 방문자로부터 정보를 수집하고, 해당하는 경우 데이터베이스에 레코드를 생성하는 데 사용됩니다. 웹사이트 페이지에 양식을 추가하려면 연락처 및 양식 카테고리 블록을 드래그 앤 드롭한 다음 팝업에서 블록을 선택합니다.
추가 작업¶
기본적으로 양식이 제출되면 방문자가 입력한 정보가 포함된 이메일이 자동으로 전송됩니다. 데이터베이스에 설치된 앱에 따라 레코드를 자동으로 생성할 수 있는 추가 작업을 사용할 수 있습니다. 다른 작업을 선택하려면 편집`을 클릭하고 양식을 클릭한 다음 :guilabel:`스타일 탭으로 이동하여 원하는 :guilabel:`작업`을 선택합니다:
채용 지원 (채용)
고객 생성 (이커머스)
티켓 생성 (헬프데스크)
영업기회 생성 (CRM)
뉴스레터 구독 (이메일 마케팅)
작업 생성 (프로젝트)
기타 모델: 다른 유형의 레코드를 생성합니다
기본적으로 방문자가 양식을 제출하면 감사합니다 페이지로 리디렉션됩니다. 다른 페이지로 이동되게 하려면 URL 필드를 이용하면 됩니다. 또는 성공 시 필드에서 없음 또는 메시지 표시 를 선택하여 리디렉션하지 않고 양식 페이지에 그대로 머무르게 하는 것도 가능합니다.
필드¶
양식에 새 필드를 추가하려면 스타일 탭으로 이동하여 양식 또는 필드 섹션 옆의 + 필드 버튼을 클릭합니다. 양식의 필드를 수정하려면 필드를 선택한 다음 스타일 탭의 필드 섹션에서 사용 가능한 옵션을 사용합니다. 예를 들어 다음을 수행할 수 있습니다:
필드 유형 을 변경합니다.
팁
데이터베이스에서 :guilabel:`기존 필드`를 선택하고 포함된 데이터를 사용할 수도 있습니다. 사용 가능한 필드는 선택한 작업에 따라 다릅니다. 데이터베이스에 추가된 속성 필드도 사용할 수 있습니다.
일부 필드의 경우 비주얼 면에서는 유사하지만, 반드시 데이터를 특정 형식에 맞추어 입력해야 합니다.
필드의 라벨 을 편집하고 위치 를 조정합니다.
필드 :guilabel:`설명`을 활성화합니다. 스위치를 켜고 양식의 기본 설명을 클릭하여 수정합니다.
자리 표시자 또는 기본값 을 추가합니다.
:guilabel:`필수`필드인지 여부를 지정합니다.
필드 표시 여부 설정을 수정합니다.
:ref:`애니메이션 <website/elements/animations>`을 추가합니다.
원하는 대로 변경을 완료한 후 저장 을 클릭합니다.
Odoo가 아닌 웹사이트에 Odoo 연락처 양식 추가하기¶
iframe을 사용하여 다른 웹사이트에 Odoo 문의 양식을 표시할 수 있습니다. 이렇게 하려면 다음 단계를 따르세요.
Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer. Make sure only the contact form remains on the page.
임베드 가능한 코드 생성: Odoo 양식 페이지의 URL을 복사하여 La Digitale.dev 또는 `iFrame Generator <https://www.iframe-generator.com/>`_와 같은 iframe 생성기에 붙여넣으세요. 올바른 표시를 위해 너비와 높이를 조정하세요.
Odoo가 아닌 웹사이트에 임베드 코드 추가: 관련 페이지의 HTML을 열고(코드 편집기 또는 CMS에서) 양식을 표시해야 하는 위치에 임베드 코드를 삽입하세요.
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의 소셜 미디어 게시물 등과 같은 타사 서비스의 콘텐츠를 페이지에 통합할 수 있습니다.
내부 콘텐츠 섹션에서 삽입 코드 블록을 페이지로 드래그 앤 드롭한 후 블록을 클릭하고 스타일 탭으로 이동하여 :guilabel:`편집`을 클릭합니다. 자리 표시자 코드를 사용자 정의 삽입 코드로 바꿉니다.
경고
이해하지 못하는 코드를 복사/붙여넣기하지 마세요. 데이터가 위험에 처할 수 있습니다.
구성 블록 이동, 전환, 복제 또는 삭제¶
블록의 상단 또는 하단 공간을 줄이거나 늘리려면 블록의 청록색 테두리를 당기세요.
블록 순서를 변경하려면 (위쪽 방향) 또는 (아래쪽 방향)을 클릭하여 (화살표)를 클릭하여 페이지에서 블록을 이동합니다. 여러 개의 열 이 있는 경우에는, (왼쪽 방향) 또는 (오른쪽 방향)을 클릭하여 열을 왼쪽이나 오른쪽으로 이동합니다.
구성 블록을 복제하려면 )를 클릭합니다. 복제되면 새 블록이 원본 블록 아래 페이지에 나타납니다.
팁
또는 스타일 탭 상단의 ) 아이콘을 클릭하여 선택한 블록을 복제합니다.
블록을 삭제하려면 (휴지통)을 클릭하세요.
빌딩 블록 편집하기¶
구성 블록의 콘텐츠를 편집하려면 블록을 클릭하고 스타일 탭으로 이동합니다. 사용 가능한 사용자 정의 옵션은 선택한 블록 유형에 따라 다릅니다.
배경¶
구성 블록의 배경을 수정하려면 블록을 선택하고 스타일 탭으로 이동한 다음 색상 점이나 다른 배경 옵션을 클릭합니다. 색상을 변경하거나 이미지, 비디오 및/또는 도형을 추가할 수 있습니다. 도형을 선택하면 도형을 사용자 정의할 수 있는 새 필드가 나타납니다.
팁
뒤로 보내기 또는 앞으로 가져오기 아이콘을 사용하여 요소(이미지, 텍스트 등)를 다른 요소 뒤 또는 앞에 배치하세요.
블록 크기를 조정하려면 블록 가장자리의 점을 클릭하고 드래그하여 필요에 맞게 조정하세요.
더 보기:
레이아웃: 그리드 및 열¶
대부분의 구성 블록의 경우 그리드 또는 열(cols) 두 가지 레이아웃 스타일 중에서 선택할 수 있습니다. 기본 레이아웃 스타일을 변경하려면 블록을 클릭하고 스타일 탭으로 이동한 다음 레이아웃 필드를 그리드 또는 :guilabel:`열`로 설정합니다.
그리드¶
Grid 레이아웃을 사용하면 이미지나 텍스트와 같은 요소를 드래그 앤 드롭하여 위치를 변경하고 크기를 조정할 수 있습니다. Grid`를 선택하면 :guilabel:`Image, Text 또는 :guilabel:`Button`을 클릭하여 :guilabel:`Add Elements`를 사용할 수 있는 추가 옵션이 제공됩니다.
분할¶
열 레이아웃을 선택하면 블록 내 줄당 요소 수를 결정할 수 있습니다. 이렇게 하려면 수정할 블록을 선택하고 열 필드 옆의 드롭다운을 클릭한 다음 숫자를 조정합니다. 그런 다음 스타일 탭의 열 섹션에 있는 옵션을 사용하여 특정 열의 설정을 수정할 수 있습니다.
참고
기본적으로 모바일 장치에서는 작은 화면에서도 콘텐츠를 쉽게 읽고 액세스할 수 있도록 한 줄당 하나의 요소(열)가 표시됩니다. 이 값을 조정하려면 웹사이트 편집기 상단의 :icon:`fa-mobile`(:guilabel:`모바일 아이콘`)을 클릭한 후 열 숫자를 조정합니다. 모바일에서는 기본적으로 도형이 숨겨져 있습니다.
사용자 지정 빌딩 블록 저장하기¶
사용자 정의한 구성 블록을 다른 곳에서 재사용하기 위해 저장할 수 있습니다. 이렇게 하려면 블록을 선택하고 스타일 탭으로 이동한 다음 :icon:`fa-floppy-o`(:guilabel:`플로피 디스크`) 아이콘을 클릭합니다. 팝업에서 저장 버튼을 클릭하여 사용자 정의 블록 저장을 확인합니다.
저장된 빌딩 블록을 페이지에 추가하려면 Blocks 탭으로 이동하여 Categories 섹션에서 Custom 블록을 드래그 앤 드롭합니다. 열리는 팝업에서 Custom 카테고리에 있는 원하는 블록을 클릭합니다.
팁
Insert a block 팝업에서 )를 클릭하여 커스텀 블록의 이름을 변경하거나 )를 클릭하여 삭제합니다.
앵커 링크 생성하기¶
앵커 링크는 사용자를 페이지의 **특정 섹션**으로 이동시키는 하이퍼링크입니다. 블록에 대한 앵커 링크를 생성하려면 다음 단계를 따릅니다:
편집 을 클릭한 후 연결할 블록을 선택합니다.
스타일 탭 상단의 )를 클릭합니다.
기본 앵커 이름을 편집하려면 열리는 녹색 팝업 메시지에서 :guilabel:`Edit`를 클릭합니다.
고정 앵커 이름을 변경한 후 저장 및 복사 를 클릭합니다.
앵커가 저장되면 웹사이트의 어디에서나 :ref:`링크를 연결 <website/elements/links>`할 수 있습니다.