Do you want to design a website like How I did by using GeneratePress? Here I will provide HTML and CSS Codes of my website for free of Market Theme design code to build your website exactly how I did. Before this, you need to have a premium plugin of GeneratePress.
What is GeneratePress
GeneratePress is a premium theme for WordPress, which focus on speed and mobile-friendly themes so that the website can load faster. If the loading speed is less then there is a high chance of ranking the website on Google Search. Free Themes are available but considering the speed of the blogging site, premium themes help us to create and customize the website easily. Know the difference between free & premium.
How to add Plugins & Theme
Plugin
Login to your WordPress admin site. Go to plugins and click on add new to add a new plugin. Select the GeneratePress plugin .zip file which you got after your purchase. Activate it after installation is completed. Once after activating the plugin go to configure and activate all settings in GeneratePress to access them in the future.
WordPress > Plugins > Add New > Select GeneratePress(.zip) > Click on “Install Now” > Activate after Installation done.
Go to Plugins > Select GeneratePress > Click on “Configure” > Activate all options (as shown).
Theme
To install the free GeneratePress theme, Go to Appearance, select the themes option ( it will show when you hover your cursor on the Appearance section), and click on Add new button to add a new theme, and search the theme name as “GeneratePress” on the search bar. download & activate the theme.
WordPress > Appearance > Theme > Add New > Search “GeneratePress” > Download > Activate
Market Theme Design code CSS
Here I will share the Home page customization code and explain each part of CSS you can modify and the result for that particular code as well.
/* ------------_Lets Explore Tech_---------- */
/*GeneratePress Customization by Lets Explore Tech*/
.page-header-image-single .attachment-full{
box-shadow: rgba(23,43,99,.3) 0 7px 28px;
border-radius:25px;
}
.entry-content h2{
font-weight:600;
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #000000 0%, #0D3A71 75%, #1A0CF2 100%);
border-radius:10px;
color:white!important;
box-shadow: rgba(23,43,99,.3) 5px 8px 9px;
}
.entry-content h3{
font-weight:600;
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to left, #3DFFF0 0%, #5FFFF3 15%, #CEFFFB 45%, #EFFFFE 100%);
border-radius:10px;
color:black!important;
box-shadow: #000000 -6px 6px 6px;
}
.entry-content h4,h5{
font-weight:600;
padding: 10px 10px 10px 25px;
border-radius:10px;
color:black!important;
box-shadow: rgba(00,00,99,.9) -5px 7px;
}
.entry-content h6{
font-weight:600;
padding: 10px 10px 10px 25px;
border-radius:10px;
color:black!important;
box-shadow: rgba(23,43,99,.3) 5px 8px;
}
.entry-content h2{
font-size:24px!important;
}
.entry-content h3{
font-size:20px!important;
}
.entry-content h4{
font-size:16px!important;
}
.entry-content h5{
font-size:14px!important;
}
.entry-content h6{
font-size:12px!important;
}
.comment-respond .comment-reply-title{
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #0000ff 0%, #000055 50%, #000011 100%);
border-radius:15px;
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*/
/* Read More button Style */
a.read-more.button {background-image: linear-gradient(to right, #0000ff 0%, #000088 51%, #0000ff 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: 50px;
}
/* Read More button Style Hover Effect */
a.read-more.button:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
transition: 1.5s;
font-weight: bold;
}
/* Read More button Style & Hover Effect End */
/* -----------_Lets Explore Tech_-------------*/You can play with this code using VS Codes, try changing font size, color, border radius, and shadow effects as per your requirements.
Conclusion
The above code will help you to change to heading style and Read more button styles, You can change properties like Padding, Color, font styles, shadows, etc., This code is free to use and you can paste this code at Additional CSS located at Theme Customization section.
Hope you like this Market Theme design code, Please comment on your experience and issues if any. I will try to rectify by making your website design cool. I will be doing some more code for you to make the website design looks attractive, do follow and connect with us to explore more such things.
You may also like:
Very good information