요소

각종 요소들을 활용하여 콘텐츠를 효과적으로 구성하고 표현할 수 있습니다. 텍스트를 기반으로 하는 제목, 목록, 텍스트 강조 와 같은 구성 요소부터 버튼, 링크 와 같은 대화형 구성 요소까지 다양하게 활용할 수 있습니다. 이미지 를 비롯하여 아이콘, 동영상, 애니메이션 과 같은 시각적 요소를 추가하여 콘텐츠 표현과 구성을 더욱 돋보이게 하는 것도 가능합니다.

웹사이트 요소를 추가하거나 수정하려면:

1. 관련된 웹사이트 페이지로 이동하여 편집 을 클릭합니다.

2. 페이지에서 요소를 추가하거나 수정하려는 섹션을 클릭합니다.

3. 필요한 내용을 변경하세요.

4. 저장 을 클릭합니다.

참고

예를 들어 제목, 버튼, 링크 및 단락 텍스트의 기본 스타일은 웹사이트 편집기의 :doc:`테마 탭 <themes>`에서 정의됩니다.

제목

제목은 제목을 정의하고 웹사이트 콘텐츠를 명확성과 구조를 위해 다양한 수준으로 구성합니다. 제목을 삽입하려면 /title`을 입력하고 제목 스타일(:guilabel:`Heading 1, Heading 2 또는 Heading 3)을 선택한 다음 텍스트를 입력합니다.

팁

또는 텍스트를 입력하고 선택한 다음 웹사이트 편집기의 Customize 탭에 있는 Inline Text 섹션에서 적절한 스타일을 선택합니다. 글꼴 및 색상과 같은 추가 서식 옵션도 이 섹션에서 사용할 수 있습니다.

버튼

버튼은 다른 페이지 또는 페이지 앵커로 연결할 수 있는 대화형 요소입니다. 버튼을 삽입하려면:

1. /button 을 클릭합니다.

2. 링크 라벨 필드에 버튼 라벨을 입력합니다.

3. :guilabel:`URL or Email`을 추가합니다. 페이지를 검색하려면 `/`를 입력하고 앵커에 링크하려면 `#`를 입력합니다.

4. 스타일, 크기, 레이아웃 을 설정하여 버튼의 모양을 지정합니다.

5. 필요한 경우 스위치를 토글하여 연결된 페이지 또는 앵커를 새 탭에서 엽니다.

6. :guilabel:`적용`을 클릭하면 변경 사항이 저장됩니다.

팁

기존 버튼을 수정하려면 버튼을 클릭하고 웹사이트 편집기의 Inline text 섹션에서 옵션을 편집합니다.

이미지

이미지를 삽입합니다:

1. /image 를 클릭합니다.

2. :doc:`Unsplash 데이터베이스를 검색 </applications/general/integrations/unsplash>`하거나 :guilabel:`Upload an image`를 클릭하여 로컬 이미지에서 파일을 선택합니다.

3. :guilabel:`추가`를 클릭합니다.

4. 이미지를 사용자 정의하려면 이미지를 클릭하고 웹사이트 편집기의 Image 섹션에서 옵션을 편집합니다. 예를 들어:

   • 이미지를 교체 합니다.

   • 설명 필드에 있는 alt 태그 에 대해 정의합니다.

   • Tooltip 필드에 제목 태그를 입력합니다. 이 텍스트는 방문자가 이미지 위에 마우스를 가져갈 때 나타납니다.

   • 모양 을 추가합니다. 일부 모양은 색상도 맞춤형으로 지정할 수 있습니다.

   • 성능을 개선하기 위해 이미지의 :guilabel:`Width`를 조정합니다. 표시에 충분한 경우 더 작은 크기가 제안될 수 있습니다.

   • 변형 도구를 사용하여 이미지 크기를 조정하세요.

   • 여백 을 조정하여 이미지 주위에 공간(픽셀 단위)을 추가합니다.

   • 기타

동영상

동영상을 추가하려면 `/video`를 입력하고 URL을 삽입한 다음 원하는 옵션을 켭니다:

• Autoplay: 페이지에 접속할 때 동영상을 자동으로 재생합니다. 동영상은 기본적으로 자동으로 음소거됩니다.

• 반복 재생: 동영상을 반복 재생합니다.

• 작업자 컨트롤 숨기기

• 전체 화면 숨기기 버튼

• 시작 시간: 비디오가 시작되어야 하는 타임스탬프를 MM:SS 형식으로 정의합니다.

아이콘

아이콘을 삽입하려면 /image 를 입력한 후 아이콘 탭으로 이동하여 아이콘을 선택하고 추가 를 클릭합니다. 아이콘을 수정하려면 아이콘을 클릭한 후 웹사이트 편집기의 아이콘 섹션에 있는 색상, 크기, 애니메이션, 모양 등의 옵션을 사용자 지정할 수 있습니다.

링크

링크를 활용하여 다양한 페이지와 리소스를 연결하여 방문자를 안내하고 탐색 기능을 개선합니다. 링크를 삽입하려면 /link 를 입력한 후 팝업창이 열리면 링크의 라벨 을 입력하고 URL 또는 이메일 을 추가합니다. 페이지를 검색하려면 / 를 입력하고, 앵커 로 링크하려면 # 을 입력합니다.

팁

기본적으로 스타일 필드는 :guilabel:`링크`로 설정되어 있습니다. 다른 스타일을 선택하여 링크를 :ref:`버튼 <website/elements/buttons>`으로 변환하세요.

목록

목록은 콘텐츠를 명확하게 구성하여 정보를 읽기 쉽게 만들고 웹 페이지의 구조를 개선합니다. /list`를 입력하고 세 가지 유형의 목록 중에서 선택하세요: :guilabel:`글머리 기호 목록, 번호 매기기 목록 또는 체크리스트.

텍스트 강조

웹사이트 편집기의 인라인 텍스트 섹션을 사용하여 제목과 텍스트에 강조 표시를 추가할 수 있습니다. 강조 표시를 추가하려면:

1. 강조 표시할 텍스트나 제목을 선택합니다.

2. 웹사이트 편집기에서 강조 를 클릭하세요.

3. 강조 스타일을 선택합니다.

4. 색상 을 변경합니다.

5. 두께 를 선택하세요.

애니메이션

애니메이션은 이미지 및 텍스트와 같은 빌딩 블록 및 웹사이트 요소에 움직임을 추가하는 데 사용됩니다. 세 가지 유형의 애니메이션을 사용할 수 있습니다: 스크롤 시, 표시 시 및 마우스 오버 시 (이미지만 해당).

웹사이트 요소에 애니메이션 추가 방법:

1. 요소를 클릭합니다.

2. 웹사이트 편집기에서 요소에 해당하는 섹션으로 이동합니다 (예: 버튼, 열, 인라인 텍스트 등).

3. 애니메이션 필드에서 애니메이션 유형을 선택합니다.

4. 필요에 따라 애니메이션 설정을 사용자 정의하세요. 사용 가능한 옵션은 선택한 애니메이션 유형에 따라 다릅니다.

스크롤 시 애니메이션

스크롤 애니메이션의 경우:

• 요소가 화면에 들어올 때 애니메이션을 추가하려면 :guilabel:`안으로`를 선택하고, 화면을 벗어날 때 추가하려면 :guilabel:`밖으로`를 선택하세요.

• 효과 를 선택하세요.

• 효과가 실행될 방향 을 선택하세요.

• 효과가 실행될 강도 를 조정하세요.

• :guilabel:`스크롤 영역`을 정의하세요. 첫 번째 값은 효과가 시작될 때 표시되는 화면의 백분율을 나타내고, 두 번째 값은 종료 시점의 백분율을 나타냅니다.

애니메이션 효과

나타내기 애니메이션의 경우:

• 다양한 효과 중에서 선택하세요.

• 효과가 실행될 방향 을 선택하세요.

• 트리거 옵션을 선택하여 애니메이션이 발생하는 시점을 정의하세요: 처음에만 또는 매번.

• 효과가 실행될 강도 를 조정하세요.

• 애니메이션이 일정 시간(초) 후에 트리거되도록 하려면 시작 대기 시간 필드에 해당 시간을 정의하세요.

• 애니메이션의 지속 시간 을 선택하세요.

마우스 오버 시 애니메이션 실행 (이미지에만 해당)

마우스 오버 시 애니메이션은 이미지 <website/elements/images>`에 추가할 수 있습니다. 애니메이션의 :guilabel:`효과`와 :guilabel:`색상 및 :guilabel:`선 너비`를 선택할 수 있습니다.

더 보기:

Odoo HTML 에디터