1. Support
Thank you so much for choosing the Formie WordPress Theme. We have put a lot of effort and love creating it. In this documentation, we have tried to consider all the important details to run your website successfully. In case you have any questions left, please feel free to submit a support ticket here.
Your feedback on our theme is much appreciated. We would love to make our product even better, so please feel free to get in touch with any suggestions for improvement. Thanks again for your support. We value you!
If you like our work, please rate it. If you are going to rate it with less than 5 stars, please let us know the reason first and we will do our best to improve the theme.
2. Theme Installation
After you’ve installed WordPress on your hosting, download the archive with the purchased theme, unzip it and prepare formie.zip and formie-child.zip archives. Open your WordPress dashboard.
Go to Appearance > Themes and click on Add New.
Click on Choose File and select the formie.zip. Click Install Now.
You will see your new formie theme in the dashboard. Press the Activate button on your formie theme.
After activation you will be redirected to the ‘Welcome’ page of the theme. Now you need to install all the plugins used in the theme: click on the Install Theme Plugin button.
Select all plugins in the list, choose Select from the dropdown menu and click on the Apply button. Installation process will begin, it might take a couple of minutes, please wait until it's finished.
Once the installation process is finished, you will see a success message ‘All plugins installed and activated successfully’. Click on the Return to the Dashboard action link.
From your admin panel go to Formie > Demo Install.
You should choose the demo you want to import and use for your theme and click on the Import button.
Demo import can take up to 10 minutes, please wait until it's finished. You will see the success message after the demo is installed successfully.
Select ‘Visit site’ you will see that the demo has been installed.
3. Theme Customization
In your admin panel hover on the home icon and select Visit Site.
On top on the page click on Customize and you will see Customization Panel.
In the Customization Panel you can find settings that will be applied to the entire theme. Once you have applied any changes you have to click on the Publish button to apply those changes.
3.1 Logo
Go to Customize > General. Here you can upload your logo. We suggest uploading a dark and a light version of your logo in .svg format. The size of our logo is 69px x 46px.
3.2 Favicon
Go to Customize > General. In this section you can upload a site icon that will appear in the browser tab.
3.3 Main Theme Colors
Go to Customize > Theme Colors. In this section you can change main theme colors.
3.4 Typography
Go to Customize > Typography. In this section you can change fonts and their settings: size, line height, letter spacing, align. From the Font Family dropdown you can select any Google font you like.
3.5 Social Media
Go to Customize > Social Icons. In this section you can set links to your social media accounts that appear in the header and footer. You can also edit existing social media icons or add new ones.
3.6 Page Heading
Go to Customize > Page Heading. Each inner page has heading part with background color, photo, title and subtitle. This pagr of the page can be edited here.
To edit title and subtitle you have to open the page you wish to edit in the edit mode.
On the right side of the page you can upload your image and edit subtitle text that appear on top of the page.
3.7 Global Theme Icons
Go to Customize > Global Icons. In this section you can change global theme icons, such as: icons in the subscription form, icons on the shop, etc.
3.9 Header Types
Go to Customize > Header Type. In this section you can change the header of your theme. Just select the option you like more.
In the left side panel you can also edit other information that appears on the popup.
You can choose the color scheme for your header for each particular page depending on the background/image you use. On a page click Edit. The page will be opened in the edit mode.
On the right side of the page you will be able to choose Header Color Scheme.
3.10 Blog Catalogue Types
Go to Customize > Blog Archive Type. In this section you can choose the Blog Catalogue page layout. There are two different types, just pick the one you like more.
Default Blog Archive type has a featured post on top of the screen on the colored background.
Typical Blog Archive type has a list layout with sidepanel (optional).
3.11 Single Career
Go to Customize > Single Career. In this section you can set up popup and buttons that appear on the position details page.
3.12 Single Class
Go to Customize > Single Class. In this section you can set up popup and buttons that appear on the class details page.
3.13 Single Event
Go to Customize > Single Event. In this section you can set up popup and buttons that appear on the event details page.
3.14 Copyright
Go to Customize > Footer. In this section you can add/edit copyright message that appears in the footer.
3.15 Menu Settings
Go to Customize > Menus. In this section you set all the menu items you want to appear in the header and footer of your theme.
In the Footer menu first you can select menu items you want to appear in the first column of the footer.
And in the Footer menu second you can select menu items you want to appear in the second column of the footer.
In the Main section you can select pages you want to display in the header of your theme.
To change menu items in the header you have to select Menus > Main. You will see the list of pages that are displayed in the header menu of your theme.
To change the label of the menu item or to remove it from the header you have to click on the label, e.g. Schedule. To change Navigation Label, simply type in a new name in the field. And to remove the menu item click on the Remove action link.
To reorder menu items you can drag menu items and drop in the location you want it to appear in the header.
To add other pages to the menu, you need to click on the Add Item at the bottom of the list. You will see another panel on the right. Under Pages label there are all the pages you can add to the menu and they will appear in the header of your theme. Press on the page name and it will be added to the left panel and appear in the header of your theme.
3.17 Footer Subscription Form
Go to Customize > Widgets > Footer Sidebar Fourth Column. In this section click on Formie Subscribe Form and change title and subtitle if needed. These texts will appear in the footer subscription form.
3.18 Homepage Settings
Go to Customize > Homepage Settings. In this section you can select the page you’d like to be your homepage.
3.19 WooCommerce
Go to Customize > WooCommerce. In this section you can apply some settings to the WooCommerce functionality: add a store notice, change product catalogue settings, product images and checkout.
Go to your admin panel and select WooCommerce > Settings. In this section you can set up your online store: select/change currency, select payment methods and delivery methods, etc.
4. Popup Settings & Shortcodes
To find the shortcode of the popup go to the admin panel of your there. From the left menu choose Contact > Contact Forms. You will see the list of your contact forms and you can copy the shortcode of each popup from this page.
5. Posts
Go to your admin panel and click on Posts > All Posts. Here you will see the list of all blog posts. To add a new post simply click on the Add New button on top of the screen.
You can choose from two types of the Blog Catalogue page, you can find detailed information in the ‘3.10 Blog Catalogue Types’ section of this documentation.
To set up a Sticky post or any other blog post, hover on its name and click on the Edit action link.
For each post you will need to upload a preview image, it will appear on the blog catalogue page.
After the changes are applied, click on the Update button on the top right corner of the screen to save and apply all changes.
6. Products
Go to your admin panel and click on Products > All Products. Here you will see the list of all products available in the theme shop. To add a new product simply click on the Products > Add New.
To edit an existing product, hover on its name and click on the Edit action link. For each product you should add its name, description, price, you can also add product categories and tags.
Don’t forget to add product image and images to the product gallery, suggested image size is 1052 by 1400px.
7. Pages
Go to your admin panel and click on Pages > All Pages. Here you will see the list of all pages in your theme. To add a new page simply click on the Pages > Add New.
To edit an existing page hover on its name and click on the Edit action link. The majority of the pages are created using Elementor page builder. For such pages you should select Edit with Elementor option.
7.1 Homepage
To edit the homepage you have to find it in the pages list, hover on it and click on Edit with Elementor. To change the hero image, right click on the hero image and choose Edit Section from the dropdown page.
Select the Style tab in the settings panel on the left of the screen and upload your image to the Choose Image section.
Click on the Select Files button and upload your image. Click on the Insert Media at the bottom of your screen.
After uploading the image or making any other changes, don’t forget to click on the Update button to save the changes.
To edit the Title and Buttons, click on the Edit icon on the correspinding block and make changes in the left side panel.
To edit any other section on the page, click on the Edit icon on the left of the section and make changes in the left side panel. Click on the Update button on the bottom of the screen to save the changes.
7.2 Events
To edit the events, go to your admin panel and choose My Events > All Events. To add new events, click on the Add new.
To edit existing event, click on the Edit action link under the event's name and make needed changes in the WordPress edit mode.
To add/edit events categories, go to My Events > Categories and add new category or edit existing one.
7.3 Classes
To edit the classes, go to your admin panel and choose My Classes > All Classes. To add new events, click on the Add new.
To edit existing event, click on the Edit action link under the case name and make needed changes in the WordPress edit mode. Here you can edit the event title, upload preview image, edit duration and intensity info. For other settings open the page in the Elementor Editor.
7.4 Careers
To edit the career catalog and open position pages, go to your admin panel and choose My Careers > All Careers. To add new postion, click on the Add new.
To edit existing open position, click on the Edit action link under the position's name and make needed changes in the WordPress edit mode.
8. Amelia Appointment Booking Plugin
Formie theme is compatible and comes with Amelia: Appointments and Events WordPress Booking Plugin. You can use the full functionality of the plugin with the theme. If you’ve received an alert about a plugin that needs to be updated, this could be because the plugin was recently updated. Unless you have purchased the plugin separately, we will provide the latest version of the plugin with the next theme update.
You can find all information about functionality and documentation of Amelia plugin on wpamelia.com.
Note! If you need a service for installing, configuring, or maintaining Amelia plugin, or access to auto-updates or support, you will need to purchase the license separately, directly from plugin authors website and submit a ticket to Amelia’s support.
Amelia plugin can only be used with the theme it cames with (it cannot be extracted or used with other themes)
In order to change the settings of the plugin, go to your admin panel and select Amelia. Here you can find all the settings for the Amelia plugin. Learn more about Amelia plugin settings in the documentation.
In order to style your appointment booking widget, go to your admin panel, select Amelia > Customize > Step-by-Step Booking Form and change the colors. If you want to use the same colors as in the demo, follow next. On the right panel in Settings go to Global Settings > Colors.
For Gym Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(121, 121, 121, 100) Text Color: rgba(255, 255, 255, 1)
Calendar Init Cell: rgba(0, 0, 0, 1) Init Cell Text: rgba(0, 0, 0, 1) Cell Selected Background: rgba(0, 0, 0, 1)
Buttons Primary Button Background Color: rgba(204, 255, 2, 100) Primary Button Text Color: rgba(0, 0, 0, 1)
For Yoga Teacher Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(233, 209, 202, 100) Text Color: rgba(0, 0, 0, 1)
Calendar Init Cell: rgba(0, 0, 0, 1) Init Cell Text: rgba(0, 0, 0, 1) Cell Selected Background: rgba(0, 0, 0, 1)
Buttons Primary Button Background Color: rgba(215, 0, 55, 100) Primary Button Text Color: rgba(255, 255, 255, 1)
For Personal Trainer Demo:
Primary and state colors Primary Color: rgba(0, 0, 0, 1)
Sidebar Background Color: rgba(207, 209, 218, 100) Text Color: rgba(0, 0, 0, 1)
Calendar Init Cell: rgba(38, 92, 242, 1) Init Cell Text: rgba(18, 70, 214, 1) Cell Selected Background: rgba(18, 70, 214, 1)
Buttons Primary Button Background Color: rgba(48, 59, 109, 100) Primary Button Text Color: rgba(255, 255, 255, 1)
You can add Amelia plugin with one of default Amelia widgets or our custom Amelia Booking widget for Elementor. Or use a shortcode, learn more about all possible shortcodes at wpamelia.com/amelia-shortcodes.
9. Timetable
Formie theme comes with the Timetable and Event Schedule plugin created by MotoPress. To edit the timetable, go to your admin panel and choose Timetable > Events. The detailed plugin documentation can be foundhere.
10. Instagram Feed Plugin
First of all, you have to install the Instagram Feed plugin. The author is Smash Balloon. You do not need a Pro Account to use our layouts for instagram, everything should work just out of the box. If you have followed our instructions on how to install the theme, all the plugins including this one should have been already installed and activated.
In a separate tab open instagram.com and log in to the account you would like to link.
Go to the Admin panel > Instagram Feed > Settings. Click on the Connect an Instagram Account button.
Select account type you would like to connect and press Connect.
You will see a confirmation popup, click Continue.
Confirm the account you would like to link by clicking on Connect This Account.
You will see a success message ‘Successfully connected’ and username of the account you’ve just connected to your theme. To save these settings click on the Save Changes. All done, go check the homepage and instagram section on it.
If your instagram looks differently, please go to Instagram Feed > Settings > Customize.
Scroll down and make sure that Enable Custom Templates checkbox is cheсked.
And also make sure that the correct shortcode is set on the homepage. Open your homepage in the Elementor editor, scroll down to the Instagram section and Click on the Edit icon. Make sure that in the left side panel there is a correct shortcode.
[instagram-feed imageres=true]
11. Contact Form 7
For the detailed information about the Contact Form 7 plugin, please read the official guide here.
12. Multilingual Settings
13. WordPress
Since WordPress is constantly being updated information about how to install WordPress may become out of date, so you can always read the official guide here.
Here you can find some useful links about the WordPress:
WordPress Codex – general info about WordPress and how to install it on your server.
First Steps With WordPress – general information that covers a wide variety of topics.
FAQ New To WordPress – the most popular FAQ’s regarding WordPress.
14. GDPR
We suggest using Complianz – GDPR/CCPA Cookie Consent plugin. Complianz is a GDPR/CCPA Cookie Consent plugin that supports GDPR, DSGVO, CCPA and PIPEDA with a conditional Cookie Notice and customized Cookie Policy based on the results of the built-in Cookie Scan.