빌딩 블록¶
:ref:`구성 요소를 드래그 앤 드롭 <website/building_blocks/add>`하여 웹사이트를 디자인한 다음 콘텐츠 및 레이아웃 요구 사항에 맞게 :ref:`편집 <website/building_blocks/edit>`할 수 있습니다.
빌딩 블록 추가하기¶
웹사이트 페이지 <../structure/pages>`에 블록을 추가하려면 페이지에 접근하여 :guilabel:`편집`을 클릭한 다음 원하는 구성 요소를 적절한 위치로 드래그 앤 드롭하세요. 두 가지 유형의 구성 요소를 사용할 수 있습니다: :guilabel:`카테고리`와 :guilabel:`내부 콘텐츠. 내부 콘텐츠 구성 요소는 카테고리 구성 요소 내에만 추가할 수 있습니다.
카테고리 블록을 클릭하면 팝업이 나타나 각 카테고리의 여러 템플릿 중에서 선택할 수 있습니다.
팁
검색창을 사용하여블록 삽입팝업에서 특정 블록을 검색할 수도 있습니다.
카테고리 블록을 배치한 후 내부 콘텐츠 블록을 그 안으로 드래그 앤 드롭할 수 있습니다. 내부 콘텐츠 블록을 사용하면 기존 카테고리 블록에 동영상, 이미지, 소셜 미디어 버튼 등과 같은 요소를 추가할 수 있습니다.
참고
특정 블록에 대한 접근은 해당 애플리케이션 또는 모듈의 설치가 필요합니다 (예:제품블록의 경우이커머스).
Example
내부 콘텐츠 소셜 미디어 블록을 사용하여 모든 소셜 미디어 계정을 한 곳에 추가하세요. 원하는 플랫폼 옆의 스위치를 켜거나 끄고 계정 URL을 복사/붙여넣기하세요.
양식¶
Form블록은 웹사이트 방문자로부터 정보를 수집하고 해당하는 경우 데이터베이스에 레코드를 생성하는 데 사용됩니다. 웹사이트 페이지에 양식을 추가하려면Contact & Forms카테고리를 드래그 앤 드롭한 다음Form block을 선택합니다.
추가 작업¶
기본값으로, 방문자가 양식을 제출하면 양식에 입력한 정보가 이메일로 자동 전송됩니다. 데이터베이스에 설치되어 있는 앱에 따라 레코드 자동 생성 작업을 추가 활동으로 사용할 수 있습니다. 다른 활동을 선택하려면 편집 을 클릭하고 양식을 클릭한 다음, 사용자 지정 탭으로 이동하여 원하는 활동 을 선택합니다.
기본적으로 방문자가 양식을 제출하면 감사합니다 페이지로 리디렉션됩니다. 다른 페이지로 이동되게 하려면 URL 필드를 이용하면 됩니다. 또는 성공 시 필드에서 없음 또는 메시지 표시 를 선택하여 리디렉션하지 않고 양식 페이지에 그대로 머무르게 하는 것도 가능합니다.
필드¶
양식에 새로운 필드를 추가하려면 사용자 지정 탭으로 이동하여 + 필드 버튼을 클릭합니다. 이 버튼은 양식 또는 필드 섹션 옆에 있습니다. 양식에 추가된 새 필드(또는 다른 필드)를 수정하려면 해당 필드를 선택한 다음 사용자 지정 탭의 필드 섹션에 있는 선택 옵션을 클릭합니다. 예를 들어 수행할 수 있는 작업으로는 다음과 같은 항목이 있습니다:
필드 유형 을 변경합니다.
팁
데이터베이스에서 :guilabel:`기존 필드`를 선택하고 포함된 데이터를 사용할 수도 있습니다. 사용 가능한 필드는 선택한 작업에 따라 다릅니다. 데이터베이스에 추가된 속성 필드도 사용할 수 있습니다.
일부 필드의 경우 비주얼 면에서는 유사하지만, 반드시 데이터를 특정 형식에 맞추어 입력해야 합니다.
필드의 라벨 을 편집하고 위치 를 조정합니다.
필드설명을 활성화하세요. 양식의 기본 설명을 클릭하여 수정하세요.
자리 표시자 또는 기본값 을 추가합니다.
:guilabel:`필수`필드인지 여부를 지정합니다.
필드 표시 여부 설정을 수정합니다.
:ref:`애니메이션 <website/elements/animations>`을 추가합니다.
원하는 대로 변경을 완료한 후 저장 을 클릭합니다.
Odoo가 아닌 웹사이트에 Odoo 연락처 양식 추가하기¶
iframe을 사용하여 다른 웹사이트에 Odoo 문의 양식을 표시할 수 있습니다. 이렇게 하려면 다음 단계를 따르세요.
Odoo 양식 준비: Odoo 웹사이트의 페이지에 문의 양식을 만들고 :ref:`헤더 디자인 <website/header_footer/header-design>`과 :ref:`푸터 디자인 <website/header_footer/footer-design>`을 제거하세요. 페이지에 문의 양식만 남아 있는지 확인하세요.
임베드 가능한 코드 생성: 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의 소셜 미디어 게시물 등과 같은 타사 서비스의 콘텐츠를 페이지에 통합할 수 있습니다.
페이지에 블록을 추가한 후 블록을 클릭한 다음사용자 정의탭으로 이동하여편집을 클릭하세요. 자리 표시자 코드를 맞춤 임베드 코드로 교체하세요.
경고
이해하지 못하는 코드를 복사/붙여넣기하지 마세요. 데이터가 위험에 처할 수 있습니다.
빌딩 블록의 이동, 전환 또는 삭제¶
블록의 상단 또는 하단 공간을 줄이거나 늘리려면 블록의 청록색 테두리를 당기세요.
블록 순서를 변경하려면 (위쪽 방향) 또는 (아래쪽 방향)을 클릭하여 (화살표)를 클릭하여 페이지에서 블록을 이동합니다. 여러 개의 열 이 있는 경우에는, (왼쪽 방향) 또는 (오른쪽 방향)을 클릭하여 열을 왼쪽이나 오른쪽으로 이동합니다.
블록을 삭제하려면 (휴지통)을 클릭하세요.
팁
(변경)을 클릭하면 블록 카테고리를 빠르게 변경할 수 있습니다.
빌딩 블록 편집하기¶
빌딩 블록의 콘텐츠를 편집하려면 클릭한 다음사용자 정의탭으로 이동하세요. 사용 가능한 사용자 정의 옵션은 선택한 블록 유형에 따라 다릅니다.
배경¶
빌딩 블록의 배경을 수정하려면 블록을 선택한 후 사용자 지정 탭으로 이동한 다음 색상 원이나 다른 배경 옵션을 클릭합니다. 색상을 변경하거나 이미지, 동영상 또는 도형을 추가할 수 있습니다. 도형을 선택하면 도형을 사용자 지정할 수 있는 새 필드가 표시됩니다.
팁
뒤로 보내기 또는 앞으로 가져오기 아이콘을 사용하여 요소(이미지, 텍스트 등)를 다른 요소 뒤 또는 앞에 배치하세요.
블록 크기를 조정하려면 블록 가장자리의 점을 클릭하고 드래그하여 필요에 맞게 조정하세요.
더 보기:
레이아웃: 그리드 및 열¶
대부분의 빌딩 블록에서그리드또는열 (cols)의 두 가지 레이아웃 스타일 중에서 선택할 수 있습니다. 기본 레이아웃 스타일을 변경하려면 블록을 클릭하고사용자 정의탭으로 이동한 다음레이아웃필드를그리드또는열으로 설정하세요.
그리드¶
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>`할 수 있습니다.