how to make portfolio website in wordpress with elementor | Step by step Tutorial

In this tutorial, I will show you how to make a portfolio website in WordPress using Elementor. This is a complete step-by-step tutorial and beginner friendly. If you don’t have any previous experience, you can also make your own portfolio website only by following this video. 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 (Sinatra)

Step 4: Install Necessary Plugins(Elementor, Essential Addons for Elementor, WPForms Lite, Royal Elementor Addons)

Step 5: Create a new page, Set that page as front page. Then download home.json file from here and finally import that to home page.

Step 6: Customize the header, footer and some basic settings from the page edit option and theme customize option. Also, add custom CSS to the theme customize option.

Create a header menu, Create a contact form with WPform and add it to the bottom area.

Step 7: Finally, Replace all dummy content with your own content and we are good to go.

CSS Code

.animated img {    
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);    
    animation: border-transform 10s linear infinite alternate forwards;    
    border-radius: 100%;}

@keyframes border-transform {    0%,    100% {        
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%    
        }    
    14% {        
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%    
        }    
    28% {        
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%    
        }    
    42% {        
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%    
        }    
    56% {        
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%    
        }    
    70% {        
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%    
        }    
    84% {        
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%    
        }
    }

/*-----sticky header bg color-------*/
[data-scroll-listener="true"] #sinatra-header-inner {    
    background: rgba(0,0,0,.6);
}

Download home.json file

Where should I send you this file?

    Start Working with me for any wordpress project!

    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)

    15 + 12 =

    [wpforms id="2272"]