Spring Sale: Our new update is live! Save 30% on Pro and Pro Unlimited for a limited time.

Content Area

In this article, we're going to introduce to you the Content Area element and we'll explain to you what is is used for.

  1. What is the Content Area Element Used For?
  2. Content Area Setup
  3. Customize
  4. Demo
  5. Summary

You can add the Content Area element in Cornerstone or any Builder in Pro (Header, Content and Footer) by searching "content" and dragging "Content Area" into the canvas.

Content Area Content Elements

What is the Content Area Element Used For?

The Content Area element is a very "simple" element. It lets you enter content, both in HTML and Rich Text modes. The screenshots below show both modes respectively.

HTML Code Rich Text

If you are editing a page, a header or a footer and the piece of design or functionality is not available in our list of elements, the Content Area element allows you make that piece of design available using HTML.

The HTML mode is not limited to HTML codes. You can add both CSS and Javascript codes as well.

CSS and Javascript codes

Content Area Setup

This element is pretty straightforward. It doesn't have Design options. You only have an area where you can enter your content into.

Content Area Content


The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Content Area Content Setup
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes


To see a live demo of the Content Area Element click here.


There you go! You now know how to use the Content Area element to add any piece of content that is not currently available in the arsenal of elements already available at your disposal.

See something inaccurate? Let us know