Using Custom HTML in the Post and Page Builder

The post and Page Builder is a powerful tool giving you the ability to control and customize your content. The drag and drop interface used in the visual editor offers tons of possibilities. When you use the visual editor to add elements, the Post and Page Builder adds the necessary HTML to accomplish the design. This means that in addition to the visual editor, you have the power of HTML at your fingertips. This allows you to go beyond the possibilities of the visual editor for more powerful control and design possibilities. You can create entire posts or pages with HTML or you can use HTML to make adjustments to your content on an existing page or post. This article will show you how to use Custom HTML in your posts and pages.

Accessing the text editor

Using custom HTML with the Post and Page Builder is a snap.

1. Open the post or page you would like to edit with HTML.
2. On the top right of the Editor Window click the Text tab.
   
3. You will then see your page/post displayed in HTML. From here you can make your desired changes.
4. If you want to see your changes or make additional changes with the visual editor, click the Visual tab at the top right of the editor window.
5. Once you are finished, you will need to click on the Update or Publish to the right of the editor.
   • This will show below the editor on smaller screens.

Toubleshooting

Finding specific elements in the Text editor

If you have a lot of content in your post, or are trying to make changes to a specific element, you can highlight the text or element you would like to change. When you switch between the visual and text editors, whatever you have highlighted will also be highlighted in the editor you are switching to. This can be very useful for zeroing in on a particular element

HTML Was changed after publish

The Post and page builder will do it’s best to automatically adjust to make your content compatible with the visual editor. If you add custom HTML to a completely blank text editor you will see that it gets wrapped in a boldgrid-section as well as a row and column elements. These elements are added to allow you to use the visual editor with your custom HTML.

Why does my HTML get removed from the editor?

Sometimes code will get removed when switching between visual and code views. This happens when the editor doesn’t know what to do with the code – it can’t interpret it. This typically happens with <script\> tags used to add CSS styles or Javascript. If you require additional CSS or Javascript, check out our article on Using Custom CSS and JS with Crio.

Another example that may be removed from the editor would be tracking codes. These generally need to be in the header or footer. There are tracking code plugins available to get the code in the correct location.

Getting Started

If you are looking to make use of HTML but aren’t sure where to begin we included some other articles below.
How to Create Collapsing Divisions in BoldGrid
How to Embed a Google Calendar in your Page Content