How to make portfolio website using wordpress

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 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 all necessary Plugins (Elementor, Royal Elementor Addons, Sticky Header Effects for Elementor, WPForms Lite)

Part 1 (From Template)

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;
}

Download all files

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)

4 + 7 =

[wpforms id="2272"]