GeneratePress Marketer Theme Customization in 1minuet

Hi Friends, today i am going to share with you  GeneratePress Marketer Theme Customization Tutorial. with this manual Customization tutorial, you can create your best website structure in your WordPress blog. It will help you to make your blog/website Google Adsense friendly as well as SEO Friendly. As you all know that to get Adsense approval quickly website structure, design, and theme matter a lot.

When a beginner starts their new blogging journey the very first investment they buy a domain and hosting but he ignored a theme that is equally important as hosting.

So every beginner must invest in a good theme. Then why beginners do not invest in premium themes? I think it’s because of its high price.

But everybody knows that when you start up a new business you need some initial investment to get success.

Also sometimes a beginner is confused about which theme should they buy. So every time I recommend using Generatepress Premium that is a very light and AdSense-friendly theme.

Ok then, hope you have already Generatepress Premium and you want some customization in your theme that's why you read this article, so let's start.

GeneratePress Marketer Theme Customization Tutorial

GeneratePress Premium is a very lightweight and Adsense-friendly theme but this theme does not provide a great design for your website to feel look good.

The official design is very normal but we can modify this from the section Additional CSS & some little theme customization. We have made a premium design for your website using GeneratePress Custom CSS Like Above Screenshot.

In this tutorial, we will describe the complete GeneratePress Premium installation to Customization process step by step.

How to Install GeneratePress Premium?

To use GeneratePress Premium in your Blog/website you need to install two things one GeneratePress Theme & GeneratePress Premium Plugin.

To Install GeneratePress Theme Just Goto your

WordPress Admin Dashboard >> Appearance >> Themes Section.

Then Click on Add New Theme >> In the search box Enter GeneratePress and install & activate GeneratePress Free theme.

Now You Need GeneratePress Premium Plugin.

When you buy GeneratePress Premium You get one Zip file, Just Download that file.

Now Goto WordPress Admin Dashboard >> Plugins >> Add New >> Upload Plugins

Here you upload Your GeneratePress Premium plugin and Activate it.

Now Here is the main setup which you need to follow must.

Now go to WordPress Admin Dashboard >> Appearance >> GeneratePress

in GeneratePress option Dashboard goto Module Tab Select all Deactive Modules and Activate all and reload the page. Please follow the below Screenshot.

Now Click on the Site library and Select the Marketer theme from the library Click the Get started button to import that theme.

Atlast Theme installaion is done. but It does not end here it's just a beginning so Stay tuned and read carefully.

How To implement GeneratePress Custom CSS?

I am now providing you one CSS code & it's completely free you can copy the custom code from here and paste it into your WordPress. We take care of every small error, this design is very light and does not affect your website speed.

But you should take a backup of your website before applying any manual customization so that if anything error happens you can simply upload the previous version of your website.

Please Follow the Below step to Implement GeneratePress Custom CSS.

1. Login to your WordPress Admin dashboard.
2. Go to Appearance and click on Customize.
3. Under Customization Page, scroll down click on Additional CSS  and paste the given code.
4. Finally, click on Publish.
5. Clear your cache and refresh ( if you use any CDN Plugins)

/*GeneratePress Theme advance  Customization by Everhoodie*/

.page-header-image-single .attachment-full{
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
border-radius:25px;
}
.entry-content h2,h3,h4,h5,h6{
font-weight:600;
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%);
border-radius:10px;
color:white!important;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
}

.entry-content h2{
font-size:25px!important;
}
.entry-content h3{
font-size:21px!important;
}
.entry-content h4{
font-size:17px!important;
}
.entry-content h5{
font-size:15px!important;
}
.entry-content h6{
font-size:13px!important;
}

.comment-respond .comment-reply-title{
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%);
border-radius:10px;
font-weight:600;
color:white!important;
font-size:22px!important;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
}

/*End of Article Page Design*/


/*all widget title color*/

.widget-title{
padding: 10px 10px;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%);
border-radius:10px;
font-weight:500;
color:white!important;
font-size:18px!important; text-align:center;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
}

/*all widget title color End*/

/*Sidebar Title color change only for Recent post widgets

.recent-posts-widget-with-thumbnails .widget-title{
padding: 10px 10px;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%);
border-radius:10px;
font-weight:500;
color:white!important;
font-size:18px!important; text-align:center;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
}
*/

.sidebar .widget {
box-shadow: rgba(23,43,99,.3) 0 6px 18px;
border-radius: 25px;
}

/*  if 1st Sidebar section Diff BG
.sidebar .widget:first-child {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%)
}
*/

.button.light {
background-color: #fff;
border-radius: 50px;
font-weight: 700;
color:#333;
}

.button.light:hover {
background: #333;
color: #fff;
}

/*End of sidebar code*/

/*End of sidebar code*/

@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;
}
}
/* Mobile query */
@media (max-width: 768px) {
.post-image-aligned-left .post-image img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23,43,99,.2) 0 7px 28px!important;
}
}

/* Widget Sticky */
@media (min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
}

/* Read More button Style */

a.read-more.button {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%)}
a.read-more.button {
font-size:14px;
padding: 10px 25px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
border-radius: 120px;

}

a.read-more.button:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}

/* Read More button Style */

blockquote {
background: #dcdcdc54;
border-left: 5px solid #1EA4FF;
padding: 15px;
font-style: inherit;
font-size: 18px;
margin: 0 0 1.5em;
}

Best Customization Settings for Generatepress

Now you need some more basic setup customization to feel your website good Just Follow the below Steps.

a) Customize Logo, Site Icon, and Some Identity

Goto Appearance > Customize

In Customize Panel left sidebar > Click side Identity > Select Your Logo & Site icon

Tick check Box Hide Site Title & Hide Site Tagline ( You can use it if you want ).

Then Click Go back 

b) Customize Website Layout 

Open Layout > Container 

• Set Container Width > 1280px
• Set  Separating Space > 25px
• Content Separator > 1 Px
• Content Layout > One Container
• Content Padding > 50 50 20 50

Then Go back

Open Layout > Top Bar 

• Top Bar Width > Full
• Top Bar Inner Width > Full
• Top Bar Alignment > Left 
• Top Bar Padding > 5,0,0,5

Then Go back

Open Layout > Header

• Tick on Use Navigation as Header
• Mobile Header > Off ( You can set on it if you want )

Open Layout > Primary Navigation 

• Set Mobile Menu Label > Blank 
• Note: Rest setting You can change if you want

Open Layout >Sticky Navigation

• Sticky Navigation > On 
• Transition > Slide
• Tick on Hide when scrolling down Option 

Open Layout >Sidebars

• Set Left Sidebar Width > 25%
• Right Sidebar Width > 30%

Open Layout >Blog

• Content type > Excerpt
• Excerpt word count > 25 ( You can set it according to Your choice)

Open Layout >Footer 

• You Can edit here Footer Content & Copyright Text

Now Go Back From Layout section

c) Customize Some Colors

I have provided below some Color codes to Modify some colors of your website but you can set your Color as you want.

Open Colors > Body section

• Backgroud > White
• Text Color > Black
• Set Link Color >

#1ea8ff

• Link Color Hover >

#1abc9c

Open Colors > Primary Navigation Color 

• Set Navigation Color Presets > Current 
• Note : You can Update it as your Choice 

Open Colors >Buttons 

• Set Background Color>

#49b9ff

• Text > White
• Background Hover

#1ea8ff

• Background > White
• Text > White
• Link >

#1b78e2

• Link Hover >

#1abc9c

Rest Color Like Footers Color Others Color You can set as your Choice.

Now Go back From Color Sections.

d) Customize Your Website Font

To look Feel Good You always need to set up your Website / Blog Fonts.

Open Typography > Body 

• Select Font > Poppins or You set as you like
• Font Size > 17px

Now Go Back  & Publish. Now Everything is done.

Conclusion

So we are Done with all GeneratePress Marketer Theme Customization Setup. Hope You all Understand this setup.If you are still facing any issues then you should Write a comment below. I am always happy to help you.