Ogólny motyw¶
Odoo provides a range of theme customization options to define the website’s colors, fonts, and shadow styles, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
Podczas pierwszej konfiguracji strony internetowej pojawia się monit o wybór motywu. Najedź kursorem myszy na motywy, aby zobaczyć rozszerzony podgląd każdego z nich. Kliknij motyw, aby go wybrać, lub kliknij przycisk Wyświetl więcej motywów, aby wyświetlić pełną listę dostępnych motywów.
Informacja
Jeśli opuszczasz stronę bez wybrania motywu, strona internetowa zostanie utworzona z domyślnym motywem.
Aby dostosować motyw, otwórz edytor strony internetowej, przejdź do zakładki Motyw i przejdź do sekcji Strona internetowa. Możesz:
Kliknąć Zmień motyw, aby otworzyć selektor motywu. Najedź kursorem myszy na motywy, aby zobaczyć rozszerzony podgląd każdego z nich. Kliknij Użyj tego motywu, aby zastosować go do strony internetowej.
Dodać język dla strony internetowej.
Wybrać Układ strony, aby zmienić ogólny wygląd i rozstawienie bloków budujących oraz elementów strony internetowej.
Customize the layout’s background:
Kliknąć Zapisz, aby zastosować zmiany na stronie internetowej.
Kolory¶
Odoo’s website editor features two main types of colors: theme colors and status colors. Click the color palette bar to open the Website / Colors menu in the Theme tab.
Kolory motywów¶
Kolory motywu odnoszą się do zestawu kolorów wyświetlanych na wszystkich stronach witryny. Składają się z pięciu kolorów: trzech kolorów Głównych, używanych głównie do przycisków i linków, oraz dwóch kolorów Jasnych i ciemnych, używanych głównie do tekstu i nagłówków.
To customize the theme colors:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Kliknij ikonę palety farb i wybierz paletę kolorów. W rezultacie wszystkie dostosowania kolorów zostaną zresetowane.
Odoo automatycznie tworzy Zestawy kolorów dla wybranych kolorów lub palety. Te predefiniowane kombinacje kolorów są stosowane do różnych elementów strony internetowej w celu stworzenia uporządkowanego i atrakcyjnego wizualnie projektu. Podczas wyboru palety kolorów jej zestawy określają, w jaki sposób kolory są rozdzielane między różne elementy. Aby je zmodyfikować, kliknij Zestawy kolorów, a następnie wybierz zestaw, aby otworzyć menu rozwijane dostosowywania. Każdy zestaw kolorów zawiera kolory dla Tła bloku budującego, Tekstu, Nagłówków, Linków, Przycisków podstawowych i Przycisków pomocniczych.
Wskazówka
Aby zastosować zestaw kolorów do bloku budującego, zaznacz blok budujący, przejdź do zakładki Styl, kliknij kropkę koloru znajdującą się obok Tło i wybierz Motyw.
Informacja
Zmiana zestawu kolorów automatycznie aktualizuje kolory zarówno domyślnego zestawu, jak i bloków konstrukcyjnych, które go używają.
Kolory statusu¶
Status colors indicate the status of certain actions (e.g., Success, Warning, etc.). They are used in pop-up messages that appear to provide feedback to users and website visitors. To customize the website’s Status Colors, go to the Advanced section and click the dots to change their color. You can also configure Grays.
Example
Informacje dotyczące pomyślnego działania na stronie internetowej są wyświetlane w kolorze zielonym.
Czcionki¶
Odoo umożliwia dostosowanie rodziny czcionek i rozmiaru czcionki elementów strony internetowej, w tym akapitów i nagłówków, przycisków oraz pól wprowadzania.
Rozmiar czcionki: W sekcjach Akapit, Nagłówki, Przycisk i Pola wprowadzania użyj pola Rozmiar czcionki, aby ustawić domyślny rozmiar. Kliknij ikonę (Przełącz więcej opcji), aby rozwinąć sekcję i zdefiniować niestandardowe rozmiary (np. w zależności od poziomu nagłówka, rozmiaru przycisku itp.).
Rodzina czcionek: W sekcjach Akapit, Nagłówki i Przycisk wybierz czcionkę z menu rozwijanego.
Informacja
Gdy wybrano Czcionki systemowe, Odoo używa natywnych czcionek już zainstalowanych w systemie operacyjnym odwiedzającego. Na przykład Android używa Roboto jako swojej domyślnej czcionki systemowej.
Niestandardowe czcionki¶
Aby dodać niestandardową czcionkę niedostępną domyślnie w Odoo, kliknij menu rozwijane Rodzina czcionek i wybierz Dodaj niestandardową czcionkę na dole. W wyskakującym oknie Dodaj czcionkę Google lub prześlij niestandardową czcionkę:
Aby dodać czcionkę Google, otwórz menu rozwijane Wybierz czcionkę Google i wybierz żądaną czcionkę. Wyłącz przełącznik Udostępnij czcionkę z serwerów Google, jeśli Twoja strona internetowa jest obsługiwana z lokalizacji, w której przepisy wymagają zgodności z prawem, takim jak, między innymi, RODO Unii Europejskiej. Zapewni to, że czcionka Google będzie przechowywana na serwerze strony internetowej, a nie na serwerach Google.
Aby przesłać Niestandardową czcionkę z komputera, kliknij Wybierz plik.
Po zakończeniu kliknij Zapisz i przeładuj.
Wskazówka
Podgląd wybranej czcionki jest wyświetlany po prawej stronie okna.
Style¶
Wygląd elementów strony internetowej może być dodatkowo dostosowany. Na przykład możesz dostosować akapity i nagłówki, przyciski, linki oraz pola wprowadzania.
Akapity i nagłówki¶
Sekcje Akapit i Nagłówki oferują dodatkowe opcje stylizacji tych elementów tekstowych. Możesz:
Zmodyfikować ustawienia czcionki.
Dostosować Wysokość wiersza, aby zdefiniować odstępy między wierszami tekstu.
Dostosować Marginesy, aby zdefiniować odstępy wokół akapitów i nagłówków.
Przyciski¶
Aby dostosować styl przycisków podstawowych i drugorzędnych strony internetowej, przejdź do sekcji Przycisk i edytuj odpowiednie opcje:
Otwórz menu rozwijane obok pól Styl podstawowy lub Styl drugorzędny, aby zmienić styl każdego typu przycisku, takiego jak Wypełnienie, Kontur lub Płaski. Po wybraniu Kontur poniżej pojawi się opcja Szerokość obramowania, umożliwiająca dostosowanie szerokości konturu przycisku.
Zmodyfikować ustawienia czcionki.
Dostosuj Padding, aby zmienić odstępy wokół etykiet przycisków.
Użyj opcji Round Corners, aby dostosować promień obramowania przycisków.
Dodaj animację wyświetlaną po kliknięciu przycisku w menu rozwijanym Efekt kliknięcia.
Wskazówka
Aby zdefiniować niestandardowe rozmiary Small i Large dla opcji Padding, Font Size i Round Corners przycisków, kliknij ikonę (Toggle more options), a następnie użyj powiązanych pól.
Linki¶
W sekcji Link otwórz menu rozwijane obok Link Style, aby wybrać wygląd linków na stronie internetowej. Możesz wybrać między:
No Underline;
Underline On Hover; lub
Always Underline.
Pola wejściowe¶
Aby dostosować styl pól wejściowych strony internetowej, przejdź do sekcji Input Fields i edytuj odpowiednie opcje:
Dostosuj Padding, aby zmienić odstępy wokół pól.
Zmodyfikować ustawienia czcionki.
Dostosuj Border Width wokół pól.
Zdefiniuj Border Radius, aby zaokrąglić rogi pól.
Wybierz Background kolor, aby wypełnić pola.
Shadows¶
Configure the default shadow styles used across sections, cards, and other elements. To customize them, go to the Shadow section, and define the Color, Blur, and Spread values for each shadow size: Normal, Small, and Large. These settings serve as the default shadow styles. Whenever you apply a shadow option to a building block or another website element, the corresponding configured shadow option is automatically applied.
Ustawienia zaawansowane¶
Additional settings can be configured in the Advanced section, such as showing or hiding the header and using Code Injection for website verification through an HTML tag.
Możesz również skonfigurować Mapy Google, aby wyświetlać mapy i włączyć funkcje geolokalizacji na stronie internetowej, np. na stronie Contact Us oraz w określonych snippetach. Aby skonfigurować tę opcję:
Przejdź do swojego konta Google.
Włącz Maps Static API, Maps JavaScript API i Places API.
Ważne
Nie włączaj Places API (New), ponieważ nie jest jeszcze obsługiwane przez Odoo.
Korzystanie z interfejsów API Google może wymagać płatności na rzecz Google.
Utwórz klucz API i skopiuj go.
W edytorze strony internetowej Odoo przejdź do zakładki Motyw, a następnie w sekcji Zaawansowane kliknij Niestandardowy klucz obok Mapa Google.
Wklej wygenerowany klucz API w pole Klucz API.
Kliknij Zapisz.