Components

[Example] I have dedicated my career to learning and perfecting my skills to provide personalized skincare treatments to my clients. Helping my clients feel more confident in their skin excites me the most!

– Paula

Content Grid

Columns of content (or a grid of content) with many options:

  • 1/2/3/4/5 Columns
  • Narrow and single column sizing options
  • Ability to add icons
  • Background color or background image
  • Variable overlay settings
  • Vertical spacing or full screen height
Label Name Type Notes
Size tab
Columns content_grid_columns select
Size content_grid_size select
Narrow content_grid_narrow true_false
Content tab
Add Icons content_grid_add_icons true_false
Add Border content_grid_add_border true_false
Center Icon content_grid_center_icon true_false
Icon Size content_grid_icon_size select
Items content_grid_items repeater
Settings tab
Background Type content_grid_background_type select
Background Color content_grid_background_color clone (Clone of Utility : Background Color)
Background content_grid_background_image clone (Clone of Utility : Image)
Top Spacing content_grid_top_spacing select
Bottom Spacing content_grid_bottom_spacing select
Full Screen Height content_grid_full_screen_height true_false

Chose the number of columns you need and the width of the component. Then you can decide if you want to display icons, and add your content in the WYSIWYG editor, and then you can either add a background color or image and set the top and bottom padding.

Setting a size of 1 column allows you to choose a wide range of column sizes and a border will be automatically added for you. With 2 cols and higher you can choose between narrow which is 10/12 or leave it unchecked and have it be full width.

Content is where you can add a number of wysiwyg rows and choose the option to show icons. If Icons are selected there will be a bottom border added to underneath those rows of content.

In settings, you can choose to use a full-page background color or background image in the Background Type. If the background image is selected you will still have the option to set a background color for your content that sits on-top of the image.

Vertical Spacing determines how much padding is at the top and bottom of the page. Selecting full page height will remove the option to choose your padding and make the component the view hight of the page with 96px of top and bottom padding.