No announcement yet.

Creating Custom Landing Pages in vBulletin 5 Connect


  • Creating Custom Landing Pages in vBulletin 5 Connect

    One of the largest new features in vBulletin 5 Connect is the Site Builder. It allows you to customize your site like never before. The Site Builder is a refinement of the Layout and Widget system used for the CMS in the vBulletin 4 Publishing Suite. With it you can customize most pages and create custom pages. One of the purposes of a custom page is to create landing pages for your website. These can be used to track advertising campaigns, provide various entry points or test new layouts easily.

    To do this, we need to open Site Builder and create a New Page. You can do this from any location on your vBulletin 5 Connect Site. Let's get started.

    1. First make sure Site Builder is turned on by clicking the toggle to the left of your Username in the header of the page.
    Click image for larger version

Name:	Site Builder Off.png
Views:	1
Size:	3.1 KB
ID:	3690600

    2. Now your header should look like this:
    Click image for larger version

Name:	Site Builder On.png
Views:	1
Size:	8.2 KB
ID:	3690601

    3. Click on New Page.

    4. The system will give you a new one column page with three sections on it and show the Add Modules portion of the Page Builder. We're not going to add any modules just yet. First click on the "Choose Layout" tab and select the 30/70 Two Column layout. Your page should look like this now:
    Click image for larger version

Name:	chooseme.png
Views:	1
Size:	7.3 KB
ID:	3690602

    5. Now let's go back to the Add Module tab and add some modules. The top of your screen should look similar to this:
    Click image for larger version

Name:	modules.png
Views:	1
Size:	5.3 KB
ID:	3690603

    6. In the top section let's put the Announcement Module. Announcements are a good way to provide information to your users.

    7. In the left column, lets add an tag cloud, ad module, online users and the today's birthdays module.

    8. In the main column add the Static HTML Module and the Activity Stream Module.

    Note: To add modules, click on them and drag them into the location you want them. Once positioned in the order you like them, drop them.

    9. Once you have your modules positioned we're going to save our work. So let's click "Save Page" at the top. Give the page a name like "My Custom Landing Page". Notice the URL will automatically fill in. If you wish you can change it but let's keep it for now. You'll also have to specify a template name. So name your template Custom Landing Page, in case you want to use it again.

    10. Click the Save Button.

    11. Now you can edit the page again to configure your modules as desired. As you save each one it saves it configuration. While you don't need to resave the page again when done, I always do just to make sure the changes take effect immediately.

    Repeat the steps above for each page you want to create. Use the URL created when the page is saved to add the page to your navigation and share the landing page in campaigns.
      Posting comments is disabled.

    Related Topics