Layout Templates are flexible templates that can be used in Lead Liaison for globally styling web forms and landing pages or creating repeatable web page templates that mirror the entire look and feel of your company's website. The %%content%% placeholder should be inserted into your template. When the Layout Template is applied to a web form or landing page the form/landing page will be inserted into the contents of the Layout Template in place of the %%content%% placeholder.
Creating Layout Templates
To create a Layout Template do the following:
- Go to Settings > Templates.
- Alternatively, go to Administration > Layout Templates
- Click the Add Layout Template tab
- Enter a Layout Name. The Layout Name is an internal name for the Layout Template.
- Use the code editor to add your Layout Template code.
Full Screen Mode: Click anywhere inside the editor and press F11 to view it in full screen mode. Press Esc to exit.
Search: Place your cursor inside the code editor and click Ctrl + F (PC) to search code within the editor.
- Alternatively, pull in code from one of your existing web pages. Lead Liaison will automagically convert all relative URLs to absolute URLs for you. Click the Import layout from URL link and enter in the URL of a web page you'd like to incorporate into your template. Once the code is pulled in you can freely customize it to your liking.
Make sure to include the %%content%% placeholder. Your landing page or web form will be inserted in place of this value in your Layout Template.
Default System Style Sheet
You can view the default system Style Sheet here: https://app.leadliaison.com/CSS/magic-form.css. To remove all styling from your Layout Template uncheck the box as shown in the screenshot below. Note, unchecking the box will remove all styling on the %%content%%. For example, when a webform is inserted into the %%content%% placeholder all default system styling on the web form will be removed.
Here's an example of a web form that was inserted into the %%content%% placeholder with the default system styling removed.
Managing Layout Templates
To manage your Layout Templates do the following:
- Click Settings > Templates
- Under the Actions column click the gear to see a list of options:
- Edit = Edit your Layout Template. All landing pages and web forms using this Layout Template will be updated with your changes once the Layout Template is saved.
- Preview = Opens a new browser tab and displays a preview of your Layout Template. This gives you an idea of how the template will look on the web and when used with your landing pages and/or web forms.
- Set as Default = Sets the Layout Template as the default system template. When creating a web form or HTML landing page the default template will be used.
- Delete = Deletes the Layout Template.
Applying Layout Templates
Layout Templates can be applied to your web forms or landing pages as follows:
- Create your web form
- On the web form designer click Form Properties
- Choose your Layout Template from the Layout Template dropdown
- The Default Layout Template is selected by default
- Your web form will be inserted into the %%content%% placeholder in the Layout Template
- Create your landing page
- For the Design Type, choose HTML
- On Step 1 (Configure) select the Layout Template in the Template field
- The content you create in Step 2 (Content) will be inserted into the %%content%% placeholder in the Layout Template