For this widget, users are able to config to display a list of product brands.
I. Required #
To show widget, you need to install plugin:
II. Setting #
1. General tab
Limit Item | This field allows users to control the brand number that will be displayed on App. |
Select template | There are 4 templates that users can use for their brands: – Item default – Item overlay – Item background wrap – Item image & text horizontal |
Image size | Users can choose 1 in 7 size types to show brand image |
Select template | There are 5 templates that users can use for their brands: – Item contained – Item horizontal – Item emerge – Item vertical – Item vertical center |
Enable image Enable name Align name Opacity color Opacity | Setting the size to brand template |
2. Style tab
Config Section | |
Padding/ Margin | Set Padding/Margin for whole section |
Background color | Set background color for the section |
Padding item | Set padding for each brand item |
Divider with Divider color | Setup width and color for the divider that separate brand items |
Width/Height | Only apply for Carousel layout |
Column/ Ratio | Set column number and ratio for Grid layout |
Indicator color Indicator active color | Set color for indicator, only apply for Slideshow layout |
Config item | |
Background color | Set background color for Brand item |
Text item | It applies for Brand name |
Padding Content | Set padding for brand item |
Border radius | Set radius for brand item |
Box shadow | Users are able to set up shadow for their brand item with: Shadow color, Offset X, Offset Y, Blur radius, Spread radius refer here |
3. Layout
There are 6 available layouts to users can use.
List | The brands will be displayed as a list |
Carousel | The brands will be displayed as a carousel Note: For this layout, users should config [Width] and [Height] on Style tab to show name/label clearly |
Masonry | Masonry layout is a layout method where one axis uses a typical strict grid layout, of most often columns, and the other a masonry layout. refer here |
Big first | The first brand will be displayed the biggest on the list. For other brands, users can set another template on General tab. Ex: use template Item Background Wrap refer here |
Slideshow | The brands will be displayed as a slideshow. |
Grid | The brands will be displayed as a grid. Note: users can config number of column at field [Column] on Style tab. AND use [Ratio] to set up the height of the block refer here |