Post

2 followers Follow
0
Avatar

How to make a tabbed content block in Custom HTML?

Partners Team

I saw an image of tabbed content on an ONTRApage, and it said it used the Custom HTML Block. How do I recreate this?

Answered

Official comment

Avatar

The image we use in our ONTRApages Custom HTML Block Knowledge Base article is borrowed from a public post on creating responsive tabbed content using CSS by Andor Nagy

image description


A text file at the bottom of that article has the complete code, adapted for use in ONTRApages' Custom HTML Block. To modify it, we removed anything other than style declarations, JavaScript and straight HTML. <head> information such as meta tags, etc. can be placed in the ONTRApages' Settings tab in the Custom Header Code section. You can include style declarations that conform to HTML5 standards and also JavaScript, using the full HTML5 declarations:

image description

The Custom HTML Block will be placed on the page exactly where you place it in the ONTRApage Canvas. In other words, it is already in the <body> of the page and you should not have <body></body> tags (or <html>, <head> tags).

image description

The raw HTML code you place in the Custom HTML Block will inherit the following styles set at the page level:

  • h1
  • h2
  • h3
  • label
  • button
  • large-body-text
  • body-text
  • blockquote

Use a specific style declaration with the !important modifier to override those styles for the content in your Custom HTML Block.


We do not allow Custom HTML Blocks to be shared via the ONTRAPORT Marketplace, but feel free to share code snippets here in the Q&A Forum.

Frank Hagan
Comment actions Permalink

Please to leave a comment.

1 comment