How to Create a High Converting Landing Page in WordPress

Arif Sadiq/

February 3, 2026/

Arif Sadiq/

February 3, 2026/

Arif Sadiq

Join my YouTube channel where I share simple, practical tutorials on eCommerce, website design, and online business to help you grow faster and with confidence.

Subscribe on YouTube

Sitekio

Ready-Made Website Files

Build a professional WordPress or eCommerce website in minutes with Sitekio’s ready-made templates.

Get up to 80% OFF

In this video, I show you how to build and improve an eCommerce website step by step. This tutorial is helpful for beginners and business owners who want to create a professional online store.

What you'll learn

WordPress Installation

Basic Settings Configuration

Theme Installation

Required Plugins Installation

WooCommerce Basic Setup

How to Add a Product

Landing Page Design with Elementor

Important Links & Resources

Important Links

CSS

/* =========================================
   🔹 Sale Price Styling
   ========================================= */
   
বর্তমান ডিসকাউন্ট মূল্য <span style="color:#1F2937; border:3px solid #0B5ED7; border-radius:50%; padding:2px 6px;">10৫০</span> টাকা

/* =========================================
   🔹 Sale Price Styling
   ========================================= */
   
বর্তমান ডিসকাউন্ট মূল্য <span style="color:#1F2937; border:3px solid #0B5ED7; border-radius:50%; padding:2px 6px;">10৫০</span> টাকা

CSS

/* =========================================
   🔹 Regular Price Styling
   ========================================= */
   
<style>
.price-title {
  color: #6B7280;
  font-family: 'Hind Siliguri', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.old-price {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.price-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.price-cross .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff0000;
}

.price-cross .line-1 {
  transform: rotate(40deg);
}

.price-cross .line-2 {
  transform: rotate(-40deg);
}

/* 📱 Mobile */
@media (max-width: 767px) {
  .price-title {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* 📱 Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .price-title {
    font-size: 26px;
  }
}

/* 🖥 Desktop */
@media (min-width: 1024px) {
  .price-title {
    font-size: 30px;
  }
}
</style>

<h3 class="price-title">
  রেগুলার মূল্য
  <span class="old-price">
    ২৮০০
    <span class="price-cross">
      <span class="line line-1"></span>
      <span class="line line-2"></span>
    </span>
  </span>
</h3>

/* =========================================
   🔹 Regular Price Styling
   ========================================= */
   
<style>
.price-title {
  color: #6B7280;
  font-family: 'Hind Siliguri', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.old-price {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.price-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.price-cross .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff0000;
}

.price-cross .line-1 {
  transform: rotate(40deg);
}

.price-cross .line-2 {
  transform: rotate(-40deg);
}

/* 📱 Mobile */
@media (max-width: 767px) {
  .price-title {
    font-size: 22px;
    line-height: 1.3;
  }
}

/* 📱 Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .price-title {
    font-size: 26px;
  }
}

/* 🖥 Desktop */
@media (min-width: 1024px) {
  .price-title {
    font-size: 30px;
  }
}
</style>

<h3 class="price-title">
  রেগুলার মূল্য
  <span class="old-price">
    ২৮০০
    <span class="price-cross">
      <span class="line line-1"></span>
      <span class="line line-2"></span>
    </span>
  </span>
</h3>

Get Ready Website Templates