Working with Section widgets
- Section: Featured Products
- Section: Latest Products
- Section: Best Sellers
- Section: On Sale Products
- Section: Top Rated Products
- Section: Categories Boxes
- Section: Static Content
Custom widgets are highlighted in blue for your convenience. Custom widgets with the “Section:” prefix can be used at widgetized pages, and they output entire sections. Let’s have a look at what each one of them does.
Section: Featured Products
This widget will output a section with the featured products, in a carousel mode, with left and right navigation icons. You can configure the number of products to show and the title of this section.
Section: Latest Products
A simple widget to show your latest products. There are 4 products per row in the layout of this widget, and you can choose the title of this section and the number of products to show.
Section: Best Sellers
This one will show your best selling products. Again, there are 4 products per row in the layout of this widget, and you can choose the title of this section and the number of products to show.
Section: On Sale Products
This one will show products that are on sale. Again, there are 4 products per row in the layout of this widget, and you can choose the title of this section and the number of products to show.
Section: Top Rated Products
This one will show products that have received the highest ratings. Again, there are 4 products per row in the layout of this widget, and you can choose the title of this section and the number of products to show.
Section: Category Boxes
This one is a bit different. If you use this widget, it will output a section that shows category boxes. You can pick a background color for the background of this section.
Adding category boxes
At the widgets screen, locate the “Category Boxes Section” widget area. In here, you should only put “Category Box” widgets. A category box widget outputs an image for the category, the title of the category, and the link url. All these can be manually customized for greater control over the appearance of the section.
Section: Static Content
You can add as many static content sections as you want at the layout. Let’s try to add one now.
First you have to create the content at a new page. Go to Pages> Add New and create a new page. Create the content you wish and save it. Now let’s return to the widgets area. Drag the Section: Static Content widget to the Homepage Sections panel. Give the section a title and a subtitle and from the “Select page” dropdown select the page you just created. Hit save and you are good to go.
Customizing the appearance of the content section:
A special feature of Doctype is that you can create interesting visual rythms by customizing several properties of the static content page widget, such as:
- Title: Choose the title of this section.
- Select page: Here you select the page where you want the widget to pull content from.
- Background color: sets a background color for the content
- Background image URL: Sets an image as an optional background for the content
- Background opacity: Sets an opacity for the selected image (if any).
- Text color: Defines the text color. E.g. if you have a dark background color you may need to have white text.
- Link color: Sets the color of the text links.
This gives you the freedom to experiment and get creative by playing around with these options, plus allows you to create great content visual rythm to engage your users.
Note: these options only take effect for the section at the homepage, and not the actual page.