How to make wordpress website with elementor

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

JS Code

Download zip file

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?

    Direct Download Link

    Get in touch

    Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

    Call me by Skype (farjana.rashid55)

    11 + 9 =

    [wpforms id="2272"]