Do you want to make your website stand out with unique layouts, styles, and interactive features? Advanced design and customization options in Thrive Suite give you the tools to create a fully personalized and visually stunning site tailored to your brand and goals.
In this article, we’ll show you how you can use techniques for using non-standard layouts, custom CSS, troubleshoot issues, understand theme structure and follow safe customization practices on your website.
- Techniques for Achieving Non-Standard Layouts
- Troubleshooting Design Issues After Site Recovery or Major Changes
- Understanding Theme Structure & Safe Customization Practices
- Command-Line (WP-CLI) Update Procedures
Techniques for Achieving Non-Standard Layouts
Creating unique layouts that break the standard “box” model can make a site stand out. Here are two methods to achieve effects like slanted sections.
- Using Built-in Thrive Architect Features (No Code)
- Using Custom CSS for Precision Control
Using Built-in Thrive Architect Features (No Code)
This is the recommended first approach as it’s supported directly within the editor and ensures compatibility.
Shape Dividers for Slanted and Curved Sections
- Select a “Background Section” or “Content Box” element in the editor.
- In the left-hand sidebar, go to the “Decorations” section.
- Click on “Shape Divider”.
- Apply a divider to the Top or Bottom of the element.
- Select a shape like “Slanted edge,” and adjust its color and height.
Managing the Element’s Positioning
You can use the Position option. Under the Positioning settings, select Relative and adjust the horizontal or vertical position for desktop, tablet, and mobile views.
Using Custom CSS for Precision Control
For custom shapes not available in the Shape Divider feature, you can use Custom CSS.
Applying the CSS clip-path Property
- Select the “Background Section” you want to modify.
- Go to the “HTML Attributes” section in the sidebar and assign a unique CSS Class (e.g., slanted-section-right).
- Add the corresponding CSS in a safe location (see Section 3.3).
Sample CSS for a slanted bottom edge:
.slanted-section-right {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}Troubleshooting Design Issues After Site Recovery or Major Changes
Design issues after a restore or migration are almost always caused by cached or outdated files.
- Common Culprits
- A Step-by-Step Troubleshooting Checklist
Common Culprits
- Check Domain in WordPress General Settings: In some cases, the website uses HTTPS, but the WordPress Address and Site Address still use HTTP. This mismatch can cause mixed content issues that affect file loading. To fix this, you can ask your hosting service provider to make sure all the URLs are HTTPS or use the Search & Replace Everything by WPCode to find HTTP domains and replace them with HTTPS. But, please ensure you take a backup before doing this.
- Caching: Old files being served by your browser, caching plugins (e.g., WP Rocket), or your server/CDN.
- CSS Loading Issues: Thrive Suite’s generated CSS files may not have been rebuilt or are inaccessible.
- URL Mismatches: Assets still pointing to an old staging or backup URL.
A Step-by-Step Troubleshooting Checklist
- Clear All Caches:
- Your web browser’s cache.
- Your WordPress caching plugin’s cache.
- Thrive Suite’s cache (Thrive Dashboard -> Thrive Features -> Performance).
- Your hosting provider’s or CDN’s cache (if applicable).
- Regenerate Thrive CSS Files:
- Go to Thrive Dashboard -> Thrive Features -> Performance.
- Click the “Regenerate” button in the “Asset regeneration” section. This solves most styling issues.
- Check for Plugin/Theme Conflicts:
- Temporarily disable all plugins except for the Thrive Suite. If the issue is resolved, re-enable plugins one by one to find the conflict.
- Verify Site URLs:
- Go to Settings -> General in WordPress and ensure both the “WordPress Address (URL)” and “Site Address (URL)” are correct.
Understanding Theme Structure & Safe Customization Practices
It is recommended that you never modify core theme files directly. Your changes will be lost upon the next update.
- The Role of a Child Theme
- Safe Places to Add Custom Code
The Role of a Child Theme
A child theme inherits the look and functionality of the parent theme (Thrive Theme Builder) but keeps your custom code separate and safe during updates. It is essential for adding custom PHP functions. You can download the Thrive Theme Builder child theme from your member dashboard on the Thrive Themes website.
Safe Places to Add Custom Code
- Custom CSS:
- For specific elements: Use the “Custom CSS” section in the Thrive Architect editor.
- For site-wide changes: Use the WordPress Customizer at Appearance -> Customize -> Additional CSS.
- Custom Scripts (JS, Tracking Codes):
- Go to Thrive Dashboard -> Theme Options -> Analytics & Scripts. This is the designated place to add tracking codes to the header or footer.
- Custom PHP Functions:
- Only add PHP snippets to the functions.php file located within your activated child theme’s folder.
Command-Line (WP-CLI) Update Procedures
Based on the official Thrive Themes documentation, there is no documented or officially supported method for updating Thrive Suite products via the command line (WP-CLI).
All updates should be performed through the WordPress dashboard. This allows the Thrive Product Manager plugin to properly authenticate your license with the Awesome Motive servers and deliver the correct update package. Using standard wp-cli commands will likely fail due to this authentication requirement.
We’ve just seen how you can use some design techniques and troubleshoot and fix any design issues on your website.