Documentation
Guide to Layout & Design Tool Elements
In this guide, we’ll cover the different elements that are available in the Layout & Design Tool.
You can search for any element by clicking the + ADD ELEMENT button at the top left corner of the Layout & Design Tool.
You will then see a search bar where you can type in your query.
General
All the elements we are going to cover are contained within the general grouping.
Posts
This element is used to add articles with defined properties to the layout.
Some of its properties can be changed, such as:
- Number of posts to be displayed: Changes the number of posts displayed in the element block.
- Pull content from section: This brings up a drop-down menu with the sections from your site options.
Current post
Different than the “Posts” element, the “Current Post” will only display 1 post - the one on the page that you currently are.
Posts Modifier
It is a container that concentrates all the Post Modifier Items.
Posts Modifier Item
It is an element to add a custom code to the post, such as overwriting a piece of the post text or adding a code snippet to the post.
Javascript
It adds a snippet of JavaScript code to your layout. It has some fields to be fulfilled, such as:
- Friendly Name: a title that can help you identify the purpose of this addition.
- Source URL: the source where this JavaScript code will be getting information.
- Priority: select if the priority of this code will be Optimized, postponed (Post LCP), or Load BlockingPriority.
- Script: it is where the code will be placed.
Heading
This is a text field element that can be used to create a headline for any block of posts. It has only 1 field: Headline Text.
It is for you to place a heading on your layout.
Breadcrumb
It is a breadcrumb trail on a page that indicates the page's position in the site hierarchy. You can set your breadcrumbs with the following fields:
- Home Page Anchor Text: it is the desired text to receive the link for the home page of your site and it will be displayed at the beginning of your breadcrumbs
- Separator: it is the desired symbol that will be between the breadcrumbs
- Breadcrumb Elements: this is where you can add which breadcrumbs you would like to add, such as Section, Subsection, Author, Tag, etc.
Text
It is an element to add a simple text. You can also add a link to the text using this element. Additionally, if your text has a link, you can set if the link will open in the same tab or a new tab.
Formatted Text
Similar to the text element, but with the addition of the formatting tool for the regular text.
Custom HTML
With this element, you can customize HTML code for styling different elements of the site.
JSX Element
Similar to the Custom HTML, you can customize a JSX code for styling different elements of the site.
Font
The font element will define the font to be used on other elements within it or in a Wrapper. It has some specific fields, such as:
- Font Source: where this font is from
- Font Name: which font is it
- Unicode range: the code that represents the font
You can also customize the font weight, type, and style.
Payment Method Form
This element can be used to set styles for your payment form.
Shared Element
These are elements that are shared across other pages (e.g., Top Bar, Side Bar, or Footer).
Row
These are horizontal areas that you can combine with columns to define your grid. They can be rearranged by dragging and dropping.
Column
These are vertical areas that you can combine with rows to define your grid. They can also be rearranged by dragging and dropping.
Conditional Content
You can add various conditions using this element.
Ad Tag
Advertisement codes can be added here for each device. There are places for ad codes for any devices separated.
Facebook Like Widget
This adds a Facebook like/share button. You can add additional information for the button, such as:
- Page URL: the URL of your Facebook post
- Facebook Action Type: the action the widget will do. You can choose between Liking the page or Recommending the page.
- Facebook Layout Type: the layout of the widget. You can choose between “Button”, “Standard”, “Box Count” and “Button Count”
- Facebook Size Type: it is the size of the widget. You can choose between a small or a large widget.
Facebook Page Widget
This adds a Facebook Page block. You can add additional information for the button, such as:
- Page URL: the URL of your Facebook page
- Hide Cover: you can hide the cover image of your FB page
- Show Posts: you can show a preview of the posts from your FB page
CTA
An Element that serves as a placeholder for the CTA
User Profile Information
This element adds profile details of any user by adding simple HTML code.
Newsletter
The newsletter element adds an email field and a subscribe button. We can redirect users to our social accounts using social links.
Subscription Widget
It's a widget where we can include newsletter and social links elements.
Social Links
Ordered set of social links
Links List
This element includes links and section links.
Link
You can add specific links to this element and customize it with:
- Link text: the text that will be displayed
- Link URL: the URL the text will lead to
Section Links
Although similar to the Links element, you can only add links from your sections, shown in a dropdown.
Image
Images can be added and reused throughout the Layout & Design tool. You can also set some behaviors, such as:
- Lazy Load: Will postpone the loading of your logo
- Alternative text: A description for your image used when the image is not loaded or to help accessibility apps better read your page to their users
- Link to: A URL that can be added to your image
- Open Link in: you can set the link to open in the same window or in another
Ad Header Code/ Header Code
Appends code to the <head> tag.
Element Wrapper
More than one element can be clubbed together to acquire a desired design. You can set attributes, such as:
- Friendly Name: A title to this element to help you identify it in you L&D Page
- Customer Container Class: A custom CSS class to be used on a Styles element
- Stream Content Method: How this element wrapped will be displayed.
Sticky
It is an element that remains on the screen on scroll.
Menu Button
A hamburger-menu button that's used for site navigation.
Search Box
This adds an input-text field with a search button.
Logo
A logo image can be uploaded for all devices. It can be associated with link and alternate text. There is an option to open the link in a new window or the same window.
Show On Scroll
The element remains on the screen even while scrolling.
Lazy Load
Here you can choose an element that should be delayed so that other important content on the page loads quickly. You can also set some behaviors:
- Friendly Name: A title to this element to help you identify it in you L&D Page
- Customer Container Class: A custom CSS class to be used on a Styles element
- Lazy Load Method: how the lazy load will work. For example, all elements on this wrapper can load only after the user scroll.
Conversation
Similar to our native element for a comment system, this element allows you to create conversations on any page you want. You can add an image, a title and also adjust the color of the texts presented on this conversation, such as the background color, the text color, etc.
Message
This element will customize how the comments within the conversation will be displayed.
Random Pick
Other elements can be nested inside random picks, and those will be randomly displayed on the front end when refreshed by the user.
For example, if you have a post element and newsletter widget inside of a random pick element on the home page, then it will display an article for the first visit to the home page, and it will display a subscription newsletter upon refresh.
Variable Override
New OG:Tags for any page can be given using a variable override. For example, you can use a new OG:image that overrides the image that was being shared to Facebook on the home page.
So instead of showing the site's logo, it will show a completely different image.
GDPR Cookie
Use this element to set up a GDPR-compliant cookie on your site.
Properties of the GDPR cookie:
- Description: You can add a text message, such as, "Our site uses cookies to improve your browsing experience."
- Links: User can provide a link to their privacy policy here, which can then give more details about the cookies being used on the site.
- Accept text button: It's necessary to be compliant about notifying users about a site's cookie usage, so that's why there's an accept button which is just plain text that can say "OK" or otherwise.
If users don't want their cookies tracked, they can turn around and exit the site instead.
- Post Custom Fields: This is defined in global settings. A custom field element can be used to allow you to capture desired text in a field of Entry Editor.
For example, if you want to add a read time field to the Entry Editor, you can simply add a custom element in the post custom field.
Authors
Another Post Content element. Use this element to display different kinds of authors. You can set the maximum number of authors, select the author type, and change the order.
Author Avatar
This element will get the author avatar and will link it to the author page. You can set it to open in the same window or in another window.
Author Name
This element will get the author’s name and will link it to the author page.
Author Bio
This element will get the author’s biography from the author page.
Author custom field
This element will get some custom fields frmo author page, for example, their Pinterest page URL, or their LinkedIn page URL, etc.
Follow button
Lets a user follow or unfollow the article.
Sign In
It creates a Log In / Sign Up form.
Paywall
You can set paid and free content in the modules inside by selecting each module and setting the content.
Live Section Update
This element is used to add to the section live updates by WebSocket API.
Comments
It is a native element for a comment system.
Sign in Field
It can be added as Sign In field for users to log in before commenting.
Jinja Template
It adds a snippet of Jinja code to your layout.
Styles
It adds a snippet CSS code to your layout.
Table of Contents
- General
- Posts
- Current post
- Javascript
- Heading
- Breadcrumb
- Text
- Formatted Text
- Custom HTML
- JSX Element
- Font
- Payment Method Form
- Shared Element
- Row
- Column
- Conditional Content
- Ad Tag
- Facebook Like Widget
- Facebook Page Widget
- CTA
- User Profile Information
- Newsletter
- Subscription Widget
- Social Links
- Links List
- Link
- Section Links
- Image
- Ad Header Code/ Header Code
- Element Wrapper
- Sticky
- Menu Button
- Search Box
- Logo
- Show On Scroll
- Lazy Load
- Conversation
- Message
- Random Pick
- Variable Override
- GDPR Cookie
- Authors
- Sign In
- Paywall
- Live Section Update
- Comments
- Sign in Field
- Jinja Template
- Styles