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.

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.

Documentation