Generatepress Homepage design कैसे करें

वर्डप्रेस ब्लॉग पर सबसे ज्यादा इस्तेमाल होने वाला Theme generatepress है यह थीम बहुत ज्यादा Light weight, है जिससे वेबसाइट फ़ास्ट लोड होता है इसके Mobile friendly भी है सबसे खास बात की ये Free or paid दोनों वर्शन मे अवेलेबल है ऐसे मे generatepress theme use करना बहुत ज्यादा फायदेमंद है

वही Generatepress premium इस्तेमाल करने के लिए gp premium plugin डेवलप किया गया है जिसमे Elements Module को एक्टिवेट करके generatepress theme premium version इस्तेमाल किया जा सकता है

Generatepress homepage design कैसे करें

Generatepress Theme का होमपेज डिज़ाइन बिल्कुल सिंपल है जो रीडर को कुछ – खास अट्रैक्ट नहीं करता इसलिए बहुत से ऐसे लोग है जो इसे अपने अनुसार डिज़ाइन करके इस्तेमाल करते है इसे खुद से डिज़ाइन करने के दो तरीके है पहला पेज बिल्डर प्लगइन और दूसरा Coding का इस्तेमाल करके लेकिन यहाँ परेशानी ये है की अधिकतर ब्लॉगर को Coding की जानकारी बिल्कुल भी नहीं है और page builder का इस्तेमाल करना नहीं चाहते ( क्योंकि इससे website slow load होता है )

Read also; generatepress theme author box kaise add kare

फिर भी वे अपने वेबसाइट को कुछ अलग डिज़ाइन करना चाहते है इंटरनेट पर उपलब्ध जानकारी के आधार पर यदि आप भी ऐसे ही व्यक्ति है तो ये पोस्ट खास आपके लिए है क्योंकि इसमें हमने एक बेहतरीन डिज़ाइन के बारे मे बताया है जिसका इस्तेमाल करके generatepress theme homepage को attractive बनाया जा सकता है

Activate Elements Module

Homepage Design करने के लिए आपके पास Gp premium होना चाहिए एवं उसके elements module activate होना चाहिए यदि Elements module activate नहीं है तो पहले Activate कर ले WordPress dashboard > appearance > Elements > Activate all Module.

Generatepress theme Homepage Designing Tutorial In hindi

Elements Module activate हो चुके है अभी सबसे पहला काम है Homepage Post Section design करना क्योंकि Generatepress theme homepage मे पोस्ट का जो Columns है वो सिंपल है उसको कुछ अट्रैक्टिव बनाना है एक तो इस साइट ( Successbranch ) के जैसा और दूसरा Newspaper List Section जैसा

Read also; Generatepress Related post kaise add kare – without plugin

Newspaper theme मे Homepage पर जितने भी पोस्ट है सभी का Image left मे float होता हो और tittle right मे इस तरह generatepress theme मे भी किया जा सकता है बस इसकी जानकारी होनी चाहिए यदि नहीं है तो हमारा ये tutorial follow करते रहिए

Homepage Post Coulmns design Successbranch Style

इस ब्लॉग के जैसा होमपेज डिज़ाइन करने के लिए आपको ज्यादा कुछ नहीं करना है बस एक छोटा सा Css code ऐड करना है

#1. Disable Read more button – WordPress dashboard मे जाये वहां appearance > Customise > Layout > Blog > Read more, को Uncheck कर दे और publish पर क्लिक करके पब्लिश कर दे Homepage से Read more button hide हो जाएगा

#2. Hide Summary – Homepage पर Tittle के नीचे दिखने वाले Exceprts को Hide करना है इसके लिए नीचे दिए गए Css को Customise > Additional Css मे कही भी Peste कर देना है और फिर पब्लिश पर क्लिक करें Homepage Summary hide हो गया

.entry-summary {
display: none;
}

#3. Enable Coulmns features – अभी यहाँ Tittle or image दिखेगा इसे coulmns मे डिवाइड करना है इसके लिए Customise > Layout > blog > Display posts in columns को Check ✔️ करे > Coulmns मे 4 सेलेक्ट करें और Publish करें

#4. Style coulmns – ऊपर बताए गए सेटिंग कर लेने के बाद नीचे दिए गए Css को Customise > additional css > मे कही भी peste कर दे और पब्लिश कर दे

.generate-columns {
    text-align: center;
}

.generate-columns{
    border: 1px solid #dddddd;
box-shadow: 0 10px 10px -5px;	
}

Congrats अब आप अपने ब्लॉग को open कर के देखे सकते है Successbranch जैसा होमपेज पोस्ट सेक्शन डिज़ाइन तैयार है अभी Newspaper theme की तरह Post section को डिज़ाइन करने के बारे मे जानते है ( Note ; List type post section डिज़ाइन के लिए ब्लॉग पर ऐड इमेज जो feature image है वो एक Height, Width का होना चाहिए )

Generatepress homepage post section design like Newspaper theme

Generatepress Homepage Post Section को grid से लिस्ट मे कन्वर्ट करने के लिए सिर्फ Css कोड को ऐड करना है जिससे Customise > Additional css > box मे कही भी peste कर दे पोस्ट सेक्शन grid से list से कन्वर्ट हो जाएगा

@media(max-width: 768px) {
    .entry-summary {
        display: none;
    }

    body:not(.single) .inside-article {
        display: grid;
        grid-template-columns: 40% 60%;
    }

    .post-image,
    .entry-header {
        grid-row: 1;
    }

    .post-image {
        grid-column: 1;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 2em !important;
    }
}

Generatepress Homepage Post section लगभग डिज़ाइन हो गया ये पूरी तरह से यूनिक डिज़ाइन है यदि और अधिक डिज़ाइन चाहते है तो पेज बिल्डर प्लगइन इस्तेमाल करें जैसे की Thrive arthictet, Elementor Page builder आदि.

Add Iconic Category

यदि Category के साथ Short Summary, एवं इमेज ऐड करना चाहते है तो इसके लिए नीचे बताए गए तरीका को फॉलो करें ( जैसा की इस ब्लॉग successbranch मे ऐड है ) और Same ऐसा ही दिखेगा

#1. Copy Css Code – नीचे दिए गए कोड कॉपी करें और उसे appearnace > customise > additional Css > box मे peste कर दे और publish कर दे

.home .wdgt{padding:3% 0 0;text-align:center;}
.widget-title {
    padding-bottom: 5px;
    margin: 0 auto 20px;
    font-size: 24px;
    text-align: center;
}
.home-function .column {
    display: inline-block;
    width: 90.110%;
    padding: 0 10px;
    margin-bottom: 20px;
    vertical-align: top;
}.home-function .column h3{font-size:20px;letter-spacing:1px;text-transform:uppercase;margin:0;color:#555;}
.home-function a{display:block;position:relative;background:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:40px;text-decoration:none;color:#031b4a;transition:transform,box-shadow .1s;will-change:transform,box-shadow;box-shadow:0 2px 4px rgba(3,27,78,.06);}
.home-function a:hover{border-color:#ccc;transition:.3s;transform:translateY(-2px);box-shadow:0 20px 50px 0 rgba(0,0,0,0.12);}

@media only screen and (max-width: 768px)
.home-function .column {
    width: 100%;
}

#2. Copy html code – नीचे दिए गए html code को कॉपी करें appearance > Elements> add new elements पर क्लिक करें Hook select करें box मे कोड peste कर दे

<div class="home-function wdgt"><div class="wrap"><h5 class="widgettitle widget-title">- मै सिखना चाहता हूॅ -</h5><div class="column"> <a href="https://successbranch.com/category/blogging-course"><h5>Start a Blog</h5><div class="image"><img class="cat-1 l-image" src="https://successbranch.com/wp-content/uploads/2021/02/writing.png" width="160" height="160" data-src="https://successbranch.com/wp-content/uploads/2021/02/writing.png" alt="Blogging"><noscript>&lt;img class="cat-1 l-image" width="120" height="120" src="https://www.supportmeindia.com/wp-content/uploads/2018/12/blog-min.jpg" alt="Blogging"&gt;</noscript></div><div class="desc"><p>सभी तरह के <strong>वेबसाइट</strong>बनाना सीखे स्टेप - by - स्टेप हिन्दी में <br> </p></div></a></div>
<div class="column"> <a href="https://successbranch.com/category/blogger"><h5>Blogging Tutorial </h5><div class="image"><img class="cat-2 l-image" src="https://successbranch.com/wp-content/uploads/2021/02/settings.png " width="160" height="160" data-src="https://successbranch.com/wp-content/uploads/2021/02/settings.png" alt="Hosting"><noscript>&lt;img class="cat-2 l-image" width="120" height="120" src="https://www.supportmeindia.com/wp-content/uploads/2018/12/hosting-min.jpg" alt="Hosting"&gt;</noscript></div><div class="desc"><p>मुफ्त ब्लॉगस्पॉट ब्लॉग <strong>सेटअप </strong>और टुटोरिअल हिन्दी में  </p></div></a></div>
<div class="column"><a href="https://successbranch.com/category/seo"><h5>एसईओ</h5><div class="image"><img class="cat-3 l-image" src="https://successbranch.com/wp-content/uploads/2021/02/seo.png" width="160" height="160" data-src="https://successbranch.com/wp-content/uploads/2021/02/seo.png" alt="SEO"><noscript>&lt;img class="cat-3 l-image" width="120" height="120" src="https://www.supportmeindia.com/wp-content/uploads/2018/12/seo-min.jpg" alt="SEO"&gt;</noscript></div><div class="desc"><p>सर्च इंजन ऑप्टिमाइजेशन टिप्स <strong> हिंदी में</strong>पढ़ें।.</p></div></a></div>
<div class="column"><a href="https://successbranch.com/make-money-online/"><h5>पैसा कैसे कमाए?</h5><div class="image"><img class="cat-4 l-image" src="
https://successbranch.com/wp-content/uploads/2020/08/make-money-online.jpg " width="160" height="160" data-src="https://successbranch.com/wp-content/uploads/2020/08/make-money-online.jpg" alt="Make Money"><noscript>&lt;img class="cat-4 l-image" width="200" height="224" src="https://www.supportmeindia.com/wp-content/uploads/2018/12/money-min.jpg" alt="Make Money"&gt;</noscript></div><div class="desc"><p>इंटरनेट से ऑनलाइन पैसे कमाने के    <strong>अनलिमिटेड तरीका</strong>पढ़ें।</p></div></a></div>
<div class="column"><a href="https://successbranch.com/category/banking"><h5>  Banking </h5><div class="image"><img class="cat-6 l-image" src="https://successbranch.com/wp-content/uploads/2021/02/bank.png" width="160" height="160" data-src="https://successbranch.com/wp-content/uploads/2021/02/bank.png" alt="Internet"><noscript>&lt;img class="cat-6 l-image" width="200" height="224" src="https://www.supportmeindia.com/wp-content/uploads/2018/12/internet-min.jpg" alt="Internet"&gt;</noscript></div><div class="desc"><p> ऑनलाइन ,ऑफलाइन <strong>बैंकिंग</strong> से जुडी जानकारी हिंदी में </p></div></a></div></div></div>

#3. Hook Location Setting – Setting मे generate-after-content select करें, Location मे front page Select करें ( यदि Category को सिर्फ Homepage पर दिखाना है तो ) और publish कर दे

Category-wise icon with Short description add हो गया आप चाहे तो इसमें जो इमेज ऐड है वो भी Replace कर सकते है ( बदल ) सकते है

Add Email Subscribe box

आज भले ही Push notification ब्लॉग पर ज्यादा इस्तेमाल हो रहे है फिर उससे कारगर तरीका है Email marketing और शायद ही आगे भी रहेगा इसलिए ब्लॉग पर email subscribe widget भी होना जरुरी है इसके अलावा ये Blog को अट्रैक्टिव दिखाने के लिए भी जरुरी है यदि आप किसी बढ़िया सब्सक्राइब widget की खोज मे है तो मै जो बता रहा हूँ वो सबसे उपयुक्त है इसे आप जैसे चाहे Customise कर सकते है वैसे तो इसके बारे मे मैंने पोस्ट लिखा है फिर भी यहाँ बता दे रहा हूँ क्योंकि ये पोस्ट homepage design के बारे मे है और सब्सक्राइब बॉक्स लगाना जरुरी है

#1. Email Subscribe Widget Css code – नीचे दिए गए Css code copy करें Appearnance > customise > Additional css मे Code peste कर दे

#HMH-FeedBurner {	
background-color: transparent; 
border: 1px solid #f2f2f2;
padding: 80px 0;
	
text-align: center;
	width: 100%;
	height: 100%;
}
#HMH-FeedBurner input[type="text"] {
border: 1px solid #ffffff;
font-size: 13px;
background-color: transparent;
margin: 0 0 15px 0;
padding: 15px;
height: 60%;
text-align: center;
color:#ffffff;
	width: 80%;
}
#name {
background: url() no-repeat scroll right center #0000;
}
#email {
background: url() no-repeat scroll right center #fff;
}
#HMH-FeedBurner input[type="submit"] {
background: #fff;
border: 1px solid #000000;	
color: #000000;
cursor: pointer;
font-size: 16px;
font-weight: bold;
height: 40px;
margin-top: 5px;
padding: 8px;
text-transform: capitalize;
width: 80%;
}
#HMH-FeedBurner input[type="submit"]:hover {
background: none repeat scroll 0 0 #000080;
	color: #fff;
}

#2. Email Subscribe widget html code – अभी नीचे दिए गए html code copy करें appearance > widget > custom html > Sidebar सेलेक्ट करें और बॉक्स मे कोड peste कर दे

<div id="HMH-FeedBurner">
	
 <font
face="verdana"
          color="black,orange">Subscribe and get latest wordpress blogging plugin hosting motivation and make money tpis daily"</font> 
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Successbranch', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="HindiMeHelp" /><input type="hidden" value="en_US" name="loc" />
<input type="text" id="name" name="name" onfocus="this.value=&#39;&#39;" value="Enter Your Name" placeholder="Enter Your Name" />
<label><input type="text" id="email" name="email" onfocus="this.value=&#39;&#39;" value="Enter Your Email Address" placeholder="Enter Your Email Address" /></label>
<input type="submit" value="Subscribe Now!" id="submit" name="submit" />
</form>

	
	
</div>

Homepge पर इतना ही widget काफ़ी है ज्यादा रखने से Homepage slow load होता है जो ब्लॉग के लिए अच्छा नहीं है आप इन 3 design को इस्तेमाल करके ब्लॉग को बहुत ज्यादा अट्रैक्टिव बना सकते है फिर भी आपको लगे की और कुछ ऐड करने की जरुरत है तो आप हमें कमेंट करके बता सकते है

designing की कोई limitations नही है जितना चाहे जैसे चाहे कर सकते है लेकिन, यदि आपको ब्लॉग की basic design खास कर generatepress theme को करना है तो आप हमारे इस पोस्ट की मदद ले सकते है मै हमेशा कोशिश करता हूँ की कम शब्दों मे आपको ज्यादा और useful जानकारी दे सकूँ और मुझे आप सभी का प्यार देख कर लगता है की मै काफ़ी हद तक इसमें सफल भी रहा हूँ हमारे साथ जुड़े रहिए ऐसे ही useful जानकारी आपके साथ शेयर करता रहूँगा

उम्मीद है आपको हमारा ये पोस्ट generatepress homepage designing tutorial पसंद आया आपको लगे की ये पोस्ट वास्तव मे उपयोगी है तो इसे सोशल साइट्स पर जरूर शेयर करें