How to switch from a Legacy Theme to a Flextheme?
In the following article and tutorial, we are going to explain how to smoothly switch from an older Legacy theme to a newer Flextheme. Here we cover the process of installing your theme, applying general settings for all elements of your website, styling, and template application.
If you prefer a written step by step guide, we go over each step from the video below, alongside all the tutorials and details you need to get started.
1.Installing FloLaunch
First things first, let us kick off with the FloLaunch plugin.
FloLaunch is a tool of ours that allows applying changes to your website without any downtime. Thus, you will not need any “under maintenance” page plugins or lose any potential clients.
FloLaunch basically creates a “test website” where only you can see any edits or changes to it.
Check this link to read through the process of installing and running FloLaunch for the first time.
You can access tutorials on FloLaunch here.
NOTE: Please note that the FloLaunch Plugin is a free product fully developed by Flothemes and we can't guarantee compatibility with all hosting providers.
2. Install your theme
Once FloLaunch is running and your admin panel has turned red—meaning that you’ve enabled the Clone Mode—head over to Appearance -> Themes and click the “Add theme” button. Once the theme marketplace is opened, click “Upload theme” at the very same place.
Select the .zip file with your theme in the file uploader and press “Upload”. Once the theme is done installing, click “Activate”. You will be redirected to the theme’s introduction page, where the install wizard will appear.
Follow with the installation steps and when the wizard asks for the order key, make sure to provide the order key for your new theme.
If you do not import the demo content at the end of the installation, you can still do that later in Flotheme -> 1. Introduction.
3. General settings
In order to apply general settings for most instances of different elements on your website, you would need to go to the Flotheme tab in your admin panel.
3.1 Header
You can apply settings to the header globally, for the whole website. That can be done in the Flotheme -> 3. Header tab. The collection of settings is quite similar to what you remember from Legacy in “Header Settings”.
In “Desktop Header”, there will be three types of header layouts to choose from. In this same tab, you can adjust the colors, spacings, and enable the sticky menu.“Header Type X Settings” allows controlling some details in the type that you select.
There will also be options for your Logo and Menu in the header. The mobile version can also be adjusted in “Mobile Header” and “Mobile Menu Popup”.
3.2 Pages
You can set a layout that is applied to your Search and Archive pages, as well as provide a description for the Not Found page in Flotheme -> 4. Pages. This section did not exist in Legacy, Page settings were rearranged from scattered bits into a new section in the latest themes.
3.3 Posts
This tab is a redesign of the “Blog Post Settings” tab from Legacy settings.
In “Global Layout”, you set a view that applies to all Posts on the website. There, you’ll see a list of blocks that can be reordered by dragging with the mouse. At the bottom of the list, there will be an “Add Block” button, that allows you to add more WordPress or Flex blocks. Each block contains a set of settings that expands on click.
In “Templates”, you will find predesigned layouts that you can choose from in case it’s not convenient to start from scratch.
3.4 Galleries
You can set a layout that is applied to your galley pages globally on the whole website here. Legacy did not have a separate category for gallery settings, yet some of them were accessible through “Blog Post Settings”.
The tabs are similar to the ones from Posts — Global Layout and Templates.
3.5 Generics
Generics is a collection of previously separate tabs in Legacy. This one includes old items from “Social Networks”, “Custom CSS”, and “Typography”.
In “Custom Code”, there are two areas to paste custom CSS and JavaScript code respectively.
“Generic Typography” applies to the content of Classic and Gutenberg editor, as well as the free version of FloForms.
“Miscellaneous” gives you the opportunity to upload a favicon, paste Google Analytics code, enable lazyload for WP content, etc.
You can also enable a preloader for the website here.
3.6 Footer
Just like in Legacy “Footer Settings”, footers in Flexthemes also get a separate tab.
What you need to find first and foremost here is the Footer Areas Order. Thing is, the footer in Flexthemes consists of several areas. This order sets rules whether these areas are displayed or not, and tells what goes after what. For an area to be displayed on the website, it has to be listed in this field.
Instagram Area allows you to attach images and your Instagram handle (Uploaded Images) or connect your Instagram feed directly to the footer (Flo Social Plugin).
Widgets Area is the area that displays the widgets you added to the footer from Appearance -> Widgets.
Flexible Area is a Flex block that is added to every single page of your website at the bottom. It is configured like any other Flex block.
Copyrights Area, obviously, shows the copyrights, but you can also add either a menu or your social links here.
4. Style Kits. Color schemes and typography
To apply styling for your website, head over to the Flex Admin tab. This tab appears only when Flo Flex Builder plugin is activated.
In “My Account”, you will find all information about your order connected to the order ID. The order ID itself is pasted into the field “Order Key” below. Once an order ID is provided, you need to press Update so that your info gets refreshed. After that, the Data Sync should be started, it will fetch the Global Style Kit related to your order ID as well as some other relevant data from our servers.
“Style Kits” is where you get to browse through all existing Style Kits, look through their color schemes and fonts, purchase and install them (“Explore”). You can browse through the collection of installed Style Kits (“Installed”) and your custom ones (“Custom”). Custom Style Kits are created by duplicating a standard Style Kit and applying your personal changes to it.
“Edit Style” is where you apply color and typography changes to the current Style Kit. You can add custom fonts in Typography -> Custom, as well as add fonts from third-party libraries’ files in Font Files.
5. Applying a style kit to only one page
In the Page editor ( Pages -> Add New/Edit) under the Gutenberg editor, first of all you will find the Style Kit section. Should you have a desire to apply another style kit to one specific page, you can do that here. Just toggle Enable Other Style Kit on and select a style kit from the ones you own in the dropdown.
6. Applying a template to a page
In the same Page editor, right under in Layout, you will find all available templates for pages in “Templates”, and layout settings with blocks (just like in Flotheme -> 5. Posts or Flotheme -> 6. Galleries) in “Layout” — these are custom arrangements that go strictly for this page.
We recommend selecting a template if you do not want to start from ground zero. For that select a template from the “Template” tab and click “Apply template”. You will be redirected to the “Layout” tab, as the Flex blocks from the templates will be fetched.
7. Flex Builder
If you want to add a new Flex block, select it from the Add Blocks menu at the bottom of “Layout”, click on the added block and hit “Open Builder” (editing is the same). A more elaborate tutorial on Flex Builder can be found here.
A full-screen interface will open. Here, you can access the block library via the “Blocks” button and select a ready-made template for a Flex block. Images will be replaced with placeholders for your visual content.
To add a new element, hit the “+” button and select the one you need from the variety offered. To edit an element, double-click it, and a side menu will pop up.
8. Launch
Once you are done with applying changes, you’re free to launch your new version.
To do that, click on “FloLaunch” in the navigation bar of your admin panel, and once you’re at the FloLaunch page again, click “Proceed to Step 5 — Launch”.
The wizard will take you through another compatibility check, after which you’ll be asked to Finish the Launch Process.
Now your new site with Flextheme is up and running!
Congratulations on your new up-to-date design. For more tips and recommendations, please check help.flothemes.com.