GeneratePress Theme को कैसे Customize करें? (Full Guide in Hindi)

by

अगर आप अपनी वर्डप्रेस वेबसाइट को प्रोफेशनल लुक देना चाहते हैं, तो GeneratePress Theme सबसे बढ़िया विकल्पों में से एक है। यह fast, lightweight और SEO-friendly theme है। लेकिन अगर आप चाहें तो इसे अपने हिसाब से CSS Code के ज़रिए पूरी तरह से कस्टमाइज़ कर सकते हैं।

इस पोस्ट में हम बताएंगे कि GeneratePress को step-by-step कैसे customize करें और साथ में एक शानदार CSS code भी देंगे, जिससे आपकी साइट का लुक बिलकुल Premium जैसा हो जाएगा।

🔧 Step 1: GeneratePress Theme Install करें

  1. अपने WordPress Dashboard में जाएं
  2. Appearance > Themes > Add New पर क्लिक करें
  3. “GeneratePress” सर्च करें और Install > Activate कर लें

यह theme हल्की और beginner-friendly होती है। अब इसे कस्टमाइज़ करने का समय है।

🎨 Step 2: Additional CSS Section में Code डालें

  1. WordPress Dashboard में जाएं
  2. Appearance > Customize पर क्लिक करें
  3. Left sidebar में सबसे नीचे जाएं और “Additional CSS” पर क्लिक करें
  4. अब नीचे दिया गया CSS Code वहां paste कर दें

✨ CSS Code: Premium Look के लिए

/* Read More Button */

a.gb-button {
    font-size: 14px;
    padding: 10px 25px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border-radius: 120px;
    background-image: linear-gradient(to right, #26bc00 0, #00c853 51%, #26bc00 100%) !important;
}

/* Archive Featured Image */

.gb-block-image img {
    vertical-align: middle;
    margin-top: 0px;
    border-radius: 12px;
    box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}

/* Post Featured Image */

.page-header-image-single .attachment-full {
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
    border-radius: 25px;
}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
    max-width: 100%;
    height: auto;
}

/* Search Button */

.wp-block-search__button {
    border-radius: 20px;
    font-size: 13px !important;
    padding: 8px 20px !important;
    text-align: center;
    color: #fff !important;
    box-shadow: rgb(23 43 99 / 30%) 0 4px 28px !important;
    background-color: #26bc00;
    margin-left: 0.625em;
    word-break: normal;
}
.wp-element-button {
    cursor: pointer;
}

/* Sidebar Widget Title */

.widget-title {
    padding: 10px 10px;
    background-image: linear-gradient(to right, #26bc00 0, #00c853 51%, #26bc00 100%) !important;
    border-radius: 10px;
    font-weight: 500;
    color: #fff !important;
    font-size: 18px !important;
    text-align: center;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
#rpwwt-recent-posts-widget-with-thumbnails-1 img {
    width: 50px;
    height: 50px;
}
.rpwwt-widget ul li img {
    display: inline;
    float: left;
    margin: 0.2em 0.75em 0.75em 0;
}
.rpwwt-widget img {
    border-radius: 4px;
}
.widget-area .widget {
    padding: 30px;
}

/* vivekbloggerup author box */

.vivekbloggerup-author-box {
    padding: 3%;
    padding-bottom: 10px;
    margin-top: 30px;
    font-size: 0.9em;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
    border-radius: 25px;
}
.vivekbloggerup-author-box .insights-avatar {
    width: 250px;
    height: auto;
    border-radius: 100%;
    margin-right: 30px;
}
.vivekbloggerup-author-box .insights-avatar img {
    border-radius: 100%;
}
.author-title {
    margin-bottom: 0.1em;
    font-weight: bold;
    font-size: 18px;
}
.author-description {
    line-height: 1.6em;
    font-size: 16px;
}
.author-links a {
    margin-top: -2em;
    font-size: 14px;
    line-height: 2em;
    font-weight: bold;
    color: #26BC00;
    float: left;
}

/* Responsive Author Box */

@media (max-width: 768px) {
    .vivekbloggerup-author-box {
        padding: 20px;
        padding-bottom: 25px;
        margin-top: 60px;
        margin-bottom: 60px;
        flex-direction: column;
        text-align: center;
    }
    .vivekbloggerup-author-box .insights-avatar {
        margin-right: 0;
        width: 100%;
        margin-top: -60px; 
    }
    .vivekbloggerup-author-box .insights-avatar img {
        max-width: 100px; 
    }
    .author-links a {
        float: none;
        align-self: center;
    }
    .author-description {
        margin-bottom: -0.1em;
    }
}

/* Headings inside content */

.entry-content h3 {
    font-size: 21px !important;
    font-weight: 600 !important;
}
.entry-content h2, h3, h4, h5, h6 {
    font-weight: 600;
    padding: 10px 10px 10px 25px;
    background-image: linear-gradient(to right, #26bc00 0%, #35343a 51%, #26bc00 100%);
    border-radius: 10px;
    color: #fff !important;
    box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}

इस CSS से आपकी साइट में:

  • Stylish Read More बटन आएगा
  • Widget headings colorful बनेंगी
  • Author box प्रोफेशनल दिखेगा

📱 Step 3: Responsive Design Check करें

GeneratePress पहले से ही mobile-friendly है, लेकिन ऊपर दिया गया CSS भी पूरी तरह responsive है। आप चाहें तो Mobile View में Customize section से live preview देख सकते हैं।

✍️ Conclusion

GeneratePress एक शानदार थीम है जिसे आप थोड़ा सा CSS जोड़कर बहुत ही सुंदर और यूनिक बना सकते हैं। ऊपर दिए गए कोड और स्टेप्स को फॉलो करके आपकी साइट भी premium blogs जैसी दिखेगी। CSS सीखने की जरूरत नहीं, बस copy-paste से सब कुछ कस्टम बन सकता है।

अगर आपको ये पोस्ट पसंद आई हो तो इसे शेयर ज़रूर करें, और कोई सवाल हो तो नीचे कमेंट करें।

Happy Blogging!

Leave a Comment