How To Build a Professional Website Using GeneratePress Premium – Hello everyone, in this tutorial, I am excited to show you how to create a professional website using the powerful GeneratePress Premium WordPress theme.
Building a sleek and professional website might seem challenging, especially for beginners in web design and development. However, with the right tools and resources, you can achieve an outstanding website that not only looks great but also functions flawlessly.
GeneratePress Premium is the perfect tool for this task, offering a wide array of customization options and impressive features. In this guide, we will walk you through the process of building a professional website with GeneratePress Premium.
From selecting the perfect layout and design elements to customizing your site’s functionality and optimizing content for search engines, we’ve got you covered.
Whether you’re a small business owner, a blogger, or someone looking to create a personal website, this comprehensive guide will equip you with the knowledge and resources needed to create a website that excels in appearance and performance.
Join me in this journey, and let’s learn together how to build a professional website using GeneratePress Premium WordPress theme. Let’s get started!
What is GeneratePress Premium WordPress Theme
GeneratePress Premium is a powerful and versatile WordPress theme that offers a wide range of customization options and advanced features, allowing users to create professional and visually stunning websites with ease.
Essential Requirements for a Pro Website with GeneratePress Premium
To build a professional website using the GeneratePress Premium WordPress theme, there are some essential requirements you need to fulfill:
1. WordPress Website: Before you start, ensure you have a WordPress website. If you don’t have one, you can refer to our guide on how to Install a WordPress Website on DigitalOcean to get started.
2. GeneratePress Premium Theme: You’ll need to have the GeneratePress Premium WordPress theme installed and activated on your WordPress website.
This premium version offers a wide range of customization options and features to enhance your website design and functionality.
Once you have these requirements in place, you’ll be all set to create a stunning and professional website using the power and flexibility of GeneratePress Premium. Let’s embark on this website-building journey together!
How To Install GeneratePress Premium WordPress Theme:
To install GeneratePress Premium WordPress Theme on any WordPress website, follow these simple steps:
1. First, make sure you have already installed the GeneratePress Theme.
2. Log in to your WordPress Dashboard and navigate to Appearance > Themes.
3. Search for “GeneratePress” and click on the “Install” button. Then, activate the theme by clicking on the “Active” button.
4. Congratulations! You have now successfully installed the GeneratePress Free theme on your site.
5. If you want to upgrade to the GeneratePress Premium version, you can purchase the Premium Addon from the official GeneratePress website or get it from me at a discounted price.
6. Once you have the GeneratePress Premium Addon plugin, go to Plugins > Add New > click on the “Upload Plugin” button. Then, upload your GeneratePress Premium Addon plugin here.
7. After the upload is complete, go to Appearance > GeneratePress. In the modules section, activate all the modules you want to use.
8. That’s it! You have now successfully installed the GeneratePress Premium WordPress Theme on your website. Enjoy the enhanced features and customization options it offers.
9. To activate all the premium modules go to Appearance >GeneratePress. Modules Section. Activate all modules from here.
How To Build A Professional Website Using GeneratePress Premium WordPress Theme
Now that we have successfully installed the GeneratePress Premium WordPress Theme on our website, let’s explore how to create a professional website using GeneratePress Theme.
Read More :
- How Long Does It Take To Learn HTML
- How To Build a Professional Website Using GeneratePress Premium WordPress Theme
- WordPress Locally On Android – How To Install WordPress Locally On Android
- WordPress Website Speed Optimization With WP Rocket Best Settings
- 3 Best Ways To Fix 404 Page Not Found Error On WordPress Website
My Custom Layout:
As shown in the screenshot below, we will build this website without relying on any third-party page builders.
Instead, we will use custom code to achieve the desired layout. Don’t worry if you are not familiar with coding; I will guide you through the process step by step.
With GeneratePress Premium’s powerful features and customization options, we can easily create a stunning website that meets our requirements. Let’s get started and bring your vision to life!
import the Marketer Template
To import the Marketer Template from the GeneratePress Site library, follow these steps:
1. Go to your WordPress Dashboard, then navigate to Appearance > GeneratePress.
2. On the top bar, you’ll find the Site library option.
3. Click on the “Site Library” button to access various website designs.
4. To filter by blog category, select “Marketer” design, which matches your preferences.
5. Click on “Get Started” to proceed.
6. It will ask whether you want to import both the style and demo data. Choose “Style” only, and skip importing dummy data.
7. The Marketer design will now be activated on your site, but it may take some time to complete the process.
Import GeneratePress Customizer Settings:
To effortlessly apply prebuilt Customizer Settings to your website, follow these simple steps:
1. Log in to your WordPress Dashboard.
2. Download the GeneratePress Customizer Settings file from the download section below.
3. Navigate to Appearance > GeneratePress. At the bottom of the page, locate the “Import” button.
4. Click on the “chose File” button and select the GeneratePress Customizer settings file you downloaded. Then, click on “Import” to proceed.
5. Congratulations! Your Customizer Settings have been successfully implemented on your site.
Now, let’s move forward to the next step in customizing your website according to your preferences.
Import Custom CSS Style In GeneratePress Theme:
To apply the custom layout style to your GeneratePress Theme, follow these steps:
1. Install the “WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager” plugin to add custom CSS code to your site. Go to Plugins > Add New Plugin, search for “WP Code,” and then install and activate it.
2. After activation, locate the “Code Snippets” option on the left side of your WordPress sidebar.
3. Go to Code Snippets > + Add Snippet > Add Your Custom Code, and click on “Use snippet.”
4. Provide a title for your snippet.
5. In the “Code type” dropdown, select “CSS Snippet.”
6. Paste the custom CSS code provided below in the “Code Preview” box. Ensure you copy the code accurately to see the desired design.
/* Code created by Mahesh Technicals*/
:root {
--main: linear-gradient(to right, rgb(173, 83, 137), rgb(60, 16, 83));
}
/* Header Background Color*/
.main-navigation,
.main-navigation ul ul {
background-image: var(--main);
}
/*All 123456 Heading Colors*/
.entry-content h2,
h3,
h4,
h5,
h6 {
color: white !important;
text-align: center;
padding: 10px;
margin: 10px 0px;
border-radius: 10px;
background-image: var(--main);
}
/* Read More Button.*/
.read-more.button {
background-image: var(--main);
color: white;
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
/* Footer color */
.site-info {
background-image: var(--main);
}
.widget_block h2 {
color: white !important;
text-align: center;
border-radius: 10px;
padding: 10px;
background-image: var(--main);
}
/* Post img style */
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
.resize-featured-image .post-image img {
border-radius: 10px;
box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}
.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.search .entry-title,
.search .entry-title a {
font-family: 'Poppins', sans-serif;
font-size: 26px;
font-weight: bold;
}
.entry-title {
margin-top: 30px;
color: purple !important;
font-weight: bold;
}
.site-title,
.site-title a {
font-size: 25px;
color: white !important;
}
/* Recent post with thumbnail */
#rpwwt-recent-posts-widget-with-thumbnails-4 img {
border-radius: 10px;
}
#comments .submit,
.search .search-submit {
border-radius: 10px;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
padding: 10px 20px;
border-radius: 10px;
background-image: var(--main);
}
#url {
display: none !important;
}
.entry-content ul li:before {
font-family: FontAwesome;
content: "\f140";
margin-left: -1.5em;
padding-right: 1em;
color: #4E42D4;
}
.widget_categories ul li::before {
font-family: FontAwesome;
content: "\f039";
padding-right: 1em;
color: #4E42D4;
font-size: 18px;
}
.entry-content p {
font-size: 18px;
}
.entry-content img {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.su-table table th {
color: white !important;
background: black !important;
}
.entry-meta,
.entry-meta * {
font-weight: bold;
text-align: center;
color: #990073 !important;
}
/* submit comment Button Style*/
#comments .submit,
.search .search-submit {
background: var(--main);
color: white;
}
.nav-links {
background: var(--main);
color: white;
padding: 10px 0;
border-radius: 10px;
display: flex;
justify-content: center;
}
.nav-links a {
color: white;
}
.nav-links,
nav-links a:hover {
color: white;
}
.widget-area .widget {
padding: 10px;
}
/* UL LI tags */
.entry-content ul li:before {
color: purple;
}
/* Recent posts with thumbnail style */
.rpwwt-widget ul li img {
border-radius: 5px;
}
/* comment-body */
.comment-body {
border-radius: 10px;
color: white;
font-weight: bold;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
background: radial-gradient(1294px at -15.5% 23.8%, rgb(255, 206, 149) 0%, rgb(247, 92, 92) 44.9%, rgba(108, 0, 96, 0.97) 93.8%);
}
/* comment author name */
.comment-meta {
background: black;
color: white;
padding: 10px;
border-radius: 10px;
display: flex;
align-items: center;
}
.comment-meta time {
color: white !important;
}
/* comment Author profile */
.comment-meta .avatar {
border: 2px solid purple;
}
/* comment a tags */
.comment-content a {
word-wrap: break-word;
color: purple !important;
}
/* Sidebar Search*/
.wp-block-search__button.wp-element-button {
background: var(--main);
border-radius: 10px;
font-weight: bold;
}
/* Search input */
.wp-block-search__input {
color: purple !important;
border-radius: 10px !important;
border: 2px solid purple;
}
/* Header Search bar after click */
.search-field {
background: var(--main);
color: white !important;
}
.search-field ::placeholder {
color: white !important;
}
button {
background: var(--main);
color: white !important;
}
/* Recent post with thumbnail text colors*/
.rpwwt-post-title {
color: purple;
}
/* Main Homepage Headings */
.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.search .entry-title,
.search .entry-title a {
color: purple;
}
/*Media Querry*/
@media (max-width: 544px) {
.entry-title,
.page-title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
.site-title,
.site-title a {
font-size: 20px;
}
.widget_block h2 {
font-size: 20px;
}
}
@media (max-width: 768px) {
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
padding: 10px;
}
}
/* Sticky Sidebar*/
@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: 70px;
/*Adjust position */
}
}
/* Credits : https://maheshtechnicals.com */
7. Once you’ve pasted the code, enable the switch at the top right corner to activate the CSS.
8. Click on “Save Snippet” to apply the changes. The page will refresh, and your custom layout will be implemented on your site.
9. Congratulations! Your custom layout style has been successfully imported into your site. Visit your website to see the changes.
Add Stylish Recent Posts Widget On Sidebar:
To add a Stylish Recent Posts Widget to your sidebar, follow these steps:
1. Log in to your WordPress admin dashboard.
2. Navigate to the “Plugins” menu and click on “Add New.”
3. In the search bar, type “Recent Posts Widget With Thumbnails.”
4. Locate the plugin in the search results and click on the “Install Now” button.
5. Once the installation is complete, click on the “Activate” button.
6. The plugin is now successfully installed and activated on your website.
7. Go to Appearance > Customize > Widgets > Right Sidebar.
8. Click on the plus icon to add a new widget. Search for “Group” and provide a title, such as “Recent Posts.”
9. Now, click on the plus icon again and search for “Recent Posts With Thumbnails.” Add this widget to the “Recent Posts” group.
10. Once added, remember to save the changes from the top bar.
Congratulations! You have successfully added a beautiful and stylish recent posts section to your sidebar. Visitors can now easily see and engage with your latest content.
Add Social Media Icons On Sidebar:
To add stylish social media icons to your site, follow these steps:
1. To implement the Social Media Icon section, you’ll need custom HTML / CSS code.
2. Go to Appearance > Customize > Widgets > Right Sidebar.
3. Click on the plus icon to add a new widget. Search for “Group” and provide a title like “Follow Us.”
4. Click the plus icon again and search for “Custom HTML.” Select the custom HTML block.
5. Copy and paste the HTML & CSS code provided below into the custom HTML block. Make sure to replace “#” with your social media links in the code.
<style>
#social-logo {
width: 100px;
border-radius: 50%;
border: 2px solid red;
padding: 10px;
}
#social-links-mt {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#social-links-mt a {
text-decoration: none;
padding: 10px 20px;
text-align: left;
color: white;
width: 90%;
margin: 5px 5px;
border-radius: 10px;
}
.fbicon {
background-image: linear-gradient(135deg, #7d8cfd 0, #486ee5 50%, #0052cd 100%);
}
.yticon {
background-image: radial-gradient(circle at 100% 0%, #ffa40a 0, #ff9423 10%, #ff8231 20%, #ff6f3b 30%, #ff5b42 40%, #f94646 50%, #e53248 60%, #d11e4b 70%, #c0074d 80%, #b00050 90%, #a20053 100%);
}
.tgicon {
background-image: radial-gradient(circle at 87.5% 12.5%, #9ca8ff 0, #486ee5 50%, #003787 100%);
}
.instaicon {
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}
.twicon {
background: linear-gradient(45deg, #1DA1F2, #0d90e0)
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div id="social-by-mt">
<div id="social-links-mt">
<a href="#" class="yticon" target="_blank"><i class="fa-brands fa-youtube"></i> Youtube</a>
<a href="#" class="tgicon" target="_blank"><i class="fa-brands fa-telegram"></i> Telegram</a>
<a href="#" class="fbicon" target="_blank"><i class="fa-brands fa-square-facebook"></i> Facebook</a>
<a href="#" class="instaicon" target="_blank"><i class="fa-brands fa-instagram"></i> Instagram</a>
<a href="#" class="twicon" target="_blank"><i class="fa-brands fa-square-twitter"></i> Twitter</a>
</div>
</div>
6. After pasting the code, click on the “Save Changes” button. Now, visit your site to see how your stylish social media icons appear.
7. Congratulations! You have successfully added a social media icon section to your site. This enhancement will elevate the overall look of your website and allow visitors to connect with your social media platforms easily.
With these steps, you can now showcase your social media presence and engage more effectively with your audience.
Download Section :
| File Name | Download Links |
|---|---|
| GeneratePress Customizer Settings | Download |
| GeneratePress Premium Plugin | Download |
How to Create a Professional Author Box in GeneratePress Theme
Before you start, make sure you’ve watched my previous video or followed my article on designing your website using the GeneratePress Premium Theme. Once you’ve done that, you can proceed to set up the Author Box.
Let’s walk through the steps to add a custom professional author box section below every post on your site:
- Log in to your WordPress Dashboard.
- Go to Appearance > GeneratePress and ensure that you’ve activated the Elements module.
- Now, navigate to Appearance > Elements section. Here’s where you’ll add the author box. Click on Add New Element. When asked to choose Element Type, select Hook, then click on Create.
- In the title, enter “Author Box.” You’ll need a code for the content box, so copy the code provided below and paste it into your content box. This code is for creating the author box using HTML & PHP.
<div class="MaheshTechnicals-author-box">
<div class="insights-avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div>
<div class="insights-author-info">
<div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </div>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
</div>
<div class="author-links"> <a href="https://maheshtechnicals.com/about-us/" title="Read more about this author">Read More</a> </div>
</div>
</div>
- In the Hook section, choose generate_after_entry_content.
- Check the box in front of Execute PHP.
- Now, proceed to the Display Rules section. Here, you’ll define where your author box will appear. Under the Location section, select post. Click the Publish button. You’ve successfully added an author box feature to your posts.
- However, it may not look well-designed yet. To improve the design, follow these additional steps.
- To add custom CSS, use the WP Code Snippets plugin you installed earlier. If you’re unfamiliar with this plugin, refer to this link.
- Copy the CSS code below and paste it on your site. To do this, go to your WP dashboard, navigate to WP Code Snippets > Add Code Snippets, and then click on Use Default.
- Provide a title (e.g., “Author Box”) and add all the CSS code in the content section.
.MaheshTechnicals-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;
}
.MaheshTechnicals-author-box .insights-avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
.MaheshTechnicals-author-box .insights-avatar img {
border-radius: 100%;
}
.author-title {
margin-bottom: 0.1em;
font-weight: 500;
font-size: 18px;
font-weight: bold;
}
.author-description {
line-height: 1.6em;
font-size: 16px;
margin-bottom: 20px;
}
.author-links a {
margin-top: 1rem;
font-size: 14px;
line-height: 2em;
font-weight: bold;
color: white;
float: left;
text-decoration: none;
padding: 10px;
background: purple;
border-radius: 5px;
}
@media (max-width: 768px) {
.MaheshTechnicals-author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
margin-bottom: 60px;
flex-direction: column;
text-align: center;
}
.MaheshTechnicals-author-box .insights-avatar {
margin-right: 0;
width: 100%;
margin-top: -60px;
}
.MaheshTechnicals-author-box .insights-avatar img {
max-width: 100px;
}
.author-links a {
float: none;
align-self: center;
}
}
- In the Code Type dropdown, select CSS Snippets. Enable the switch, and click on Publish or Update.
- That’s it! The CSS code will work its magic, and you’ll see your well-designed author box section.
- If you’re not seeing the description, go to your user profile and make sure you’ve added Biographical Info.
Follow these steps, and you’ll easily create an author box in the GeneratePress theme.
Youtube Video Tutorial :
Conclusion :
In conclusion, this comprehensive tutorial provides a step-by-step guide on how to build a professional website using the GeneratePress Premium WordPress theme. It highlights the essential requirements, including having a WordPress website and installing the GeneratePress Premium theme.
The tutorial covers topics such as custom layout creation, importing customizer settings, applying custom CSS styles, and adding stylish recent posts and social media icons to the website’s sidebar.
By following this tutorial, users, whether small business owners, bloggers, or individuals creating personal websites, can leverage the powerful features and customization options of GeneratePress Premium to create visually stunning and functional websites. With the guidance provided, even beginners in web design and development can achieve outstanding results.
So, embark on this website-building journey with GeneratePress Premium, and bring your vision to life with an exceptional website that excels in appearance and performance.
I can’t download your pro plagin…..???
You have any issues.
Desable ad blocker & try again