Creating a custom layout for a jInbound landing page

jInbound ships with 4 effective landing page layouts, you may however want to create your own layout for a specific need. In order to aid in the creation of such custom layouts, jInbound includes a 5th layout which is the custom layout which you can define differently for each landing page you create without having to create template overrides.

Creating a Landing Page with a Custom Layout

To create an inbound marketing landing page with a custom layout, simply create (or edit) a new page in the Landing Page Manager and Select the Custom layout Icon for the layout to use. This will activate the layout that you create in the Layout tab.

Select the Landing Page to edit
Select Custom layout
Enter the code for the new layout in the Layout tab

Using the Layout Code Editor

The Layout Editor is as simple to use as the article editor.

You can simply create the layout you prefer using Bootstrap code to take advantage of the X / Twitter Bootrap included in Joomla (or supplied by jInbound if that is not available, such as for Joomla 2.5 installs). A good tutorial on using X / Twitter Bootstrap layouts can be found at https://www.w3resource.com/X / Twitter-bootstrap/layout-tutorial.php

The basics for a fluid layout

<div class="container-fluid"> <div class="row-fluid"> <div class="span2">  </div> <div class="span10">  </div> </div> </div>

Using the Content Tags to insert jInbound data into the Landing Page

Next to the Layout Editor you will see a set of tags that you can use in order to display information from jInbound in your Landing Page, the tags will be replaced with the appropriate values based on your landing page setup

The default Content Tags include:

{heading} - Insert the heading you have entered in the Content Tab
{subheading} - Insert the subheading you have entered in the Content Tab
{maintext}- Insert the Main Text area content you have entered in the Content Tab
{sidebartext}- Insert the Sidebar Text area content you have entered in the Content Tab
{image}- Insert the Image from the Image Field you have uploaded in the Content Tab
{form} - Insert the form selected for the current landing page in the Forms tab
{form:open} - Place at the start of a form if creating a form by entering fields manually instead of using the {form} tag
{form:close} - Place at the end of a form if creating a form by entering fields manually instead of using the {form} tag
{form:first_name} - Display the default field First Name for the submitted to fill
{form:last_name}- Display the default field Last Name for the submitted to fill
{form:email} - Display the default field Email for the submitted to fill
{submit} - - Display the Submit button with the text defined in the Forms Tab

Using custom fields in your Custom Layout

In addition to the default Content Tags above you can enter your custom fields by using the following format:

{form:my-field}

where "my-field" is the unique identifier (name) of your custom field as described in the Managing custom fields in the jInboundFields Manager article.

Note: If you want to apply the same customizations for all your landing pages, you can read about how you can use joomla! templates overrides to customize your jInbound landing pages.

jInbound Documentation