This article will focus on creating a static page which can be used as a landing page for your marketing campaigns. We will go over Bootstrap CSS classes, adding images to the page, adding paragraphs to the page, and modifying the position of the elements using Bootstrap classes.
Since the Brilliant Directories platform is build using this Bootstrap CSS framework, you do not need to worry about linking this new page to Bootstrap through the head section, as this has already been done. When creating a new static page in your Brilliant Directories you will already have the HEAD, the header and the footer of your site included, meaning there is no need to add this to static pages either.
These are the steps necessary to take care of this.
First we will create the page, to do this you will navigate to "Content" -- "Add New Page", like this:
Once the page has been created, a permalink should be added. Please ensure that this is unique, that is one word, if you need more than one word make sure to use dashes, and most important of all, please make sure that the permalink is not used in one of the already created features of your directory:
The page has already been successfully created, now we will move to the good stuff, adding the content. In this article we will cover a very basic static page, and you will have the code at your disposal, so let's get coding.
To add the first fold of the page, we will create a container, a row, a div with the class of "col-lg-12" and finally another div that holds a few links, this would be a great place to add calls to action, such as "Join", "Contact", "More Info" etc etc. The code for the first fold will include an image a title, a sub-title and the links. This is the code:
The first fold and welcome message has been created, on to the rest of content of the page. For these sections we will keep creating containers, that hold rows, which then are filled with divs. These sections work great to share information about your marketing campaign, your website and any message that will transmit security and entice your website visitors to upgrade to a paying membership level. Great place to explain benefits of your directory and your unique selling proposition. The containers will hold a paragraph, an image and some links, again the main intention here is to create clear calls to action (CTA). One great feature of this framework is that if you need to create more paragraphs or sections, you can simply copy the entire container and re-use it in the same page. This means that you will simply need to modify the images and the hrefs and you will have a whole new static page. Here is the code that is used in the content section of this static page:
To finish up this landing page, we will create a new section to add some more links and CTAs. This is the last section of your page, we recommend adding clear calls to action (CTA) that will guide your visitors, either to fill out a form, or to share information with you, or to join your directory or at least to contact you through a message. This section is build using a container and a row, same as before. This section also has an unorder list, with the different links that will be your CTA. This is the code:
This is a very easy set up of a very useful landing page, which you can fill with Calls to Action, and explanations about your marketing campaigns and the value behind being a part of your directory. We will share the code for this page upon your request. Please email email@example.com in case you want to have a copy of this code added to your site.