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 tutorial. Now let’s have a look into 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 (OceanWP).
Step 4: Install all necessary Plugins (Elementor, ElementsKit Lite, MetForm, My Sticky Bar, Royal Elementor Addons)
Step 5: Create home page and set some global settings.
Step 6: Add custom CSS code.
Step 7: Create custom header
Step 8: Create custom footer
Step 9: Create hero section from scratch
Step 10: Create others section from scratch
Step 11: Create a contact form and add settings
Step 12: Make header sticky and link menu with sections.
Essential Links
Get Domain & Webhosting(60% off)
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;600&display=swap');
a:focus,
a:active,
a:focus-visible {
outline: none !important;
border: none !important; /* In case any border is involved */
box-shadow: none !important; /* For some modern browsers */
-moz-outline-style: none !important; /* For older Firefox */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Funnel Display', sans-serif;
}
.glass_bg{
backdrop-filter: blur(10px);
}
.elementskit-single-testimonial-slider {
backdrop-filter: blur(10px);
}
.t-text .elementor-icon-list-text{
color: transparent;
-webkit-text-stroke: 1px #fff;
}
.t-text .elementor-icon-list-icon svg {
fill: transparent;
border: 1px solid #fff;
border-radius: 50%;
}
/*****custom css*******/
.all-cards {
display: flex;
flex-direction: column; /* Arrange cards vertically in the column */
}
.card1 {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 50px; /* Offset from the top */
}
.card2 {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 100px; /* Offset from the top */
}
.card3 {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 150px; /* Offset from the top */
}
.card4 {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 200px; /* Offset from the top */
}
/************css for marquee********/
.marquee {
animation: marquee 120s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
/*************css for marque shadow**********/
.shadow::after {
content: "";
position: absolute;
top: -30px;
bottom: -30px;
left: -5px;
right: -5px;
pointer-events: none;
background: linear-gradient(to left, #161616, rgba(255, 255, 255, 0) 250px, rgba(255, 255, 255, 0) calc(100% - 250px), #161616);
}
/***smooth scroll******/
html {
scroll-behavior: smooth;
}
Download Images I used