Soukéina Bojabza
cc406afcea
This commit adds the possibility to use a grid to move and resize columns inside some building blocks. More precisely, for the majority of the building blocks having columns, it is now possible to toggle between the current layout (= normal mode) and the grid layout (= grid mode). The grid mode can be triggered in two ways: - by using the "Grid" button in the options (when available), - by dragging a column using the move handle. The toggle places the different columns in the grid as close as possible as how they were placed in normal mode. The normal mode is toggled back by clicking on the "Cols" button (when available). Since the move handle is now used to trigger the grid mode, the columns in normal mode are now moved using the arrows. NB: to avoid any confusion with the word 'column' in the explanation below, the BS column will be called 'grid item' and the grid column will be 'column'. When in grid mode, the building block is a grid with 12 columns and a number of rows which depends on the height of the grid items. This mode offers the following functionalities: - Moving a grid item: When a grid item is dragged, it can be placed anywhere in the grid. If it is dragged towards the bottom, new rows are added in the grid to increase its height and to place the grid item lower. These added rows are removed when it is dragged towards the top. A grid item can also be placed over an other item (-> they can overlap) and their order can be changed using the two new buttons to place an item in front of/behind all the others. A grid item can be moved from a grid to another, and also from a grid to a building block in normal mode. - Resizing a grid item: A grid item can be resized vertically, horizontally and diagonally with the help of the grid. When resized towards the bottom, new rows are added in the grid and they are removed if it is towards the top (like with the drag and drop). - Adding elements: The "Add Elements" option allows the user to add as many images, text blocks or buttons as wanted in the grid. Inner contents can still be dragged and dropped inside a grid item. - Changing the padding of the grid items: The padding option allows to change the vertical/horizontal padding of all the grid items at the same time. - Mobile view: When in mobile view, the grid items are not in a grid anymore (the display is back to flex) but they keep their grid properties. They cannot be resized, nor dragged and dropped but they can be moved using the arrows. By moving this way, it does not impact the desktop view. task-2825241 closes odoo/odoo#93144 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Odoo Website Builder
Get an awesome and free website, easily customizable with the Odoo website builder.
Create enterprise grade website with our super easy builder. Use finely designed building blocks and edit everything inline.
Benefit from out-of-the-box business features; e-Commerce, events, blogs, jobs announces, customer references, call-to-actions, etc.
Edit Anything Inline
Create beautiful websites with no technical knowledge. Odoo's unique 'edit inline' approach makes website creation surprisingly easy. No more complex backend; just click anywhere to change any content.
"Want to change the price of a product? or put it in bold? Want to change a blog title?" Just click and change. What you see is what you get. Really.
Awesome. Astonishingly Beautiful.
Odoo's building blocks allow to design modern websites that are not possible with traditional WYSIWYG page editors.
Whether it's for products descriptions, blogs or static pages, you don't need to be a professional designer to create clean contents. Just drag and drop and customize predefined building blocks.
Enterprise-Ready, out-of-the-box
Activate ready-to-use enterprise features in just a click; e-commerce, call-to-actions, jobs announces, events, customer references, blogs, etc.
Traditional eCommerce and CMS have poorly designed backends as it's not their core focus. With the Odoo integration, you benefit from the best management software to follow-up on your orders, your jobs applicants, your leads, etc.
A Great Mobile Experience
Get a mobile friendly website thanks to our responsive design based on bootstrap. All your pages adapt automatically to the screen size. (mobile phones, tablets, desktop) You don't have to worry about mobile contents, it works by default.
SEO tools at your finger tips
The Promote tool suggests keywords according to Google most searched terms. Search Engine Optimization tools are ready to use, with no configuration required.
Google Analytics tracks your shopping cart events by default. Sitemap and structured content are created automatically for Google indexation.
Multi-Languages Made Easy
Get your website translated in multiple languages with no effort. Odoo proposes and propagates translations automatically across pages, following what you edit on the master page.
Designer-Friendly Templates
Templates are awesome and easy to design. You don't need to develop to create new pages, themes or building blocks. We use a clean HTML structure, a bootstrap CSS.
Customize every page on the fly with the integrated template editor. Distribute your work easily as an Odoo module.
Fluid Grid Layouting
Design perfect pages by drag and dropping building blocks. Move and scale them to fit the layout you are looking for.
Building blocks are based on a responsive, mobile friendly fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Professional Themes
Design a custom theme or reuse pre-defined themes to customize the look and feel of your website.
Test new color scheme easily; you can change your theme at any time in just a click.
Integrated With Odoo Apps
e-Commerce
Promote products, sell online, optimize visitors' shopping experience.
Blogs
Write news, attract new visitors, build customer loyalty.
Online Events
Schedule, organize, promote or sell events online; conferences, trainings, webinars, etc.