子比主题美化-Zibll主题购买页面1:1复刻，推广子比必备利器【更新随机背景】

一键打造高端视觉体验！子比主题美化服务，精准复刻热门Zibll主题购买页面设计，为您的子比站点增添专业与吸引力。每个网站都可以根据链接推广活动获得收益，今天分享一个在网站增加一个子比主题购买推广页面，既美观又可以实现推广返佣。

图片展示

演示地址：https://auth.zib2.cn/

子比主题美化-Zibll主题购买页面1:1复刻，推广子比必备利器【更新随机背景】

教程开始

在主题根目录下pages下创建一个pay_zibll.php文件把下面代码填到里面

在主题根目录下css下创建一个pay-zibll.css文件把下面代码填到里面

/*
 * Template name: Zib2-主题推荐
 * Author       : 子比兔
 * URI          : https://zib2.cn
 */
:root {
    --linear-bg-1: radial-gradient(#ba6187 40%, rgb(144 224 255 / 0%) 60%) -620px -180px no-repeat, radial-gradient(#743fc3d6 33%, rgb(255 203 87 / 0%) 67%) -120px -24px no-repeat, radial-gradient(#b4684e 40%, rgb(144 224 255 / 0%) 70%) -470px 150px no-repeat, #9e4fa9;
    --linear-bg-2: radial-gradient(#24868994 20%, rgb(134 217 249 / 0%) 60%) -120px -180px no-repeat, radial-gradient(#454faa 33%, rgb(255 203 87 / 0%) 67%) -10px -4px no-repeat, radial-gradient(#7238ae 40%, rgb(144 224 255 / 0%) 70%) -470px 150px no-repeat, #4147b8;
    --linear-bg-3: radial-gradient(#bb552975 23%, rgb(247 197 86 / 0%) 67% 100%) 385px -24px, radial-gradient(#984cbe 30%, rgb(179 105 248 / 0%) 67% 100%) 122px -120px, radial-gradient(#661cac 15%, rgb(134 219 252 / 0%) 50% 100%) -620px 0, radial-gradient(#383d9ff5 25%, rgb(132 215 247 / 0%) 50% 100%) 520px -250px, #6841c0;
    --linear-bg-4: radial-gradient(#3a7ebe 20%, rgb(134 217 249 / 0%) 60%) -100px -300px no-repeat, radial-gradient(#405ed6 13%, rgb(255 203 87 / 0%) 50%) 300px -124px no-repeat, radial-gradient(#684ec8 40%, rgb(144 224 255 / 0%) 70%) 40px 18px no-repeat, #246d79;
    --linear-bg-5: radial-gradient(#865cc2 40%, rgb(144 224 255 / 0%) 60%) -620px -180px no-repeat, radial-gradient(#4956c6 33%, rgb(255 203 87 / 0%) 67%) -120px -24px no-repeat, radial-gradient(#3e77ab 40%, rgb(144 224 255 / 0%) 64%) 100px 150px no-repeat, #1f5b98;
    --linear-bg-6: radial-gradient(#277367 20%, rgb(134 217 249 / 0%) 60%) -120px -180px no-repeat, radial-gradient(#434ead 33%, rgb(255 203 87 / 0%) 67%) -120px -24px no-repeat, radial-gradient(#5b46a8 40%, rgb(144 224 255 / 0%) 70%) -470px 150px no-repeat, #1b4d89;
    --linear-bg-7: radial-gradient(#29843fba 23%, rgb(247 197 86 / 0%) 67% 100%) -285px -24px, radial-gradient(#365692 0, rgb(251 63 72 / 0%) 60% 100%) -40px 290px, #29727b;
    --linear-bg-8: radial-gradient(#c75c6e 23%, rgb(247 197 86 / 0%) 67% 100%) -285px -24px, radial-gradient(#bf7830 25%, rgb(132 215 247 / 0%) 50% 100%) 520px -250px, #b4663d;
    --linear-bg-9: radial-gradient(#4776c3 40%, rgb(144 224 255 / 0%) 60%) -235px -380px no-repeat, radial-gradient(#6e4cac 40%, rgb(144 224 255 / 0%) 70%) 100px 250px no-repeat, #5c5bdf;
    --linear-bg-10: radial-gradient(#b06553 23%, rgb(247 197 86 / 0%) 67% 100%) -285px -24px, radial-gradient(#9e4353 0, rgb(251 63 72 / 0%) 60% 100%) -540px 90px, radial-gradient(#8e43b6 30%, rgb(179 105 248 / 0%) 67% 100%) -122px -120px, #a75375;
    --linear-bg-1m: linear-gradient(135deg, #2ea2aa 0%, #5038c8 100%);
    --linear-bg-2m: linear-gradient(135deg, #3f41a7 0%, #27acd1 100%);
    --linear-bg-3m: linear-gradient(135deg, #9971d3 0%, #4538c8 100%);
    --linear-bg-4m: linear-gradient(110deg, #6936b3 0%, #228382 100%);
    --linear-bg-5m: linear-gradient(117deg, #e987f2 0%, #6f2d94 100%);
    --linear-bg-6m: linear-gradient(117deg, #845eea 0%, #cd3e6f 100%);
    --linear-bg-7m: linear-gradient(117deg, #e29a78 0%, #ce5656 100%);
    --linear-bg-8m: linear-gradient(117deg, #77ad5e 0%, #20778f 100%);
    --linear-bg-9m: linear-gradient(117deg, #51a364 0%, #166e9e 100%);
    --linear-bg-10m: linear-gradient(117deg, #dc3576 0%, #1b80b7 100%);
}
.product-container {
    margin-top: -21px;
    opacity: 1 !important;
    transition: opacity .5s;
}
.countdown-activity {
    padding: 20px;
    background: linear-gradient(3deg, #fd8f70 0%, #fc3d3d 100%);
    color: #fff;
    justify-content: center;
    display: flex;
    font-size: 18px;
    line-height: 1.4;
    justify-content: space-evenly !important;
}
.activity-content {
    margin-right: 10px;
    flex-wrap: wrap;
    max-width: calc(30% + 100px);
}
.activity-title {
    font-size: 1.5em;
    font-weight: bold;
}
.countdown-content {
    flex-wrap: wrap;
    padding: .2em .2em .2em 1em !important;
    flex-shrink: 0;
}
.countdown-desc {
    margin-right: 10px;
}
.product-box {
    padding: 60px 0;
    color: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #88c0fd 10%, #0757af 100%);
}
.product-background {
    /**animation: hue 100s infinite linear; */
    background: linear-gradient(135deg, #28b1bb 0%, #5038c8 100%);
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0)
    }
    to {
        -webkit-filter: hue-rotate(-360deg)
    }
}
@keyframes hue {
    from {
        -webkit-filter: hue-rotate(0)
    }
    to {
        -webkit-filter: hue-rotate(-360deg)
    }
}
.product-box .product-row {
    padding: 0 20px;
    max-width: 1400px;
    margin: auto;
}
.product-row .payrow-6 {
    padding: 0 10px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50%);
}
.more-but {
    margin-top: 30px;
}
.more-but .but.hollow {
    margin: 0 10px;
    padding: .5em 1.5em;
    margin: 0 010px;
}
.more-but .but.hollow:hover {
    color: #555;
}
.pay-content {
    max-width: 400px;
    margin: auto;
}
.product-header {
    font-size: 50px;
    letter-spacing: .1em;
}
.product-doc {
    opacity: .8;
    margin: 20px 0;
}
.pay-mark {
    font-size: .6em;
}
.original-price.ml10 {
    position: relative;
    padding: 0 5px;
    font-size: 18px;
    opacity: .7;
}
.product-pay {
    margin: 20px 0;
}
.product-pay .but {
    padding: .5em 2em;
    margin: 0;
}
.product-pay .but+.but {
    margin-left: 20px;
}
.product-details {
    background: rgba(0, 0, 0, 0.1);
    opacity: .6;
    max-width: 300px;
    text-align: left;
}
@media (max-width:768px) {
    .countdown-activity.flex {
        font-size: 13px;
        padding: 12px;
    }
    .activity-content.flex {
        display: block;
    }
    .countdown-content.flex {
        display: block;
        background: unset;
    }
    .countdown-desc {
        margin-bottom: 5px;
        margin-right: 0;
    }
    .product-box {
        padding: 10px 0;
    }
    .product-box .product-row {
        padding: 0;
    }
    .product-doc {
        margin: 10px 0;
    }
    .more-but {
        margin-top: 18px;
    }
    .product-box .product-row {
        text-align: center;
    }
    .product-row .payrow-6 {
        padding: 10px;
        width: 100%;
    }
    .payrow-6.payrow-left {
        margin-bottom: 20px;
        padding: 0;
        margin-top: -10px;
    }
    .payrow-6.payrow-left .radius8 {
        border-radius: 0;
    }
    .product-details {
        margin: auto;
    }
    .product-pay .cashier-link {
        width: 70%;
        border-radius: 100px;
        padding: 0.7em 2em;
    }
    .abs-center.right-bottom, .abs-center.right-conter, .abs-center.right-top {
    text-align: right;
}
.abs-center.right-top {
    left: auto;
    width: auto;
}
.abs-center.left-top, .abs-center.right-top {
    transform: unset;
    top: 0;
}
.abs-center, .abs-left, .abs-right, .form-select::before, .line-form-label, .payvip-icon:before, .toggle-radius .fa, .toggle-radius .icon {
    position: absolute;
    top: 50%;
    right: .7em;
    transform: translateY(-50%);
    z-index: 1;
}
.pay-content .share-btn text {
    display: none;
}
.line-form, .relative {
    position: relative;
}
}
.shop-single-z-btn .shouquan_guanli_anniu{
    display: block;
    text-align: center;
    border-radius: 4px;
    background-image: linear-gradient(300deg,#4c4d51 5%,#2a2a31 15%,#85858a 40%,#393a3c 60%,#393838 80%,#5e5f62 100%);
    color: #fff;
    }
    .countdown-activity{background:linear-gradient(135deg, #f411ff 10%, #14d4df 100%);}
    .jb-yellow, .order-type-3 .pay-tag{--this-bg:linear-gradient(135deg, #ff554f 10%, #facf28 100%);}
    @media screen and (min-width: 900px){
        .shop-single-z-btn .shouquan_guanli_anniu{
            font-size: 16px;
            height: 50px;
            line-height: 50px;
        }
    }
    @media screen and (max-width: 900px){
        .shop-single-z-btn .shouquan_guanli_anniu{
            font-size: 15px;
            line-height: 40px;
        }
    }

把下面图片下载在主题下的img文件内上传解压

https://zib2.cn/wp-content/uploads/2024/11/1730708908-pay_zibll.zip