Using a different version of Infusionsoft? Click Here to learn more

New Landing Pages Design And Configure

Tags: Landing Page

After choosing your template, follow the instruction below to learn how to set up and design your New Landing Page template.

  1. The name you type here will be shown in the browser's title bar. Your website visitors will see this, so make sure to choose a name wisely.

  2. (Optional) Choose the font set you would like to use and add a logo

  3. Click Next to start building your landing page template

  4. We utilize a layout system that is built upon layers. These layers are:

    Section - The foundational layer to your content. Every other layout element sits on top of a section. The image below is an example of a Hero Section.

    Row - A horizontal layout element. You can add multiple rows in a section. The hero section below contains 3 rows: The top row shows the social media icons (in the top right), the Hero text is currently highlighted in the middle, and there is a new row at the bottom that hasn't been configured yet.

    Column - A vertical layout element that sits inside a row and contains an element within it. You can add multiple columns in a row. Note the new row that I added has 3 columns

     

    Element - Sits inside a column. You can only add one element in a column. Elements include Text, Image, Buttons, etc...

  5. Click on Manage Layout to navigate and modify your layout by adding sections, rows, columns and elements to your landing page template.

    As you hover your mouse over each layout element, it will be highlighted in the editor.

  6. Click on an Element to configure it. Choose the element type from the left side of the page and drag it over. Let's add an image element in the bottom row of our Hero section. Note how the configuration panel slides out from the right side of the page when our new element is selected.

  7. From left to right:

    • You can undo/redo edits that you make,
    • Click on an icon to start editing in Desktop View, Tablet View or Mobile View.
    • Get live help while you are building your Landing Page.
  8. You should now understand the basic structure of a Landing page. In the next article, you'll understand a bit more about how to manage the color scheme throughout your Landing Page.