TABLE OF CONTENTS
These blocks are “dynamic”, meaning they display content created elsewhere — unlike “simple” blocks, where the content is statically created on the spot. For example, for posts, you create them in a special “Posts” tab, then place the block on a page, and it will automatically display the selection of posts according to the parameters you set. You won’t have to copy them multiple times!
Each of these contents can then be displayed in one of the following three formats:
- A “block” is a content block that can be placed anywhere on a page to display a list of events or posts (for example, on one page you could have a block for “Latest Posts,” and below it a block for “Upcoming Events,” etc.).
- A “single” is the detailed page of an event or a post, containing all the necessary information.
- A “listing” (or Index) is a list of all events or posts, for example, with a set of filters at the top of the page (date, topic, etc.) that allow users to refine the display. Each item is shown with the information you choose. Clicking on an item in the listing takes the user to its detailed page (the “single”).
1 -
News
- Preview in the center / settings on the left + close button (X)
a - Block
General
- Variants selector → position of text, image, and buttons. Depending on the selected option, set the container’s border radius
- Selection of container type (for the entire block), and depending on it, define the border thickness and radius
Heading
- Choice of title alignment
- Choice of title font (from the ones created previously)
- Choice of description font (from the ones created previously)
Card
- Choice of card type (for each news in the block). Depending on the selection, define the image border radius and/or the box border thickness and radius
- Choice of font style for the title and post information (author, date, etc.)
- Choice of font style for the excerpt
- Selection of information to display in the block (date, excerpt, categories)
Colors
- Choice of border and background color for the information container
- If there is a box, choice of border and background color for the box
- If there is a container, choice of border and background color for the container
- Choice of block background color
Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
- Choice of button style for the “Read More” button (which will link to the news single page)
- Choice of button style for the “View All News” button (archive button, which will link to the index page listing all published news)
Add a new composition = redo everything for a new block style, so you can create a different Hero block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
b - Single
→ NEWS
General
- Variants selector: position of elements on the page
Content
- Choice of image border radius
- Choice of font for the single news title
- Choice of font for the news information (text, author, date, categories, etc.)
- Selection of information to display on the page
Colors
- Choice of the background color of the page
- Depending on the variant, choice of secondary background color
→ RELATED NEWS
Style of the related news cards relies on the default News block (if there are compositions, it takes the settings from the default block).
General
- Variants selector, and if applicable, set the border thickness and radius
Content
- Choice of font style for the listed news
- Enter the “Read More” label (linking to the single page of these related news)
Colors
- Choice of background and border color for the related news container
- Choice of background color for the section
c - Index
Style of the news cards relies on the default News block (if there are compositions, it uses the settings from the default block).
→ GENERAL SETTINGS
General
- Variants selector → layout and presentation on the page listing published news (index). Depending on the choice, set the border thickness and radius.
Heading
- Variants selector → choice of element positions in the header
- Enter the title of the index page
- Choice of font for the index page title
- Choice of font for the search results
- Filters:
- Choice of search filters displayed on the index page. For each filter, enter the item name and the label if none is found
- Choice of font for filters
- Set the border thickness and radius for the filters
- Choice of filter reset button style
Content
- Enter the text for the “Read More” button of the single news
Colors
- Filters: choice of border and background color for the filters, and color for active (checked) filters
- Container: choice of background and border color for the container, if any
- Choice of page background color
→ PAGINATION
General
- Variants selector → choice of pagination style. Depending on the selection, define the thickness and border radius of the elements
- Choice of pagination font style
Colors
- Choice of text color on hover
- Choice of pagination border color, normal and on hover
- Choice of pagination background color, normal and on hover
- Choice of pagination arrow color, normal and on hover
2 -
Events
- Preview in the center / settings on the left + close button (X)
a - Block
General
- Variants selector → choice of position for text, images, and buttons
Heading
- Choice of title alignment
- Choice of title font (from the ones created previously)
- Choice of description font (from the ones created previously)
Content
- Container type selector → and depending on choice, selection of border thickness and rounding
- Card type selector → and depending on choice, selection of border thickness and rounding
- Choice of style for icons (price, location, etc.)
- Border radius of the card image
- Text → choice of font style for title, excerpt, date, and other details
- Choice of information to display on the card
Colors
- Choice of color for icons (location, price, etc.)
- Choice of background color for the date container
- If there is a card, choice of border and background color of the frame
- If there is a container, choice of border and background color of the container
- Choice of background color for the block
Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
- Choice of button style for the “Read More” button (which will link to the event single page)
- Choice of button style for the “View All Events” button (archive button, which will link to the index page listing all published events)
Add a new composition = redo everything for a new block style, so you can create a different Hero block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
b - Single
→ EVENT
General
- Variants selector: position of elements on the page
Content
- Choice of image border radius
- Choice of information container type, and if applicable, border thickness of that container
- Choice of style for information icons (price, location, etc.)
- Choice of event title typography
- Choice of typography for the event title and details (text, author, date, categories, etc.)
- Choice of information to display on the page
Colors
- Choice of color for information icons
- Depending on the variant, choice of secondary background color
- Choice of border and background color for the information container
- Choice of background color for the page
→ RELATED EVENTS
Style of the related events cards relies on the default block Events created (if there are compositions, it uses the settings from the default block)
General
- Variants selector, and if applicable, set the border thickness and border radius
Content
- Choice of typography style for listed events
- Enter “read more” label (linking to the page of similar events)
Colors
- Choice of background and border color for the related events container
- Choice of background color for the section
c - Index
Style of the events cards relies on the default block Events created (if there are compositions, it uses the settings from the default block)
→ GENERAL SETTINGS
General
- Variant selector → layout and display of elements on the published events index page. Depending on the selection, sets border width and border radius
Heading
- Variant selector → choice of element positions in the header
- Enter index page title
- Choice of typography for the index page title
- Choice of typography for search results
- Filters:
- Choice of search filters displayed on the index page. For each filter, enter the item name and label if none is found
- Choice of typography for the filters
- Set border width and border radius for the filters
- Choice of style for the filters’ reset button
Content
- Choice of available index views (calendar, list, or both)
Colors
- Filters: choice of border and background color, and color of active (checked) filters
- Container: choice of background and border color if applicable
- Choice of page background color
→ PAGINATION & EVENTS VIEW SETTINGS
Pagination
- Variant selector → choice of pagination style, depending on the selection, sets border width and border radius of the elements
- Choice of pagination font style
Content
- Enter “read more” button label for the various events on the index
- Calendar
- Choice of font style for weekdays, date, and event name in the card
- Set border width and border radius for calendar cards
- Date
- Set border width and border radius of the container
- Modal
- Choice of font style for the event title and excerpt
- Set border width and border radius
Colors
- Pagination
- Choice of text color on hover
- Choice of pagination border color, normal and on hover
- Choice of pagination background color, normal and on hover
- Choice of pagination arrow color, normal and on hover
- Calendar
- Choice of border color for the general card (no event)
- Choice of background color for the general card (no event)
- Date
- Choice of border color for the date card (no event)
- Choice of background color for the date card (no event)
- Card with Events
- Date
- Choice of text color
- Choice of background color
- Choice of text color
- Choice of border color for the card
- Choice of background color for the card
- Card Current Day’s Date
- Date
- Choice of text color
- Choice of background color
- Choice of text color (if there were one or more events on that date)
- Choice of background color for the card
- Choice of border color
- Modal
- Choice of border color
- Choice of background color
In the preview, the current date is set to August 14 as an example. You can highlight this day differently from the others
3 -
FAQs
- Preview in the center / settings on the left + close button (X)
a - Block
General
- Variants selector → style for separating questions
- Container type selector → depending on the choice, set the internal container’s border thickness and border radius
- Set the thickness of the line separating questions
- Set the border thickness and border radius of the container
Heading
- Choice of title alignment
- Choice of title font (from the previously created fonts)
- Choice of description font (from the previously created fonts)
Content
- Choice of font style for the title, paragraph, and heading levels 1, 2, 3, 4, 5, and 6
Colors
- Choice of color for the question separators
- Choice of background and border color of the inner container
- Choice of border and background color of the container
- Choice of background color of the block
Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
- Choice of button style for the “View All FAQs” button (archive button, which will link to the index page listing all published FAQs)
Add a new composition = redo everything for a new block style, so you can create a different Hero block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
b - Index
Style of the faqs cards relies on the default block FAQs created (if there are compositions, it uses the settings from the default block)
→ GENERAL SETTINGS
General
- Variant selector → layout and display of the FAQ index page
- Sets border width and border radius based on the selected option
Heading
- Variant selector → title alignment
- Enter index page title
- Choice of typography for the index page title
- Choice of typography for index page items
- Choice of displayed filters
- Choice of search filters displayed on the index page. For each filter, enter the item name and label if none is found
- Choice of typography for the filters
- Set border width and border radius for the filters
- Choice of style for the filters’ reset button
Colors
- Choice of active filter color, and filter background and border colors
- Choice of container background and border colors
- Choice of page background color
→ PAGINATION
General
- Variants selector → choice of pagination style. Depending on the selection, define the thickness and border radius of the elements
- Choice of pagination font style
Colors
- Choice of text color on hover
- Choice of pagination border color, normal and on hover
- Choice of pagination background color, normal and on hover
- Choice of pagination arrow color, normal and on hover
4 -
Teams
- Preview in the center / settings on the left + close button (X)
a - Block
General
- Variants selector → position of text, image, and buttons. Depending on the selected option, set the container’s border radius
- Selection of container type (for the entire block), and depending on it, define the border thickness and radius
Heading
- Choice of title alignment
- Choice of title font (from the ones created previously)
- Choice of description font (from the ones created previously)
Card
- Choice of image shape, and depending on it, set border radius
- Choice of associated icon size (e.g., social networks)
- Choice of title typography
- Choice of typography for member/people position (role)
- Choice of typography for member/people description
- Choice of typography for member/people details
- Choice of member information to display (role, description, email, etc.)
Colors
- Choice of icon color, normal and on hover
- Choice of box border and background colors, if any
- Choice of container border and background colors, if any
- Choice of block background color
Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
- Choice of button style for the “View All Team members” button (archive button, which will link to the index page listing all published team members)
Add a new composition = redo everything for a new block style, so you can create a different Hero block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
b - Single
→ MEMBER
General
- Variant selector → element positions on the page
Content
- Choice of image border radius
- Choice of title typography
- Choice of typography for title and details
- Choice of description typography
- Choice of information to display on the page
Colors
- Choice of page background color
→ RELATED TEAM MEMBERS
Style of the related team member cards relies on the default block Teams created (if there are compositions, it uses the settings from the default block)
General
- Variant selector, and if applicable, set border width and border radius
Content
- Choice of typography style for listed items
Colors
- Choice of container background and border colors
- Choice of section background color
c - Index
Style of the team member cards relies on the default block Teams created (if there are compositions, it uses the settings from the default block)
→ GENERAL SETTINGS
General
- Variant selector → layout and display of elements on the published members index page, depending on the selection, sets border width and border radius
Heading
- Variant selector → title alignment
- Enter index page title
- Choice of typography for the index page title
- Choice of typography for index page items
- Choice of displayed filters
- Choice of search filters displayed on the index page. For each filter, enter the item name and label if none is found
- Choice of typography for the filters
- Set border width and border radius for the filters
- Choice of style for the filters’ reset button
Content
- Enter “read more” button label
Colors
- Filters: choice of border and background color, and color of active (checked) filters
- Container: choice of background and border colors, if any
- Choice of page background color
→ PAGINATION
General
- Variant selector → choice of pagination style, depending on the selection, sets border width and border radius of the elements
- Choice of pagination font style
Colors
- Choice of text color on hover
- Choice of pagination border color, normal and on hover
- Choice of pagination background color, normal and on hover
- Choice of pagination arrow color, normal and on hover
5 - Video example of the setup
Bock setup
Single/Page setup
Index setup