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?
0 Comments