In this tutorial, I will show you how to make a portfolio website in WordPress for FREE. This is a complete step-by-step tutorial and beginner-friendly. In this tutorial I will make this full website from scratch using Elementor, also I will provide the ready template file download link, so if you don’t have time to watch the full step-by-step process you can use it. Now let’s have a look at some basic steps
Step 2 : Install wordpress.
Step 3: Install Theme (Hello Elementor).
Step 4: Install all necessary Plugins (Elementor, Royal Elementor Addons, Sticky Header Effects for Elementor, WPForms Lite)
Part 1 (From Template)
Step 5: Download and Import Templates.
Step 6: Create Header, Footer and global settings(bg color, link color).
Step 7: Create Home Page and import template.
Step 8: Create Contact form.
Step 9: Create one page website and create menu.
Part 2 (From scratch)
Step 10: Add Global color, fonts, and CSS.
Step 11: Create Header, Footer and Home page from scratch.
Step 12: Create others pages and update menu.
Step 13: Make header sticky.
CSS Code
:root{
--shadow1: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
--background-color-1: linear-gradient(145deg, #1e2024, #23272b);
--background-color-hover:#1B1D21;
--inner-shadow: 1px 4px 2px -3px rgba(0,0,0,.7) inset, -1px -3px 3px -2px rgba(255,255,255,.2) inset;
}
/*shadow box*/
.elementor-widget-social-icons .elementor-grid-item a,.shadow_box, .wpr-story-info-vertical, .wpr-testimonial-content-inner, .wpforms-submit-container .wpforms-submit,.shadow_box_only, .menu_btn{
box-shadow: var(--shadow1) !important;
background: var(--background-color-1) !important;
transition:0.6s;
}
/*Shadow box hover*/
.shadow_box:hover, .wpr-story-info-vertical:hover, .wpr-testimonial-content-inner:hover, .wpforms-submit-container, .menu_btn:hover, .wpr-mobile-toggle-wrap:hover{
background: var(--background-color-hover) !important;
}
.wpr-testimonial-content-inner {
margin: 20px;
}
.wpr-story-info-vertical {
margin-right: 20px;
margin-bottom: 20px;
}
.box_h{
height:320px;
}
.show_hover{
height:0;
opacity:0;
transition:0.6s;
}
.shadow_box:hover .show_hover{
height:20px;
opacity:1;
}
.elementor-image-box-img img {
width: 100%;
}
/********body padding **********/
.header {
margin: 20px 20px 0 20px;
max-width: calc(100% - 40px) !important;
}
#content {
padding: 0px 20px 0 20px;
}
.footer {
margin: 0px 20px 20px 20px;
max-width: calc(100% - 40px) !important;
}
/***** Form Style *****/
.wpforms-field input, .wpforms-field textarea {
background-color: #191b1e !important;
transition: 0.6s !important !important;
padding: 0 15px !important !important;
box-shadow: var(--inner-shadow) !important;
}
.wpforms-submit:hover, .menu_btn:hover {
transform: translateY(-2px);
}
@media screen and (max-width: 480px) {
.wpforms-container .wpforms-one-half {
margin-left: 0px !important;
width: 100% !important;
}
}
/* Progress bar */
.wpr-prbar-hr-line{
box-shadow: var(--inner-shadow) !important;
background-color: #212428 !important;
}
/* Sticky Header */
.she-header:not(.elementor-sticky){
margin: 0px 20px 0 20px;
max-width: calc(100% - 40px) !important;
z-index:100 !important;
}
/*mobile-toggle*/
.wpr-mobile-toggle-wrap {
box-shadow: var(--shadow1) !important;
background: var(--background-color-1) !important;
transition:0.6s;
padding: 6px 0px;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center !important;
}