Evie Documentation – v1.3.1
This guide provides instructions for installation, help on getting started and extensive documentation of features.
Getting Started
To install this theme you must have a working version of WordPress already installed.
If you need help installing WordPress, below are all the useful links for WordPress information.
- Getting Started with WordPress
- How to Install WordPress
- First Steps With WordPress – General information that covers a wide variety of topics
- FAQ – The most popular FAQ’s regarding WordPress
Theme Requirements
You should check that your hosting environment meets our minimum requirements below:
- WordPress version 5.8 or greater.
- PHP version 7.0 or greater. WordPress officially recommends PHP 7.4 or greater.
- This theme is also compatible with PHP 8.0 and 8.1.
For more details, please visit WordPress System Requirements.
Installation
Download the theme from the Downloads tab on ThemeForest. There are two options to download:
- All files & documentation
- Installable WordPress file only
We suggest you to choose the Installable WordPress file only option. You will get the theme zip file that you can upload to your website under the Appearance → Themes in your WordPress admin area.
If you select All files & documentation, then you will need to unzip the main package zip file first. And then you will find the theme zip file in the folder “WordPress Theme”, see Package Contents.
Package Contents
The main zip package contains the following files and folders:
-
WordPress Theme (Installable Theme Files)
-
WordPress Theme
WordPress Theme\evie.zip
-
Child Theme
WordPress Theme\evie-child.zip
-
WordPress Theme
-
Plugins
-
Flextension
Plugins\flextension.zip
-
Evie XT
Plugins\evie-xt.zip
-
Flextension
-
Documentation
- Documentation\index.html
-
Demo Content
Theme Installation
You can install the theme in 3 ways as follows:
Install via WordPress
- Go to Appearance → Themes.
-
Click Add New button.
And then click Upload Theme button.
-
Click on Choose File and select the theme zip file on your computer.
- Click Install Now button. The theme will be uploaded and installed.
- And then activate it.
Install via cPanel or Web File Manager
- In a File Manager on your web hosting, navigate to your theme folder “/wp-content/themes/”. If your WordPress is installed in the document root folder of your web hosting you would navigate to “public_html/wp-content/themes/”.
- Click on Upload button to upload the theme zip file.
- Once the file is uploaded, select that zip file. Then click on Extract button to extract it.
- Go to Appearance → Themes in your WordPress admin area to activate it.
Install via FTP
- Extract the “evie.zip” file then you should have a folder named “evie”.
- Using an FTP client to access your host web server and navigate to “/wp-content/themes/” directory.
- Upload the “evie” theme folder to this directory on your host server.
- Go to Appearance → Themes in your WordPress admin area to activate it.
Plugin Installation
We recommend installing the following plugins to get all the theme features:
- Evie XT
- Flextension
Install Recommended Plugins
- Go to Appearance → Install Plugins to see the recommended plugins list.
- Install all the recommended plugins in the list and then activate them.
Note: If the installation couldn’t be completed, it might be because your host web server doesn’t allow downloading a file from external sources. You may need to install them manually, see the instructions below.
Manual Plugin Installation
The recommended plugins are also included in the main package zip file. You will find them in the folder “Plugins”, see Package Contents.
To install recommended plugins manually:
- Go to Plugins → Add New.
-
Click the Upload Plugin button, and then choose the plugin zip file from the folder “Plugins”.
- Click the Install Now button to install the plugin.
- Then activate the plugin.
Demo Content
Importing demo content is optional. You will need to enable the Demo Content module to access this feature.
To enable the Demo Content module:
- Go to Flextension in your WordPress admin area.
- Enable the Demo Content module.
-
This module requires the One Click Demo Import plugin. If you do not have this plugin installed, you will be prompted to install it.
Click on the Install Required Plugins link present below the module name.
-
Install and then activate it.
The Demo Content module comes with two options:
-
Full Demo
Contains all demo content including theme settings.
-
Theme Presets
Contains only theme settings.
Import Demo Content
This is recommended to do on a fresh WordPress install (without content). If you have existing content, you may need to use the WP Reset plugin to remove all existing content and reset your database to the default installation values. Or you can choose to import only Theme Presets and use predefined templates (Patterns) instead.
To import the demo content:
- Go to Appearance → Demo Content.
-
Click on the Full Demo tab.
- Click the Import Demo button on a demo which you would like to import.
- Some demos may need additional plugins like Contact Form 7, Co-Authors Plus, etc. You may be prompted to install them.
- It can take several minutes, please be patient and wait for it to complete.
After the import you can deactivate the Demo Content module under the Flextension settings and deactivate the One Click Demo Import plugin on the Plugins page.
Import Theme Presets
If you have existing content and wouldn’t like to import any dummy data. You can import the theme preset to get only theme settings and make your site look like the demo.
A theme preset contains only theme settings so you can switch to different demos anytime without losing your existing content.
To import the Theme Presets, follow these steps:
-
Click on the Theme Presets tab.
- Click the Import Demo button on a demo which you would like to import.
Troubleshooting
It can take several minutes to import the full demo content. However, if it keeps getting stuck for too long or the import does not complete successfully for any reason, it can be related to the low PHP configuration limits.
Try checking the PHP configuration limits under Tools → Site Health, select the Info tab then scroll down to the Server section and make sure it has the minimum PHP settings as follows:
PHP time limit 180
PHP memory limit 256M
Upload max filesize 64M
PHP post max size 64M
Max input time 60
PHP max input variables 3000
However, this also depends on your host web server performance and resource usage limits on your web hosting plan. If you are using a basic plan, you may need to upgrade to the higher plans or consider choosing to import the Theme Presets and use predefined templates (Patterns) instead.
Manual Import
By default, the demo import feature automatically download the demo content from our web server and install them on your site.
However, if your web host server doesn’t allow downloading a large file from external servers or it is blocking the request to our web server. You may need to import demo content manually, please follow these steps:
- All demo content files are also included in the main zip package when you download All files & documentation, See Package Contents.
- Unzip the main zip package, you will find the demo content files in the folder Demo Content.
- Go to Appearance → Demo Content.
- Click the Switch to Manual Import on the right hand side of the screen.
- Click the Import Content, then choose the file “content.xml” from the demo content folder.
- It can take several minutes, please be patient and wait for it to complete.
- Select the Import Widgets and choose the file widgets.json” to import the widgets.
- And then click the Import Customizer and choose the file “settings.json” to import the theme settings.
How to Remove Duplicate Demo Content After Import?
There are two ways to get rid of duplicate content.
- WP Reset plugin – This is the fastest way to get rid of content. It will remove all content from your database and leave the default theme activated. Only do this if you are able to start over.
- Manual Removal – This method will take longer and simply involves manual removing of duplicate items. For example, go to Pages and Posts to delete the duplicated items.
Customizer
All theme configuration options are included in the Customizer, you can easily control the appearance and behavior of the whole website using the Live Customizer.
How to Use the Customizer
-
Navigate to the page you would like to customize then click on a Customize button in the admin menu bar at the top of the page.
-
Click on any of the blue pencil icons on the live preview to open the settings for that particular item.
The following steps will help you configure your site easier.
- Upload your site logo, add your site description and set the Favicon under Site Identity.
- Configure your site Colors.
- Configure your Navigation and Menus.
- Set up your site Header.
- Set up your site Background.
- Set up your site Loader.
- Set up your site Cursor.
- Set up your site Footer.
- Set up your Widgets.
- Configure your Homepage.
Site Identity
Logo
Click on Select logo button in the Logo section to add a logo to your website.
The sizes of logo are flexible, you can adjust the size of the logo when choosing the logo image, but you can’t adjust it larger than the maximum dimensions as follows: Maximum width: 170px, maximum height: 75px.
Serving unscaled image in its original size will ensure fast loading times of your website. If your logo is bigger than the maximum dimensions, we recommend resizing it using a graphic app (e.g. Photoshop) before uploading it to your WordPress site.
Logo (Retina version)
To make your logo look crisp on Retina devices, set a retina logo for your website.
Retina logo should be exactly twice as wide and twice as high as the regular logo.
For example, if your logo image is 100 × 50 pixels in size, the retina logo image must be 200 × 100 pixels in size.
Site Title
The Site Title is displayed in the title bar of a web browser. You may use the site title instead of a logo. If you remove the logo image, it will automatically fallback to your site title.
Tagline
Tagline is a short description or catchy phrase to describe what your site is about. It appears as the website slogan under the Site Title.
Site Icon
A Site Icon (Favicon) is what you see in browser tab, and as a bookmark or home screen app icon when saved to a browser or phone.
Site Icons should be square and at least 512 × 512 pixels.
Colors
-
Color Scheme: Default color scheme for
your site.
- Light
- Dark
- Auto: Automatically adjust the color scheme based on the visitor’s device settings.
- Allow users to switch color schemes: Displays the dark mode toggle button on the navigation menu to allow users switching between Dark and Light scheme.
- Primary Color: The color for buttons, hover and active states of the links and menu items.
- On Primary Color: The color for text and icons that appear in front of surfaces using the Primary Color.
- Secondary Color: The color for buttons, input fields and the Back to Top button.
- On Secondary Color: The color for text and icons that appear in front of surfaces using the Secondary Color.
- Text Color: The base color for text that appear in the whole site.
- Text Color (Dark Mode): The base color for text that appear in the whole site when using Dark mode.
Navigation
- Desktop Menu Breakpoint: The viewport width in pixels for when the mobile menu will become the desktop menu.
- Menu Type: The navigation menu type.
- Sticky Menu: Displays sticky menu when scrolling.
- Menu Align: The alignment of menu items.
- Search Button: Displays a search button on the navigation bar.
- Log In Button: Displays a Log In button for a non-logged in user on the navigation bar. A logged in user won’t see this button.
- Off-Canvas Sidebar Button: Displays a slide-out sidebar button on the navigation bar.
Menus
If you already have menus, you can easily click on Edit Menu to edit menu items.
Creating a New Menu
If you would like to set up and create a new menu, select the Menus panel then click on the Create New Menu button.
Give a name to your menu so you can easily manage it later. Select the menu location where this menu will appear.
And then click on Next to add menu items.
Mega Menu
The Mega Menu setting is included in the menu item settings in both Menus panel in the Customizer (Customizing → Menus) and Menus settings in your WordPress admin area (Appearance → Menus).
The Mega Menu setting is only available for the top level menu item with three options:
- Disable: Displays submenu items as a regular dropdown menu (the Mega Menu is disabled).
- Menu items: Displays submenu items in a full-width menu, the Columns setting will appear when you select this option. It acceps all menu item types, you can add any menu items into the submenu.
-
Recent posts: Displays recent posts
from specific categories in the submenu items.
After choosing this option, you will need to add a Category menu item type from the right side into the submenu. It accepts Categories, Tags, Formats and all custom taxonomies (e.g. Project Categories and Project Tags).
Menu Locations
The menu locations section allows you to select which menu appears in each location.
Header
These are global settings for your site header. You may also set specific settings on per-page basis on the page editing screen. See more details on Page Settings.
This panel allows you to set the background color, image and overlay for the main header.
Background
Choose the background color and background image for your site.
- Background Color: The background color for your site.
-
Background Image: The background image
for your site. It also comes with the following image
options after choosing the background image.
- Preset: The background image preset style.
- Image Position: The background image position.
- Image Size: The background image size.
- Repeat Background Image: Whether to repeat the background image.
- Scroll with Page: Whether the background image can be scrolled or fixed.
Loader
Select a loading animation (spinner) to display while loading the content.
- Loader: A spinner type to display.
- Background: The loader background color.
- Background Opacity: The background overlay opacity.
Cursor
Displays an animated cursor.
- Cursor: A custom cursor type.
- Hide Default Cursor: Displays only custom cursor and hides default cursor.
Footer
- Footer Widgets: Displays the footer widgets area at the bottom of the page. You can setup footer widgets in the Widgets panel.
- Footer Text: Displays the footer text at the bottom of the page. Minimal HTML tags are allowed.
- Footer Menu: Displays the menu in the footer area. You can setup a footer menu in the Menus panel.
- Social Links: Displays the social links in the footer area. You can setup social links in the Social Links settings.
Widgets
The Widgets panel allows you to add and manage the widgets on your site.
This theme comes with 7 widget areas:
-
Main Sidebar
The Off-Canvas sidebar that will slide in and out when you click on a sidebar toggle button in the navigation menu.
-
Navigation Menu
The widgets area in the main navigation menu. The widgets in this area may appear different depending on the menu type.
-
Footer #1
Widgets in this area will be displayed in the first column in the footer.
-
Footer #2
Widgets in this area will be displayed in the second column in the footer.
-
Footer #3
Widgets in this area will be displayed in the third column in the footer.
-
Footer #4
Widgets in this area will be displayed in the fourth column in the footer.
-
Product Filters
This option will appear when you customize your Shop page.
When you click on any one of them, you will see the widgets that you have previously added to that location.
To add a new widget, you need to click on the Add a Widget button. This will open a new panel where you will see a list of all available widgets.
Blog
The Blog panel will appear when you customize your posts page, any blog archive pages (e.g. category’s archive page) or a single post.
You can set up the Posts Page in the Homepage Settings panel.
There are 4 sections included in the Blog panel.
- Posts Page
- Archive Pages
- Single Post
- Password Protected Post
To customize your blog, navigate to your posts page or any blog archive pages and click on the Customize button in the admin menu bar. The Blog settings panel will appear in the Customizer. It will show the settings based on the type of page you are currently customizing.
You can also click on any of the blue pencil icons on the live preview to open the settings for that particular item.
Portfolio
The Portfolio panel will appear when you customize your portfolio page, any portfolio archive pages (e.g. project category’s archive page) or a single project.
You can set up the Portfolio Page in Settings → Portfolio in your WordPress admin area.
There are 5 sections included in the Portfolio panel.
- Portfolio Page
- Archive Pages
- Single Project
- Portfolio Quick View
- Password Protected Project
To customize your portfolio, navigate to your portfolio page or any project archive pages and click on the Customize button in the admin menu bar. The Portfolio settings panel will appear in the Customizer. It will show the settings based on the type of page you are currently customizing.
You can also click on any of the blue pencil icons on the live preview to open the settings for that particular item.
Typography
There are typography controls with responsive options in this panel, so that you may select different font settings for different screen sizes.
Homepage Settings
By default, WordPress displays the latest blog posts on your homepage. To use a custom home page, you need to select A static page option.
This will open up two new dropdown menus that you can use to select a page for your homepage and another for displaying your blog posts.
In case you don’t have the pages on your site, you can create a new one by clicking on the + Add New Page link present below the dropdown menu.
WooCommerce
This panel only appears when you have the WooCommerce plugin installed on your site. You will find more details in the WooCommerce Documentation
Additional CSS
This is a beginner friendly option that will allow you to make changes to your site and see them live on the preview area. If you are an advanced user, you may add your custom CSS into the Child theme instead, see more details in the Modification section
When you start writing some CSS code, WordPress will automatically suggest attributes to you based on the letters you type. It will also display error messages if you have not written a proper CSS statement.
Pages
Creating a Page
- Go to Pages in your WordPress admin area, click on Add New.
- Set the page title and build the page content using the Content Editor
- You can change the Page Settings on the right side of the Editor screen.
- Click on the Publish button.
Page Settings
The page settings are in the Page Settings Sidebar located on the right side of the Editor screen. There will be additional options that allow you to customize the layout of each individual page. These options will override any corresponding global options set in the Customizer.
-
Featured Image: Sets the primary image that will appear as a background image of the page header when you choose “Image” option for the Background setting in the Header panel.
-
Navigation
- Hide main menu: Hides the main menu.
- Transparent background: Removes the background color from the navigation bar.
-
Header
- Header: Sets the header layout, or hides the page header.
- Header size: Sets the height of the page header.
- Header width: Sets the width of the page header.
- Text align: Sets the content alignment for the page header.
- Text mode: Changes the text mode between Dark and Light to make the header text can be seen on any background.
- Background: Sets the background of the page header.
- Remove header gap: Removes a gap between the page header and content.
-
Footer
- Hide the footer: Hides the footer of the page.
Learn more about Content Editor.
Blog
By default, WordPress displays your blog posts on the homepage. However, it allows you to easily configure your website to have a custom home page and choose any other page on your website to be used as your blog page.
Creating a Posts Page
- Go to Pages in your WordPress admin area, click on Add New.
- You don’t need to add any content, WordPress automatically displays your latest posts when visiting this page.
- You may change the Page Settings on the right side of the Editor screen.
- Once you have created it, you can head over to the Settings → Reading in WordPress admin area to set this page as your Posts page. This setting is also included in the Homepage Settings panel in the Customizer.
Creating a Post
- Go to Posts in your WordPress admin area, click on Add New.
- Set the post title and build the post content using the Content Editor
- You can change the Post Settings on the right side of the Editor screen.
- Click on the Publish button.
Post Settings
All post settings are in the Post Settings Sidebar located on the right side of the Editor screen. This theme also includes additional options that allow you to customize the layout of each individual post.
- Post Format: Changes the format of the post.
- Featured Image: Sets the primary image that will appear as a post thumbnail in the posts list and as a background image for the post header.
- Featured Media: Sets the primary video, audio or gallery for the post. The media setting fields vary depending on the Post Format.
- Layout: Sets the post layout.
-
Navigation
- Hide main menu: Hides the main menu.
- Transparent background: Removes the background color from the navigation bar.
- Text mode: Sets the menu text color between Dark and Light to make it can be seen on any background. This option only appears when the Transparent background is enabled.
-
Footer
- Hide the footer: Hides the footer of the page.
Please check out the Post Settings Sidebar for more details.
Portfolio
The Portfolio is a custom post type, it gives you an easy way to manage and showcase projects on your site.
The Portfolio module is included in the Evie XT plugin and is enabled by default after installing that plugin. You can turn on or off the Portfolio module in the Flextension settings page in your WordPress admin area.
Creating a Portfolio Page
- Go to Pages in your WordPress admin area, click on Add New.
- You don’t need to add any content, WordPress automatically displays your latest projects when visiting this page.
- Once you have created it, you can head over to the Settings → Portfolio in WordPress admin area to set this page as your Portfolio page.
Portfolio Settings
Go to Settings → Portfolio in your WordPress admin area.
- Portfolio page: Defines your “Portfolio” page which will be used to display your recent projects.
- Comments: Enables the comments for a project in your portfolio.
Creating a Project
- Go to Projects in your WordPress admin area, click on Add New.
- Set the project title and build the content using the Content Editor
- You can change the Project Settings on the right side of the Editor screen.
- Click on the Publish button.
Project Settings
All project settings are located in the right sidebar of the Editor screen.
-
Project Details: The details and additional information for a project.
There are three setting tabs in this panel:
- General: Layout and project details e.g. website and clients.
- Styling: Additional options for styling a project in the projects list e.g. Scheme and Project color.
- Fields: Custom fields for a project. This section allows you to add user-defined fields to a project.
- Categories: The categories for a project.
- Tags: The tags for a project.
-
Attributes: This setting allows you to manage attributes and attribute groups for a project.
Attributes provide a way to further describe a project and its characteristics through user-defined fields. Visitors can click on an attribute to find similar projects that have that same attribute.
- Featured Image: Sets the primary image that will appear as a thumbnail in the projects list and as a background image in the project header.
- Featured Media: Sets the primary video, audio or gallery for the project.
- Excerpt: A short description for the project.
-
Navigation
- Hide main menu: Hides the main menu.
- Transparent background: Removes the background color from the navigation bar.
- Text mode: Sets the menu text color between Dark and Light to make it can be seen on any background. This option only appears when the Transparent background is enabled.
-
Footer
- Hide the footer: Hides the footer of the page.
Project Permalink Settings
Permalink settings for the Project can be found at Settings → Permalinks in your WordPress admin area. From here you can configure the URL structure for your portfolio and project pages.
Taxonomy Permalinks
There are three default settings at the Optional section that control the base of your project categories, project attributes and project tags:
- Project category base – The default project category base is project-category.
- Project attribute base – The default project attribute base is project-attribute.
- Project tag base – The default project tag base is project-tag.
Project Permalinks
There are four settings under the Project Permalinks section to select from as your permalink base for the projects:
- Default – This will use default project slug. If you are not using pretty permalinks, it will use ID-based URLs.
- Portfolio base – The Portfolio base will use the portfolio page name.
- Category base – The Category base will use the portfolio page name first, then add the project category name.
- Custom base – The Custom base will allow you to set custom slug before the project name.
Note: The permalink must be unique. The project Custom base setting should NOT conflict with the Taxonomy Permalinks and other post type permalinks.
Content Editor
This theme is fully compatible with WordPress Block Editor, a block-based content builder. It also comes with additional blocks and essential components that allow you to easily build a responsive content for your pages and posts so they will look beautiful on any device.
You need to install the Evie XT and Flextension plugins to have the following blocks and components.
This video playlist contains 6 videos as follows:
- How to use WordPress Editor
- How to change Page Settings
- How to add and edit a Section block
- How to work with a Paragraph block and Text Formatting
- How to use a Buttons block
- How to use an Image block
Please visit the WordPress Block Editor for more details and the instructions on how to use it.
The Editor also supports Dark Mode that will be turned on automatically when you’re using a dark scheme for your site. You can also switch between Dark and Light mode to preview your content by clicking on the Dark Mode Switcher button at the top-right corner of the screen.
Blocks
You will find the following additional blocks in the Flextension group in the Blocks library.
- Authors
- Carousel Gallery
- Featured Categories
- Featured Posts
- Instagram Feed
- Post Carousel
- Posts
- Scrolling Text
- Section
- Waterfall Gallery
See all the blocks and how to use them in the List of blocks.
Block Settings
You will find additional block settings below in the Block Settings sidebar at the right hand side of the editor.
- Animation settings: Add the reveal animation to the block.
- Spacing settings: Assign custom margin and padding of the block on each device.
- Visibility settings: Show or hide the block on specific devices.
Block Patterns
Evie comes with predefined block layouts that you can insert into pages and posts and then customize with your own content.
To insert a block pattern, follow these steps:
- In the editor, click the + icon to add a new block.
-
Click on the Patterns tab.
- Select a pattern category. You may filter by type of the patterns.
- Click on any pattern once and it will be added to your page at the location of your cursor.
Also, you can combine different patterns to produce a new layout and design that fits your needs. Learn more about Block Patterns.
Formatting Options
- Highlight: Adds a highlight effect to any selection of text.
- Inline Animation: Inserts animated rotating words into the selected text.
- Underline: Inserts an animated underline into the selected text.
Dark Mode
One of the accessibility features of the Evie theme is support for the visitor’s color scheme preferences in their operating system or browser’s settings.
If you have Dark Mode Support enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences or browser’s settings. They may choose to switch color schemes using the dark mode toggle button on the navigation menu.
Enabling Dark Mode Support
You will find the Color Scheme setting under the Customize → Colors. Then select the Auto option to enable the Dark Mode Support feature. You can also enable the Allow users to switch color schemes setting to allow users to choose their preferred color scheme.
Media
Responsive Images
This theme supports native responsive image feature that was added to WordPress core in version 4.4. Please visit Responsive Images for more details.
The minimum recommended image width is 1920px.
If you install this theme on the existing site with existing images we strongly recommend that you should regenerate your images using the Regenerate Thumbnails plugin after installing this theme.
Lazy Load
The Lazy Load defers the loading of images on the page as long as they are not needed. Images outside of viewport will not be loaded before user scrolls to them. This can speed up your site and save user’s bandwidth.
To enable the Lazy Load on your site:
- Go to Flextension settings page.
- Activate the Lazy Load module.
- You may click on the Settings link present below the module name to visit the module settings screen.
Low quality image placeholders
A low quality image placeholder is a tiny image that will be displayed while the actual image is loading. As it is required to create the image placeholders, you will need to regenerate your thumbnails after you turn on this option with the Regenerate Thumbnails plugin.
Retina Images
Serves larger images on Retina screens to make your images look sharp and beautiful on any device. This will improve viewing experience and increase user satisfaction.
To enable the Retina Images:
- Simply activate the Retina Images module in the Flextension settings page.
- You will need to click on the Settings link present below the module name to visit the Retina Images settings screen.
- Select the image sizes that you would like to create the Retina version for, then click on the Save Changes button.
- You will need to regenerate your thumbnails after saving, using the Regenerate Thumbnails plugin.
Social Integrations
Social Links
This module displays a list of links to your social accounts in the page footer and widget areas. It also allows you to add social links for post authors with additional user setting fields.
Configure the Social Links
- Go to Settings → Social Links.
- Enable the social networking sites that you would like to display in the list of social links.
- You can drag and drop the items into a different order, then save changes.
- A new tab, Links will apear then you can set up your social links there.
- The settings vary depending on the social networking site. You may need to check the Link present below the setting fields to see if it works.
After setting up the social links, you can add a Social Links widget under the Customizing → Widgets into any widget areas on your site to display the social links.
Add social links for the post author
- Go to your Profile page in WordPress admin area. Or click on your Gravatar in the upper-right corner in the frontend to visit your profile page.
- You will find the Social Links settings on your Profile page.
Share Buttons
This module displays share buttons for posts and projects.
Configure the Share Buttons
- Go to Settings → Share Buttons.
- Enable the share buttons you would like to display in the post sharing options.
- You can drag and drop the items into a different order, then save changes.
Followers & Following
This feature allows you to follow authors and see their posts in your feed. This feature is included in the Advanced Author module.
Enable the Advanced Author module
- Go to Flextension settings page.
- Activate the Advanced Author module.
- You may click on the Settings link present below the module name to visit the module settings screen.
Configure the Followers & Following
- Go to Settings → Advanced Author.
- Enable the Follow Button option to display the “Follow” button and allow people to follow authors.
- Enable the Followers and Following option to display number of followers and following.
Instagram Feed
This module displays the Instagram media feed in your sidebars with a widget or post content via a block.
Configure the Instagram Feed
- Go to Settings → Instagram.
- Click on the Connect button to connect your Instagram account.
Once you’ve connected your Instagram account you can display the media feed by using an Instagram Feed widget in the Customizing → Widgets or an Instagram Feed block in the Content Editor.
Other Social Modules
You will also find the following modules that come with social features and widgets:
- Flickr Photos
Simply enable these modules then add widgets to your sidebars.
Fonts
You can use other font families and custom fonts on your website when you enable the following modules.
To enable these modules:
- Go to Flextension settings page.
- Activate any font module you would like to enable.
- You can click on the Settings link present below the module name to visit the module settings screen.
Google Fonts
By default, the Google Fonts module includes a predefined fonts list so you can use them without using the API Key.
How to use Google Fonts
- Click the Add New button and choose a font from the fonts list.
-
You can add more fonts by clicking the Add New button again.
- Click the Save Changes button.
-
Your selected fonts will be shown in the Typography settings under Appearance → Customize → Typography.
However, if the font family you’re looking for is not included in the fonts list, you will need to enable automatic updates for Google Fonts to update the fonts list.
Enable automatic updates for Google Fonts
In order to enable automatic updates for Google Fonts in the list, you will need to set up the Google Fonts API Key. And here are the instructions:
- Visit Developer API page.
- Click the Get a Key button under the Acquiring and using an API key section. You may be prompted to log in to your Google account.
- From the projects list, select a project or create a new one.
- Click the Show Key and then copy the API Key.
- Paste it into the API Key box on the Google Fonts settings screen in your WordPress admin area.
- Click the Save Changes button.
- Now you will have the latest version and see all available Google Fonts in the list.
Adobe Fonts
You need to set up the API Token to use the Adobe Fonts on your website.
How to set up Adobe Fonts API Token
- Log in to your Adobe Fonts Account.
-
Visit API Tokens to get your API Token, or create a new one.
-
Copy the token into the API Token box on the Adobe Fonts settings screen in your WordPress admin area.
- Click the Save Changes button.
- Then you will find your web projects in the Projects dropdown list. Or create a new one by following the instuctions below.
Create a web project and choose fonts to use
- You can follow the instructions from the Choose Fonts to Use section in the Adobe Fonts User Guide to create a web project and choose fonts to use.
-
Please select the Weight and
Style for your fonts as below so they
will render correctly when using the Evie theme.
Light (300 normal) Light Italic (300 italic) Regular (400 normal) Italic (400 italic) Bold (700 normal) Bold Italic (700 italic)
How to use Adobe Fonts
-
Select a project from the Projects dropdown list.
- Click the Add New button and choose a font from the fonts list.
- You can add more fonts by clicking the Add New button again.
- Click the Save Changes button.
-
Your selected fonts will be shown in the Typography settings under Appearance → Customize → Typography.
Custom Fonts
This theme allows you to upload custom fonts to your site. You can also use this feature to self-host Google Fonts locally on your server.
How to add custom fonts
- Prepare your webfont files in woff and woff2 formats. If you would like to self-host Google Fonts, you can download them at google-webfonts-helper.
- Go to Appearance → Fonts in your WordPress admin area, then select the Custom Fonts tab.
- Click the Add New Font Family button.
- Enter a font family name, select the font weight and style then choose your font files.
- You may click the Add font files button to add more font files with other weights and styles.
- Click the Save Changes button.
- Your custom fonts will be shown in the Typography settings under Appearance → Customize → Typography.
Utilities
This theme also comes with additional features and modules to improve user experience on your website.
Single Page
Interacts with the user by dynamically rewriting the current page rather than loading entire new page from a server. The content will show seamlessly and virtually instantly when the visitors click on the links and buttons that makes your website feel more like a native app.
If you have a third-party plugin and it couldn’t work correctly, you may need to exclude the page which isn’t working properly under the module settings or disable this module.
To enable the Single Page:
- Go to Flextension settings page.
- Activate the Single Page module.
- You may click on the Settings link present below the module name to visit the module settings screen.
Live Search
Displays instant search results while typing a keyword. You can select specific post types and fields to display.
To enable the Live Search:
- Go to Flextension settings page.
- Activate the Live Search module.
- You may click on the Settings link present below the module name to visit the module settings screen.
Smooth Scroll
Replaces basic website scrolling effect with a nice smooth scrolling using mousewheel, touchpad or keyboard arrows.
To enable the Smooth Scroll:
- Go to Flextension settings page.
- Activate the Smooth Scroll module.
- You may click on the Settings link present below the module name to visit the module settings screen.
How To Update
By default, WordPress will NOT download any updates for premium WordPress themes from external sources like ThemeForest. Please follow the instructions below to update the theme.
Automatic Update
To enable automatic updates for the theme, you will need to activate the Auto Update module under the Flextension settings.
- Go to Flextension in your WordPress admin area.
- Activate the Auto Update module.
-
This module requires the Envato Market plugin. If you do not have this plugin installed, you will be prompted to install it.
Click on the Install Required Plugins link present below the module name, then install and activate it.
- Once you have the Envato Market plugin installed, you can click on the Settings link present below the module name to setup the Envato API. You will find more details below.
Using Envato Market Plugin
The Envato Market plugin can install and update WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token.
Setting Up The Envato Market Plugin
-
Go to the Envato Market settings in your WordPress admin area. You will find the instructions under the Settings tab.
- Click on the link to generate a token.
-
Select the permissions as follows:
- Click the Create Token button to generate your personal token.
-
Copy that key, paste it into the Token field on the Envato Market settings page and then click Save Changes.
-
A list of your purchased themes will appear in the Themes tab.
Update Your Themes
When there is an update available for the theme, you will see a notification with the link to update it in the Themes tab on the Envato Market settings page. Click on the link to install the update.
Alternately, you can update it under Appearance → Themes like any other WordPress themes.
Lastly, you may be prompted to update the recommended plugins after you update the theme. See Update Plugins.
Manual Update
Download the latest version of the theme from the Downloads tab on ThemeForest. Find the theme you’ve purchased, click on the Download button and select the Installable WordPress file only.
Update via WordPress
- Go to Appearance → Themes.
-
Click Add New button.
And then click the Upload Theme button.
-
Click on Choose File and select the theme zip file on your computer.
- Click Install Now button. You may be prompted to overwrite the theme, click the Replace current with uploaded button.
Update via cPanel or Web File Manager
- In a File Manager, navigate to “/wp-content/themes”. If your WordPress is installed in the document root folder of your web server you would navigate to “public_html/wp-content/themes”.
- Click on Upload button to upload the theme zip file.
- Once the zip file is uploaded, select that file, then click on Extract button to extract it to replace the old “evie” folder. You can delete the old “evie” folder before extracting the zip file if you would like.
- Lastly, go to your WordPress admin page to update the recommended plugins. See Update Plugins.
Update via FTP
- Unzip the theme zip file on your local computer.
- Go to “/wp-content/themes” location on your web server. Delete the “evie” theme folder, your current data will not be lost.
- Upload the extracted “evie” theme folder into “/wp-content/themes/”.
- Lastly, go to your WordPress admin page to update the recommended plugins. See Update Plugins.
Update Plugins
-
After updating the theme, if there is an update available for the plugins included with the theme, you will see a notification message letting you know the plugins have a new version and need to be updated.
-
If the notification message was dismissed, navigate to Appearance → Install Plugins to see the recommended plugins list.
-
Update all the plugins.
Child Theme
What is a Child Theme?
A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files.
Using a child theme lets you upgrade the parent theme without affecting the customizations you have made to your site. See more details about Child Themes.
If you would like to modify the theme. The Child Theme is the recommended way of modifying an existing theme. This theme comes with a child theme called “Evie Child”. see Package Contents.
Install a Child Theme
- Navigate to Appearance → Themes.
- Click Add New button and hit the Upload Theme button.
- Click on Choose File and find the “evie-child.zip” file from your computer and click Install Now button.
- The theme will be uploaded and installed.
- And then activate it.
- Like any themes, you can also install a child theme via Web File Manager and FTP. See Theme Installation.
Translation
All static words in the theme are available in the POT file that’s ready for translation.
Here are two easy ways to translate the theme into another language.
- Using POEdit
- Using Loco Translate WordPress plugin
Translating The Theme
Translate the theme by using POEdit
- Please make sure you have a child theme installed and activated. See Child Theme.
- Extract the theme zip file, then you will find the POT file “evie/languages/evie.pot”
- Open POEdit, then select File → New from POT/PO files.
- Choose “evie.pot” from “evie/languages/evie.pot”.
- Find and translate strings.
- Save it into your current language code such as “de_DE.po”, then will also generate a file “de_DE.mo”.
- Upload both PO and MO files to your child theme folder “wp-content/themes/evie-child/languages/” on your host web server.
For more details, please visit Localization
Translate the theme by using Loco Translate plugin
You can translate the theme from your WordPress admin area by using the Loco Translate plugin.
- Navigate to Plugins → Add New to install new plugin.
- Find and install the Loco Translate plugin.
- Activate the plugin.
You can find more details on how to setup and use this plugin on the plugin’s Official Page.
GDPR Compliance
Disclaimer: This is not legal advice. The GDPR compliance process will vary based on the type of your website, what data you store, and how you process data on your site. We strongly recommend that you still get legal advice before proceeding with any legal action.
What is GDPR?
The General Data Protection Regulation (GDPR) is a regulation in EU law on data protection and privacy in the EU, to give EU citizens control over their personal data and change the data privacy approach of organizations across the world. The GDPR applies to all organizations globally that collect or process personal data from EU citizens.
What is required under GDPR?
The goal of GDPR is to protect the rights of people giving you their data and here are what you need to do:
- Tell the users who you are, why and how you collect the data, for how long and who receives it.
- Let users access and download their personal data.
- Give users the “Right to be Forgotten”. Erase their personal data if they ask.
- Get your users’ clear consent before collecting their personal data.
- Inform users of data breaches if there is a serious risk to them.
WordPress includes the following tools and features for you to take these steps:
Privacy Settings
You can use this feature to build a Privacy Policy page to tell the users who you are, why and how you collect the data (#1). It also includes a pre-made privacy policy template that contains a suggestion of sections you most likely will need.
To create a Privacy Policy page:
- Navigate to Settings → Privacy.
- Click the Create button to create a new one. Or select from an existing one and click the Use This Page button.
- You can check out the Privacy Policy Guide tab for recommendations on what content to include, along with policies suggested by the theme and your plugins.
- Edit your privacy policy content and add any information from the theme and plugins.
- Once you publish your policy page, remember to add it to your navigation menu. See Menus.
Export and Erase Personal Data Tool
You can use the Export Personal Data tool under Tools → Export Personal Data to export user data (#2). And the Erase Personal Data tool under Tools → Erase Personal Data to delete user personal data (#3).
Consent of data collected
To comply with #4, you are required to have your users’ active, clear, and unambiguous consent before collecting their personal data. You will have to review the third-party plugins and services you’re using on your site to see if they’re collecting any personal data that may require consent or a privacy page mention.
WordPress and a lot of plugins have already added GDPR enhancement features to help you comply with this requirement:
Comment Consent CheckboxWordPress has added the comment consent checkbox. The user can leave a comment without saving their details in cookies.
Contact FormsYou should collect only necessary information when using a contact form. If you’re storing the form entries or using the data for marketing purposes, you’re required to have explicit consent from users.
Contact Form 7 plugin comes with the Acceptance Checkboxes that are dedicated to confirming the user’s consent for a specific condition.
WPForms plugin includes the GDPR Enhancements feature to make it easy for you to add a GDPR consent field, disable user cookies, disable user IP collection, and disable entries with a single click. You will find more details in the WPForms Documentation
Newsletter & Opt-in FormsIf you have any email marketing opt-in forms, then you need to make sure that you’re collecting explicit consent from users before adding them to your list. This can be done with either:
- Adding a checkbox that user has to click before opt-in
- Simply requiring double-optin to your email list
For a Newsletter Signup Form, you don’t need a checkbox as the form has the single intention of subscribing the user to a newsletter. Clicking the Subscribe button means the user has consented to receive an email newsletter.
If you are using MailChimp, you have to mention in your privacy policy page that you use MailChimp for your newsletter with a link to their official privacy policy.
WooCommerceIf you’re using WooCommerce, then we recommend you to check out the official WooCommerce GDPR Guide to make your online store GDPR compliant.
Google FontsEvie theme includes 4 default Google Fonts and they are saved to your site and served from your server, not Google.
If you’d like to use more or different Google Fonts. To make your site GDPR compliant, you may have to use Custom Fonts feature to self-host Google Fonts locally on your server instead of using a Google Fonts feature. See Custom Fonts.
Google AnalyticsWhen using Google Analytics to get website stats, it means that you’re collecting or tracking personal data like IP addresses, user IDs, cookies and other data. You need to do one of the following:
- Anonymize IP Address: You can use a Google Analytics Dashboard plugin such as MonsterInsights and ExactMetrics to help automate this process.
- Add a cookie notice to inform users about cookie usage and ask users for consent prior to tracking.
You are required to mention in your Privacy Policy if your site uses cookies, and clearly explain what the cookies do and why. You must also get the user’s consent. Consent must be actively and clearly given.
Normally, there will be information about cookies that WordPress, plugins, and the theme use in the Policy Guide tab under Settings → Policy. Remember to include that information in your Privacy Policy, see Privacy Settings.
We recommend using the Cookie Notice plugin to display a cookie notice popup and get the user’s consent.
Lastly, for #5 you just have to notify your users about a personal data breach if there is a serious risk to them.
Modification
- The theme customization and modification are not included in the product support.
- Please ensure that you have installed and activated the “Evie Child” theme.
To modify the functionality and styling of the theme.
- Navigate to Appearance → Editor.
- Select the Evie Child theme to edit.
- Add custom CSS into Stylesheet (style.css) to override the styling of the theme.
- Add custom functions and WordPress filters into Theme Functions (functions.php) to override the functionality of WordPress and the theme.
To modify the template files of the theme.
- Using an FTP client or a File Manager on your web hosting to access the WordPress theme directory on your host web server.
- Copy the template file which you would like to edit from the parent theme folder “wp-content/themes/evie/”.
- Paste it into the same path in your child theme folder “wp-content/themes/evie-child/”. For instance, if you copy the template file from “wp-content/themes/evie/template-parts/header/header.php”, then you have to paste it into “wp-content/themes/evie-child/template-parts/header/header.php”.
- Edit the template file in your child theme to fit your needs.
You can find more details on WordPress template files in Template Hierarchy.