Fun Fact Alert
This post is jam-packed with juicy info, so do yourself a favour – ditch the phone and grab a device with a screen size that won’t have you squinting! Tablet, desktop, or notebook – it’s time to dive into the knowledge pool without splashing your eyes!GreenShift – Page-Building Gutenberg Blocks
Hey fabulous Flothemers! 🎉 So, the cat’s out of the bag, Flothemes dropped the bombshell—they’re stepping away from WordPress and won’t be rolling out any new updates for their products. Bummer, right? Many of us had our suspicions when Pixieset and Flothemes tied the knot back in 2021, but it still stings a bit to hear the official word. If you’ve poured your heart, soul, and maybe a few too many coffees into getting your Flothemes site just right, you’re probably scratching your head, wondering, “What’s the next move?”
Fear not, my friends! I’ve been rolling up my sleeves and diving deep into the world of website wizardry to bring you a step-by-step guide on switching from Flothemes to rocking it out with the Blocksy theme and Gutenberg blocks! 🚀 It might feel like learning to ride a bike again, but I promise to hold the handlebars until you’re ready to pedal solo. And here’s the kicker, you get to stay cozy with WordPress, avoiding the SEO rollercoaster of hopping onto Pixieset, Showit, Squarespace, or any of those other platforms.
I had this grand vision of hosting a whirlwind webinar to walk you through the switch, but let’s be real—it’s not happening! There’s just too much juicy info and so many nifty steps to cover; even a 90-minute webinar would feel like trying to fit a giraffe into a Mini Cooper! 🦒🚗 But no worries, my friends! Below, you’ll find a comprehensive, step-by-step guide, spilling all the beans on making the switch, and guess what? It’s all free!
Oh, and here’s a cherry on top! I had a little chit-chat with the awesome folks over at Blocksy, and guess what? They’re offering a sweet discount for anyone ready to jump ship and sail with their products! 🎈 So, buckle up, grab a snack, and let’s dive into this treasure trove of website wisdom together! 🌟
Hey, you’re not alone in this Flothemes maze! Many are in the same boat. So, let’s help each other out—share this guide! It’s a simple way to ensure everyone gets the insights they need to navigate their digital dilemmas. Let’s spread the knowledge and keep everyone in the loop!
A Journey Beyond Flexblocks Editor
Alright, so diving into the world post-Flexblocks Editor is like stepping out of a Photoshop canvas and into a realm of responsive design magic! 🌟 With Flexblocks, placing elements felt like a freehand drawing—thanks to the blend of flex and absolute positioning. It was a love affair for many, and hey, no judgment here!
But, let’s spill some tea—it wasn’t the web design holy grail. If your visitors weren’t giving their browsers the full-screen treatment, they’d be squinting at unreadable text due to scaling issues. Sure, mobile versions were unscathed, but we’re aiming for perfection here! 👀 Check out the example video below, and you’ll see what I mean. When the browser downsizes, readability takes a hit, but the design? Unchanged. That’s the flex and absolute position dance for you, a dance that’s getting a remix in your new website journey! 🕺
Now, let’s flip the script and peek at how browser scaling harmonizes with Gutenberg blocks on a fully responsive website. Notice the transformation? The way the typography flows, the way images find their perfect spots—it’s a symphony of responsive design! 🎶
Alright, so as you can see in the video above, we haven’t quite reached the symphony of responsive design level yet, but we’re getting there! We’ll dive into the nitty-gritty tweaks later. For now, I just want you to grasp the core difference. And yes, there are more features that diverge, but we’re taking this journey one step at a time.
If you choose to stick with WordPress and transition to Gutenberg blocks, brace yourself—it’s not going to be a Flex Blocks replica. Just a heads-up so you know what you’re diving into. Whether you leap to Kadence, Blocksy, or another theme, remember, it’s just a theme, and Gutenberg blocks are, well, blocks—a plugin to be precise. Currently, Greenshift blocks are your closest buddies in terms of flex and absolute position. It’s a steeper learning curve to mirror your Flothemes look, but trust me, it’s mostly doable. So, let’s roll up our sleeves and dive in!
Good to Know
The Risks of Not Migrating Your Flothemes Website
Alright, let’s talk about the “what if” scenario! If you decide to let your Flothemes website chill without migrating and don’t update WordPress and plugins, you’re playing a risky game! 🎲 Your site becomes a treasure trove for hackers, and bugs might start having a field day. It’s like leaving your front door wide open with a “Welcome” sign for all the internet’s mischief-makers. Not updating means you miss out on the latest features, security patches, and performance improvements, leaving your site in the digital Stone Age and potentially impacting your user experience and SEO. So, keep things fresh and secure by staying updated!
What Happens If I do NOT Migrate and Just Update My Flothemes Site?
Alright, so you’ve decided to stick with your Flothemes website and are diligent about those updates. But here’s the kicker—what if an update rolls in and wreaks havoc on your site? 🤯 It’s crucial to have a daily offsite backup, stored safely in the clouds of Dropbox or Google Drive (and not on your hosting!). This way, if an update throws a wrench in your site’s gears, a few clicks can restore the peace. But here’s the real deal—this is still a precarious tightrope walk. If your site breaks due to an update, restoring it means you’re back to square one, unable to apply future updates. It’s like being stuck in a time loop, with your website’s functionality hanging by a thread!
Regardless of the uncertainties, updating is crucial for maintaining the security of your website. While migration does pose its own set of questions and challenges, as you’ll discover later in this article, they are merely small hurdles that can be overcome with the right approach and information.
Will Redesigning My Website Shake Up My SEO?
Absolutely, it’s going to shake things up a bit! Let’s not sugarcoat it—it’s crucial to brace yourself for this. John Mueller from Google has dropped some wisdom about how revamping can make Google view your site as the new kid on the block, affecting your rankings. It’s like you’re throwing a ‘Hello, My Name Is’ sticker on your website for Google!
John Mueller enlightens us with:
“In general, these kinds of things I would look at on a per-website basis. There is nothing on our side that is kind of saying that …if a website is revamped then we must change its ranking. …If you’re seeing this with three websites that sounds like maybe you’re doing something unique with the revamp processes and not that there’s something on Google’s side that would be blocking revamps in general. For revamps, there’s sometimes a few things that come together, and it’s sometimes tricky to figure out exactly what all is happening.
Preserving SEO Rankings During a Website Redesign
Embarking on a website redesign or migration is no small feat. It’s crucial to shield your investment with this SEO safeguard checklist for website overhauls.
Before You Leap
Ponder on your aspirations with this venture in reshaping your website. Beyond anything, you surely want to preserve the value and equity your site has accumulated over time. The last thing you want is to witness a dip in rankings, link value, or traffic and then spend endless months recovering them.
You’re likely also aiming to enhance your organic search performance.
Content & Structural Blueprint
The overall context of your website and the sub-topics your themes revolve around are pivotal for SEO triumph. This impacts the specific content on the site and its organization. Alterations to the information structure, sitemap, and overall content plan in the redesign can affect SEO, so it’s vital everyone involved understands the implications.
Ensure that pages crucial to your SEO strategy aren’t omitted in the redesign, and the overall message and theme of sections of the site aren’t watered down by the design.
Leverage a crawling tool like Screaming Frog or DeepCrawl to pinpoint all pages of your website. Collaborate with your team to derive requirements for the new sitemap from the current one. This will be your compass through the subsequent steps in the redesign process for SEO.
On-Page Fine-Tuning
Dig deeper into maintaining the relevance of content to the intent of your target searcher. Once you comprehend what context and overall architecture are altering, you can work to protect or proactively optimize at the page level for specific elements that bolster relevance. This includes URLs, page titles, meta descriptions, body copy, alt text, and more.
How extensive are the alterations to your architecture and sitemap? This will determine how much focus you need to place on the relevancy of content to avoid losing subject matter content on the site.
Optimize your staging site or code-base; don’t procrastinate until post-launch to make these updates.
Redirects
Mapping out 301 redirects for all pages getting new URLs and those being discarded in the redesigned site is essential for user experience. We aim to avoid serving up a 404 error page to a user whenever possible.
Search engines tolerate 404s if we intend to have content removed from the index. However, any link equity will be lost if backlinks to your site result in a 404 error.
Ensure all pages with links pointing to them are properly redirected, especially if you don’t have control over updating the links to the new destination page URL.
If your website is extensive, this could be the most crucial and time-consuming part of the redesign SEO process. Use the crawl you conducted earlier for your sitemap planning to identify all URLs that need to be redirected.
At Launch
When it’s time to launch, adhere to the go-live checklist and conduct quality control checks of the work done on the staging site. Don’t greenlight the launch if any of your on-page work or redirects are not in place or tested. It’s easier to delay launch slightly than to rectify damage later.
Post-Launch
After launching, it’s time to shift to a monitoring phase. For the next 1-2 months, closely monitor Google Search Console and Bing Webmaster Tools to watch for reported 404 errors, crawl errors, and any HTML on-page issues detected.
Ongoing SEO
SEO is an ongoing endeavor. Once the dust has settled, you can go back to your original plan and goals and measure the performance of the new site. From here, you can resume your normal ongoing optimization plan.
Summarised Steps
- Pre-Launch: Content & Information Architecture, On-Page Optimization, Redirects.
- Launch!
- Post-Launch: Check Redirects, Dev-to-Live Audit, Code & Performance Validation, Submit XML Sitemaps, Monitoring, Ongoing SEO.
Remember, SEO and web projects don’t always go as planned! So, make sure you seize every opportunity to use the redesign and relaunch for performance improvement to maximize the return on your investment in your site.
Alright! Now that we’ve dipped our toes into the sea of SEO theory during a website revamp, it’s time to roll up our sleeves and dive into the practical side of things. We’re about to navigate through the nitty-gritty, the ins and outs, and the do’s and don’ts of maintaining your SEO while giving your website a fresh new look.
Show more +Choosing Your New WordPress Hosting Home
Alright, let’s talk about the heart of your WordPress site—yes, you guessed it, it’s the hosting! Having a top-notch and optimized hosting is like having a cozy, secure, and well-located home for your website. It’s crucial, especially for those snazzy, high-quality photography sites that need that extra oomph! It affects your site’s speed, security, and overall performance.
Now, if you’re on the hunt for a hosting service that understands the needs of photographers and demanding websites, let me introduce you to euHost. I crafted euHost years ago with the vision of creating a haven for websites that crave speed and reliability. It’s like the VIP lounge for your website—exclusive, fast, and oh-so-reliable! So, if you’re all about giving your website the luxury it deserves, euHost is your go-to!
If you’re all about keeping your wallet in tip-top shape while giving your website the VIP treatment, I’ve got a sweet deal for you! Snag a whopping 30% off on your hosting for your dazzling new website with euHost! 🌟 Just pop in the code BYEBYEFLO when you’re checking out, and watch those savings roll in! This golden ticket is valid for our Standard and Premium plans.
How to migrate your Flothemes website with zero downtime?
Alright, web wanderers! 🌐 Ready to migrate your website to a new hosting? Let’s dive in!
Firstly, if you’re hopping over to euHost, kick back and relax! We offer free migration, meaning my stellar team will swoop in and handle all the techy stuff for you. It’s swift and hassle-free! But if you’re a DIY kind of person, let’s roll up our sleeves and get to it!
The quickest route? Migrate using a backup plugin, and my go-to is WPvivid Backup. It’s a breeze! And don’t worry, we’re keeping your live website up and running to keep those coins rolling in! 🌟
To kick things off, you’ll open a hosting account under your real domain name. Then, on your shiny new hosting, you’ll add a subdomain—call it ‘staging,’ ‘new,’ or whatever floats your boat. Since your live domain is still cozy in the old hosting, you’ll need to add a DNS record A for your new subdomain, pointing it to the IP address of your new hosting. A few minutes later, voilà! It’s ready to use! Now, let’s create a copy of your live website on this new subdomain.
🚀 Step 1: Install a fresh WordPress on your new hosting in the subdomain. If you’re on euHost, it’s a one-click wonder! Check out the video below.
🚀 Step 2: Deck out both websites (your live one and the subdomain one) with WPvivid Backup. Head to your Dashboard > Plugins > Add New, and get that plugin up and running on both sites.
Quick tip: Turn off all caching on both servers before diving in, and deactivate any redirect and security plugins too!
🚀 Step 3: On your destination website, head to the Key tab page of WPvivid, hit the Generate button, and grab your key!
🚀 Step 4: Pop over to your origin site and drop your key into the Auto-Migrations tab.
🚀 Step 5: Time to migrate! Choose your migration option and hit the big blue Clone then Transfer button. Once it’s done, you’ll get a notification to head back to your destination site.
🚀 Step 6: Back on your destination site, hit the “Scan uploaded backup or received backup” button, then hit Restore, and finally, hit the Restore button again to wrap it up!
🚀 Step 7: Once you get the “Restore completed successfully” message, log in to your website, check everything’s in tip-top shape, reactivate your plugins, and enable caching!
Big thanks to Maria Hedengren for allowing her website to be our migration example!
And there you have it, folks! Your website’s got a new home, and you’ve just navigated through the migration like a pro! 🎉
New WordPress – The Guide
So, you’ve got your staging website all set up, and it’s time to dive in and start shaping it up. Here’s a straightforward action plan to guide you through the transition:
- Equip Your New WordPress Website – Focus on installing the essential theme and plugins that will form the backbone of your new website.
- Set Up and Configure WordPress – With the new website comes new features and new possibilities. Configure everything correctly to ensure a smooth operation of all the elements.
- Unleash Your Creativity – Now, it’s time to start designing. Bring your vision to life and create a website that reflects your brand and resonates with your audience.
- Dive into Technicalities – Clean up the database from any Flothemes remnants, optimize every aspect, and prepare everything to make the transition to live as seamless as possible.
- Launch and Leave the Past Behind – Finally, go live with your revamped, refreshed website and say goodbye to the old Flothemes setup. Welcome to your new online home!
Alright, are you ready to embark on this transformative journey?
Equipment: Picking the Right WordPress Theme & Plugins
The nucleus of your WordPress site is undeniably the theme. The market is brimming with options, teetering on the brink of oversaturation. For newcomers, navigating this sea of themes can be a treacherous journey, and I say this from experience. I’ve made my share of expensive missteps—financially expensive, not emotionally.
Theme creators pull out all the stops to grab your attention and get you to hit that ‘buy’ button. And how do they do it? By decking their themes out with stunning stock images. It’s a visual feast, and you end up buying what you see. However, the real gems in the theme world aren’t the ones with the loudest advertisements… but you’d need to be immersed in the web design world to know about them.
Let me cut to the chase and save you some time and potential regret. My top pick is the Blocksy Theme. I’ve been a loyal user since 2020, and out of the 60 or so themes I’ve invested in, Blocksy stands out as the best bang for my buck. It’s garnered a plethora of positive reviews and offers a wealth of features. The support is top-notch, the coding is impeccable, and here’s the kicker—the developers actually listen to their users! They roll out updates complete with the features and add-ons that users have asked for. It’s a game-changer and a definite wow in my book!
Fun Fact Alert
There’s an epic virtual battle between Kadence and Blocksy! These themes, once nearly identical, have sparked debates akin to Canon vs. Sony or iPhone vs. Android. Legend says Kadence might have ‘borrowed’ from Blocksy’s code. Well, Blocksy has been around since 2018, and Kadence since 2020, so you do the math! Both are solid, but Blocksy has a bit more experience and fewer developer mishaps!
You might be pondering, “Hold up, Tom! Are there no other themes you’d suggest?”
Absolutely, there are a few more I’d nod to, but opting for Blocksy is about smoothing your journey. Sure, I could point you towards GeneratePress, a truly robust and versatile theme, but it does demand a bit of a dance with coding and CSS. Got the time and the rhythm to learn those moves?
When it comes to maintaining a swift and optimized WordPress site, what’s the golden rule? Keep it minimal with plugins and choose a lightweight theme devoid of unnecessary bloat!
Absolutely, simplicity is my mantra. The fewer plugins, the better. Steer clear of those laden with excess features. Here’s my curated list of must-have WordPress plugins for 2023:
- SEO: RankMath – A versatile SEO plugin that offers a suite of features to optimize your website for search engines and social media, enhancing its online visibility.
- Optimization: LiteSpeed Cache – A high-performance caching plugin that optimizes your site’s load times, improving user experience and SEO rankings.
- Blocks: Stackable or Greenshift (or even both if it suits you) – These plugins offer a top collection of customizable Gutenberg blocks to enhance the design and layout of your WordPress pages.
- Backup: WPvivid – A reliable backup plugin that allows for easy scheduling of backups, ensuring your site’s data is secure and can be restored when needed.
- E-commerce: WooCommerce – A comprehensive e-commerce solution allowing you to sell products and services, manage inventory, and handle payments directly from your WordPress site.
- Forms: GravityForms – A powerful forms plugin that allows you to create advanced forms for user submissions, surveys, quizzes, and more.
- Multilanguage: WPML – A plugin that enables the creation of multilingual sites, allowing you to translate your content and offer it in multiple languages.
- Spam Protection: Akismet – A spam filtering plugin that automatically checks and filters out spam comments, maintaining the integrity of your site.
- Mail: PostSMTP – A mailer plugin that improves the deliverability of your WordPress emails, ensuring they reach the inbox and not the spam folder.
- Snippets: WPCodeBox – A code snippet manager that lets you easily add, manage, and run PHP code snippets on your WordPress site without editing theme files.
- Lightbox: WP Featherlight – A lightweight lightbox plugin for adding a minimal, high-performance, responsive lightbox to your WordPress images and galleries.
And there you have it—maintain a streamlined approach and keep your site running smoothly!
All set to install the above? Dive right in! And here’s a little nugget for you. The developers of Blocksy have whipped up a sweet deal just for you. Just pop in the code FLOSOS at checkout and snag that discount. It’s up for grabs until the end of September 2023, so hustle!
WordPress Setup and Tweaking
Now, this is where things get intricate. You might be hearing a little whisper in your head right about now, saying… what configuration? Doesn’t WordPress just… work? Well, not exactly. If you want your WordPress to be top-notch, there are a few adjustments you need to make. So, let’s dive in!
Hosting Settings
Let’s start with quick configuration on hosting. We should use latest PHP version (I love to test technology as soon as it become available, but usually for production websites I choose tested and stable version of PHP, more likely the one before the latest). Second step is to configure PHP extensions and variables. That’s the basic setup, let’s move to the next settings.
Configuration of wp-config.php
While most settings in this file are configured via your WordPress installer, I advise checking the memory limit and setting it to 512MB. Also, ensure that the Database charset is configured to utfmb4. These are fundamental adjustments to make. If you’re interested in delving deeper into the configuration of wp-config.php, feel free to explore my other blog posts on the subject.
WordPress Settings
There isn’t a ton to do in this section, aside from ensuring your website URL starts with SSL, resolving any issues in Tools > Site Health, and confirming that Settings > Media is correctly configured for the image sizes desired by you and your new theme. Of course double check Permalinks.
Blocksy Theme Setup
Recall when I mentioned how incredible the developers of Blocksy Theme are? They truly are remarkable. There’s no need for me to craft videos on how to install their theme or plugin—they’ve already compiled an extensive library of video tutorials. So, for now, immerse yourself in learning how to install the theme and their plugin along with some basic settings. For the more intricate aspects, don’t worry, I’ve got you covered later in this article.
As soon as you purchase Blocksy Theme Pro here is how to install their Pro plugin to unlock advanced features (don’t forget to use discount code FLOSOS).
You’ve journeyed this far, and we’ve only just grazed the tip of the iceberg! Need a breather, or shall we forge ahead? It’s perfectly fine if your brain feels like it’s about to burst—you can pause and revisit this article whenever you’re ready. Better yet, consider subscribing to my newsletter below. I’ll keep your inbox lively with entertaining emails, and you’ll be the first to know when a new WordPress tutorial, SEO tip, or exclusive offer from me or my recommended partners is available.
Making Blocksy Theme Work for You
Now, let’s delve into a snippet of the Blocksy theme’s magic! You’ll witness, via a screen share session, how I morph a blank theme into a “style kit” mirroring the aesthetic of photographer Valentin Geiss (a big shoutout to Valentin for allowing me to use his website link in this guide). We’ll kick things off with typography, transition into the color palette, and finally, design the elemental components of the page. This quick example aims to illustrate how feasible it is to recreate your Flothemes design using Gutenberg blocks. Are you all set to dive in?
Don’t even think about skipping this video; it’s the core of transforming a Flothemes design into Gutenberg blocks using the Blocksy theme!
How to use Gutenberg blocks
valentingeiss.com
For my initial example, I’ll be using the valentingeiss.com website, which is crafted using Flothemes and the Flex Editor. I’ll be replicating this design using Gutenberg blocks, specifically employing the Blocksy theme and GreenShift blocks. Dive into the step-by-step video and enjoy the transformation!
mariahedengren.com
Alright, time to crack open another Redbull and dive into another site! Next up, we have Maria Hedengren’s Flothemes site—she’s a photographer hailing from the cool lands of Finland. 📸
Let’s see if I can whip up a replica using our trusty Gutenberg blocks. At a glance, it seems straightforward, but oh boy, there are some sneaky bits like the three blog posts in one section, a button with its own sense of style, and some mysterious element lurking before the menu in the header section.
Ready to roll? 🚀 Let’s jump into another step-by-step video! Still rocking the Blocksy theme and GreenShift blocks
Hold onto your hats, more step-by-step designs are on the way! But don’t turn blue holding your breath. 🌬️ Before I drop those juicy tutorials, let’s shimmy on over to the next chapter: “Technicalities.”
Bye bye Flothemes Clutter
Next chapter. We’re gonna sweep away any Flothemes leftovers lurking in the database, fine-tune every nook and cranny, and get all our ducks in a row to ensure sliding into the live version is smoother than a dance move! 🕺 Let’s dive into the nitty-gritty!
This part’s gonna be a bit of a beast. Seriously, before you dive in, ensure you have a backup, then a backup of that backup, and, just to be safe, maybe a backup of the backup’s backup. No kidding!
Your basic tutorial is live below:
Go Live
Alright, so you’ve got the lowdown on my top WordPress plugins and theme set. You’ve peeked into how to configure WordPress to ensure it’s running like a well-oiled machine. You’ve seen the magic of designing blocks on Gutenberg step by step. And those pesky Flothemes remnants? Gone, so you can hit the live button on your website. If you’re on euHost WordPress Hosting, it’s just a matter of one click – Clone in WP Toolkit. On other hostings… well, that’s their story. But remember, migrating to euHost is like a walk in the park, leaving all those worries in the dust.
The End
I hope this guide, tutorial, or whatever you want to call it, throws you a lifeline in smoothly ditching Flothemes and embracing your WordPress. Drop a comment below on what you want me to tackle next… Diving deeper into SEO post-Flothemes migration? More step-by-step designing? Or maybe you’ve got some cool ideas you want me to explore. Spill it!
And hey, don’t throw in the towel. It’s all manageable. If it’s not a perfect match, it’s a chance to rethink and research to elevate your website, streamline the design, and make everything work like a charm.
If you’re swamped, feeling a bit lazy, or it’s just looking like a puzzle, I’m here to lend a hand. Hit me up for a custom quote. I swear it won’t break the bank.
Thanks for hanging with me through this read and watch fest, and I hope your brain is buzzing with ideas!
