If your site was built after April 2023 you are using the newer version of the JSMT Base Theme.
Flexible Content
The Flexible Content field provides a simple, structured, block-based editor.
Using layouts and sub fields to design the available blocks, this field type acts as a blank canvas to which you can define, create and manage content with total control.
Flexible Content Layouts & Sub Fields
Default Content Layout Fields
The following sub fields are included in all of the flexible content layouts
- Background Color:
- This color field controls the background color of the entire section.
- Default Color: white.
- Text Color:
- This color field controls the color of the text for the entire section
- Default Color: dark gray.
- Title:
- This text field is for the title of the section
- Content:
- This editor field is for the content of the section
- This is a “What You See Is What You Get” (WYSIWYG) editor, ie. if something is bold in the editor, it will be bold on the front-end.
Text Section
- Styling:
- This selection field controls the front-end styling of the entire text section.
- Default: Will align the text to the left and will be full width.
- Centered: Will align the text center and will be half the screen width.
- Button:
- This group field has two sub fields to it: Button Text & Button Link
- Button Text: Controls what the button says (ie. Learn More).
- Button Link: Controls where the button links to when a user clicks on it.
CTA (Call To Action) Section
This content layout section has similar sub fields as the text section has, but the front-end layout is different. The CTA section will have the title and content aligned to the left and the button aligned to the right.
Image Text Section
- Styling:
- This selection field controls the front-end styling of the image text section.
- Default: The default styling will make the entire section fit into the margins of the rest of the website.
- Full Width: The full width styling will make the entire section full width.
- Image Alignment:
- This selection field controls the alignment of the image on the front end.
- Left: The image will be aligned to the left, while the title and the content will be aligned to the right.
- Right: The image will be aligned to the right, while the title and the content will be aligned to the left.
- Image
- This image field displays the section image on the front end, you can select an image already in the Media Library or upload a new image.
- By default, the image will have an aspect ratio of 16:9, but can be changed upon request.
- Button:
- This group field has two sub fields to it: Button Text & Button Link
- Button Text: Controls what the button says (ie. Learn More).
- Button Link: Controls where the button links to when a user clicks on it.
Icon Section
- Button:
- This group field has two sub fields to it: Button Text & Button Link
- Button Text: Controls what the button says (ie. Learn More).
- Button Link: Controls where the button links to when a user clicks on it.
- Number of Columns:
- This selection field determines how many columns you want the icons to be in on the front end.
- Options: 3, 4, 5 columns
- Icons:
- This repeater field controls the content for the icon section, it has three sub fields:
- Icon: JSMT Media uses a large library of icons called Font Awesome just copy the HTML version of the icon and paste it into the field
- Icon Title: This is the title that will display under the icon
- Icon Content: This snippet of text will display under the icon title.
- If you would like to add an icon column just click the Add Icon button and fill in the above fields.
Gallery Section
- Image Size:
- This selection field allows you to select the image size you want for the gallery, the options are:
- Thumbnail: Images will be cropped to a 1:1 square
- Portrait: Images will be cropped vertically to a 9:16 aspect ratio
- Landscape: Images will be cropped horizontally to a 16:9 aspect ratio
- Gallery:
- This gallery field allows you to add the images to the gallery on the front end. Just click the Add to gallery button and select images in the media library or upload images to the gallery.
Blog Section
- Posts:
- This post object field allows you to select which posts you want to display on the front end. If this field is left empty it will automatically display the three most recent blog posts.
Background Image Section
- Background Image:
- This image field allows you to set a background image to the entire section.
- Height:
- This selection field controls the height of the section, there’s three options:
- Default: The height of the section depends on the amount of content in it.
- Half Height: The height of the section will be half of the height of the screen size.
- Full Height: The height of the section will be the full height of the screen size.
- Button:
- This repeater field has two sub fields to it: Button Text & Button Link
- Button Text: Controls what the button says (ie. Learn More).
- Button Link: Controls where the button links to when a user clicks on it.
- You can add up to two buttons in this section and they will display side-by-side.
