If your site was built between August 2021 and April 2023, you are utilizing an older version of the JSMT’s base theme platform.
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.
Heading Tag:
- This field controls the HTML heading tag for the section title
- This field is primarily for Search Engine Optimization and it is recommended that each page only have one Heading 1 section title
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
Buttons:
- This repeater field allows us to add multiple buttons to a section, within the repeater field we have two sub-fields:
- Link – This field allows us to paste a URL, control the link text & select if we want the link to open in a new tab. This field also allows us to select an existing page or post type easily
- Styling – This field controls the styling of the button giving us three different styling options:
- Primary – The button is filled in
- Secondary – The button is outlined
- Underline – The button is underlined
Text Section
Styling:
- This selection field controls the front-end styling of the entire text section, styling options:
- 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
- CTA – Will align the section title and content to the left and align the buttons to the right
- List – Will align the text to the left but if a list is displayed in the section content the list items will display into two columns
Image Text Section
Styling:
- This selection field controls the front-end styling of the image text section, styling options:
- 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, alignment options:
- 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
Icon Section
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
Styling:
- This selection field controls the front-end styling of the gallery section, styling options:
- Default – This will display the images in a clean grid styling on the front end
- Image Link – This will change the gallery field into a repeater, making it easier to add a link around an image
Image Size (when the styling option is set to Default):
- 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
- Logo – Images will be resized to have a width of 300 pixels and the height will vary, this image size is primarily used for displaying logos
Gallery (when the styling option is set to Default):
- This gallery field allows you to add 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
Images (when the styling option is set to Image Link):
- This repeater field allows you to add multiple images and wrap a different link around each image
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
Tabs Section
Tabs Styling:
- This selection field controls the front-end styling of the tabs section, styling options:
- Horizontal: This styling option will display the tab navigation above the content of the tabs
- Vertical: This styling option will display the tab navigation to the left of the content of the tabs
Tabs:
- This repeater allows us to populate each tab with an icon, title, and content
- Tab 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
- Tab Title – This text field will appear in the tab navigation and in the tab content
- Tab Content – This editor field allows us to add content to the tab
Form Section
Background Image:
- This image field allows you to set a background image to the entire section
Overlay:
- This color picker field allows us to control the overlay color, once a color is selected we can use the slider on the right to adjust the opacity of the overlay
Styling:
- All styling options will display the title, content and buttons to the left and the form to the right
- This selection field controls the front-end styling of the form section, styling options:
- Default – This will display all of the section content in a full height section
- Overlay – This styling option will make the form look like its overlaying above the section
- Full Height – This will make the form full height with an overlay of the website’s main color
Form Title:
- This field allows us to control the title of the form
- If left empty the form title will display as “Get In Touch”
Form:
- This field allows us to select which Gravity Form we want to display in the section
- This field will auto-populate all of the forms we create using the Gravity Forms plugin
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 are 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
Overlay:
- This color picker field allows us to control the overlay color, once a color is selected we can use the slider on the right to adjust the opacity of the overlay
Custom Post Type Sections (Team, Testimonials, Services & Events)
The following fields apply to all custom post type sections
Title:
- If this field is left empty it will automatically grab the title from the archive headline
Content:
- If this field is left empty it will automatically grab the content from the archive intro text
Team Section
Team:
- This field allows you to select which team member you want to appear on the front end of the page
- If no team members are selected this section will show all team members
Testimonial Section
Style:
- This selection field controls the front-end styling of the testimonial section, styling options:
- Default – This will show the testimonials in a grid layout
- Slider – This will show the testimonials in a slider
Testimonials:
- This field allows you to select which testimonials you want to appear on the front end of the page
- If no testimonials are selected this section will show the most recent 6 testimonials
Services Section
Services:
- This field allows you to select which services you want to appear on the front end of the page
- If no services are selected this section will show all services
Events Section
Events:
- This field allows you to select which events you want to appear on the front end of the page
- If no events are selected this section will show the next 5 upcoming events
