In this tutorial, I will show you how to make a WordPress website with Elementor. Here I will make this complete website from scratch. This is a complete step-by-step tutorial and beginner friendly. By the way, here I used all free tools, so you need not spend any money for this website except for getting a domain and hosting. Now let’s have a look at some basic steps
Step 1 : Purchase Domain & Hosting. If you already have domain and hosting, you can skip this part.
Step 2 : Install wordpress
Step 3 : Install Theme (Hello Elementor)
Step 4: Install Necessary Plugins (Elementor, Essential Addons for Elementor, Royal Elementor Addons, WPForms Lite)
Step 5: Create Home page, Set home page as default page. Download the zip file from here. You will find all image files which I used.
Step 6: Now will make each section from scratch in step by step. Here is necessary css code and js code.
Step 7: Upload some blog posts.
Step 8: Create menu. Design global header, footer and single post page.
Essential Links
Get Domain & Webhosting(60% off)
CSS Code
/*css for extra border design*/
selector:after{
content: "";
width: 105%;
height: 60px;
background: #e9204f;
position: absolute;
bottom: -15px;
left: 0;
z-index: 1;
}
selector .elementor-widget-container{
position: relative;
z-index: 2;
display: block;
}
/*css for button full width*/
selector a{
width: 100%;
}
JS Code for menu pointer (For one page)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var className = 'menu-highlight',
$ =jQuery,
clickLock = false
$(document).ready(function(){
$('.' + className + ' .menu-item').on('click', function(){
$('.' + className + ' .menu-item a').removeClass('wpr-active-menu-item')
$(this).find('a').addClass('wpr-active-menu-item')
clickLock = true
setTimeout(function(){
clickLock = false
},500)
})
})
$(window).on('load scroll', function(){
if( clickLock ) return
var ids = [],
id
$('.elementor-top-section, [data-elementor-type="wp-page"] > .e-con, [data-elementor-type="wp-page"] > .e-container').each(function(){
if($(window).scrollTop() + $(window).height() - 350 > $(this).offset().top){
ids.push($(this).attr('id'))
}
})
ids = ids.filter(element => {
return element !== undefined
})
id = ids[ids.length - 1]
$('.menu-item a').removeClass('wpr-active-menu-item')
$('[href="#'+id+'"]').addClass('wpr-active-menu-item')
})
</script>
Download all files
Where should I send you this file?