요소

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

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

1. Navigate to the relevant website page and click on Edit.

2. Click the section on the page where you want to add or modify an element.

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

4. 저장 을 클릭합니다.

참고

The default styles for headings, buttons, links, and paragraph text, for example, are defined in the Theme tab of the website editor.

제목

Titles define headings and organize website content into different levels for clarity and structure. To insert a title, type /title, choose the heading style (Heading 1, Heading 2, or Heading 3), and type the text.

팁

Alternatively, type the text, select it, and choose the appropriate style from the Inline Text section in the Customize tab of the website editor. Additional formatting options, such as fonts and colors, are also available in this section.

버튼

Buttons are interactive elements that allow to link to another page or to a page anchor. To insert a button:

1. /button 을 클릭합니다.

2. Enter the button’s label in the Link Label field.

3. Add the URL or Email. Type / to search for a page and # to link to an anchor.

4. Set the Style, Size, and Layout to define the button’s appearance.

5. If needed, toggle the switch to open the linked page or anchor in a new tab.

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

팁

To modify an existing button, click the button and edit the options in the Inline text section of the website editor.

이미지

이미지를 삽입합니다:

1. /image 를 클릭합니다.

2. Search the Unsplash database or click Upload an image to choose a file from your local images.

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

4. To customize the image, click on the image and edit the options in the Image section of the website editor. For example:

   • 이미지를 교체 합니다.

   • Define an alt tag in the Description field.

   • Enter a title tag in the Tooltip field. This text will appear when visitors hover their mouse over the image.

   • Add a Shape; some shapes also allow for color customization.

   • Adjust the image’s Width, e.g., to improve performance. A smaller size may be suggested if it is sufficient for display.

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

   • Adjust the Padding to add space (in pixels) around the image.

   • 기타

동영상

To add a video, type /video, insert the URL, and turn on the desired options:

• Autoplay: to automatically play the video when the page is accessed. The video is automatically muted by default.

• Loop: to play the video on a loop.

• 작업자 컨트롤 숨기기

• 전체 화면 숨기기 버튼

아이콘

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

링크

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

팁

By default, the Style field is set to Link. Select a different style to transform the link into a button.

목록

Lists help organize content clearly, making information easier to read and improving web pages’ structures. Type /list and choose from three different types of lists: Bulleted lists, Numbered lists, or Checklists.

텍스트 강조

Highlights can be added to titles and text using in the Inline Text section of the website editor. To add a highlight:

1. Select the text or title you want to highlight.

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

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

4. 색상 을 변경합니다.

5. 두께 를 선택하세요.

애니메이션

Animations are used to add movement to building blocks and website elements such as images and text. Three types of animation are available: On Scroll, On Appearance, and On Hover (for images only).

To add an animation to a website element:

1. 요소를 클릭합니다.

2. In the website editor, go to the relevant section for the element (e.g., Button, Column, Inline Text, etc.).

3. In the Animation field, select the desired animation type.

4. Customize the animation settings as needed. Available options vary based on the selected animation type.

스크롤 시 애니메이션

For animations on scroll, it is possible to:

• Choose In to add the animation when the element enters the screen and Out to add it when it leaves the screen.

• 효과 를 선택하세요.

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

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

• Define the Scroll Zone, where the first value represents the percentage of the screen shown when the effect starts, and the second value represents its percentage at the end.

애니메이션 효과

For animations on appearance, it is possible to:

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

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

• Pick a Trigger option to define when the animation occurs: either the First Time only or Every Time.

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

• If you want the animation to be triggered after a number of seconds, define this number in the Start After field.

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

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

Animations On hover can be added to images. You can choose the Effect of the animation, as well as the Color and the Stroke Width.

더 보기

Odoo HTML 에디터