INTRODUCTIONArticle examples
List of several article layouts using Article Teaser Template element:
Example 01
Image on top
General:
- 60px Gap between articles,
- Small title size,
- H2 tag.
Image:
- Image position top,
- Horizontal 3×2 image format,
- To Grayscale hover effect.
Display:
- Categories supertitle position,
- Date supertitle position.
- Display arrow.
Example 02
Image on the side
General:
- Medium title size,
- H2 tag.
Image:
- Image position side,
- Vertical 4×3 image format,
- Medium image base size,
- From Grayscale hover effect.
Display:
- Categories bottom left position,
- Date bottom left position,
- Author bottom left position.
Example
Button with arrow
General:
- Icon position left,
- Medium size button,
- Alignment left.
Design:
- Full width,
- Clean style,
- Show arrow.
Separator
How to display separator as arrow or dotted separator
Example 01
Arrow separator
General:
- Arrow border style,
- Normal separator width,
- Accent font and dark background color scheme.
Example 02
Dotted separator
General:
- Dooted border style,
- Default separator width,
- Inherit color scheme.
Single product
List of several product layouts using Single product element:
Example 01
Three columns layout
General:
- Add custom product image,
- Show share icons.
Design:
- Accent font and light background color scheme,
- Three columns single product layout,
- Normal title size,
- Large price font size,
- Bottom dash,
- Borderless style,
- Filled button style.
Example 02
Hide image
Background image will display behind product if added as Inner background image to the Column.
Design:
- Accent font and light background color scheme,
- Simple single product layout,
- Hide product image,
- Hide product title,
- Extra small title size,
- Extra Large price font size,
- Top dash,
- Borderless style,
- Filled button style.
Example 03
Image on side
Design:
- Dark font and light background color scheme,
- Image on side single product layout,
- Extra large title size,
- Extra Large price font size,
- No dash,
- Borderless style,
- Filled button style.
Example 04
Image on top
General:
- Add custom product image.
Design:
- Inherit color scheme,
- Simple single product layout,
- Extra small title size,
- Extra small price font size,
- No dash,
- Light border style,
- Filled button style.
Cost Calculator
How to set Cost Calculator with Contact form 7
Example
Steps
- We highly recommend importing our demo content that comes with pre-made contact forms that contain all necessary classes, as well as Cost Calculator with all the settings.
- Create Cost Calculator per your needs (we used Cost Calculator Group element, and conditionals). More info on how Cost Calculator works can be found in online documentation.
- To Contact form tab of Cost Calculator settings, add Contact form 7 ID, and check Display Next Button and Contact Form field.
- In Design tab add OrderNatalChart class to Extra Class Name field, in order to make form visible by default.