Landing Page - Main content area

When you see the landing page (front page) of the live demo site, you will see a photo of a tablet being held and then some text content to the right of it. This is the main content area of the page where you can create anything you want by creating or opening this page up in the editor.

The Photo

I simply cropped and sized a photo….nothing overly special, except I made sure my photo had a white background to make it blend into the white background of the page. I aligned the image left and then added a couple animation classes to give it that effect of it sliding into view. Your image HTML code with the classes will look something like this:

<img class="animated zoomInLeft alignleft wp-image-295" src="IMAGE LINK HERE" style="margin-bottom: 0;" alt="fp-mobile" />

Creating Your Page

  1. Go to Pages >> Add New
  2. Title your page to what you want, because we will be using a plugin called Hide Title to hide the title from the front-end view.
  3. Type in a new title for your page by entering it into the page editor and apply the H1 heading to it. Switch to the “Text” tab on the editor so we can add a class to the heading and also add some enhancement embedded styling like this:
    <h1 class="display-3" style="display: inline-block; margin-top: 5%;">Influential is Mobile Responsive</h1>
  4. Your first paragraph will be some text content to be a sort of sub-intro to your page content. When you are done, switch the editor to the Text (HTML) view and add the “lead” class to the paragraph tag like this: <p class="lead">
  5. Now you can start typing in some more content to be your next paragraph.
  6. Now you can create an unordered list of items. Switch to the “Text” view on the editor and add the “featured-list” class to your ul tag: <ul class="feature-list">
  7. Click “Publish” or “Update“

The full page source code in your editor should look like this:

<p><img class="animated zoomInLeft alignleft wp-image-295" src="IMAGE LINK HERE" style="margin-bottom: 0;" alt="fp-mobile" /></p> <h1 class="display-3" style="display: inline-block; margin-top: 5%;">Influential is Mobile Responsive</h1> <p class="lead">Creative design that incorporates the ever popular Bootstrap grid framework to allow adaptation to most if not all mobile devices. Built for phones, tablets, and of course, desktop environments!</p> <p>Integer vulputate tellus magna, et euismod massa bibendum et. Nam suscipit sapien vel tempus iaculis. Quisque scelerisque ante sit amet nulla imperdiet luctus. Donec tempor lacus non sem consequat placerat id nec felis. Nunc interdum mattis turpis et tristique. Mauris tincidunt semper nibh, quis malesuada augue euismod porttitor. Etiam elit ligula, sagittis vestibulum dui elementum, ornare sollicitudin orci.</p> <ul class="feature-list"> 	<li>Amazing blog layouts and styles</li> 	<li>A wide selection of page templates</li> 	<li>Manage your site's typography</li> 	<li>A ton of options and settings from the customizer</li> </ul>