In this tutorial, I will show you how to make a Responsive WordPress website using Elementor for FREE. This is a complete step-by-step tutorial. 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 into some basic steps
Step 2 : Install wordpress.
Step 3: Install Theme (OceanWP).
Step 4: Install all necessary Plugins (Elementor, ElementsKit Lite, MetForm, My Sticky Bar, Portfolio for Elementor & Image Gallery)
Step 5: Create home page and set some global settings.
Step 6: Add custom CSS code.
Step 7: Download Templates and Import.
Step 8: Create Portfolio pages
Step 9: Create a contact form and add settings
Step 10: Configure header and footer
Step 11: Set home page as default page.
CSS Code
:root{
/****all custom color****/
--White: #ffffff;
--Light_purple: #8750F7;
--dark_purple: #2A1454;
--purple_bg: #0F0715;
--black_bg: #050709;
}
.grad{
background: linear-gradient(to right, var(--Light_purple) 0%, var(--White) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.img_hover_color:hover img{
border-color:var(--Light_purple) !important
}
.service_hover:hover .elementor-heading-title{
color: var(--White) !important;
}
.service_hover:hover .e-font-icon-svg {
transform:rotate(-90deg);
fill: var(--White) !important;
}
.elpt-portfolio-filter .portfolio-filter-item.item-active {
background: #2A1454;
}
/* Gradient bg */
.gradient_bg_right::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 322px;
height: 308px;
border-radius: 50%;
filter: blur(150px);
margin-right: -5%;
margin-top: -5%;
background: var(--Light_purple);
}
.gradient_bg_center::after {
content: "";
position: absolute;
top: 50%;
right: 45%;
width: 322px;
height: 308px;
border-radius: 50%;
filter: blur(150px);
margin-right: -5%;
margin-top: -5%;
background: var(--Light_purple);
}
.gradient_bg_img img{
z-index: 1;
position: relative;
}
.gradient_bg_img ::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 322px;
height: 308px;
border-radius: 50%;
filter: blur(150px);
margin-right: -5%;
margin-top: -5%;
background: var(--Light_purple);
}
.elpt-portfolio-filter .portfolio-filter-item {
background: #050709;
}
.skill_hover:hover .elementor-image-box-title {
color: var(--Light_purple) !important;
}
.skill_hover:hover .elementor-image-box-img img{
filter:saturate( 100% ) !important;
}
#mobile-dropdown {
background-color: var(--purple_bg) !important;
}
#mobile-dropdown ul li a {
text-align: center !important;
}
a:hover, a:active, a:focus {
outline: 0 !important;
}
.page-header {
padding: 120px 0 36px 0;
display: none;
}