How to Make a Boring Design Scream [Customizing a Webinar Landing Page]

Everything begins with an idea.
Earl Nightingale

Probably everyone who has watched this kind of online seminar has thought something like: “I can do this too! I have a laptop and some knowledge to share, so why not? ”

I did:)

I ran my first webinar several months ago, and at that moment I knew almost nothing about webinars and how on earth to host them.

And you know what? That was an awesome experience. If you really love what you’re doing and want to let other people know about it and share your attitude, you will surely prove successful.

When it all started, I had a couple of days to prepare and almost no idea of what was going to happen.

The only thing that was prearranged was the advertising process. Lots of emails were sent, several types of banners were designed and published on the social networks, a video invitation was uploaded to YouTube channel and also shared… A lot of prep work was undertaken, but it was really worth doing! However, there was one thing that could have helped even more. The landing page, promoting the webinar.

And now I can tell you with certainty - the whole process is not as scary or expensive as one might expect.

About Webinars

First of all, let’s discover some of its benefits.

Webinars are becoming more and more popular nowadays because they have a lot of advantages.

The main ones are:

• Webinars are evergreen. Once the webinar is recorded, the visitors can watch it later or download the transcript if they need it.
• It’s a great way to show your expertise, share some helpful knowledge (helping people solve their problem), and drive high-quality leads at the same time.
• It’s a cost-efficient way to promote your products.
• It doesn’t require an extensive network; there’s no need to travel somewhere or even step out of your house to host a webinar.
• You can enhance the awareness of your brand and engage the audience by involving them in conversation and providing them the opportunity to ask questions.
• More than 60% of marketers are using webinars as part of their content marketing strategy. (Source: Content Marketing Institute)
• Among the leading tactics available, webinars are the second most effective type of premium content for marketers. (Source: Ascend 2)

So if you have something to say, if you need to spread the word about your business, if you like helping people or if you just like speaking publicly - a webinar is definitely your choice.
But how can you make people attend your webinar? How can you let them know that you’re going to share your knowledge?

1. Send emails to potential visitors.
2. Record a video invitation.
3. Use Facebook Ads Manager as one of the most effective ways of promotion.
4. Create a landing page describing your webinar, and share the link with everyone via social networks, or email channel.

The last one sounds great, doesn’t it? How difficult is it to do it yourself? But, what problems may occur while creating/customizing the landing page?

A case study

And there’s an article “Advanced SEO in 10 Short Videos [Ashley Faulkes from Mad Lemmings speaking]”, where you can find the most prominent issues in the form of short videos. Let’s imagine we are going to run this webinar and need to promote it.

This time we won’t miss a thing. And even if we already know how to send the emails and publish banners via social networks, we may have no experience creating landing pages.

Let’s suppose we have downloaded a website template, but don’t know how to customize it. This Coffee theme can serve as a great example. After the installation, we’re ready to customize it.

What exactly are we going to change?

Concerning the content: we’ll change all texts (menu, headings, paragraphs, button texts, blurbs) and images (favicon, logo, background images and icons). As for the styles, we’ll edit the primary color which is used for buttons, links, and background colors.

What do we need to put this together?

1. HTML/CSS editor or any IDE tool you’re familiar with (starting from Notepad++ and finishing with most popular IDEs like Sublime and JetBrains WebStorm/PhpStorm).
2. The content itself - texts, images, logo, and favicon.
3. A strong desire to create a cool landing page!

How much time will it take?

You may not believe this, but if you have already prepared all the necessary content, it’ll take you less than an hour to do all the rest.

Let us divide our template into sections - this way we can see which sections we can omit* and decide how to customize those that are left.

Template customization

Everything concerning styles we’ll change in the style.css file, so you’ll have to open it as well.

Section 1

1. Favicon.
   
   To change it, just copy your new favicon.ico file into the /images/ folder and replace the existing one. The only thing - if it has another name or extension, you’ll also need to rename it in the code.
   
   On the next screen, the content elements which should be edited are highlighted.
   
   
   
2. Changing logo.
   
   Let’s find it in the code.
   

   <div class="rd-navbar-panel">
       <button data-rd-navbar-toggle=".rd-navbar-nav-wrap" class="rd-navbar-toggle"><span></span></button>
       <div class="rd-navbar-brand"><a href="index.html" class="brand-name"><img src="images/logo-default-185x41.png" alt="" width="185" height="41"/></a></div>
   </div>
   

   Now we have to copy the new logo into /images/ folder and replace the file name in the highlighted line. Note, that you’ll need to edit the width and height of your new logo.
   
3. Editing menu.
   
   As we don’t need some menu items on our landing page, like, ‘Services’ and ‘Shop’, we can remove them from the page structure.
   Find them in the code, and remove all unnecessary items from the menu list:
   

   <li><a href="about.html">About</a>
       <ul class="rd-navbar-dropdown">
           <li><a href="team.html">Our team</a>
           </li>
           <li><a href="testimonials.html">Testimonials</a>
           </li>
           <li><a href="faq.html">FAQ</a>
           </li>
       </ul>
   </li>
   <li><a href="services.html">Services</a>
   </li>
   <li><a href="blog.html">Blog</a>
       <ul class="rd-navbar-dropdown">
           <li><a href="single-post.html">Single post</a>
           </li>
       </ul>
   </li>
   <li><a href="shop.html">Shop</a>
       <ul class="rd-navbar-dropdown">
           <li><a href="single-product.html">Single product</a>
           </li>
           <li><a href="cart.html">Cart</a>
           </li>
           <li><a href="checkout.html">Checkout</a>
           </li>
       </ul>
   </li>
   <li><a href="#">Contacts</a>
       <ul class="rd-navbar-dropdown">
           <li><a href="contacts-1.html">Contacts 1</a>
           </li>
           <li><a href="contacts-2.html">Contacts 2</a>
           </li>
       </ul>
   </li>
   
4. Background-image.
   
   Copy the new background image into /images/ folder (as you did with the logo) and rename the selected image title.
   It’s not difficult to find the first section by its heading (h1 tag).
   

   <section style="background-image: url(images/bg-image-4.jpg);" class="jumbotron-custom jumbotron-custom-2 bg-gray-base bg-image">
       <div class="jumbotron-custom-content">
           <div class="shell">
               <div class="range">
                   <div class="cell-sm-10 cell-md-9 cell-lg-7">
                       <h1>Elite Coffee Brands</h1>
                       <p class="large">Coffee Shop is the place where you can get flavorful coffee strains from global elite brands and roasters at very affordable price.</p>
                       <a href="about.html" class="btn btn-style-1 btn-primary">read more</a>
                   </div>
               </div>
           </div>
       </div>
   </section>
   
5. By the way, the h1 heading, the paragraph, which follows it, and the button text - can also be changed here.
   

   <section style="background-image: url(images/bg-image-4.jpg);" class="jumbotron-custom jumbotron-custom-2 bg-gray-base bg-image">
       <div class="jumbotron-custom-content">
           <div class="shell">
               <div class="range">
                   <div class="cell-sm-10 cell-md-9 cell-lg-7">
                       <h1>Elite Coffee Brands</h1>
                       <p class="large">Coffee Shop is the place where you can get flavorful coffee strains from global elite brands and roasters at very affordable price.</p>
                       <a href="about.html" class="btn btn-style-1 btn-primary">read more</a>
                   </div>
               </div>
           </div>
       </div>
   </section>
   
6. Now let’s change the color which is used for buttons, links, icons and form labels - the primary color.
   
   Open the /css/ folder and open the file ‘style.css’ for editing. Search for ‘.text-primary’ class and copy the hex color which is assigned to it. Using the text auto-replacement feature of your editor, replace it with the hex color you’ve chosen as a primary for your landing page. When all 129 occurrences are replaced, change the hover color (the second underlined on the screenshot) - it should differ slightly from the primary color (darker or lighter).
   

   .text-capitalize {
     text-transform: capitalize;
   }
   .text-muted {
     color: #999;
   }
   .text-primary {
     color: #ce6d06;
   }
   a.text-primary:hover,
   a.text-primary:focus {
     color: #9c5305;
   }
   

After these changes are made we can view the result of customizing the first section:

Section 2

1. Texts.
   
   Find this section in the code by its heading and replace the text selected on the screenshot with the new ones (the same way as in the previous section).
   

   <section class="section-xl bg-periglacial-blue text-center text-md-left">
       <div class="shell-fluid shell-condensed">
           <div class="range range-md-reverse range-xs-middle range-md-right range-50">
               <div class="cell-md-5 cell-lg-4">
                   <div class="inset-1">
                       <h2>WHO WE ARE</h2>
                       <div class="p text-width-smallest">
                           <p class="big">We are a team of dedicated coffee fans who celebrate exceptional coffee brands and roasters by providing our guests the unique opportunity to try coffee drinks of the highest quality.</p>
                       </div>
                       <a href="about.html" class="btn btn-sm btn-style-1 btn-primary">learn more</a>
                   </div>
               </div>
               <div class="cell-md-7 cell-lg-6">
                   <div class="row row-gutter-custom range-15">
                       <div class="col-xs-4">
                           <figure class="figure-fullwidth"><img src="images/about-1-300x460.jpg" alt="" width="300" height="460"/></figure>
                       </div>
                       <div class="col-xs-4">
                           <figure class="figure-fullwidth"><img src="images/about-2-300x460.jpg" alt="" width="300" height="460"/></figure>
                       </div>
                       <div class="col-xs-4">
                           <figure class="figure-fullwidth"><img src="images/about-3-300x460.jpg" alt="" width="300" height="460"/></figure>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </section>
   
2. Images.
   
   Let’s see how we can make two of them instead of three. Select one <div> element with the class .col-xs-4 and delete it. Previous blocks containing images now should have the class .col-xs-6 (as there are two of them left).

   <div class="cell-md-7 cell-lg-6">
       <div class="row row-gutter-custom range-15">
           <div class="col-xs-4">
               <figure class="figure-fullwidth"><img src="images/about-1-300x460.jpg" alt="" width="300" height="460"/></figure>
           </div>
           <div class="col-xs-4">
               <figure class="figure-fullwidth"><img src="images/about-2-300x460.jpg" alt="" width="300" height="460"/></figure>
           </div>
           <div class="col-xs-4">
               <figure class="figure-fullwidth"><img src="images/about-3-300x460.jpg" alt="" width="300" height="460"/></figure>
           </div>
       </div>
   </div>
   

   Next, we replace the images. We’ll use the portraits of the participants of our webinar - Ashley Faulkes and Jeff Bell. Rename the image files used in the code and don’t forget to copy new files to the /images/ folder.
   

   <div class="cell-md-7 cell-lg-6">
       <div class="row row-gutter-custom range-15">
           <div class="col-xs-6">
               <figure class="figure-fullwidth"><img src="images/about-1-300x460.jpg" alt="" width="300" height="460"/></figure>
           </div>
           <div class="col-xs-6">
               <figure class="figure-fullwidth"><img src="images/about-2-300x460.jpg" alt="" width="300" height="460"/></figure>
           </div>
       </div>
   </div>
   
3. The background color.
   
   It can also be changed with a slightly lighter tint.The class which determines this color is highlighted in the following screenshot.

   <section class="section-xl bg-periglacial-blue text-center text-md-left">
   

   We should find it in the ‘style.css’ file, copy the hex color assigned to it, and again, using the auto-replacement, substitute 4 occurrences with the new color.
   And this is how this section looks like after being changed!
   
   
   

Section 3

1. Texts.
   
   The way of editing is still the same - find the section in the code and edit it. The texts which are meant to be replaced in this section are highlighted in the following code box:
   

   <section class="bg-gray-dark">
       <div class="shell-fluid shell-condensed">
           <div class="range range-condensed">
               <div class="cell-md-6 cell-md-6-mod-1 image-wrap-left bg-gray-dark">
                   <div class="image-wrap-inner">
                       <h2>OUR<br>SERVICES</h2>
                       <p class="big">We provide a variety of services both to our new and regular customers. If you can think of anything connected with coffee, then we can offer it at our Coffee Shop.</p>
                       <a href="services.html" class="btn btn-style-1 btn-primary">read more</a>
                   </div>
               </div>
               <div style="background-image: url(images/home-three-3-1011x800.jpg)" class="cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image">
                   <div class="image-wrap-inner">
                       <div class="range range-condensed range-inner-bordered">
                           <div class="cell-xs-6">
                               <article class="box-icon">
                                   <figure class="box-icon-image"><img src="images/icon-service-3-84x84.png" alt="" width="84" height="84"/></figure>
                                   <p class="box-icon-header"><a href="services.html">SELECTED coffee beans</a></p>
                                   <p class="box-icon-text">Enjoy the aroma of selected coffee beans available at our shop.</p>
                               </article>
                           </div>
                           <div class="cell-xs-6">
                               <article class="box-icon">
                                   <figure class="box-icon-image"><img src="images/icon-service-4-84x84.png" alt="" width="84" height="84"/></figure>
                                   <p class="box-icon-header"><a href="services.html">elite coffee</a></p>
                                   <p class="box-icon-text">Take a sip of Elite Coffee, and  revel in the different tastes.</p>
                               </article>
                           </div>
                           <div class="cell-xs-6">
                               <article class="box-icon">
                                   <figure class="box-icon-image"><img src="images/icon-service-1-84x84.png" alt="" width="84" height="84"/></figure>
                                   <p class="box-icon-header"><a href="services.html">Tasty coffee</a></p>
                                   <p class="box-icon-text">At Coffee Shop you can find lots of tasty coffee flavors.</p>
                               </article>
                           </div>
                           <div class="cell-xs-6">
                               <article class="box-icon">
                                   <figure class="box-icon-image"><img src="images/icon-service-2-84x84.png" alt="" width="84" height="84"/></figure>
                                   <p class="box-icon-header"><a href="services.html">cooking coffee</a></p>
                                   <p class="box-icon-text">If you prefer to cook coffee, we have something special for you.</p>
                               </article>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </section>
   
2. Blurb icons/images.
   
   To change the image, just copy the new one into the folder /images/ and change its file name in the code.
   

   <div class="cell-xs-6">
       <article class="box-icon">
           <figure class="box-icon-image"><img src="images/icon-service-3-84x84.png" alt="" width="84" height="84"/></figure>
           <p class="box-icon-header"><a href="services.html">SELECTED coffee beans</a></p>
           <p class="box-icon-text">Enjoy the aroma of selected coffee beans available at our shop.</p>
       </article>
   </div>
   

   If you prefer, you can use not only images here, but also icon fonts. In this case you should implement them properly, using <i> or <span> tags instead of the <img> tag and adding the required styles in style.css file.
   
3. Background-image.
   
   The background image is edited like all previous images - by copying the new image to the /images/ folder and changing its name.
   

   <div style="background-image: url(images/home-three-3-1011x800.jpg)" class="cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image">
       <div class="image-wrap-inner">...</div>
   </div>
   
4. Background-color.
   
   In the code let’s find the class, which sets the background-color for this section:
   

   <section class="bg-gray-dark">
       <div class="shell-fluid shell-condensed">
           <div class="range range-condensed">
               <div class="cell-md-6 cell-md-6-mod-1 image-wrap-left bg-gray-dark">...</div>>
               <div style="background-image: url(images/home-three-3-1011x800.jpg)" class="cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image">...</div>>
           </div>
       </div>
   </section>
   

   In the ‘style.css’ file we’re searching for this ‘.bg-gray-dark’ class and changing the hex of its background-color property to the one that fits our style.

And this is the result of customizing the third section:

Section 4

1. Section title and description.
   
   The process is still the same - the highlighted text is replaced.
   

   <section class="section-lg bg-periglacial-blue text-center">
       <div class="shell">
           <div class="range range-sm-center range-75">
               <div class="cell-xs-12">
                   <h2>latest blog posts</h2>
                   <div class="p text-width-medium">
                       <p class="big">Coffee Shop is not only a place where you can get a hot and tasty coffee. Our team members also write interesting articles on everything concerning coffee.</p>
                   </div>
               </div>
               <div class="cell-xs-12">...</div>
           </div>
       </div>
   </section>
   
2. Post content.
   
   And this is how each post can be edited - the post image should be changed (and the file copied to /images/ folder). Its title, description, button text, and meta information - the number of likes, views and the date of publication - are also replaced.
   

   <div class="item">
       <div class="slick-slide-inner">
           <article class="post-classic"><img src="images/blog-2-770x330.jpg" alt="" width="770" height="330" class="post-classic-image"/>
               <div class="post-classic-body">
                   <p class="post-classic-title"><a href="single-post.html">Advantages and Disadvantages of Coffee</a></p>
                   <div class="post-classic-text">
                       <p>It seems that one minute drinking coffee is bad for you, the next minute coffee is good for you. Still now with all the evidence coming to light that it’s good for your health, it doesn’t take...</p>
                   </div>
                   <div class="post-classic-footer">
                       <div class="post-classic-footer-left"><a href="single-post.html" class="btn btn-xs btn-primary btn-circle">READ MORE</a></div>
                       <div class="post-classic-footer-right">
                           <ul class="post-classic-meta">
                               <li><span class="icon icon-xxs icon-primary fa fa-heart"></span><span>24</span></li>
                               <li><span class="icon icon-xxs icon-primary fa fa-eye"></span><span>132</span></li>
                               <li><span class="icon icon-xxs icon-primary fa fa-calendar-plus-o"></span>
                                   <time datetime="2016-08-26">26.08.2016</time>
                               </li>
                           </ul>
                       </div>
                   </div>
               </div>
           </article>
       </div>
   </div>
   

   Please note, that in order for the posts to appear correctly (like in the original template), there should be at least four of them in the HTML structure. To add more posts, just duplicate the element with ‘.item’ class and modify it according to your needs.
   

The modified section looks like this:

Section 5

1. Removing blocks.
   
   We simply delete them from the structure:
   

<section class="box-wrap box-wrap-md bg-white">
    <div class="box-wrap-map">
        <div data-zoom="14" data-styles="[{&quot;featureType&quot;:&quot;administrative&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;saturation&quot;:&quot;-100&quot;}]},{&quot;featureType&quot;:&quot;administrative.province&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;off&quot;}]},{&quot;featureType&quot;:&quot;landscape&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;saturation&quot;:-100},{&quot;lightness&quot;:65},{&quot;visibility&quot;:&quot;on&quot;}]},{&quot;featureType&quot;:&quot;poi&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;saturation&quot;:-100},{&quot;lightness&quot;:&quot;50&quot;},{&quot;visibility&quot;:&quot;simplified&quot;}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;saturation&quot;:&quot;-100&quot;}]},{&quot;featureType&quot;:&quot;road.highway&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;simplified&quot;}]},{&quot;featureType&quot;:&quot;road.arterial&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;lightness&quot;:&quot;30&quot;}]},{&quot;featureType&quot;:&quot;road.local&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;lightness&quot;:&quot;40&quot;}]},{&quot;featureType&quot;:&quot;transit&quot;,&quot;elementType&quot;:&quot;all&quot;,&quot;stylers&quot;:[{&quot;saturation&quot;:-100},{&quot;visibility&quot;:&quot;simplified&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;hue&quot;:&quot;#ffff00&quot;},{&quot;lightness&quot;:-25},{&quot;saturation&quot;:-97}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;labels&quot;,&quot;stylers&quot;:[{&quot;lightness&quot;:-25},{&quot;saturation&quot;:-100}]}]" class="rd-google-map rd-google-map__model">
            <ul class="map_locations"></ul>
        </div>
    </div>
    <div class="box-wrap-content">
        <div class="shell">
            <div class="range">
                <div class="cell-xs-12">
                    <div class="box-contacts box-contacts-horizontal box-wrap-content-interactive block-right">
                        <div class="box-contacts-col">
                            <div class="box-contacts-block">
                                <h3>Address</h3>
                                <address>123 Street W, Seattle WA 99999 United States</address>
                            </div>
                            <div class="divider divider-nebula"></div>
                            <div class="box-contacts-block">
                                <h3>Opening Hours</h3>
                                <dl class="box-contacts-terms-list">
                                    <dt>Monday – Friday</dt>
                                    <dd>9am - 6pm</dd>
                                    <dt>Saturday and Sunday</dt>
                                    <dd>10am - 4pm</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="box-contacts-col box-contacts-right">
                            <div class="box-contacts-block">
                                <h3>Get In Touch</h3>
                                <p>Leave your name and phone number, and we’ll contact you.</p>
                                <form data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php" class="rd-mailform">
                                    <div class="form-group">
                                        <label for="contact-full-name" class="form-label-outside">Full Name</label>
                                        <input id="contact-full-name" type="text" name="name" data-constraints="@Required" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="contact-phone" class="form-label-outside">Telephone</label>
                                        <input id="contact-phone" type="text" name="phone" data-constraints="@Required @Numeric" class="form-control">
                                    </div>
                                    <button type="submit" class="btn btn-sm btn-primary btn-block btn-circle">SEND REQUEST</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

.box-contacts {
    max-width: 770px;
}
.box-contacts-horizontal {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

<div class="box-contacts-col box-contacts-right">
    <div class="box-contacts-block">
        <h3>Get In Touch</h3>
        <p>Leave your name and phone number, and we’ll contact you.</p>
        <form data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php" class="rd-mailform">
            <div class="form-group">
                <label for="contact-full-name" class="form-label-outside">Full Name</label>
                <input id="contact-full-name" type="text" name="name" data-constraints="@Required" class="form-control">
            </div>
            <div class="form-group">
                <label for="contact-phone" class="form-label-outside">Telephone</label>
                <input id="contact-phone" type="text" name="phone" data-constraints="@Required @Numeric" class="form-control">
            </div>
            <button type="submit" class="btn btn-sm btn-primary btn-block btn-circle">SEND REQUEST</button>
        </form>
    </div>
</div>

<div style="background-image: url(images/home-three-3-1011x800.jpg)" class="cell-md-6 cell-md-6-mod-2 image-wrap-right bg-gray-dark bg-image">
    <div class="image-wrap-inner">...</div>
</div>

We’ve customized the ‘Contacts’ section and can now observe the result:

Section 6

1. Links.
   
   As we do not need some sections, we remove the links in the footer, too:
   

<footer class="page-footer page-footer-variant-3">
    <div class="shell">
        <div class="range range-50">
            <div class="cell-sm-6 cell-md-4">
                <h3>Pages</h3>
                <div class="divider divider-conch"></div>
                <ul style="max-width: 390px;" class="footer-navigation row footer-navigation-vertical">
                    <li class="col-xs-6"><a href="index.html">Home</a></li>
                    <li class="col-xs-6"><a href="blog.html">Blog</a></li>
                    <li class="col-xs-6"><a href="about.html">About</a></li>
                    <li class="col-xs-6"><a href="shop.html">Shop</a></li>
                    <li class="col-xs-6"><a href="services.html">Services</a></li>
                    <li class="col-xs-6"><a href="contacts-1.html">Contacts</a></li>
                </ul>
            </div>
            <div class="cell-sm-6 cell-md-5">...</div>
            <div class="cell-sm-6 cell-md-3">...</div>
        </div>
    </div>
</footer>

<div class="cell-sm-6 cell-md-5">
    <h3>Description</h3>
    <div class="divider divider-conch"></div>
    <div class="text-highlighted-wrap">
        <p class="text-highlighted">Coffee Shop is a cosy place where friends meet to share coffee, cakes and light meals. At night, it is transformed into a vibey eatery.</p>
    </div>
</div>

.page-footer.page-footer-variant-3 {
  padding: 60px 0;
  background: #403832;
}

.page-footer {
  background: #fff;
  color: #a29d9a;
}

<div class="cell-sm-6 cell-md-3">
    <h3>Follow Us</h3>
    <div class="divider divider-conch"></div>
    <ul class="inline-list inline-list-xs">
        <li><a href="#" class="icon icon-xs-outline icon-wild-sand-filled icon-circle fa-facebook"></a></li>
        <li><a href="#" class="icon icon-xs-outline icon-wild-sand-filled icon-circle fa-twitter"></a></li>
        <li><a href="#" class="icon icon-xs-outline icon-wild-sand-filled icon-circle fa-youtube"></a></li>
        <li><a href="#" class="icon icon-xs-outline icon-wild-sand-filled icon-circle fa-linkedin"></a></li>
    </ul>
    More Coffee Shop Website Templates at <a rel="nofollow" href="http://www.templatemonster.com/category/coffee-shop-website-templates/" target="_blank">TemplateMonster.com</a>
</div>

.page .icon-wild-sand-filled, .page .icon-wild-sand-filled:active, .page .icon-wild-sand-filled:focus {
  color: #fff;
  background: #645e59;
}

.page .icon-wild-sand-filled:hover {
  color: #fff;
  background: #ce6d06;
}

And now… we have our new footer!

The output

If you have no time to lose or you’re just pressed for time, you always can order the tune-up of your site at TM Service Center. With its help you can bring all your ideas to life, obtaining effortless and cost-effective services within the shortest period of time.

If you’re at a loss choosing a suitable template, thousands of marketing templates them are waiting for you at TemplateMonster.

Template from the tutorial - Coffee Shop Multipage Website Template

Demo | Download

I hope you found this tutorial helpful, and don’t hesitate to ask questions if you have any.

I’m sure your first webinar will bring the grist to the mill and your visitors will ask for more!

Related posts

Designing Landing Pages to Maximize Conversions
12 Simple Landing Page Jobs on Upwork to Earn $3500+ in 2 Weeks
Let’s Analyze 100 Successful Landing Pages: Statistics and Food for Thought
You Have a Knack For Creating a Landing Page That Converts [You Just Don’t Realize That]
Generate Income from Leads with MotoCMS 3.0 Landing Page
Please Welcome the Brand New MotoCMS Landing Page Builder
15 Landing Page Builders to Break Free from Coding
Extensive Guide on Creating a Persuasive Landing Page [Free eBook]