Composing a Landing Page
Drag & Drop Editor
When creating a page within the Drag & Drop Editor, you can either pick from a set theme or start with a blank page. Each of the starter Themes will have some preset values set on the page which you can change as needed.
When starting with a blank theme, the page will be empty. On the right-sidebar you will have a Page tab which will allow you to set page-level settings such as apply a background color or image, set a default font family and font color. NOTE: If you apply specific font setting to individual sections of your page (or use a content block or form with its own settings) those will overwrite the overall page settings here. You can type the name of standard fonts into the font family input. If you would like to use a Google Font, you can type the name of the Google Font there as well, but you will also need to add the link for font in the head section of your page above your style tags.
While you can drag Content elements from the right-sidebar directly on the page, you will likely want to use Layouts which will give you more options to control both the layout of your page and its responsiveness. The Landing Page Drag & Drop Editor will work similarly to the Email Drag & Drop Editor. The editor uses Bootstrap to control the layout and responsiveness of you page. As you add columns to your page you can have a max of 12 columns on one row on your page (although you probably don't need that many). As you add columns you can set the display value for each breakpoint to control how you page displays on desktop, laptop, and tablet and mobile. When clicked into a layout you will have options to control the responsiveness for each size (or you can allow the presets to handle the responsiveness for you).
12/12 - This means at that size your column will take up all available space on that row (i.e. it will stretch to both sides of the screen)
6/12 - Your column will take up half of the screen in that row
4/13 - Your column will take up 1/3 of the screen in that row
3/12 - Your column will take up 1/4 of the screen in that row
Auto - Standard Bootstrap sizing will apply
Hidden - This allows you, on some sizes, to hide certain columns rather than shrink or stack them
Inherit - The responsiveness is inheriting the settings from the previous size
NOTE: If you want all your columns to appear on the same row on the largest size make sure your total of them added together doesn't exceed 12.
Just as you can on the page, you can also apply background colors and images at either the layout or the column level.
Content elements can be added to layouts just as you can in emails. The Landing Page Drag & Drop editor also includes Forms and Surveys you can drop into your page. For forms, if these have no CSS applied to them (i.e. fonts and colors) then the CSS of your page will be applied when you drop the form on a page. If you want to embed a video on the page use the Custom HTML section and paste the embed code of your video there. For responsiveness, you may want to set your width as a percentage (100% to fill the column) rather than as pixels.
On landing pages using the Drag & Drop editor, you can drag out Forms and Surveys, and also YouTube and Vimeo videos (along with the other default other content elements). For more, click here.
Legacy Editor
Creating a page within a branded landing page or by choosing the Paste & Code section will load the standard editor. Like emails, branded templates will have set bodyslots to add content. The Paste in Code option will load the editor in code mode, but you can toggle back to the full editor after pasting in your code (some code may change slightly by doing so, if you don't want to risk this you should chose to leave the editor in the code view). Click here for more information on how to use the standard editor. Click here for more on composing a landing page.
When you're done composing your landing page, click next. If your page contains a form, the Platform will prompt you to create a Response Page. You can direct your landing page visitors to an existing URL, or you can create a response page right in the Platform. Simply select your template and compose the response page just as you did the original landing page.