Introduction
In the fast-paced world of web design and development, staying up to date with the latest trends and technologies is essential. One such trend that has gained significant popularity in 2023 is the customization of the GeneratePress Professional theme. This versatile theme has become a favorite among web developers and site owners for its flexibility and ease of use. In this article, we will explore the ins and outs of GeneratePress Professional theme customization, providing you with valuable insights and tips to make your website stand out in the digital landscape.
Why Choose GeneratePress Professional?
Before we dive into the customization options, let’s briefly understand why GeneratePress Professional is the go-to choice for many in 2023.
GeneratePress Professional is a lightweight, highly customizable WordPress theme that offers an array of features designed to enhance your website’s performance and aesthetics. It provides a solid foundation for any type of website, from blogs and business sites to e-commerce platforms. Some of the key reasons to opt for GeneratePress Professional include:
1. Speed and Performance
GeneratePress is renowned for its lightning-fast loading times. In an era where website speed can make or break user experience, this theme’s performance optimization is a significant advantage.
2. Customization Freedom
With its vast customization options, GeneratePress allows you to create a unique and tailored website without the need for extensive coding knowledge. It provides control over layouts, colors, typography, and more.
3. SEO-Friendly
Search engine optimization is crucial for online visibility. GeneratePress follows best practices for SEO, ensuring that your website is primed for high rankings on search engine results pages (SERPs).
4. Responsive Design
In an age where mobile browsing is predominant, GeneratePress’s responsive design ensures that your website looks stunning on all devices, further enhancing user experience.
Getting Started with GeneratePress Professional Customization
Now that we’ve established why GeneratePress Professional is a top choice let’s delve into the customization process. Here’s a step-by-step guide to help you make the most of this theme:
1. Installation and Activation
To begin, you need to install and activate the GeneratePress theme. You can do this directly from your WordPress dashboard by searching for the theme and clicking the “Install” button and also add GeneratePress Premium Plugin
2. Configure Global Settings
Once activated, navigate to the theme settings. Here, you can configure global settings like site identity, layout, typography, and color schemes. Customize these settings to align with your brand and website goals.
3. Explore the Customizer
GeneratePress offers an intuitive customization interface through the WordPress Customizer. This feature-rich tool allows you to make real-time changes to your website’s appearance. Experiment with various options to find the perfect look and feel.
For more Steps See our YT Video
Additional CSS:
/* GeneratePress Site CSS */
.sidebar .widget,
.container-widget {
box-shadow: rgba(23, 43, 99, 0.3) 0 6px 18px;
border-radius: 4px;
}
/*Button Style*/
.read-more-bt,
a.button,
.pagination-bt,
.wp-block-search__button,
input[type=”submit”] {
font-size: 14px;
padding: 10px 25px;
transition: 0.5s;
background-size: 200% auto;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
background-image: linear-gradient(to right, #1fd1bf 0, #07b0a2 51%, #1fd1bf 100%);
border-radius: 50px;
}
.read-more-bt:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
a.button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
input[type=”submit”]:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.pagination-bt:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.wp-block-search__button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
/*Attachment Image Style*/
.attachment-full {
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 25px;
}
#wp-block-search__input-1 {
border-radius: 5px;
border: 0px;
}
.author-title {
margin-bottom: 0.1em;
font-weight: 600;
font-size: 18px;
}
.author-description {
line-height: 1.6em;
font-size: 16px;
}
.author-links a {
margin-top: -1.5em;
font-size: 2em;
line-height: 2em;
float: left;
}
@media (max-width: 768px) {
.webinsights-author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
flex-direction: column;
text-align: center;
}
.webinsights-author-box .insights-avatar {
margin-right: 0;
width: 100%;
margin-top: -60px;
}
.webinsights-author-box .insights-avatar img {
max-width: 100px;
border-radius: 100%;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}
.myimg {
max-width: 100%;
margin-bottom: 30px;
}
.social {
background-color: #10b98e;
padding: 10px;
color: #fff !important;
text-decoration: none;
display: block;
border-radius: 30px;
text-align: center;
font-size: 16px;
}
.social:hover {
box-shadow: 1px 1px 8px #888;
color: #fff;
}
.social.fb {
background-color: #4267b2;
margin-top: -10px;
}
.social.yt {
background-color: #c4302b;
margin-top: -10px;
}
.social.insta {
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
margin-top: -10px;
}
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 8px 10px;
transition: all 0.3s ease;
color: #fff;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3b5998;
color: #fff;
}
.twitter {
background: #55acee;
color: #fff;
}
.google {
background: #dd4b39;
color: #fff;
}
.linkedin {
background: #007bb5;
color: #fff;
}
.youtube {
background: #b00;
color: #fff;
}
.content {
margin-left: 75px;
font-size: 30px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
border-radius: 10px;
margin-left: -10px !important;
}
::-webkit-scrollbar {
width: 10px;
margin-left: -10px;
background-color: #f5f5f5 !important;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #fff;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
}
.rpwwt-widget img {
border-radius: 4px;
}
.comment-form #url {
display: none;
}
.masonry-load-more a {
font-size: 14.5px;
font-weight: 600;
padding: 8px 25px !important;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
transition: 0.5s;
color: #fff;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 120px;
margin-bottom: 40px;
}
.masonry-load-more a:before {
font-family: FontAwesome;
content: “\f067”;
padding-right: 0.5em;
color: #fff;
font-size: 15px;
}
.masonry-load-more a:hover {
opacity: 0.8;
}
.wp-block-search .wp-block-search__input {
flex-grow: 1;
min-width: 3em;
border: 1px solid #949494;
}
.wp-block-search__input {
border: none !important;
border-bottom: 1px solid #cdd6d1 !important;
background: 0 0 !important;
font-size: 15px;
padding: 5px 2px !important;
}
input:focus-visible {
outline: -webkit-focus-ring-color auto 0;
}
.wp-block-search__button {
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%) !important;
}
.wp-block-search__button {
border-radius: 20px;
font-size: 13px !important;
padding: 8px 20px !important;
text-align: center;
color: #fff !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px !important;
}
.widget_categories ul li::before {
font-family: FontAwesome;
content: “\f039”;
padding-right: 1em;
color: #49bcc0;
font-size: 18px;
}
.author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
border-radius: 25px;
}
.author-box .avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
h5.author-title {
margin-bottom: 0.1em;
font-weight: 600;
font-size: 18px;
}
.author-description {
line-height: 1.6em;
font-size: 16px;
}
.author-links a {
margin-top: -1.5em;
font-size: 2em;
line-height: 2em;
float: left;
}
@media (max-width: 768px) {
.author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
flex-direction: column;
text-align: center;
}
.author-box .avatar {
margin-right: 0;
width: 100%;
margin-top: -25px;
}
.author-box .avatar img {
max-width: 100px;
border: 2px solid #10b98e;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}
.page-header-image-single .attachment-full {
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 25px;
}
.comment-respond .comment-reply-title {
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
font-weight: 600;
color: #fff !important;
font-size: 22px !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.entry-content figure img {
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
transition: 0.5s;
}
.entry-content figure img:hover {
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s;
}
.attachment-full {
top: 0;
top: -12px;
position: relative;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
transition: 0.5s;
}
.attachment-full:hover {
top: -20px;
transition: 0.5s;
}
.featured-image:hover ~ .size-full {
display: none;
}
.entry-content ul li {
margin: 20px 0;
list-style: none;
margin-left: -20px;
text-decoration: none;
background-image: linear-gradient(transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px), linear-gradient(transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px);
background-size: 0 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.3s ease-in-out;
background-repeat: no-repeat;
padding-bottom: 8px;
font-weight: 700;
}
.entry-content a:not(.button):not(.wp-block-button__link):not(.gb-button) {
text-decoration: none;
background-image: linear-gradient(transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px), linear-gradient(transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px);
background-size: 0 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.3s ease-in-out;
background-repeat: no-repeat;
padding-bottom: 4px;
font-weight: 700;
}
.entry-content ul li:hover:not(.button):not(.wp-block-button__link) {
color: #10b98e;
background-size: 100% 6px;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link):not(.gb-button) {
color: #10b98e;
background-size: 100% 6px;
}
.entry-content ul li:before {
font-family: FontAwesome;
content: “\f140”;
margin-left: -1.5em;
padding-right: 1em;
color: #4cbac3;
}
.entry-content h2 {
font-size: 25px !important;
}
.entry-content h3 {
font-size: 21px !important;
font-weight: 900 !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, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
font-weight: 600;
color: #fff !important;
font-size: 22px !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
.widget-title {
padding: 10px 10px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
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;
}
.sidebar .widget {
box-shadow: rgba(23, 43, 99, 0.3) 0 6px 18px;
border-radius: 5px;
padding: 40px 25px;
}
.button.light {
background-color: #fff;
border-radius: 50px;
font-weight: 700;
color: #333;
}
.button.light:hover {
background: #333;
color: #fff;
}
@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
}
@media (max-width: 768px) {
.post-image-aligned-left .post-image img {
margin-top: -20px;
border-radius: 12px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
}
@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;
}
}
a.read-more.button {
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
}
a.read-more.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;
}
a.read-more.button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
blockquote {
background: #dcdcdc54;
border-left: 5px solid #4cbac3;
padding: 15px;
font-style: inherit;
font-size: 18px;
margin: 0 0 1.5em;
}
.sbox {
position: fixed;
top: 50%;
left: 20px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
border-radius: 25px;
overflow: hidden;
background: #fff;
width: 40px;
padding: 20px 2px;
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}
.sbox a {
padding: 15px 5px !important;
text-align: center;
line-height: 15px;
}
.sbox a i {
margin: 12px 5px;
transition: 0.3s;
color: pink;
}
.sbox a i:hover {
margin-left: 10px;
transition: 0.3s;
}
.entry-content .wp-block-heading {
padding: 10px 10px 10px 25px;
background-image: linear-gradient(to right, #4cb8c4 0, #3cd3ad 51%, #4cb8c4 100%);
border-radius: 10px;
font-weight: 600;
color: #fff !important;
font-size: 22px !important;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}
/* End GeneratePress Site CSS */
Color Code – #07b0a2
Conclusion
In conclusion, GeneratePress Professional theme customization in 2023 offers a wealth of opportunities for web developers and site owners. Its versatility, speed, and customization options make it a top choice for creating visually stunning and highly functional websites. By following the steps outlined in this article, you can harness the power of GeneratePress Professional to make your website shine in the digital landscape
Post Views: 1,260
