Editing a Landing Page's HTML and CSS

Christy Cook Updated by Christy Cook

The Page Designer generates HTML friendly emails based on the Bootstrap templates - these are optimized all major browsers and are mobile (responsive/adaptive) friendly.

HTML and CSS Editor

While DailyStory's Pages Designer enables you to quickly build robust page, more complicated page designs typically start from an HTML base.

As an example, if you have an existing landing page design you wish to use in DailyStory the best way to start is to copy-and-paste the HTML and CSS of that landing page into a new DailyStory page's HTML and CSS.

Pages HTML Editor

Editing the HTML of an email is an advanced option. And, emails built with the Email Designer will initially prevent you from editing the email:

Email HTML Locked

However, you can always click "Unlock HTML Editor" to edit the HTML.

Editing the HTML of an email built with the designer may cause the designer to no longer recognize widgets added with the designer.

Editing CSS

While editing the HTML of an email built with the designer is not recommended, the CSS of an email may be editing with no impact to the designer.

Simply click the CSS tab and edit/modify CSS rules for your email.

Important when DailyStory sends your email it merges all the CSS and HTML together. The full CSS is always included in a <style> tag of the HTML body of your email, but DailyStory will also attempt to inline the CSS rules as well. You can preview and email and view the source to see what the fully merged HTML of the email will look like.

Content editor
  1. Save and publish

Save the page and click on the permalink at the top to open it in a new browser window.

Published page

The page automatically includes the DailyStory Beacon and Google Analytics (if configured).

Advanced Page Configuration

In addition to creating a basic page using the WYSIWYG editor, you can also edit HTML and add custom CSS and JavaScript.

Edit Page HTML

To edit the HTML of you page, click the HTML tab.

Edit page HTML

The HTML content is automatically inserted in the <body/> of the page.

Custom Head Content

If you want to add style sheets, additional meta tags, JavaScript libraries or other content you can add the HTML in the Custom Headers section.

For example, if you want to use the Bootstrap Framework for building responsive mobile pages in DailyStory, just add the Bootstrap files.

Customize page headers

Now Bootstrap's CSS rules update how our page is displayed.

Set Custom CSS Rules

You can add your own style sheet rules to the page by entering CSS in the Custom CSS editor.

For example, to set the font size of the <h1> tag.

Customize page styles

Other Resources

How Did We Do?

Adding a Form to a Landing Page

Landing Page Frequently Asked Questions

Contact