In the last blog post about the Website module , we already learned how to easily build a website in Odoo and what customization options the website builder brings with it. This time, the focus will be on how the website can be attractively designed and professionally prepared with just a few clicks. To demonstrate these features, the design of this blog will be a bit different from our usual design.
For editing, we will mainly move to the "Style" tab of the editing bar on the right. We already discussed how this is accessed in the last blog. For each snippet, there are several customization options here, which we will now look at in detail.
The first customization option is "Background", where we can choose to add a photo, video or shape as a background to a snippet. Depending on the shape or image chosen, this can be supportive, but also distracting. Even greater caution is required with videos, here a moving still image is recommended at most. Explanatory videos are better used with the snippet "Image" or "Image - Text", where they can be inserted similarly to the image.
Clicking the "Background" button first opens a color selection from the color scheme of the general website theme, as shown above. The "Solid" tab offers us the possibility to freely select colors, and freely adjust their intensity. Moreover, this tab allows us to enter certain hex and RGBA values beforehand. The most interesting design options, especially for a more fancy website, are offered by the third tab, "Gradient". Here we first find some already created gradients, but we can create and customize our own gradient using the "Custom" button. Thereby we have many options, and can e.g. set a highlight in the text with the option "radial", or create an effect with a gradient over the entire snippet, which jumps into the eye of our reader.
The next option for a background is an image. When selecting, Odoo suggests the last uploaded images, with the button "Upload image" or "Add URL" you can add your own images from the hard drive, or insert an image using URL. In addition, Odoo offers the possibility of using stock photos via the "Search for an image" dialog box.
Once the photo has been inserted, image editing options automatically appear in the editing bar on the right. Here you can adjust the position of the image, add color filters (especially for background images, a gray filter is recommended). This filter is not available as such, but it can be easily adjusted under "Filter" -> "Custom". First the color is changed, then the background image can be easily transformed with saturation, contrast and blur, so that a loosening element is created. Furthermore, there are options for adjusting the brightness as well as a sepia filter. Furthermore, the width of the image can be adjusted here, an Odoo website-typical parallax can be inserted and the height of the snippet can be set.
If you want to insert an image without text without a frame, the "Parallax" snippet is recommended.
The video as background works very similarly, here, analogous to the image, either pre-selected videos can be defined by Odoo, or links from YouTube, Vimeo, Dailymotion and Youku can be deposited. Unfortunately, it is not possible to upload your own videos. A workaround for this is, for example, to upload a video to YouTube, and set it to "not listed". Also, the video editor is less distinctive, and has fewer features than the website editor. However, it is possible to set a color filter to increase the readability of the text.
The most reader-friendly background option, however, is clearly the third option: the "shapes" or forms, which are brought by Odoo. Since Odoo 15, these are also available animated, to make the page atmospheric and less distracting. Again, the colors can be adjusted, and also rotate and mirror the shape, and combine with the snippets that follow. Also a combination with the above background options is possible - so you can put a shape on a background image or video, for example.
Another option for setting the snippets is the height: this determines the size of the snippet, and thus the distance between the snippets above and below it, this can be set either automatically, to 50% or to 100%. If you set it to 100%, you can add a button that will take you to the next snippet. This button can be adjusted in color, and the spacing can be changed. In addition, the shapes and background images and videos just discussed are shown to better advantage.
A useful tool for individualized websites is the "Visibility" function: here, snippets can be hidden, and only displayed under certain conditions, for example, for visitors of a language, for visitors of a certain campaign, from a certain source (e.g. facebook), or only for logged-in users. This is especially helpful when a visitor comes from a promotional link of a platform, that certain snippets are only visible for these visitors.
Photos can also be edited directly in the website builder. Similar to the background images, photos can also be edited, so shapes and filters can also be adjusted and changed. It is also possible to adjust the width, quality and size of the image. It is also possible to transform and crop the image here - directly on the website without third-party programs!
A special possibility to set highlights on the website are animations. The Odoo website builder offers more than 20 different possibilities to animate single parts of a text, rows or whole snippets. These animations immediately attract the reader's attention, so fancy animations should be used with caution so that the effect does not "overwhelm" the reader.
Text can be animated using the "Play button" to the right of the "Toggle ordered List" button, and a separate drop-down menu appears at the bottom of the edit bar for snippets such as photos. Once an animation is added, the editing options also appear here. For example, you can set a delay for the animation, and set the animation duration.
With all these tools, the Odoo website builder offers a very good way to make your own Odoo website look appealing, and stand out from the competition. The many editing options can seem a bit overwhelming at first, but on closer inspection they are very powerful, so that the website can be built entirely without external editing tools. Would you like to benefit from the possibilities of the Odoo Website Builder yourself, or do you have further questions about it? No problem, contact us now and we will be happy to help you!
Sources: www.odoo.com