WEEK4: WEEK:3 DIGITAL MARKETING

Module:8::Using WordPress Plug-ins

Presenter:
Dr. Tejinderpal Singh
Associate Professor
University Business School
Panjab University Chandigarh
Video-1

Hi, hope you are doing well!

In the last module we have prepared a draft of our website. But we have to admit that our website
is not looking that great as it should be. Many important features are missing in our website such
as contact form, sliders, security features as so on….. Actually to add additional features, we
have to learn about Plug-ins and their functionality. Therefore, in this module will learn about
Plug-ins in the detail.

Specifically in this module you will learn

1. What is a WordPress Plug-in?
2. How to install and use various Plug-ins in a WordPress site
3. How to work with Elementor Page builder plug-in

Let us begin
The obvious question in mind is what are Plug-ins?
According to WPBeginner “A plugin is a piece of software, containing a group of functions that
can be added to a WordPress website. Plug-ins can extend functionality or add new features to a
WordPress websites.
There are two types of Plug-ins i.e Free and Premium plug-ins
In this module, just for learning purpose, we will discuss few free Plug-ins. Once you become an
expert in digital marketing, you may think to upgrade to the premium versions of Plug-ins that
will open the way to use having some additional features of those Plug-ins

HOW TO INSTALL PLUG-INS

WEEK4: WEEK:3 DIGITAL MARKETING

The process of installing the WordPress plug-in is very simple.

Go to plug-ins from WordPress dashboard, Click on add new
Here is the list of Plug-ins
You may filter the Plug-ins on the basis of features, popularity, recommendations. You may also
set your favorite Plug-ins for future use
You may also use the Search option to select an appropriate plug-in out of the millions of Plug-
ins waiting for you to be used.
Plug-ins are so versatile in nature. Just think about any additional feature or anything else you
want to do with your website the plug-in will be there for you. Type one or two keywords in the
search bar and a long list of Plug-ins will be shown
Suppose, I want to add contact form to my website to enable my visitors to submit their queries
or comments online. Just Search for contact form in the search bar. It will show you many Plug-
ins for this purpose. My favorite is Contact form 7. You can check the popularity of any Plug-
ins on the basis of number of active installations and the ratings. Want to learn more about the
Plug-ins click more details.
Let us install it by clicking install now. Once installed click activate. You may see list of all the
plug-ins just by clicking installed Plug-ins. Make sure your installed plug-in is visible in this list.
Let us create a contact page first.
Go pages, add new page.
Give a suitable title like contact us, ask us, contact me and so on..
Write something specific if you want like if you have any query write to us here
Now click on add block
Here we have use the short code.
Select short code. If it is not visible, then search for short code
You have to enter the short code here.
Where is the short code?
Go to Contacts and click contact form
Here you will see the short code, Select and copy it.
Go back to all pages.
WEEK4: WEEK:3 DIGITAL MARKETING

This is the page that you have just created. Click edit and paste this code here. Your contact form
is ready. Let us preview it.
You can see important fileds like name, mail, subject, and message all are automatically created.
Once you will publish it, it will be visible to yours visitors or customers.
But where is it on my website?
It will not be visible until you link this page to something else on the website. One way is: We
can show it in the menu.
Follow the process of adding any item to the menu.
From appearance go to customize, Click to primary menus and click + sign to add it to menu.
Let us check it on Website.
Yes it is there and is working.
There are few more popular Plug-ins for contact form like WP Form, Gravity form etc.
Just play around these Plug-ins.
That is all. You have learnt how to add Plug-in.
HOW TO ADD SLIDERS TO HOME OR ANY PAGE OF YOUR WEBSITE
What is a Slider?
Sliders are slide show added to a webpage mostly with images and sometime videos too.
Look here this is an example of slider. You can move the slide one by one or automatically.
Seems very attractive, and catchy (https://smartslider3.com/gradient-slider/)
It will improve the aesthetic look of your website.

Let us see how to add it.

For this purpose you have to add Plug-In Smart Slider 3
Follow the same process to install the Plug-in
Plug-in, ad new
Search for Smart Slider 3. It is here four 4 lakh + installations.
Install and activate
You will see Smart Slider 3 is here.
This is the dashboard of smart slider
You can create the slider from scratch or use the template library
Let us create from scratch.
WEEK4: WEEK:3 DIGITAL MARKETING

Give name to the slider. Use full width and create

Now you have to add images here.
You may simply drag and drop images here or

Click Add slide, images and select from media . If image are not in media then you have to
upload the images first to library. Then use it. ok
Our 4 images are added to the slider. Here are bunch of settings to customize the slide slider. Just
play around these settings.
Now let us add it to the page first.
Copy this code and save the slider. Remember the name
Create a new page or you may add the slider to the exiting page also
Add a short code block using + sign.
Check the preview before you publish it
You can also use this to design beautiful sliders.
Import the template
Edit the slides as per your requirements
From slider, copy the code and paste it here.
Your slider is here.
I hope these two plug-ins have given you a fair idea about what plug-ins are? and how their
power can be leveraged to make our sites beautiful. In the next video I will discuss few more
plug-ins

Video-2

In continuation to the previous video, we will discuss few more WordPress Plug-ins in this video
like Social share and Under Construction plug-in. Let us start.

HOW TO ADD SOCIAL SHARE PLUG-IN

As we all know, Social Media is emerging as new tool of marketing and it is expected that your
content should be share on social media to the maximum level. For this purpose, we have to
provide an option to the readers of your content to share it immediately on various social media
platforms like Facebook, Twitter, Instagram etc.
WEEK4: WEEK:3 DIGITAL MARKETING

Like this one (https://bloggingwizard.com/top-WordPress-social-sharing- Plug-ins-2014/)

For this purpose, install and activate the Plug-in, Social Snap Lite
Now to use it, go to Social Snap Lite settings. Here on left hand side you can see the settings
and on right hand side you will see the live preview that will help you to take an appropriate
decision.
We will work on social share settings.
First mange networks
Here is the list of default and popular social media icons. These will be visible in your website. If
you want to add more icons, use this add network option and out of the available options again
use this + sign to add them. You can also remove by clicking X sign. This is how it will look
like.
By using these settings you may
Change the position left or right
Change the button shape of icons
Increase or decrease the button size
This is important where you want to show the icons. I selected only post.
Then we have the button spacing
Total count
Share count
Once you will make these settings
Click save changes
Let us see it on our website
Open any post of your website
Yes it is there
Let us see are they working
First is Facebook, yes I can share it on my Facebook
Twitter: Yes, I can share it on twitter
Yes it is working
Any other icon: yes it is working
WEEK4: WEEK:3 DIGITAL MARKETING

You can also enable inline buttons. Your icons will be shown in horizontal view. You may
change the setting according to your preference and save changes. Let us see it
Yes it is there

I will suggest you to use either side bar or inline icons. Use of both will clutter your website
You may also enable the on -line media. User can share it on Pinterest as well
HOW TO USE UNDER CONSTRUCTION WEBSITE PLUG-INS
You must have noticed that everything goes live during the process of website development. The
half cooked website is visible to your audience and it may give very bad impression to them
because thing are not finalized yet.
Now what I want, during the development process my website should not be visible and it should
show the message “under construction” or any other customized message till the website
development process is completed.
For this purpose, install the Plug-in Under Construction (show the process in fast mode)
Now to create beautiful under construction page
Go to the plugging setting from installed Plug-ins,.
Enable under construction mode and select the design and save changes
Now open you website in incognito window. Yes it is working
Now you can finish your work calmly
Once the work of website is completed, then go back to under construction Plug-in  Setting
and off the under construction mode and save changes. Let us check it. Yes we are back.
Now the important point, if you are logged into WordPress, you will be able to view your
website live even if under construction mode is activated but not others.
So this was the basic introduction to various Plug-ins. Try to experiments with few more Plug-
ins to understand their role in the website development.

: Video-3
PAGE BUILDER PLUG-INS: THE ELEMENTOR
WEEK4: WEEK:3 DIGITAL MARKETING

Hi, in this video I am going to discuss with you one the most powerful Plug-in of WordPress for
web designing and the name of this plug-in is Elementor. This is an amazing page builder, it
will totally transform the way you are designing the websites. It so impressive, even you will not
believe that the website using Elementor is designed by yourself.
There is no limit to it , just think about anything creative, Elementor will do it for you. Once
you will understand the working of Elementor, believe me, you can start offering professional
website development services to your clients as well.
Look at this website,
It is beautiful and it has been designed with the help of Elementor Plug-in.
It has logo, header, full secreen background image, fancy headline with changing keywords and
a button
When scroll down you can see the paralex effect
Here, we have three different sections with heading, content and images
Next we have process, entering with animations. Four different sections are there with logo,
heading and text
Here is the “team” have one image heading and content
Wow, beautiful counter are there. This looks beautiful.
This is portfolio section having beautiful slider
Lastly we have Contac us and Map.
You can also notice that when we click any menu item it takes us to the respected section like
this.
It is just a demonstration; there are immense possibilities of Elementor to make your web site a
professional looking website.
Now we are going to design a similar website using various features of Elementor. Don‟t be
afraid accept the challenge
Now guess what will I do!! Yes you have rightly guessed. I will install the plug-in, Elementor
By this time, you know how to install Plug-in. Just install the Plug-in Elementor
.Your Plug-ins is installed
Let us create first, the home page
Here we need backgroung image, this headline and this button
WEEK4: WEEK:3 DIGITAL MARKETING

Make sure you are working under OceanWP theme and you have installed Ocean WP extra plug-
in,
Let us see the preview first. It shows me side-bar that I don‟t want. I need a full width page. Let
us change few setting
From OceanWP Setings, Main, content layout, change it to 100 % full width. Let us see the
preview now. Yes sidebar has gone. Now edit this page with Elementor
A new window with new interface will be opened
Now this is the place where a magic will happen
In this area you will see the live preview of your website. You may divide this page into different
sections each section may contain different elements.
On left side, we have elements. We can use them by simply dragging and dropping them.

HOW TO INSERT A SECTION

What is a section?
A section is like a block in Gutenberg editor. Each section has its own properties and it may host
multiple elements like images, text, videos, headings etc.
This is one section, this is another section. You can create multiple sections in a given web page.
To create a section click + sign, Choose the structure or how many columns you want. As I need
full screen so I will select this one.
You can see your section is created, notice new settings have appeared for this section in the left
hand side pan.
We have to place image in the background like this
Now from the edit section click style
And select the background
We have three option, classic, gradient and video
We will use the classic and select the image
Select an image from media gallery
The image Is not properly visible
Change the size to cover and from layout section
From layout - Content width to full
And height fit to screen
WEEK4: WEEK:3 DIGITAL MARKETING

Wow, a beautiful image is added

And stretch the section
If you think the image contrast is high or glittering, Form layout you may use background
overlay.
From Classic
Set the colour to black
Click CSS filter
And use opacity to increase or decrease the overlay transparency
Once satisfied click update.
Use this arrow to preview your website
Now it looks better
HOW TO INSERT LOGO
Inserting Logo
Now let us enter this type of logo
Select element form here, Use this image element, Drag to preview section, once fat blue line
appears drop it. Set the image size to custom and set 200X200 pixels and select the image
You can also change the alignment
If you further want to increase or decreased the size of this image, Use style and adjust it from
width
Update it
Our logo is added, now enter this headline
By using this button you can go back to the elements
Now, we will use text heading button
Drag it to this section; once this fat blue line appears drop it
Element is added, no let us customize.
Notice every element has three sections, Content, Style and Advance
Let us customize the content
Type: We design your space
Make the content centre aligned
Now to change the font, font size and colour we will use “style” section of this element
First text colour, make it white or adjust according to color combination
WEEK4: WEEK:3 DIGITAL MARKETING

Use the typography to change font settings

Change the font from family
Increase the size by sliding it left or right
Weight is how much bold text you want like on 100 and on 600 it will look like. Set it to 300
Transform to upper cases
Letter spacing is important
Adjust the space within Characters
How to make it animated with different words, I will explain it in a while
Now let use insert this button
From element section, drag and drop once blue line appears.
First make it centralized
Let us make it more beautiful
Go to style and typography, Change font, font size or color from here. Change the background
color
You can also change the hover effects, means, how should it react when I take my cursor on it
You can change text colour
Background colour
Hover animation just see it
You can see there is space between button and head line
How to increase or decrease it
Click on advance and go to margin unlink value
Now you can increase the margin top , right , bottom left separately other wise it will change all
the value in one go
Let us increase the top margin.
Yes it is fine
Click update
I have done some cosmetic change here; you can do the same thing by revisiting style, advance
and content section of each element. Just have some practice.
Lastly we have to enter some text here.. .. OUR PORTFOLIO
You can see there is a heading on this page, which looks very odd. Let us remove it.
WEEK4: WEEK:3 DIGITAL MARKETING

Exit to WordPress dashboard, From Ocean WP Settings, Go to title, Display page title, Click
disable. Update,
Edit with Elementor
Yes, title has disappeared now.
We have just started working on Elementor Plug-in,
Now we know
How to insert a section and change the background?
How to insert Logo?
How to insert heading? and
How to insert button elements in a website?

Video-4

Let us continue to learn more features of Elementor plug-in. Now we will design few more
sections of our website by using various elements like Image, Icon Box and counters and so on .
Before, we move to the next section, let us Change one important section of Elementor.
See here when I click here setting are not appearing, I have to right click to make the setting
appear. There is an easy way . You need to change one seting from Elementor
Let us exit to WordPress dashboard.
Go to Elementor settings , Go to advance then “Show Editing Handles”.
Let us see whether it is working or not. Go to the page that we are designing from all pages and
edit and edit with Elementor. Yes, now with click of mouse it shows the settings.
Now let us move to the next section
This section is about “What We Do”.
We want to make this section something like this
It is combination of text , headings and images
Let us add one section here. First, Change the background color.
Remember one thing here, Section is customized from this button and elements settings are
changed from this button.
To change the background colour click this one and from edit section click style, select
background colour and adjust transparency
WEEK4: WEEK:3 DIGITAL MARKETING

Now insert the heading element from elements.

Centralize it AND Type your text
From style use the typography to customize the text
To change the text colour to white, change the font to Helvetica.
Set the size to 35 and reduce the boldness to 300. Now we want some space between first and
second section
Go to advance, unlink values together and increase the top margin
Let us move further
Add new section and change the background color
As we need there different columns, insert inner section from element
Insert heading element
Change the colour to white
Once again insert heading element
Insert some text, change the size of color and weight to 300, and increase the line height to make
it shooting to the eyes
Now insert image element and select picture from the gallery
Now create two duplicate columns, and remove this one
Change the content of two columns
If you want to put hue effect, Edit this image, go to style, from CSS filter change hue.
Width of the Picture can be changed from here if required
It better to have the same size pics for better symmetry
Let us put some space here
From section settings
Advance unlink values increase decreased the bottom padding
Let us insert some entry animations
From edit column, go to advance, then motion effect and select the entrance animation
First slide left, then slide up, then slide right.
You can also change the speed of animation from here
Yes, animations are working
HOW TO INSERTING ICON BOX
WEEK4: WEEK:3 DIGITAL MARKETING

Now let us design this section, in this section there are icons that animate on hovering, titles, and
the text.
Let us create this heading, insert new section, and let us change the background first.
From layout, make content width to full width and height fit to screen, stretch section on,
From style, select classic background type and select image, change size to cover.
If you want to dim this image, use the background overlay, from classic select the black colour,
and change the opacity to 75 %
Now our background is ready
Let us put the title
From element insert text heading
Insert inner section.
Now from element select, insert icon box
Let us customize it
Change the icon , change the title and description
From Style change the primary colour
Adjust the spacing between title and icon
Make the size to 55
Let us make some modifications in titles and description
First let us change the colour of title
Use the same colour code of icon
From icon, colour copy this code
Go to content, paste this code in colour
Change the colour of description from description to white
Let us change the view of this icon
Go back to content, from view change it to frame
Change the hover effect from style
And hover animation to pulse grow
Once things are final
Now, create 3 duplicate columns and remove the extra one
And change the icon and content
HOW TO INSERT IMAGE AND TEXT SECTION
WEEK4: WEEK:3 DIGITAL MARKETING

Now let us design this section,

First a new section and change the background colour
Now insert heading
Now insert inner sections. Inner sections are nothing but columns
In the first section, insert image element and insert image from media gallery, Resize the first
Column.
In the second column insert three text heading
Change color to white, adjust font, size, weight, line height, and letter spacing accordingly
Put some space in the in the top of heading
Lastly put some entrance animations
HOW TO INSERT COUNTERS
Here are some counters showing achievements of an organization, they are informative,
engaging and are offering a good look to your website. Let us see, how to add them
Insert new section, change the background colour. Change content width to Full. Adjust the
height from minimum Height
Now from element, insert counter
Now let us make some modifications
Change the ending number to any odd number
Number suffix is +
Then change the title
From style, change the text colour
And from title, change the text colour
Now create two duplicate columns
And make the changes accordingly
Update it
Now, I hope you can easily use various elements in your website. But still there are many things
to learn. Let us continue

Video-5
WEEK4: WEEK:3 DIGITAL MARKETING

We are in a process of designing our website using elementor. Let us learn to use few more
elements for website development.
HOW TO INSERT IMAGE GALLEY?
Now let us create our work section.
In this section, you can show your projects and works with images and text or simply images
There are different ways. Here your creativity will work. Let me show you the different ways
Inserting Only Images
Insert new section and title. Follow me (fast Mode)
Now image gallery element
Add images from the media gallery, Set image size to 300
From Style, change space to custom and adjust it
Let us open the images. Yes it is working
Using Image Box
There is another way to show it and you can give the brief description of your project
Duplicate the section and delete image gallery element
Insert inner section and inset image box element
Here you can enter the image, title and heading
ake some cosmetic changes in the pictures
And duplicate the columns and modify columns accordingly
Using Carousel
There is another way to show your works i.e is through image Carousel
Drag and drop Image carousel element
Add images from gallery. Let them fully load.
Let us see few settings
Image size: Custom .let it be 300x 300 or 250 X 250
Slide to show: How many slides want to show in carousel say 4
How many slides you want to scroll: let it be default
Image stretch: yes
Additional Options
Let animation speed to 5000
Few setting from style
WEEK4: WEEK:3 DIGITAL MARKETING

From image put some space from custom space.

If you want to make it full width, from section, Change the content width to full width and adjust
the height. If you want
That is all.
Update it.
HOW TO INSERT VIDEO ELEMENT
You can add video to your page easily
Drag the video element
Copy the link from you tube and paste it here
Your video is here
If you want to make it, full width, go to section setting and, Make the content width to full.
HOW TO INSERT CONTACT FORM
Now let us add contact us form here
Create a new section and change the background
Insert text heading and font settings
From element section, insert inner section
Now from element section drag and drop short code here.
In CONTACT US section we have to use the short code
Go back to the WordPress dashboard, go to contact form and copy this short code
In elementor editor, Paste the code
Your contact us form is ready .
Resize the section into 60 /40 ratio
You may try other contact us Plug-ins too to make it more attractive
To add the address attributes
Insert icon list, and customize the text and icon
There are few settings in style
Increase the space between icons
Make the divider on to put line between icons
Change the icon colour and size
Change the colour of text.
Rest of the setting are same just play around them.
WEEK4: WEEK:3 DIGITAL MARKETING

LINKING IN ELEMENTOR
Linking is an important feature of elementor; you may link various elements of your website to
other pages of your website, or pages outside your website, or link to the section on the same
page.
How to insert External Links
To link the element to other pages click on any element.
The link option is available under content section . Paste the URL of another page here and from
settings check open in new window.
Yes you are able to open the link in new window
How to link the section on same page
Suppose , I click this button, it is not taking me anywhere . But I want, when I click it, it should
take me to this section. Like this.
How to link it? Let us see.
Click on edit of the source element enter you customized link separated by “–“
Move to the section where you want to give the link and click edit section
Go to advance type the paste the link here without “#”
Let us see whether it is working or not
Click the button
Wow !!!! it is working
I also want, when , I click menu items , it should take the respective section. Like this
For this purpose, follow me
First give a customized link to the section that you want to keep in menu.
I want this section on menu. Go to setting, Advance , Under CSS Class, type custom link
separated by “–“ and copy it .
Exit to WordPress dashboard, Go to appearance and menu
Create New menu, Give any name and press create menu.
Now, let us create menu items.
Go to custom links
In URL type “ #” , it is must to create custom link .
WEEK4: WEEK:3 DIGITAL MARKETING

Past the „section link‟ here that you created on this page here. Make sure there should not be any
space before and after while copy-paste. Give the link text. This is text that will appear in menu
section, you may give any text here.
Click add to menu. You can see item is added to menu.
Let use create few more custom links by following the same process.
With this we have created the menu.
Let us ad few more items to the menu and rearrange them and don‟t forget to update the
Update Elementor
Now select the display location and save the menu.
Now let us see whether these are links are working or not .
Wow, they perfectly working.
There are so many other elements which you can add to the website. It is not possible to explain
all the elements here. They are self explanatory, just explore them.
Let me show you, How to add Google map by showing the exact location of your business
From element section insert Google map
Search for your location
Set the zoom level
Increase or decrease the height of map
Notice there is blank space on both side of the map how to remove it
Go to section settings,
Content width full width and update it.
Now I hope you have fair idea about how to use element Plug-in. Just practice on rest of the
elements and try to understand their functions. I assure you that will learn them easily.
This was the free version of Elementor. Once you are expert in it, you may also go for pro
version for additional features
However, few free add on are also available to Elementor plug-in, that I will discuss in next
video
WEEK4: WEEK:3 DIGITAL MARKETING

: Video-6

If you don‟t want to buy a premium version, then free add on are available for Elementor. These
add on are just Plug-ins and can be used with Elementor without any problem. There are many
add-on plugin are available like:
Essential Addons for Elementor
Premium Addons for Elementor
Livemesh Addons for Elementor
Elementor Addon Elements
HT Mega –Absolute Addons for Elementor Page Builder
So on .
Let us install Essential Addons for Elementor , my favorite one
Once you install it , Enable all and save the settings
Go back to all pages and home page on which we are working
You will see now there are essential add-ons
These addons are very useful, make use of them
Let us make our head line like this
Use fancy use fancy text element for this purpose
First Change the prefix text, Then Enter fancy Keywords 3 to 4 words using fancy text settings
Enter Sufix text
From style change the color and typography settings
First for prefix text,
Then for fancy text
And lastly for suffix text
That is all for fancy text

Before, I move to the last section, let me make some important changes in the header section.
Just notice, when I scroll down, the menu disappears,
But, here it does not disappears, this is called sticky header.
If I want to use the menu every time I need to go to the top.
Let us make our header sticky
WEEK4: WEEK:3 DIGITAL MARKETING

Install the plug-in Ocean Wp Sticky header

Refresh the page and scroll down it
Yes, our header is sticky now
Congratulations
HOW MAKE CHANGES FOR RESPONSIVE VIEW
Now the most important features of eliminator plug-in
You can see the responsive view of your website that means how it will look in a mobile phone
or in a tablet
You can also make adjustment according to the device.
Let us see how our website will look in a mobile phone
From responsive mode, select mobile preview
This is the mobile preview.
I want to make head line in a single row, so let use decrease the text size for mobile phone using
typography.
Now it looks fine. These changes will be applicable only to the mobile phone not to other
versions
This is how it will look in tablet. You can adjust it. This is the menu for tablet and mobile phone.
Now , let us have a final look at our website
Opps What is this?
It not displaying the page that we have just developed with the help of Elementor
Don‟t worry actually we have to set our home page as a static page .
Go to appearance, customization,
Select static page
Which page?
The page that you have designed with Elementor. Yes it is there
Now publish it
Refresh the home page
Thumbs up
Great your website is ready.
WEEK4: WEEK:3 DIGITAL MARKETING

With this we have completed the Module 8 and learnt how significant plug-ins are in any website
development process. I can‟t explain all the Plug-ins here. Think some creative to with your
website and search for appropriate Plug-in. Your dream will come true
We will discuss some very relevant Plug-ins during the entire course at relevant points. Take
your own time and pace. Practice on these Plug-ins.
Knowledge is of no value unless you put it to practice .