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 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.
But what is the reason to run a webinar? Why should you choose this type of lecture/workshop?
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.
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?
If you do not want to be the only person attending this event, you need to create an advertisement. Don’t forget, if you promote your webinar well - it will promote you and your ideas! Even if you have a low budget, there are some efficient ways to publicize it:
Send emails to potential visitors.
Record a video invitation.
Use Facebook Ads Manager as one of the most effective ways of promotion.
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
Let’s consider the webinar “Advanced SEO in 60 Minutes with Mad Lemmings” as a case study. By the way, feel free to watch it, if you haven’t already - it’s a real pot of gold for a contemporary marketer!
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?
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).
The content itself - texts, images, logo, and favicon.
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.
*Of course, you can also customize all other sections if you have enough content.
Now we need to open the file index.html in the /site/ folder, and edit it section by section - all changes concerning the content will be made here.
Everything concerning styles we’ll change in the style.css file, so you’ll have to open it as well.
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.
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.
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:
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).
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).
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).
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.
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!
This section we’ll rename to ‘You’ll learn’, where we will provide the detailed information about the knowledge that can be obtained during the webinar. The elements we are going to change, are framed and waiting to be changed.
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:
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.
Background-image. The background image is edited like all previous images - by copying the new image to the /images/ folder and changing its name.
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.
<divclass="item"><divclass="slick-slide-inner"><articleclass="post-classic"><imgsrc="images/blog-2-770x330.jpg"alt=""width="770"height="330"class="post-classic-image"/><divclass="post-classic-body"><pclass="post-classic-title"><ahref="single-post.html">AdvantagesandDisadvantagesofCoffee</a></p><divclass="post-classic-text"><p>Itseemsthatoneminutedrinkingcoffeeisbadforyou,thenextminutecoffeeisgoodforyou.Stillnowwithalltheevidencecomingtolightthatit’sgoodforyourhealth,itdoesn’ttake...</p></div><divclass="post-classic-footer"><divclass="post-classic-footer-left"><ahref="single-post.html"class="btn btn-xs btn-primary btn-circle">READMORE</a></div><divclass="post-classic-footer-right"><ulclass="post-classic-meta"><li><spanclass="icon icon-xxs icon-primary fa fa-heart"></span><span>24</span></li><li><spanclass="icon icon-xxs icon-primary fa fa-eye"></span><span>132</span></li><li><spanclass="icon icon-xxs icon-primary fa fa-calendar-plus-o"></span><timedatetime="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:
In this section, we’re going to change the form content, remove ‘Address’ and ‘Opening Hours’ blocks - as we do not need them and change some map properties.
Removing blocks. We simply delete them from the structure:
Map. Usually, webinars do not need location information as they are conducted online. But still, if you want to indicate some place where people can get some of your additional products or services - you may need to customize the map.
Map styles. You can customize map styles yourself or use pre-made styles from Snazzy maps, for example. Just copy the map style and paste as a value of ‘data-styles’ attribute as in the following code box. We change this code:
And, as a result, we've got a totally different map appearance!
Locations. Initially, there are no markers on the map, indicating a certain address. But you can add them quite easily. You can find the unordered list with ‘.map_locations’ class. To add a location, you need to place <li> element inside of it. It should contain coordinates and a paragraph with address, that will appear by clicking the pin marker. Each <li> item is used for one location on the map. You can add as many <li> tags as you need. This is an example of adding a location:
Background color. To change the color of the background, we need to find the class, which determines this color. Footer element has 2 classes - .page-footer and .page-footer-variant-3. The last one has a background-color (background) property, that we have to change:
In the following lightboxes you can observe how the template looked before and how different it looks now:
The process of customizing the template was as simple as it could be. Moreover, it was accomplished in the blink of an eye! Thus, you can save time and tackle other important matters.
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.