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

286 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!

Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

🎁Nội dung miễn phí có giới hạnBài viết này sẽ miễn phí trong 11 ngày nữa. Sau thời gian này, bạn cần phải mua để...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép 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êmPhần 1. Ẩn tài khoản admin khỏi danh sách người dùng trong Admin...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết 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êmPhần 1: Hướng dẫn Code chức năng kiểm tra link nội bộ Khi...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục LụcBước 1: Thêm HTMLBước 2: Thêm CSSKết quả cuối cùngTùy chỉnh thêm1. Giới Thiệu Code Tự động Cập Nhật Giá Khi Tăng Giảm Số...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử...
Hướng dẫn code vòng quay may mắn wordpress cực đẹp

Để tạo một vòng quay may mắn (Lucky Wheel) trên trang web WordPress, bạn có thể sử dụng mã PHP dưới đây. Bài viết này...