How To Customize GeneratePress Theme With Best CSS

how to Customize GeneratePress Theme With CSS

इस आर्टिकल में आपके लिए Customize GeneratePress Theme With CSS दिया गया है | जिससे आपकी वेबसाइट का look एकदम से बदलकर बहुत ही बेहतरीन हो जायेगा, आशा करता हूँ कि आपको ये Customize GeneratePress Theme With CSS जरूर पसंद आयेंगे |Customize GeneratePress Theme With Best CSS

GeneratePress वर्डप्रेस स्पेस में सबसे प्रसिद्ध ब्लॉगिंग थीम में से एक है। इसके इतने लोकप्रिय होने का कारण इसकी सादगी है। जैसे ही आप इसे देखते हैं, आप यह सोचना शुरू कर सकते हैं कि आपकी सामग्री कहाँ और कैसी दिखेगी और आपके उपयोगकर्ता इसे कैसे ब्राउज़ करेंगे।Customize GeneratePress Theme With CSS

how to Customize GeneratePress Theme With CSS

Customize GeneratePress Theme With Best CSS

Customize GeneratePress Theme With CSS

प्रत्येक वेबसाइट की अपनी आवश्यकताएं होती हैं, इसलिए थीम को लोकप्रिय वर्डप्रेस प्लगइन्स के साथ जोड़ा जा सकता है और अधिक कार्यक्षमता जोड़ सकता है। चाहे कस्टम पोस्ट प्रकार, कस्टम फ़ील्ड, गैलरी या पोर्टफोलियो हों, GeneratePress यह कर सकता है।Customize GeneratePress Theme With Best CSS

वास्तव में आप इसे ई-शॉप साइट के लिए भी उपयोग कर सकते हैं क्योंकि यह WooCommerce के लिए भी अनुकूल है। यह सब आपका बहुमूल्य समय और धन बचाता है ताकि आप महत्वपूर्ण बातों पर अधिक ध्यान केंद्रित कर सकें।Customize GeneratePress Theme With Best CSS

GeneratePress एक हल्की थीम है जिसे आप वर्डप्रेस साइटों के लिए प्राप्त कर सकते हैं। हालांकि, मुफ्त संस्करण फुटर लिंक और सीमित थीम सेटिंग्स जैसी सीमित सुविधाओं के साथ आता है। संपूर्ण सुविधाओं का उपयोग करने के लिए आपको GeneratePress प्रीमियम प्लगइन खरीदना होगा।Customize GeneratePress Theme With Best CSS

यदि आप कमर्शियल वर्डप्रेस थीम के सेटअप से परिचित हैं, तो आपको आश्चर्य होगा कि GeneratePress के पास काम करने का अलग तरीका है।Customize GeneratePress Theme With Best CSS

यहां कुछ टिप्स दी गई हैं जिनसे आप GeneratePress थीम को customize कर सकते हैं-

  1. Change published date to last updated date
  2. Add Google Analytics without plugin
  3. Insert Yoast breadcrumb
  4. Insert author bio box without plugin
  5. Insert advertisements without plugin
  6. Add leave a reply above comment section
  7. Remove links from author and post dates
  8. Using Elements in GeneratePress

यहाँ GeneratePress Theme के Main Features दिए गये हैं-

  1. Simplicity
  2. Responsive design
  3. Fast loading
  4. Great support
  5. Awesome documentation
  6. Compatible with WooCommerce, WPML, BuddyPress, and bbPress
  7. Compatible with Elementor and Page Builder
  8. Free child themes
  9. The theme includes all the default WordPress options plus options to:
  10. Change the layout of the header, content area, sidebars
  11. Cache CSS
  12. Load only the essential Font Awesome icons and not the whole library
  13. Change the alignment of the navigation and the title
  14. 9 sidebars with the option to use them per page or post

GeneratePress कई अन्य थीम की तरह थीम विकल्प प्रदान नहीं करता है। आपको अपनी साइट पर कोड डालने के लिए एलिमेंट्स फ़ंक्शन और सेटअप कस्टम हुक का उपयोग करना होगा। GeneratePress थीम में Elements फीचर का उपयोग करने के लिए नीचे दिए गए स्ट्रेप्स का पालन करें।

  • Navigate to “Appearance > GeneratePress” section.
  • You will see all the modules of the theme here.
  • Click on the “Activate” link against “Elements” option.
  • Remember, “Disable Elements” is a different feature for disabling title. You have to
  • activate the “Elements” option.

हम में से बहुत से लोग मानते हैं कि वेब पेज की गति बहुत महत्वपूर्ण है। Google ने यह भी पुष्टि की है कि मोबाइल वेब पेज की गति वास्तव में मोबाइल रैंकिंग में मुख्य भूमिका निभाता है। Google वेब पेज स्पीड स्कोर चिंता का विषय नहीं है।Customize GeneratePress Theme With CSS

जो अधिक महत्वपूर्ण है वह है एक अच्छा उपयोगकर्ता अनुभव, और इसके कारण, आपकी साइटों को हल्का और बेहतर भी होना चाहिए।Customize GeneratePress Theme With CSS

GeneratePress को साइट की गति को ध्यान में रखकर विकसित किया गया था। थीम के सबसे मानक इंस्टॉलेशन में से एक 28Kb से बहुत कम है जो बेजोड़ है।

इसके अलावा, GeneratePress को नवीनतम कोडिंग मानकों के अनुसार कोडित और संरचित किया गया है, यह बहुत साफ और साथ ही संरचित दिखता है।

अब बारी आती कि आपको वह स्पेशल CSS Code दिया जाए जिससे आप अपने GeneratePress को और भी बेहतरीन look दे सकें | Customize GeneratePress Theme With CSS

how to Customize GeneratePress Theme With CSS
Customize GeneratePress Theme With CSS

 

Customize GeneratePress Theme – CSS Code Copy Here

.page-header-image-single .attachment-full, nav {
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
border-radius:25px;
}
img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;
}
.sidebar .widget
{
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}
/* Featured widget */
.sidebar .widget:first-child {
background-color: background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
color: #fff;
border-radius:25px;
}
img {
margin-top: -20px;
border-radius: 25px;
box-shadow: rgba(0,117,226,0.86) 5px 5px, rgba(0,117,226,0.5) 10px 10px, rgba(0,117,226,0.4) 15px 15px, rgba(0,117,226,0.2) 15px 15px!important;
}

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #fff;
}

.sidebar .widget li {
margin-bottom: 15px;
}

.button.light {
background: #fff;
color: #000;
}

.button.light:hover {
background: #fafafa;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.page-header h1 {
font-size: 30px;
}

@media (max-width: 768px) {
.post-image img {
max-width: 100%;
}
}
.wpsp-related-posts1 {
background-color: #fff;
padding: 24px 20px 10px 20px;
margin-top: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.page-numbers{padding:5px 10px;background-color:#187cd6;border-radius:15px;color:#fff!important;border:5px solid #187cd6;margin-right:.30em;box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;!important}
.page-numbers:hover,
.page-numbers.current{background-color:#fff;color:#187cd6!important}#top-bar-notify{text-align:center!important;top:0;z-index:99;border-bottom:2px dashed #eaf1f8;background-image:linear-gradient(135deg,#006ff5 0%,#a400c7 105%)!important;color:#fff;font-size:18px}

blockquote {
border-left: 5px solid rgba(10, 0, 0, 0.05);
padding: 20px;
font-size: 1.2em;
font-style:italic;
margin: 0 0 1.5em;
position: relative;
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;
}
/* max-width: 300px; */margin-top: -20px;
border-radius: 10px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
}
}

@media( max-width: 769px ) {
.inside-article .post-image a img {
margin: -1.1em 1em 0 0 !important;
border-radius: 10px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
}
}
h3,h4 {
border-left: 8px solid blue;
border-right: 8px solid blue;
border-radius: 25px;
background-color: whitesmoke;
padding:15px;
font-family: #fff;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;!important;
}
.mobile-header-navigation .mobile-header-logo img {
width:160px;
}

/* End GeneratePress Site CSS */

यहाँ GeneratePress CSS Code दिया गया है Download बटन पर क्लिक करके download करे –

GeneratePress CSS CodeGeneratePress Theme Customization

Buy GeneratePress Premium in Just 199/- only @ Our Website’s Store

आशा करता हूँ की यह GeneratePress Theme Customization CSS Code को कॉपी करके अपनी वेबसाइट और भी beautiful look दे दिया होगा | और यदि आपके कुछ सुझाव हो या आपको यह  GeneratePress Theme Customization CSS Code पसंद आया हो तो –

“कमेन्ट जरूर करें |”

P L E A S E   C O M M E N T और शेयर जरूर करें ||

धन्यवाद्
पवन शास्त्री ( GPL Ji )

 
Thank You For Visit 

2 thoughts on “How To Customize GeneratePress Theme With Best CSS

Leave a Reply

Select your currency