Upcoming

How to make a Furniture & Home Decor Shop Using Elementor Free

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.
Get Hosting
Elementor The free page builder this tutorial is built with.
Get Elementor
Elementor Pro The Pro upgrade used throughout this tutorial.
Get Elementor Pro
Project Files Download the resources used in this tutorial.
Download Files
Kitninja eCommerce Elementor template kits.
Get Templates
Kitpapa Ready made Elementor template kits.
Get Templates

Prompt Used in This Tutorial

Website Default Style CSS
.elementor-icon, .icon{
	line-height: 0;
}

html,body{
	overflow-x: hidden;
}

.primary-navigation li.current-menu-item > a,
.primary-navigation .menu-item-has-children:hover > a,
.primary-navigation a:hover,
.primary-navigation > li.current-menu-ancestor > a , .primary-navigation > li.current_page_parent > a,.primary-navigation li.menu-item-has-children:hover  .woostify-svg-icon svg{
    color: #FF5B26;
}

.site-header-inner {
    border-bottom-color:rgba(255, 255, 255, 0.2);
}

.woocommerce-account .site-content{
	min-height: 100%!important;
}

/* ======================================================
   Products Section
====================================================== */

.products .product{	
	margin-right: 0px!important;
  margin-bottom: 0px!important;
	background-color: #F9F9F9;
		padding: 24px;
	border-right: 1px solid #E0E1DF;
	border-bottom: 1px solid #E0E1DF;
	width: calc(100% / 4 - 0.01px)!important;
}


.products .product:nth-of-type(4n) {
    border-right: 0;
}

.archive .products .product{		
	width: calc(100% / 3 - 0.01px)!important;
	border-right: 1px solid #E0E1DF;
}

.archive .products .product:nth-of-type(3n) {
    border-right: 0;
}

@media (max-width:1024px){
	.products .product, .archive .products .product{		
	width: calc(100% / 2 - 0.01px)!important;
		border-right: 1px solid #E0E1DF!important;
	}
		
.products .product:nth-of-type(2n),.archive .products .product:nth-of-type(2n) {
    border-right: 0;
}
}

@media (max-width:767px){
	.products .product, .archive .products .product{		
	width: 100%!important;
	}
		
	.products .product, .archive .products .product {
    border-right: 0!important;
}
}

.products .product-loop-content{
	padding: 0;
	margin-top: 32px;
}

.products .product .price{
	font-family: 'Marcellus';
}

.products .product .product-loop-image-wrapper{
	   overflow: visible;
}

.products .product .woostify-tag-on-sale{
	right: -24px;
	top: -24px;
}


.products .product .product-loop-content.text-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 6px;
}

.products .product .product-loop-content .woocommerce-loop-product__category{
    width: 100%!important;
}

.products .product .product-loop-content del{
    display: none;
}

@media (max-width: 1140px) and (min-width: 1024px) {
  .products .product .product-loop-content.text-left {   
    flex-direction: column;
		align-items: flex-start;
  }
}


/* ======================================================
   PAGE HEADER
====================================================== */
.elementor-page .page-header {
    display: none;
}

.page-header {
    position: relative !important;
}

.page-header:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    background-image: linear-gradient(180deg, #003933 10%, #0039339E 100%
100%
);
    opacity: 1;
}

.page-header .woostify-container * {
    z-index: 99 !important;
}

.page-header .entry-title {
    margin-bottom: 10px;
    font-size: 54px !important;
    line-height: 1.2em !important;
	text-align: center;
    text-transform: capitalize;
    font-weight: 400;
}

.woostify-breadcrumb {
    text-align: center; 
	font-size: 16px;
}

@media (max-width: 1024px){
	.page-header{
		padding-top: 70px;
		padding-bottom: 70px;
	}
}


@media (max-width: 767px){
	.page-header{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	.page-header .entry-title {    
    font-size: 60px !important;   
}
}

/* ======================================================
   SINGLE PRODUCT
====================================================== */
.single-product .woostify-breadcrumb,
.single-product .woostify-breadcrumb .item-bread a {
    color: #003933;
}

.woostify-breadcrumb 
.item-bread:hover a {
    color: #ff5b26;
}

.woostify-container 
.product-images-container img {
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    background-color: white;
}

.related.products > h2 {
    font-size: 34px !important;
}

.wp-block-search__label {
    color:#003933;
		font-weight: 400!important;
    font-size: 30px;
		font-family: 'Marcellus';
}

.wp-block-search__inside-wrapper {
    margin-top: 10px;
}




/* ======================================================
   Footer
====================================================== */

.site-footer-widget .widget{
	width: 16.6666%!important;
}

.site-footer-widget .widget:nth-child(1){
	width: 50%!important;
	padding-right: 160px;
	font-size: 16px;
}

.site-footer-widget .widget_nav_menu .widget-title{
	font-size: 20px;
}

.site-footer-widget .widget_nav_menu li a{
	color: #fff;
	font-size: 16px;
}

.site-footer-widget .wp-block-social-link-anchor svg{
	fill: #fff;
}

@media (max-width: 1024px){
	.site-footer-widget .widget{
	width: 50%!important;
}
.site-footer-widget .widget:nth-child(1){
	padding-right: 0px;
	
}	
}

@media (max-width: 767px){
	.site-footer-widget .widget:nth-child(1){
	width: 100%!important;
}

}



/* ======================================================
   BLOG Page
====================================================== */

.blog .post-loop {
    margin-bottom: 30px !important;
}

.blog .post-loop a{
	width: 100%;
}
.blog .post-loop img {
    height: 264px !important;
		width: 100%;
    object-fit: cover;
   
}

.blog .post-loop .entry-header {
    text-align: left;
}

.blog .post-loop .entry-header-item {
    margin-bottom: 10px;
}

.blog .post-read-more a {
    color: #ff5b26!important;
}

.blog .post-loop .entry-summary {
    text-align: left;
    padding: 0;
}

.blog .entry-summary{
	display: none;
}

.related-post .entry-title{
	margin: 5px 0 10px;
		color: #003933;
}

.related-post .post-read-more{
	color: #003933;
	
}




/* ======================================================
   SINGLE POST
====================================================== */
.single-post .post-cover-image img {
    height: 420px;
    margin-bottom: 20px;
}

.single-post .wp-post-image {
    width: 100%;
}

.single-post .related-title {
    font-size: 32px;
}

.single-post 
.site-main 
.post-loop 
.entry-title {
    font-size: 32px;
    font-weight: 400;
    color: #003933;
}

.widget_recent_entries  li a{
	color: #003933!important;
}

@media (max-width: 767px) {
    .wp-singular 
    .page-header 
    .entry-title {
        font-size: 32px !important;
    }
}

.widget_recent_entries  li {
    line-height: 1.8em!important;
    margin-bottom: 15px;
}


.widget_recent_entries li time {
    margin-top: 5px;
}
Banner Style CSS
<style>
.image-hotspots .wpr-hotspot-tooltip {
	background: rgba(255, 255, 255, 0.16);
	width: 164px;
	height: 124px;
	padding: 12px;
	backdrop-filter: blur(8px);
	left: unset !important;
	right: -4px !important;
	top: 20px !important;
	bottom: unset !important;
	border: 1px solid rgba(255, 255, 255, 0.32);
	box-sizing: border-box;
}



.image-hotspots .wpr-hotspot-tooltip h5 {
    color: #FFFFFF;
    font-family: "Marcellus", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    margin: 12px 0 2px;
}



.image-hotspots .wpr-hotspot-tooltip::before {
	position: absolute;
	content: "";
	background: #FFFFFF;
	width: 59px !important;
	height: 0px !important;
	/*right: 0px!important;*/
	bottom: 56px!important;
	border-width: 1px!important;
	left: 100%!important;
	 -ms-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform: translateX(0%);

}

.image-hotspots .wpr-hotspot-tooltip::after {
	position: absolute;
	content: "";
	background: #FFFFFF;
	width: 1px !important;
	height: 42px !important;
	right: -59px;
	bottom: 14px;
}

.image-hotspots .wpr-hotspot-item:nth-child(1) .wpr-hotspot-tooltip{
    left: unset !important;
	right: -4px !important;
	top: 155px!important;
	/*bottom: 0!important;*/
}

.image-hotspots .wpr-hotspot-item:nth-child(1)  .wpr-hotspot-tooltip::after {
	height: 52px !important;
	right: -59px;
	bottom: unset;
	top: 13px!important;
}

@media (max-width: 767px){
    .image-hotspots {
        position: relative!important;
    }
}

</style>
Banner Style CSS Class
image-hotspots
Product Shortcode For Tabs
[recent_products limit="8" columns="4" category=”home-decoration” class="tab-products"]
[recent_products limit="8" columns="4" category=”office-decoration” class="tab-products"]
[recent_products limit="8" columns="4" category=”indoor-decoration” class="tab-products"]
[recent_products limit="8" columns="4" category=”outdoor-decoration” class="tab-products"]
Product Shortcode
[recent_products limit="8" columns="4"]
Product Tabs Style CSS
.tabs .e-n-tabs-heading {
    position: relative;
}

.tabs .e-n-tab-title {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.tabs .e-n-tabs-heading [aria-selected="true"] {
}

.tabs .e-n-tabs-heading [aria-selected="true"]:before  {
    position: absolute;
    content: "";
    width: 8px !important;
    height: 8px !important;
    background: #DADADA;
    border-radius: 50%;
    top: -1px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.tabs .e-n-tabs-heading [aria-selected="true"]:after  {
    position: absolute;
    content: "";
    width: 8px !important;
    height: 8px !important;
    background: #DADADA;
    border-radius: 50%;
    top: -1px;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 1px solid #003933 !important;
    padding: 12px;
    background: #FFFFFF !important;
}

[aria-selected="false"] {
    /* border-top: 4px solid #dddddd; */
}

[aria-selected="true"] {
    background: transparent !important;
    color: #000 !important;
}

[aria-selected="true"] span.e-n-tab-title-text {
    color: #003933;
}

.tabs .e-n-tab-title {
    border-top: 2px solid #dddddd !important;
}

.tabs .e-n-tab-title:hover {
    background: transparent !important;
    color: #000 !important;
}

.tabs .e-n-tab-title[aria-selected="true"] {
    border-top: 2px solid #003933 !important;
}


.tabs  .e-n-tabs-content {
    position: relative;
}

.tabs  .e-n-tabs-content:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    border: 2px solid #FFFFFF !important;
    top: -3px;
    left: 0px;
    z-index: 2;
}

.tabs  .e-n-tabs-content:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    border: 2px solid #FFFFFF !important;
    bottom: -3px;
    left: 0px;
    z-index: 2;
}

.tabs  .elementor-loop-container:before {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(100% + 2px);
    border: 2px solid #FFFFFF !important;
    top: 0;
    left: -2px;
    z-index: 2;
}

.tabs  .elementor-loop-container:after {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(100% + 2px);
    border: 2px solid #FFFFFF !important;
    top: 0;
    right: -2px;
    z-index: 2;
}

.tabs  .elementor-loop-container .e-loop-item:last-child .e-con-boxed {
    border-right: 0px;
} 

@media only screen and (max-width: 767px) {

.tabs  .e-n-tabs-heading {
    padding-top: 15px;
}

}
Product Tabs Style CSS Class
tabs
Blog Post Style CSS For Home Page
.blog-post .ekit-wid-con .col-lg-2 {
        -ms-flex: 0 0 20%;
        -webkit-box-flex: 0;
        flex: 0 0 20%;
        max-width: 20%;
}

.blog-post .ekit-wid-con .col-lg-2 img {
    height: 212px;
    object-fit: cover;
}

.blog-post .ekit-wid-con .col-lg-2:nth-child(1) img, .blog-post .ekit-wid-con .col-lg-2:nth-child(5) img  {
    height: 320px;
}

.blog-post .ekit-wid-con .col-lg-2:nth-child(3) img {
    height: 264px;
}

@media (max-width: 1024px){
   .blog-post .ekit-wid-con .col-lg-2 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
} 
.blog-post .ekit-wid-con .col-lg-2 img {
    height: 250px!important;
    object-fit: cover;
}

.blog-post .ekit-wid-con .col-lg-2:last-child {
    display: none;
}
}

@media (max-width: 767px){
    .blog-post .ekit-wid-con .col-lg-2 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
} 
}
Blog Post Style CSS Class For Home Page
blog-post

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

Related Tutorials

From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

21.8K views

View Tutorial

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

3.3K views

View Tutorial

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel

3.4K views

View Tutorial

Browse All Tutorials