Introduction

The "Content Block" is used for displaying basic text or images which typically includes a business description or the vision of the business, etc. This is a useful block to place on your page should you need to add text, images, videos, or HTML code. 

Summary

• Adding a Content Block to a Page
• Content Block Types
  • Rich Text
  • How it Works
  • We Are
  • Two-Columns, Two-Rows

Adding a Content Block to a Page

Click on the "+ Block" button on the Editor:

Choose "Content" from the Block Library, select the type of content block that you would like to use, and then drag it to the right side of the CMS where you would like to place it.

To edit the block, double-click on the block or select the "Edit" icon on the right side.

Content Block Types

Below are the different types of content blocks:

Rich Text

The first type of content block is Rich Text. This type is extremely flexible and can be used to insert text, images, videos, and even HTML or Javascript (front-end code). This block size is not ideal for large interactive content and is instead best used with static content that fits well in the space.

This is what this field will look like prior to editing: 

To edit, double-click or select the "Edit" icon of the block as indicated above. Then, select "Click to Edit Rich Text."

This view will allow you to edit the content, adjust text formatting, embed links, images, and even videos:

To add/edit code, click on the "Source Code" icon on the far right side of the editor. You can then embed your code as needed.

**Please note that if you insert code yourself, the mobile adaptation will also need to be considered within your code.

To learn more about adding custom code to your website, please see Advanced Website Customizations.

How it Works

The second content block type is called "How it works." This is typically used for displaying your business process for buying and/or selling. It has three columns for displaying the content (this cannot be customized). An image, title, and description can be added to each column.

Here is what this type looks like:

All of the options to edit this block will be available on the left side when you double-click the block or click on the "Edit" icon for that block.

We Are

The third content block type called "We Are" is similar to "How it Works" with the only difference being that it does not allow for the display of images and only displays text. The background type and color can also be adjusted.

Here is what this block looks like: 

Two-Columns, Two-Rows

The fourth type is a two-column and two-row content block. It is typically used for showing your business value or benefits that clients will see when working with you. You can define your title and four descriptions, as well as the background of the block.

Banner Block

The "Banner Block" is typically used to display a picture (or multiple, sliding pictures) or a video. It normally has text on top of it and including a heading and a subheading. 

For background settings, you can choose the "Background Type" (image, color, slideshow, video), desktop image, and mobile image. 

For "Block Size," you can adjust the desktop size type (aspect ratio, full screen, exact height) as well as the mobile size type (aspect ratio, full screen, exact height). 

Size Recommendations

At present, we have four sets of templates and each template image size is slightly different from the other. Also, the mobile view and the desktop view will vary. This section will provide the suggested sizes for each of these scenarios.

Image Background Type

For the "Block Size," we recommend leaving the default selection of "Exact Height" for both desktop and mobile.

Banner Style 1

Desktop Size Recommendation: 1440 x 460 pixels
Mobile Size Recommendation: 750 x 440 pixels

Banner Style 2

Desktop Size Recommendation: 1440 x 460 pixels
Mobile Size Recommendation: 750 x 500 pixels

Video Background Type

As far as file size, the video can be no bigger than 50 MB.

We recommend checking the box for "Auto-Adjusted Height":

For "Block Size," our recommendations are as follows:

Desktop View

Leave at the default values:

Mobile View

Adjust to the following:

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at <support@lofty.com>, by phone at 1 (855) 981-7557, or by a chat with us through your Lofty CRM.

Related terms: content block