Thủ thuật Theme Flatsome, Thủ thuật wordpress

Hướng dẫn cách làm khung khuyến mãi giống muathemewp cực đẹp

Đăng vào Tháng 9 30, 2024Tháng 10 8, 2024 bởi admin

admin

30/09/2024

3 Phút đọc

206 Lượt xem

Đánh giá

4.8/5 - (100 bình chọn)

Để tạo khung khuyến mãi đẹp giống như trên trang Muathemewp, bạn có thể sử dụng HTML và CSS để tạo hiệu ứng tương tự. Dưới đây là hướng dẫn chi tiết cách thực hiện:

Bước 1: Thêm HTML

Bạn sẽ cần thêm đoạn HTML để tạo cấu trúc khung khuyến mãi. Đoạn mã này bao gồm các phần như tiêu đề khuyến mãi, mô tả, và danh sách các lợi ích/ưu đãi. Các bạn tạo 1 HTML như sau:

<div class="promo-wrapper">
    <div class="promo-ribbon"><span>Quà tặng</span></div>
    <div class="promo-title">
        <span><i class="fa fa-gift" style="color: #e41984;" aria-hidden="true"></i>&nbsp; Ưu đãi tại Muathemewpgiare</span>
    </div>
    <div class="promo-content">
        <div class="promo-description">
            <p>
                <img class="promo-icon" src="https://muathemewp.vn/wp-content/uploads/2022/11/icon-login.svg" alt="Icon" width="45" height="45">
                Đặt mua sản phẩm tại <strong>Muathemewpgiare</strong> ngay để nhận được các ưu đãi hấp dẫn nhất chưa từng có
            </p>
        </div>
        <ul class="promo-list">
            <li>Hỗ trợ cài đặt, sử dụng Theme thông qua <strong>Teamview / Ultraviewer</strong></li>
            <li><strong>Bảo hành trọn đời</strong> cho website mua Theme tại Muathemewpgiare</li>
            <li>Quà tặng bao gồm các Plugin cần thiết <strong>(có key)</strong> cho Website Wordpress</li>
            <li>Chất lượng Theme tốt, chuẩn SEO, phù hợp từng ngành nghề</li>
            <li>Theme Plugin có Key kích hoạt chính hãng, cập nhật tự động trọn đời</li>
        </ul>
    </div>
</div>

<span><i class="fa fa-gift" style="color: #e41984;" aria-hidden="true"></i>  Ưu đãi tại Muathemewpgiare</span>

</div>

<p>

Đặt mua sản phẩm tại <strong>Muathemewpgiare</strong> ngay để nhận được các ưu đãi hấp dẫn nhất chưa từng có

</p>

</div>

<li>Hỗ trợ cài đặt, sử dụng Theme thông qua <strong>Teamview / Ultraviewer</strong></li>

<li><strong>Bảo hành trọn đời</strong> cho website mua Theme tại Muathemewpgiare</li>

<li>Quà tặng bao gồm các Plugin cần thiết <strong>(có key)</strong> cho Website Wordpress</li>

<li>Chất lượng Theme tốt, chuẩn SEO, phù hợp từng ngành nghề</li>

<li>Theme Plugin có Key kích hoạt chính hãng, cập nhật tự động trọn đời</li>

</ul>

</div>

Hướng dẫn cách làm khung khuyến mãi giống muathemewp cực đẹp

Bước 2: Thêm CSS

Để tạo phong cách đẹp mắt cho khung khuyến mãi, hãy thêm đoạn CSS dưới đây:

.devvn_after_product_price.devvn_single_excerpt_after {
    border: 1px solid #e9ecef;
    border-radius: unset;
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    padding: unset;
}
.devvn_after_product_price {
    position: relative;
}@media only screen and (min-width: 850px) {
    .themetot-gift--promo_ribbon {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 75px;
        height: 75px;
        text-align: right;
    }
}@media only screen and (min-width: 850px) {
    .themetot-gift--promo_ribbon span {
        font-size: 10px;
        font-weight: 700;
        color: #fff !important;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #ff0000;
        box-shadow: 0 3px 10px -5px rgb(0 0 0);
        position: absolute;
        top: 19px;
        right: -21px;
    }
}@media only screen and (min-width: 850px) {
    .themetot-gift--promo_ribbon span::before {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        z-index: -1;
        border-left: 3px solid red;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-top: 3px solid red;
        filter: brightness(.7);
    }
}@media only screen and (min-width: 850px) {
    .themetot-gift--promo_ribbon span::after {
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-right: 3px solid red;
        border-bottom: 3px solid transparent;
        border-top: 3px solid red;
        filter: brightness(.7);
    }
}.devvn_after_product_price.devvn_single_excerpt_after .devvn_title span {
    font-size: 14px;
    text-transform: none;
    background: #f1f1f1;
    margin-bottom: 0;
    display: inline-flex;
    padding: 5px 10px;
    width: auto;
    margin-top: 0px;
}@media only screen and (min-width: 850px) {
    .devvn_title i.fa.fa-gift {
        margin-top: 2.5px;
    }
}@media only screen and (min-width: 850px) {
    i.fa.fa-gift {
        color: #333 !important;
    }
}.fa-gift:before {
    content: "\f06b";
}.devvn_after_product_price.devvn_single_excerpt_after .list-privacy {
    padding: 10px 15px;
}

.devvn_after_product_price .list-privacy {
    margin-bottom: 0;
    font-size: 14px;
}.devvn_after_product_price .devvn_top {
    padding-left: 55px;
    position: relative;
    font-size: 14px;
    min-height: 45px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}.devvn_after_product_price .devvn_top img {
    position: absolute;
    left: 0;
    top: 0;
}.devvn_after_product_price.devvn_single_excerpt_after .list-privacy {
    padding: 10px 15px;
}

.devvn_after_product_price .list-privacy {
    margin-bottom: 0;
    font-size: 14px;
}.devvn_after_product_price .list-privacy li {
    list-style: none;
    margin-left: 0;
    line-height: 1.5;
    margin-bottom: 10px;
    position: relative;
    padding-left: 18px;
}.devvn_after_product_price .list-privacy li:before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(https://vacca.webmau68.com/wp-content/themes/devvn-child/images/icon-check.svg) no-repeat;
    position: absolute;
    top: 3px;
    left: -3px;
}
.shop-container .product-small.col > .col-inner {
    border-radius: 5px;
    overflow: hidden;
    background: #FFFFFF;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

.devvn_after_product_price.devvn_single_excerpt_after {

border: 1px solid #e9ecef;

border-radius: unset;

margin-top: 0;

margin-bottom: 15px;

background-color: #f8f9fa;

padding: unset;

}

.devvn_after_product_price {

position: relative;

}@media only screen and (min-width: 850px) {

.themetot-gift--promo_ribbon {

position: absolute;

right: -5px;

top: -5px;

z-index: 1;

overflow: hidden;

width: 75px;

height: 75px;

text-align: right;

}

}@media only screen and (min-width: 850px) {

.themetot-gift--promo_ribbon span {

font-size: 10px;

font-weight: 700;

color: #fff !important;

text-transform: uppercase;

text-align: center;

line-height: 20px;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

width: 100px;

display: block;

background: #ff0000;

box-shadow: 0 3px 10px -5px rgb(0 0 0);

position: absolute;

top: 19px;

right: -21px;

}

}@media only screen and (min-width: 850px) {

.themetot-gift--promo_ribbon span::before {

content: "";

position: absolute;

left: 0;

top: 100%;

z-index: -1;

border-left: 3px solid red;

border-right: 3px solid transparent;

border-bottom: 3px solid transparent;

border-top: 3px solid red;

filter: brightness(.7);

}

}@media only screen and (min-width: 850px) {

.themetot-gift--promo_ribbon span::after {

content: "";

position: absolute;

right: 0;

top: 100%;

z-index: -1;

border-left: 3px solid transparent;

border-right: 3px solid red;

border-bottom: 3px solid transparent;

border-top: 3px solid red;

filter: brightness(.7);

}

}.devvn_after_product_price.devvn_single_excerpt_after .devvn_title span {

font-size: 14px;

text-transform: none;

background: #f1f1f1;

margin-bottom: 0;

display: inline-flex;

padding: 5px 10px;

width: auto;

margin-top: 0px;

}@media only screen and (min-width: 850px) {

.devvn_title i.fa.fa-gift {

margin-top: 2.5px;

}

}@media only screen and (min-width: 850px) {

i.fa.fa-gift {

color: #333 !important;

}

}.fa-gift:before {

content: "\f06b";

}.devvn_after_product_price.devvn_single_excerpt_after .list-privacy {

padding: 10px 15px;

}

.devvn_after_product_price .list-privacy {

margin-bottom: 0;

font-size: 14px;

}.devvn_after_product_price .devvn_top {

padding-left: 55px;

position: relative;

font-size: 14px;

min-height: 45px;

display: flex;

align-items: center;

margin-bottom: 10px;

}.devvn_after_product_price .devvn_top img {

position: absolute;

left: 0;

top: 0;

}.devvn_after_product_price.devvn_single_excerpt_after .list-privacy {

padding: 10px 15px;

}

.devvn_after_product_price .list-privacy {

margin-bottom: 0;

font-size: 14px;

}.devvn_after_product_price .list-privacy li {

list-style: none;

margin-left: 0;

line-height: 1.5;

margin-bottom: 10px;

position: relative;

padding-left: 18px;

}.devvn_after_product_price .list-privacy li:before {

content: "";

display: block;

width: 14px;

height: 14px;

background: url(https://vacca.webmau68.com/wp-content/themes/devvn-child/images/icon-check.svg) no-repeat;

position: absolute;

top: 3px;

left: -3px;

}

.shop-container .product-small.col > .col-inner {

border-radius: 5px;

overflow: hidden;

background: #FFFFFF;

position: relative;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

Kết quả cuối cùng

Khi bạn tích hợp đoạn mã HTML và CSS trên vào trang web của mình, bạn sẽ có một khung khuyến mãi với phong cách tương tự như trang Muathemewp. Bạn có thể tùy chỉnh màu sắc, kích thước, và nội dung để phù hợp với nhu cầu của bạn.

Tùy chỉnh thêm

Thay đổi màu sắc: Điều chỉnh màu sắc trong CSS (#e41984) để phù hợp với phong cách thương hiệu của bạn.
Thêm hoặc bớt nội dung: Dễ dàng thêm các mục trong danh sách <ul class="promo-list"> hoặc sửa đổi các nội dung bên trong <div class="promo-content">.

Chỉ cần làm theo các bước trên, bạn có thể tạo được khung khuyến mãi đẹp và chuyên nghiệp cho website của mình. Chúc các bạn thành công nhé.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Share code Header top đơn giản

Share code Header top đơn giản dành cho các bạn mới nhé. Code header này để dùng hiển thị các thông tin như liên hệ,...
Cách chèn thêm sản phẩm vào trong bài viết wordpress giống levantoan

Mục LụcBước 1: Thêm HTMLBước 2: Thêm CSSKết quả cuối cùngTùy chỉnh thêmTại Sao Nên Sử Dụng Mẫu Website Nổi Bật? Khi bạn đến với...
Sharecode cách Chuyển 0đ hoặc không điền thành chữ “Liên hệ”

Nếu bạn đang quản lý một cửa hàng trực tuyến với WooCommerce và muốn thay thế giá trị “0đ” bằng chữ “Liên hệ” cho những...
Thủ thuật wordpress – Code thêm nút Edit nhanh cho Admin trên Mobile WordPress

Nếu bạn là một quản trị viên của website WordPress và đang tìm kiếm cách code thêm nút Edit nhanh cho Admin trên Mobile WordPress...
Hướng dẫn và chia sẻ code thêm nút xóa và tăng giảm số lượng sản phẩm trong trang thanh toán WooCommerce cho Flatsome

Khi xây dựng website WooCommerce với theme Flatsome, một trong những yêu cầu phổ biến từ khách hàng là thêm các tính năng như nút...
Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee

Nếu bạn là một người bán hàng trực tuyến trên muathemewpgiare.com và muốn tăng cường sự uy tín của cửa hàng mình, chắc chắn bạn...
Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài...
Flash Sale Countdown & Sản phẩm đã bán Trên Website WooCommerce

Bạn có phải là một tín đồ của flash sale? Hay bạn muốn tăng cường tỷ lệ chuyển đổi cho sản phẩm giảm giá trên...
Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress

Trong bài viết này, muathemewpgiare sẽ cùng tìm hiểu cách tự động thêm SKU vào đường dẫn sản phẩm trong WordPress, code thêm SKU tự...
Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết

Trong quá trình phát triển website, việc quản lý bình luận từ người dùng là một phần quan trọng để duy trì tính tương tác...
Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)

Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như...
Sharecode chức năng đăng nhập gần nhất và cột ngày đăng ký tài khoản

Mục LụcBước 1: Thêm HTMLBước 2: Thêm CSSKết quả cuối cùngTùy chỉnh thêmThêm Cột Ngày Đăng Nhập Gần Nhất và Ngày Đăng Ký Tài Khoản...
Sharecode HTML và CSS Bảng Báo Giá

DEMO: Thiết kế Website Cơ bản 5,000,000đ Thiết kế website chuẩn SEO Giao diện responsive Tích hợp cơ bản (Form liên hệ, Bản đồ) Tư...
Sharecode plugin bộ lọc khoảng giá cho wordpress không cần plugin

Khi xây dựng một website WordPress, việc cung cấp công cụ tìm kiếm hiệu quả cho người dùng là rất quan trọng, đặc biệt là...
Sharecode slider sản phẩm đã xem wordpress

Mục LụcBước 1: Thêm HTMLBước 2: Thêm CSSKết quả cuối cùngTùy chỉnh thêmTại sao nên thêm slider sản phẩm đã xem? 1. Tăng thời gian...
Tự Động Cập Nhật Hình Đại Diện Cho Bài Viết Trong WordPress

Hình đại diện (thumbnail) cho bài viết trong WordPress là yếu tố quan trọng giúp tăng tính thẩm mỹ và tạo điểm nhấn trực quan...