요소

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

To add or modify a website element:

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. Make the necessary changes.

4. Click on Save.

참고

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. Click Apply to save changes.

팁

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

이미지

To insert an image:

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:

   • Replace the image.

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

   • Resize the image using the Transform tool.

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

• Hide player controls

• Hide fullscreen button

아이콘

아이콘을 삽입하려면 /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. In the website editor, click on Highlight.

3. Select the highlight style.

4. Modify its Color.

5. Choose its Thickness.

애니메이션

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. Click on the element.

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.

Animations on scroll

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.

• Select an Effect.

• Choose the Direction of the effect.

• Adapt the Intensity of the effect.

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

Animations on appearance

For animations on appearance, it is possible to:

• Choose among different effects.

• Choose the Direction of the effect.

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

• Adapt the Intensity of the effect.

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

• Choose a Duration for the animation.

Animations on hover (for images only)

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 editor