Today, I’m swapping an old homepage design for a new one using WordPress and Pro Theme on WPEngine. The fresh design has updated typography, colors, and a pro layout.
Before swapping, I’ll back up both instances of the website due to recent live site work. Quality hosting like WP Engine is crucial, so avoid cheap providers like GoDaddy. After backing up, I’ll swap designs using Pro Theme templates. I faced challenges with the updated Cornerstone editor but successfully transferred the design by saving the homepage as a template.
Once imported, I fixed spacing and color issues, tweaked the global palette, and adjusted typography. I shared tips on creating a consistent look for small business websites, focusing on color palettes, typography, and design elements. In short, swapping a homepage design with Pro Theme and WPEngine is simple with the right steps.
Backup, import, adjust, and adhere to a consistent style for a polished result.
Michael Baker
Owner, Lead Project Manager, Michael Baker Digital
#WordPress #ProTheme #WPEngine #Cornerstone #WebsiteDesign #SmallBusiness
Key Moments:
00:00:01 – Introduction and Overview of the Homepage Redesign – Introducing the new homepage design using Cornerstone in Pro Theme on the WPEngine Managed WordPress hosting platform.
00:01:25 – Importance of Backing Up Instances -Discussing the importance of backing up both the live and staging websites before making any changes.
00:02:29 – Avoiding Cheap Hosting Platforms – Explaining why avoiding cheap hosting platforms like GoDaddy and switching to WPEngine is recommended.
00:03:17 – Swapping Homepages using Pro Theme Templates – Demonstrating the process of swapping the new homepage design with the existing one using Pro Theme templates.
00:06:28 – Importing the New Homepage Template – Uploading and importing the new homepage template to the existing website.
00:08:03 – Troubleshooting and Changing Global Colors -Fixing color issues and setting up global colors for the new homepage design.
00:10:19 – Using Color Pick Eyedropper Chrome Extension -Demonstrating the use of the Color Pick Eyedropper Chrome extension to grab colors from the web.
00:12:12 – Setting up Typography and Adhering to Branding -Establishing typography rules for the website and discussing the importance of adherence to branding.
00:14:24 – Applying Consistent Style Elements- Ensuring consistent style elements such as rounded edges and color schemes throughout the website.
00:15:28 – Helping Small Businesses with Branding/Style Guides
00:16:15 – Addressing typography issues and updating fonts in Pro theme
00:17:24 – Fixing global font settings and legacy font settings
00:18:16 – Identifying issues in the footer and discussing header area
00:19:30 – Fixing the off-canvas toggle button and background color
00:21:00 – Ensuring easy navigation for mobile users
00:22:09 – Addressing the footer issue and fixing button colors
00:24:49 – Discussing the pros and cons of Pro theme
00:25:21 – Modifying the footer menu and addressing mobile environment issues
00:26:09 – Finalizing the on-page swap and concluding the tutorial