Customizing landing pages with HTML code in the Design Editor

Add your custom HTML code to an Oracle Eloqua landing page using the Design Editor. For example, you can use a code block to fully customize some of your landing page's HTML code.

To add custom HTML code to your landing page:

  1. With your landing page open, drag the code content to the layout.

    An image showing a code block being added to an email using the Design Editor

  2. Click the code block and use the HTML editor to add your HTML code. Use the Custom Code panel to format the content block.

    An image of an HTML code content block

    Note: You must click outside of the code block to preview your changes. If you need a full feature editor, create an HTML landing page instead using the Source Editor. Learn more about HTML landing pages.

HTML guidelines

The code content in the Design Editor is intended for snippets of custom HTML code. If you need greater control over the landing page, you should use the Source Editor to create an HTML landing page. Learn more about HTML landing pages.

Here are some guidelines for your HTML code:

  • Write HTML code that is standards compliant. For example, be sure to nest and close elements correctly and use lowercase element names, attributes, and values.
  • Avoid using the following HTML elements in a code block: <html>, <head>, <body>, <iframe>, <form>. The Design Editor does not support the use of some of these elements.
  • Be aware of reserved characters like <, >, and &. These characters make up the HTML language. If you want them to appear in the content of your landing page, you must use the entity name or number instead. For example &lt;, &gt;, and &amp;.
  • To prevent CSS conflicts with Oracle Eloqua:
    • Avoid the following class names: .body, .ExternalClass, .button.
    • Always name classes to be applied to <table> elements. If you are using tables, note the potential responsive issues below.
  • If your HTML code contains tables or long text strings, a notification appears An image of the Notification icon in the Design Editor. Tables and long strings can potentially cause responsive issues, preventing content from adapting to different screen sizes. For landing pages, it's a best practice to use <div> instead of tables. Oracle Eloqua doesn't prevent you from using a landing page with these potential issues, but you should test your content on different screen sizes and browsers.

Padding and borders

Adjust the padding and borders around the content block using the options available from the Custom Code panel. Learn more about padding and borders.

Background color

Set the background color of the content block using the Custom Code panel. You can set the color using hexadecimal or RGB values.

Learn more

Customizing emails with HTML code in the Design Editor