General theme

Odoo offers various options to shape your website’s theme, including its colors, fonts, and layout.

When setting up your website for the first time, you are prompted to select a theme. Hover your mouse over the themes to see an extended preview of each one. Click on a theme to select it.

참고

  • If you leave without selecting a theme, your website is created using the default one.

  • You can switch themes later if needed.

In the website builder, the Theme tab offers various options to customize your website’s general theme. To access it, click Edit and go to the Theme tab.

Once you have made the desired changes, click on Save to confirm and apply them to your website.

테마

In the Website section, click on Switch Theme to open the theme selector. Hover your mouse over the themes to see an extended preview of each one. Click on a theme to apply it to your website.

색상

Odoo’s website editor features two main types of colors: theme colors and status colors.

테마 색상

Theme colors refer to the set of colors displayed across all pages of your website. These are made of five colors: three main colors and two light and dark colors.

To edit your website’s colors, go to the Colors section in the website editor, then:

  • Click on the color dot you want to change, then select a Solid color or click on Custom to pick a specific color tone manually (or add its #HEX or RGBA code).

  • Click on the paint palette icon and choose a color palette. As a result, all color customizations are reset; click a color dot to change a specific color.

선택한 팔레트에 대해 Odoo에서 색상 사전 설정 이 자동으로 생성됩니다. 이 팔레트는 미리 지정된 색상 조합으로 다양한 웹사이트 요소에 적용되어 체계적이면서도 시각적으로 매력적인 디자인을 제공합니다. 색상 팔레트를 선택하면 사전 설정된 내용에 따라 버튼, 배경, 텍스트 등 여러 가지 빌딩 블록의 요소에 색상이 적용되는 방식을 지정합니다. 사전 설정 내용을 수정하려면 색상 사전 설정 을 클릭하고 원하는 사전 설정 항목을 클릭하여 추가적으로 사용자 지정을 할 수 있습니다. 각 색상 사전 설정에는 빌딩 블록의 배경, 텍스트, 제목, 링크, 기본 버튼 및 보조 버튼의 색상 등이 포함되어 있습니다.

Color presets

To apply a color preset to a building block on your site, select the building block, go to the Customize tab, click the color dot located next to Background, and choose a Theme.

참고

색상 사전 설정을 변경하면 사전 설정 기본값 및 해당 사전 설정이 사용되는 빌딩 블록 색상이 자동으로 업데이트됩니다.

Status colors

상태 색상을 이용하여 작업 상태(예: 성공, 경고 등)를 나타낼 수 있습니다. 팝업 메시지에도 사용되어 사용자 및 웹사이트 방문자에게 피드백을 제공할 수도 있습니다. 웹사이트 상태 색상 을 사용자 지정하려면 고급 섹션으로 스크롤한 후 점을 클릭하면 색상이 변경됩니다.

Example

Status color selection Success pop-up

Page layout

웹사이트 섹션의 페이지 레이아웃 옵션을 활용하여 페이지에서 구성 요소와 웹사이트 요소의 전반적인 표시 및 간격을 변경할 수 있습니다. 드롭다운 메뉴를 클릭하여 원하는 레이아웃을 선택하세요. 페이지 레이아웃 에서 이미지 를 선택하거나, 패턴 에 있는 이미지를 적용하거나, 배경을 비워두는 방식으로 배경 을 맞춤 설정할 수 있습니다.

폰트

Odoo allows you to customize the font family and size for specific elements on your website, including paragraphs, headings, buttons, and input fields.

  • Font Family: In the Paragraph, Headings, and Button sections, select a font from the dropdown menu.

  • Font Size: In the Paragraph, Headings, Button, and Input Fields sections, use the Font Size field to set a default size. Click the (arrow) icon to expand the section and define custom sizes (e.g., based on the heading level, button size, etc.).

Additionally, each element-specific section offers extra styling options, such as Line Height and Margins, for further customization.

Custom fonts

It is possible to use fonts on your website that are not offered by default in Odoo. To add a custom font, click the dropdown menu related to the Font Family field and select Add a Custom Font at the bottom of the dropdown menu. In the pop-up window:

  • Google 글꼴을 추가하려면 Google 글꼴 선택 을 클릭한 후 목록에서 원하는 글꼴을 클릭합니다. 웹사이트를 운영하고 있는 지역이 유럽 연합의 GDPR을 비롯한 법률 준수가 요구되는 지역인 경우 Google 서버에서 글꼴 제공 옵션을 선택 해제합니다. 이렇게 하면 Google 글꼴이 Google 서버가 아닌 웹사이트 서버에 저장됩니다.

  • To upload a custom font from your computer, click on Choose File.

Once done, click on Save and Reload.

Button styles

To customize the style of your website’s primary and secondary buttons, navigate to the Button section in the website editor and edit the relevant options:

  • Click the arrow next to the Primary Style or Secondary Style fields and select one of the available styles for each type of button: Fill, Outline, or Flat. When selecting Outline, the Border Width option appears below, allowing you to adjust the width of the button’s outline.

  • Modify the fonts.

  • Adjust the Padding to change the size of the spacing (in pixels) around the buttons’ labels.

  • Customize the buttons’ border radius using the Round Corners option.

  • Add an animation when a button is clicked in the On Click Effect dropdown menu.

Primary and secondary buttons

팁

You can define custom Small and Large sizes for the buttons’ Padding, Font Size, and Round Corners: Click on the (arrow) icon and use the related fields.

Button padding, font size and round corners settings