How-to-Make-a-Full-Width-Thrive-Architect-Page-in-Thrive-Theme-Builder

How to Make a Full Width Thrive Architect Page in Thrive Theme Builder

Most people buy the Thrive Themes Membership, install all the Thrive Themes and plugins including Thrive Theme Builder (Shapeshift theme) and Thrive Architect. But when they try to go on and make a full with page using Thrive Architect, then they face a very common issue.

When you have the Thrive Theme Builder installed, then create a new page and try to edit it with Thrive Architect, you will see that that whatever contents you are trying add are surrounded by spaces on either sides. There are also spaces in the top and bottom. Please have a look at the screenshot below to understand the issue most new users of Thrive Architect face.

When you will try to create a full width Thrive Architect page in the Thrive Theme Builder page layout, there are several things which will prevent you from doing that. They are:

  • The large title section at the top of the page
  • The large call to action section at the bottom of the page
  • Space at the top and bottom of the page content
  • Space on either sides of the page content

Let me show you step by step of how you can tackle each of the issues one at a time and properly learn how to create a very nice 

STEP 1: Create a new page and edit with Thrive Architect

From the WordPress back end, create a new page, give it a name, save it as a draft, and then edit with Thrive Architect.

creating a new page and editing with thrive architect

STEP 2: Remove the top section (title section)

Now remove the large title section from the top of the page. By going to the visibility section of Thrive Architect and then hiding the top section. Please have a look at the screenshot below. Enlarge the image by clicking on it.

removing-the-top-section-in-thrive-architect

STEP 3: Remove the bottom section (Call to Action section)

Remove the bottom section in the same way you removed the top section. By going to the Thrive Architect visibility settings and then hiding the bottom section.

removing-the-bottom-section-in-thrive-architect

STEP 4: Add a background section

Now add the background section from Thrive Architect. After adding the background section, set the background color to #f0f0f0, then set the minimum height of the background section to 500px. This step is necessary because we need to be able to visibly see the background section, so we can see that it actually covers the full width after doing the steps below.

background-minimum-height

STEP 5: Removing the spacing from the sides

To remove the spacing for both the sides of the background section, under the “Main Options” turn on the option “Stretch to fit screen width”.

STEP 6: Removing the top and bottom spacing

To remove the top and bottom gap from the background section, simply add a -40px margin to the top and bottom of the background section.

removing-the-bottom-section-in-thrive-architect

Conclusion

So this is how easily create a 100% full width page in Thrive Architect in the default Thrive Theme Builder default page layout. Follow these 6 easy steps and you can do the same.

Hello, I am Tasvir

Hey there! Thank you for visiting my website. I understand your frustration if you are a startup and your local web agencies are asking for thousands of dollars to build a simple good looking site. But you also don’t want a site with a bad design, it will do more harm to your brand than good. In that case, I might be able to help you out! Get connected with me on any one of the platforms below to get started.

Recommended WordPress ResourceBenefits of using it
Element PackThis is a useful Elementor addon plugin that adds around 60 addon elements to your Elementor page builder. Useful elements such as the Instagram gallery, table, document viewer, iframe, and much more.
WP EngineReliable WordPress hosting. Super fast, regular automatic backups, built-in CDN for faster content delivery, top-notch security, and more!
Jupiter Multipurpose WordPress theme for ElementorImport among many 450 ready-made websites made with Elementor and customize them according to your needs. Advanced WooCommerce checkout options optimized for better conversions.
WP RocketA magical WordPress plugin that will reduce the load time of your website to less than a second. It is an all-in-one speed optimization tool. It will also improve your Google Page Insights score. As the pages load quicker your website bounce rate will decrease, and average pages on time will increase. Eventually, you will get more traffic.
Slider RevolutionThe most powerful and advanced WordPress slider plugin ever. Over 200+ ready eye candy slider templates to wow your website visitors. Advanced animations, parallax effects, and interactive features.
Duplicator ProThis plugin will save you from disaster. It keeps regular backups of your WordPress sites. In case you break your site you can easily recover it. Using this plugin you can also easily migrate your WordPress sites. It can also keep cloud backups such as Dropbox, Google Drive, One Drive, etc.
ThemeforestBuy any type of beautiful WordPress theme from here such as blogging, WooCommerce, Real Estate, etc. Ability to import any demo site. Chose any type of page builder such as Elementor, WP Bakery, Muffin builder, etc.
𝗘𝗻𝘃𝗶𝗿𝗮 𝗚𝗮𝗹𝗹𝗲𝗿𝘆Best WordPress image and video gallery plugin. Easy to use with powerful and advanced features. If your WordPress page builder does not have a good enough gallery element then check this one out!
– Completely responsive on mobile
– Social Media Integration
– Slideshow & Fullscreen
– Drag & Drop Builder
Ithemes Security ProIt is a powerful WordPress security plugin. It will protect your website from bots trying to hack into your site through a brute force attack. It can also scan your website and remove malware.
Getty ImagesGet premium stock images from here. Using high-quality and premium stock images on your site will make your site look professional. Visitors will be impressed and quickly turn into paying customers.
WP FormsOne of the most popular WordPress form plugins ever. Easily build advanced contact, payment, donation, survey, and newsletter forms with zero coding. Embed your forms on posts/pages using a shortcode. Built-in Recaptcha to prevent spam. The information of people submitting the form will be stored as leads directly on the website.
NamecheapBuy any type of domain name at a very low price. The renewal rates are also reasonable. I use namecheap domain names on all of my websites.

India $1295