Efor Documentation

Overview of the theme, its contents, and how to get started with the theme

Pixelwars logo

Thank you for purchasing our theme! If you have a question that this documentation doesn't answer, ask us on our support forums. If you like the theme, please rate it on ThemeForest.

- Pixelwars Team

Support Forums

Sign in to our support forums to ask your question. To open a new topic, you need your Item Purchase Code (where is my purchase code?).

Visit Support Forums

Rate Theme

If you like the theme, you can rate it on your ThemeForest Downloads page.

Rate on ThemeForest

We assume you have basic knowledge of WordPress. In this documentation, you will learn how to install, set up and customize Efor.

Useful Resources

We've assembled some links to get you started:

Learn WordPress: Level up your WordPress skills.


WordPress Documentation: A variety of resources to help you get the most out of WordPress.


WordPress Support Forums: Community-based Support Forums are a great place to learn, share, and troubleshoot.

Note: The WordPress.org forums don't provide support for commercial themes. For questions about Efor, please use our support forums.


Free Plugins: The WordPress Plugin Directory is the largest directory of free and open source WordPress plugins. Extend your WordPress experience with plugins.

Install Theme

You can add the theme to your WordPress site in one of the following ways.

Install via Envato Market Plugin

The Envato Market plugin connects your site to your ThemeForest account and installs the themes you purchased.

  • The plugin isn't available on WordPress.org. Download it from the Envato Market page, then install it from Plugins > Add Plugin > Upload Plugin.
  • Go to the "Envato Market" page in your dashboard and connect the plugin to your account with a personal token. The page shows you how to create one.
  • Install and activate the theme from the "Envato Market" page.

The plugin also helps you keep the theme up to date (see the Update section).

Install by Uploading the ZIP File

  • Download the theme package from your ThemeForest account and unzip it. The theme's ZIP file (efor.zip) is inside the "Theme/1 - Parent Theme" folder of the theme package, in the folder with the current version number.
  • In your dashboard, go to Appearance > Themes > Add Theme > Upload Theme.
  • Click "Choose File", select the theme's ZIP file, and click "Install Now".
  • When the installation is complete, click "Activate".

Note: The "Theme/1 - Parent Theme" folder also has a "Previous Version" folder, with the ZIP file of the previous theme version. Don't install it on a new site. It is there for sites that already use the theme: if your site has a problem after an update, you can go back to the previous version by installing this file (see the Update section).

Note: Your host limits the size of the files you can upload. You can see this limit under Tools > Site Health > Info > Media Handling ("Max size of an uploaded file"). If the theme's ZIP file is larger than this limit, install the theme with one of the ways below, or ask your hosting provider to increase the limit.

Other Ways to Install a Theme

After Installation

  • After you activate the theme, WordPress shows a notice to install the theme's plugins. Go to Appearance > Install Theme Plugins to install them (see the Plugins section).
  • To make your site look like the demo, import the demo content (see the Demo Import section).
  • This theme uses custom image sizes. If you already have images in your Media Library, install and activate the Regenerate Thumbnails plugin, then run it once from Tools > Regenerate Thumbnails.

Child Theme

A child theme inherits the functionality and styling of the parent theme. If you want to change the theme's code, use the child theme: your changes are kept when you update the parent theme (see the Update section).

  • The child theme's ZIP file (efor-child.zip) is inside the "Theme/2 - Child Theme" folder of the theme package.
  • Install the parent theme first, as described above. Keep it installed, because the child theme needs it.
  • Then install the child theme's ZIP file the same way and activate the child theme.

This theme is coded to high standards to ensure seamless compatibility with plugins.

Theme Plugins

Go to Appearance > Install Theme Plugins to install the plugins that come with the theme:

  • Pixelwars Core adds the theme's features, such as its custom widgets. Pixelwars Core Shortcodes adds the shortcodes (see the Shortcodes section).
  • Elementor, JetElements and JetPopup: see the Elementor section.
  • LearnPress (for demos 01-05), and Tutor LMS, Tutor Pro and Tutor Certificate Builder (for demos 06-13): see the Courses section.
  • Amelia: booking for appointments and events. See the Amelia Support Forum.
  • One Click Demo Import: imports the demo content (see the Demo Import section).

The Import Theme Demos page also recommends other free plugins used on the demo site, like WooCommerce, Contact Form 7 and MC4WP (see below). You can install them there before importing the demo, or from Plugins > Add Plugin.

Setting Up Mailchimp for WordPress

  • Install and activate the MC4WP: Mailchimp for WordPress plugin. Go to MC4WP > Mailchimp and connect the plugin to your Mailchimp account with your API key.
  • Go to MC4WP > Form. In the "Fields" tab, paste this code into the text area:
  • <p>
       <label>Subscribe your e-mail address and get to know about fresh stuff!</label>
    </p>
    <p>
       <input type="email" name="EMAIL" placeholder="Your email address" required="required">
    </p>
    <p>
       <input type="submit" value="Sign up">
    </p>
    
  • Switch to the "Appearance" tab, select "Inherit from Efor theme" in "Form Style", and save the changes.

Import Demo Data

Importing demo data (posts, pages, theme settings, etc.) is the quickest and easiest way to set up your new theme. It allows you to simply edit everything instead of creating content and layouts from scratch.

System Requirements

Before you import the demo, make sure your server meets our system requirements (WordPress and PHP versions, and PHP limits such as memory and upload size). You can check your current values under Tools > Site Health > Info > Server. If you are not sure whether your server meets them, contact your hosting provider.

Import Methods

First, go to Appearance > Install Theme Plugins, and install and activate the plugins listed there. Then choose one of the following methods. A low upload size limit on your server can stop the import. In this case, you need to increase it; see this article for how to do it.

Method 1: One-Click Import (Recommended)
  • Go to Appearance > Import Theme Demos. Install the recommended plugins shown on this page, then import a demo.
  • This imports the content, the Customizer settings and the widgets, and sets up the menu and the homepage.
Method 2: Manual Import

Use this method if the one-click import doesn't work on your server. The files are in the "Sample Data" folder of the theme package. If the theme has more than one demo, each demo has its own folder.

  • Plugins: Install and activate the plugins used on the demo site (see the Plugins section).
  • Content: Go to Tools > Import. Under "WordPress", click "Install Now" (if the importer isn't installed yet), then "Run Importer". Choose the "01 - All content (all parts).xml" file in the "Sample Data/Demo Content" folder and import it.
  • Customizer settings: Install and activate the Customizer Export/Import plugin. Go to Appearance > Customize > Export/Import and import the "customizer.dat" file in the "Sample Data/Demo Customizer Settings" folder.
  • Widgets: Install and activate the Widget Importer & Exporter plugin. Go to Tools > Widget Importer & Exporter and import the "widgets.wie" file in the "Sample Data/Demo Widget Settings" folder.
  • Menu: Go to Appearance > Menus. In the "Manage Locations" tab, select the imported menu and save changes.
  • Homepage: Go to Settings > Reading. Under "Your homepage displays", choose "A static page", select "Home" as the homepage and "Blog" as the posts page, and save changes.

Elementor Settings

Disable Elementor's default colors and fonts so that Elementor uses the theme's styles (see the Elementor section).

Permalinks are the permanent URLs to your individual pages and blog posts, as well as your category and tag archives. A permalink is the web address used to link to your content.

  • Go to Settings > Permalinks page.
  • Set the "Post name" option as permalink structure.
  • Save changes.

For more information

Customizer

This theme supports WordPress's Customizer feature. In the Customizer, related settings are grouped under the same section. Therefore, finding a setting is very easy.

With the Customizer, you can customize almost every aspect of your theme. While doing so, you can see the changes live on your website.

You can set your logo either as plain text or as an image. You can also configure your main navigation menu and widgets with the live preview.

We especially recommend adjusting the color settings to align your website's color scheme with your business or logo. If the default color settings work well for you, there is no need to change them.

You can always access the Customizer by going to Appearance > Customize.

Where to Find the Settings

  • Site Identity: Your logo (image or text), and the size and font of the logo.
  • General: Layout, fonts, colors and buttons.
  • Header: Header layout, menu and top bar.
  • Other sections: Footer, Featured Area, Pages, Blog, Single Post, Sidebar, Portfolio and Shop.

Custom CSS and Code Changes

To add small style changes, use Appearance > Customize > Additional CSS. For changes in the theme's code, use the child theme, so that your changes are kept when you update the theme (see the Installation and Update sections).

Fonts with Elementor

To control your fonts in a single place, check "Disable Default Fonts" under Elementor > Settings > General (see the Elementor section). Then all fonts on your Elementor pages come from the font settings in the Customizer. When you want to change a font, you change it once in the Customizer, instead of changing each title one by one in Elementor.

If the Customizer doesn't meet your needs, you can also set global colors, fonts and styles for all your Elementor pages in Elementor's Site Settings.

For more information

Widgets are independent sections of content that can be placed into widgetized areas.

Custom Theme Widgets

This theme has custom widgets. They come with the Pixelwars Core plugin, so make sure it is installed and active (see the Plugins section). In the widget list, their names start with "(Pixelwars)".

  • Go to Appearance > Widgets.
  • Drag and drop widgets to widget areas.

Available Widgets

  • Main Slider: Display your site's posts in a slider. Use in the Featured Area.
  • Intro: Show a title and a brief description with a background image or video in the Featured Area.
  • About Me: Show a brief description with an image in the sidebar.
  • Link Box: Make a link with an image in the Featured Area.
  • Social Media Icon: Add social media icons for your social media profiles.
  • Button: Add a button with a link. You can choose its style, size and icon. You can customize button colors and fonts in Customizer > General > Buttons.
  • Icon Box: Show an icon or an image with a title, a description and a link.
  • Animated Search: Add a search form with an animated search icon.

Note: Check out the Plugins section for "Subscribe" widget.

Intro Widget

The Intro widget can use one of the following backgrounds:

  • Background Image: Choose an image from your Media Library.
  • Background Self-Hosted Video: You need to upload one MP4 format video.
  • Background Embed Video: Use an embed code of any YouTube, Vimeo video.
  • Background Parallax Video: Use the page URL of any YouTube, Vimeo video.

Example embed code: (Vimeo)

<iframe src="https://player.vimeo.com/video/111529240?autoplay=1&loop=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Note: ?autoplay=1, &loop=1 and &muted=1 are optional. Browsers only play a video automatically when it is muted, so keep &muted=1 if you use ?autoplay=1.

Pages are similar to posts in that they have a title, body text, and associated metadata, but they are different in that they are not part of the chronological blog stream, kind of like permanent posts. Pages are not categorized or tagged, but can have a hierarchy. You can nest pages under other pages by making one the "Parent" of the other, creating a group of pages.

Settings Sidebar

When editing a page/post in the WordPress editor, you will find a Settings sidebar on the right-hand side of the screen. This panel contains various options and settings related to the page, such as:

  • Featured Image: Set the main image that represents this page.
  • Template: Select which page template to use.
  • Discussion: Enable or disable comments for the page.

These settings control how the page is displayed. You can find more information about the Settings sidebar in this article.

The theme also adds a "Page Settings" box to the settings sidebar. With it, you can change settings like the sidebar, the featured area and the header style for a single page (see the Posts section).

Create a Page

  1. Go to Pages > Add Page.
  2. Enter title.
  3. Add body text.
  4. Set featured image (optional).
  5. Select a template. (see page templates below)
  6. Publish your page.

Page Template

You can assign a custom template to any page by editing it in the WordPress admin area. To select a custom page template, open the Template dropdown in the settings sidebar.

  • Default Template: WordPress comes with a built-in Default template, which displays the page content using your theme's standard layout. You can use this template for basic pages.
  • Custom Templates: This theme includes custom page templates, each designed for a specific layout. The name of each template clearly indicates how the page content will be displayed. So you can easily understand what kind of layout it provides before applying it.

The theme's page templates:

  • Full width: The page content uses the full width of the site.
  • Medium width: The page content uses a narrower column.
  • Latest Posts: Shows your latest blog posts on the page.
  • Portfolio: Shows your portfolio posts (see the Portfolio section).

When the Elementor plugin is active, you can also choose its "Elementor Full Width" and "Elementor Canvas" templates. The pages of the demo site use "Elementor Full Width" (see the Homepage and Elementor sections).

Page Sidebar

Some page templates include a sidebar area that can display widgets such as recent posts, categories, or custom content.

By default, sidebars are disabled for pages. If you want to display a sidebar on a specific page, open that page in the WordPress editor and select a sidebar with the "Sidebar" option in the "Page Settings" box. The theme has a "Page Sidebar" widget area for pages, and you can also choose any other widget area, including the ones you create in Appearance > Theme Options > Widget Areas (see the Sidebar section).

After selecting a sidebar, go to Appearance > Widgets and add any widgets you want to the sidebar you chose for that page (see the Widgets section).

Contact Page

You can create the contact form on the contact page using the Contact Form 7 plugin. To make your contact form look like the one on the demo site, customize it as shown below.

<div class="contact-form">

<p><label>Name[text* your-name]</label></p>

<p><label>Email[email* your-email]</label></p>

<p><label>Message[textarea* your-message]</label></p>

<p>[submit "Submit"]</p>

</div>

Managing Pages

Managing pages is very similar to managing posts, and the screens can be customized in the same way. You can also perform the same types of actions, including narrowing the list by using the filters, acting on a page using the action links that appear when you hover over a row, or using the Bulk actions menu to edit the metadata for multiple pages at once.

Learn more about Managing Pages.

Useful Resources

Learn how to get the most out of the WordPress block editor when publishing your content.


What Your Homepage Displays

WordPress allows you to choose what your homepage displays. You can use a classic blog page showing your latest posts, or you can assign a static page. If you don't want a blog page on your site, you can set a static homepage only. Creating a blog page is optional. To set a static homepage, simply create (or choose) a page and assign it as the Homepage in Settings > Reading.

Note: If you import the demo with the one-click import, the "Home" and "Blog" pages are set up for you (see the Demo Import section).

Create a Homepage

The homepages of the demo site are built with Elementor (see the Elementor section).

  • Go to Pages > Add Page.
  • Enter a title.
  • In the page settings sidebar, set "Template" to "Elementor Full Width".
  • Set a featured image (optional).
  • Publish your page, then click "Edit with Elementor" and design your homepage.

To start from the homepage of the demo, import its Elementor template from the theme package (see "Mixing Elements from Different Demos" in the Elementor section).

Reading Settings

  • Go to Settings > Reading.
  • Under "Your homepage displays", choose "A static page".
  • Select your page as the "Homepage". If you also want a blog page, create an empty page (for example "Blog") and select it as the "Posts page".
  • Save changes.

You can also show your latest posts on any page with the theme's "Latest Posts" page template.

Learn more about Reading Settings

Here, you will find the information you need to create a blog post. Once you have created your blog post, you can publish it on your blog page. Blog posts have a title, body text, and associated metadata, and they are part of the chronological blog stream. Posts are categorized and tagged, but can not have a hierarchy. Post categories can have a hierarchy. You can nest categories under other categories by making one the "Parent" of the other, creating a group of categories.

If you have any questions about blog page and blog posts, feel free to reach out to us on our support forum. We are happy to assist you!

Let your creativity flow and craft engaging blog posts to share. This will enhance the value of your website and also help it rank higher in search engines.

Settings Sidebar

When editing a page/post in the WordPress editor, you will find a Settings sidebar on the right-hand side of the screen. This panel contains various options and settings related to the page, such as:

  • Featured Image: Set the main image that represents this page.
  • Template: Select which page template to use.
  • Discussion: Enable or disable comments for the page.

These settings control how the page is displayed. You can find more information about the Settings sidebar in this article.

Page Settings Box

The theme adds a "Page Settings" box to the settings sidebar. With it, you can change the following settings for a single post or page. The default value, "Inherit from Customizer", uses the setting from the Customizer.

  • Hide Title: Hide the title of this post or page.
  • Hide Footer: Hide the site footer on this post or page.
  • Post Header Style / Page Header Style: Choose the header style.
  • Post Style / Page Style: Choose the layout of the title and featured image.
  • Sidebar: Choose whether to display a sidebar and which sidebar to use.

Create a Blog Page

Creating a blog page in WordPress is simple, and you can do it in just a few steps. Here's how (see also the Homepage section):

  1. In the left-hand menu, go to Pages > Add Page.
  2. Enter a title for your page, such as "Blog".
  3. Leave the content area blank (WordPress will automatically display your blog posts here).
  4. Click "Publish" to save the page.
  5. Go to Settings > Reading in the dashboard. (Learn more about Reading Settings)
  6. Under "Your homepage displays", select "A static page".
  7. Set your "Homepage" to the page you want as your front page.
  8. Set your "Posts page" to the "Blog" page you just created.
  9. Click "Save Changes".
  10. Go to Appearance > Menus.
  11. Select the "Blog" page and add it to your navigation menu.
  12. Click "Save Menu".

Now, whenever you publish a new blog post, it will automatically appear on your blog page. Happy blogging!

Post Categories

You can use categories to define sections of your site and group related posts. The default category is "Uncategorized" until you change it in the WordPress Writing settings.

Post Tags

You can assign keywords to your posts using tags. Unlike categories, tags have no hierarchy, meaning there's no relationship from one tag to another.

Create a Blog Post

  1. Go to Posts > Add Post.
  2. Enter a title, write your content, and add images.
  3. Set featured image.
  4. Choose a "Category" and "Tags" for better organization.
  5. Choose an appropriate "Format". (see formats below)
  6. Click the "Publish" button to make your post live.

Post Formats

The Post Formats feature in WordPress allows you to use different styles and layouts for various types of content. This feature helps your theme make posts more dynamic and user-friendly.

How to Use Post Formats

On the post edit screen, you can choose the format of a blog post. To do this, open the edit screen of a post and locate the "Format" option in the settings sidebar on the right-hand side.

Note: You can change the post format of an already published post at any time. Simply edit the post and select a different "Format" from the options. WordPress will automatically adjust the layout based on the new format, ensuring that your content remains visually appealing.

Featured Audio/Video Box

For the Audio, Video and Link formats, use the "Featured Audio/Video" box in the settings sidebar of the post edit screen:

  • Audio: Paste the browser address (URL) of an audio from SoundCloud. The audio is shown in place of the featured image.
  • Video: Paste the browser address (URL) of a video from YouTube or Vimeo. The video is shown in place of the featured image.
  • Link: Enter your custom URL. Check 'Open "Link" in new tab' to open the link in a new tab.

Supported Post Formats

WordPress provides a variety of Post Formats, each designed for specific types of content. When creating a post, you can enhance its layout using the WordPress Block Editor.

In the block inserter menu, you will find suitable blocks for each post format. For example, the "Gallery" format supports the "Gallery" block, and the "Video" format supports the "Video" block. To quickly find the right block for a format, simply type the format name (e.g., "Image," "Quote," or "Video") into the block search field. WordPress will automatically suggest the most relevant block for your post format.

This theme supports the following WordPress Post Formats:

  • Standard: Used for classic blog posts. It may include a title, content, and a featured image. Suggested Block: Paragraph, Heading, Image, List.
  • Gallery: Used for posts containing multiple images. Suggested Block: Gallery, Columns.
  • Image: Designed for posts that focus on a large image. Suggested Block: Image, Cover.
  • Video: Ideal for video content. Supports embedded videos from platforms like YouTube and Vimeo. Add the video URL to the "Featured Audio/Video" box (see above). Suggested Block: Video, Embed.
  • Audio: Ideal for audio files, podcasts, or music sharing. Add a SoundCloud URL to the "Featured Audio/Video" box (see above), or upload an audio file through the "Media Library" or embed it using an embed code. Suggested Block: Audio, Embed.
  • Aside: Suitable for short, informal content or announcements. Suggested Block: Paragraph, Pullquote.
  • Status: Short status updates, similar to social media posts. Suggested Block: Paragraph, Quote.
  • Quote: Highlights a quote, usually displayed with special typography. Suggested Block: Quote, Pullquote.
  • Link: Highlights a single external link. Add the link URL to the "Featured Audio/Video" box (see above). Suggested Block: Button, Paragraph with a Hyperlink.
  • Chat: Formats text to resemble a conversation or chat log. Suggested Block: Paragraph. (See below example)

Example for Chat format

JOHN: Hey there

MARY: Aye, matey!

JOHN: Huh?

Blog Sidebar and Post Sidebar

Sidebars allow you to display additional content alongside your main blog page and individual posts. This can include widgets such as recent posts, categories, search bars, social media links, and advertisements.

Sidebars help improve navigation, user engagement, and monetization. Customize them to match your site's design and audience preferences.

Enabling the Sidebars

This theme allows you to enable or disable sidebars through the Customizer. To check:

  1. Go to Appearance > Customize > Sidebar.
  2. Set "Blog Sidebar" and "Post Sidebar" to "Yes". (You can also set "Blog Archive Sidebar" for category and tag pages.)
  3. Click "Publish".

Then go to Appearance > Widgets and add widgets to the "Blog Sidebar" and "Post Sidebar" widget areas (see the Widgets section).

The Sidebar section of the Customizer also has other options, like "Sidebar Position" and "Sticky Sidebar". See the Sidebar section for more.

Managing Posts

Hovering over a row in the posts list will display action links that allow you to manage your post. You can perform the following actions:

  • Edit takes you to the editing screen for that post. You can also reach that screen by clicking on the post title.
  • Quick Edit provides inline access to the metadata of your post, allowing you to update post details without leaving this screen.
  • Trash removes your post from this list and places it in the Trash, from which you can permanently delete it.
  • Preview will show you what your draft post will look like if you publish it. View will take you to your live site to view the post. Which link is available depends on your post's status.

Learn more about Managing Posts, Categories and Tags.

Useful Resources

Learn how to get the most out of the WordPress block editor when publishing your content.


Activate Portfolio Posts

Go to Appearance > Install Theme Plugins. You can see the plugin "Pixelwars Core" in the list. Install the plugin. When you click the "Install" link, it will be installed and activated automatically. Then go to your main dashboard page. Now you can see the "Portfolio" menu.

Portfolio Menu

There are three submenus under the Portfolio menu:

  • All Portfolio Posts: You can see all portfolio posts in a list. They are listed by date. So you can change the publish date from publish box in edit screen to change post order in the table. This will also affect item ordering in your portfolio page.
  • Add Post: Create new portfolio items. (see instructions below)
  • Portfolio Categories: You can assign a category to a post in edit screen. Categories appear as filter in your portfolio page. Also you can create multiple portfolio pages with categories. (see instructions below)

Settings Sidebar

When editing a page/post in the WordPress editor, you will find a Settings sidebar on the right-hand side of the screen. This panel contains various options and settings related to the page, such as:

  • Featured Image: Set the main image that represents this page.
  • Template: Select which page template to use.
  • Discussion: Enable or disable comments for the page.

These settings control how the page is displayed. You can find more information about the Settings sidebar in this article.

The theme also adds a "Page Settings" box to the settings sidebar. With it, you can change settings like the sidebar and the header style for a single portfolio post or page (see the Posts section).

Create a Portfolio Post

Portfolio items are similar to blog posts.

  • Go to Portfolio > Add Post.
  • Enter title and set featured image.
  • Assign to a category. This category will be displayed as a filter in your portfolio page.
  • Use the "Excerpt" field to show a short description under the post title in your portfolio page.
  • Choose the format of the post with the "Format" option. (see formats below)
  • Publish your portfolio post. (Edit publish date to change post order)

Portfolio Post Formats

  1. Standard: Add your content to editor. Posts of this type open in single view when clicked on the portfolio page.
  2. Image: Displays post featured image in a lightbox.
  3. Gallery: Displays images in a lightbox. To create a gallery, add a "Classic" block to your content and use its "Add Media" button.
  4. Audio: Displays an audio in a lightbox. Use browser address url of an audio from SoundCloud. Add the url to "URL" field in the "Featured Audio/Video/Link" box.
  5. Video: Displays a video in a lightbox. Use browser address url of a video from YouTube or Vimeo. Add the url to "URL" field in the "Featured Audio/Video/Link" box.
  6. Link: Enter your custom url to "URL" field in the "Featured Audio/Video/Link" box.

Note: You can see a "Gallery Type" option (Grid or Slider) in the "Page Settings" box. The type option affects content galleries when you view your portfolio post in individual page.
Note: If you do not see the boxes mentioned above in the edit screen, turn them on from Options (⋮) > Preferences > Panels in the upper right side of the editor.

Portfolio Pages

There are two ways to build one or more portfolio pages.

  1. Portfolio Page Template: For single portfolio page.
  2. Portfolio Category Pages: For different portfolio pages. (see multiple portfolios below)

Create a Portfolio Page (with portfolio page template)

This page shows all published portfolio posts.

  • Go to Pages > Add Page.
  • Enter title.
  • Choose an appropriate "Portfolio" template.
  • Publish the page.
  • Add this page to your navigation menu. (Appearance > Menus)
  • You can assign a sidebar to this page with the "Sidebar" option in the "Page Settings" box.

Note: Add some text to content of the page to show it like a message in your portfolio page.
Note: Play with post publish date to change item order in your portfolio page.

Create Multiple Portfolio Pages (with portfolio category pages)

A portfolio category page shows its own published portfolio posts.

  • Go to Portfolio > Portfolio Categories > Add New Category. (parent category)
  • Create portfolio posts assigned to this category.
  • Add sub categories under this category to filter posts. (assign posts to sub categories)
  • Add this portfolio category to your navigation menu. (Appearance > Menus > Portfolio Categories. Show "Portfolio Categories" list from Screen Options panel in upper right side.)
  • Every parent category displays its portfolio posts. So you can have different portfolios in your site.

Note: Add some text to description field of a category to show it like a message in your portfolio category page. (Portfolio > Portfolio Categories > Edit > Description)
Note: Play with post publish date to change item order in your portfolio category page.

Portfolio Options in Customizer

Go to Appearance > Customize > Portfolio.

Overflow Images in Content

This setting is used in single view of portfolio posts.

Activate Overflowing Functionality

  • Go to Appearance > Customize > Single Post > Post Media Width.
  • Set to "Overflow" option.

Enable Overflowing For Images

  • Edit images in your content. Align an image as center from display settings.

Portfolio Sidebar

Control portfolio sidebar from Appearance > Customize > Sidebar:

  • Portfolio Category Sidebar: Activate sidebar area for portfolio category pages.
  • Portfolio Post Sidebar: Activate sidebar area for single portfolio posts.

Sidebar for Portfolio Page Template: Adjust sidebar with the "Sidebar" option in the "Page Settings" box in edit screen.

Portfolio Widget Area: You can see the Portfolio Sidebar widget area listed in the Widgets page under Appearance menu.

Useful Resources

Learn how to get the most out of the WordPress block editor when publishing your content.


The theme is designed to work with Elementor, a drag-and-drop page builder. With Elementor, you can design your pages visually without writing code.

Install Elementor

Install and activate Elementor. It is one of the plugins recommended on the demo import page, so you can install it there together with the others (see the Demo Import section), or from Plugins > Add Plugin. Before you install it, make sure your site meets Elementor's requirements.

Elementor Settings

Go to Elementor > Settings > General:

  • Disable Default Colors.
  • Disable Default Fonts.

With these options checked, Elementor uses the colors and fonts of the theme instead of its own defaults.

When creating a new page, choose Template: "Elementor Full Width".

Elementor Add-ons

The theme comes with two add-ons for Elementor. Install and activate them from Appearance > Install Theme Plugins. Their updates come with theme updates (see the Update section).

JetElements

Adds extra widgets to Elementor. For detailed information, see the JetElements documentation.

JetPopup

Use JetPopup to create popups, like a subscriber box. For detailed information, see the JetPopup documentation.

Mixing Elements from Different Demos

You can import the demo pages into any site as Elementor templates, and mix and match pages from different demos. The template files are in the "Sample Data/(Plugin) Elementor Page Templates" folder of the theme package: a folder for each demo, with a .json file for each page.

  • Go to Elementor > Editor > Templates > Saved Templates and click "Import Templates". (In older versions of Elementor, this page is under Templates > Saved Templates.)
  • Choose a .json file from the folder of a demo and click "Import Now".
  • The imported templates appear in your Saved Templates list. To use one, edit a page with Elementor and insert the template from the template library ("My Templates" tab).

Note: The .xml files in the "Demo Content" folder of the package are not Elementor templates. They are for the WordPress importer (see the Demo Import section).

Plugin Resources

The shortcodes come with the Pixelwars Core Shortcodes plugin. Install and activate it from Appearance > Install Theme Plugins.

How to Add a Shortcode

  • Shortcode block: In the block editor, add a "Shortcode" block and paste your shortcode into it.
  • Shortcode generator: The plugin also has a shortcode generator that creates the shortcodes for you with a form. In the block editor, add a "Classic" block and click the shortcode generator button in its toolbar.

All Shortcodes

Grid

[row]
Column shortcode here.
[/row]


[column width=""]
Content here.
[/column]


width="" ... 1 to 12. (required). 12 = 100%, 6 = 50%, 3 = 25%.

width_xs="" ... 1 to 12. (optional). Extra small devices - Phones (<768px).

width_md="" ... 1 to 12. (optional). Medium devices - Desktops (≥992px).

width_lg="" ... 1 to 12. (optional). Large devices - Desktops (≥1200px).


Example 1: (Two Columns)

[row]
[column width="6"]
Content here.
[/column]
[column width="6"]
Content here.
[/column]
[/row]


Example 2: (Three Columns)

[row]
[column width="4"]
Content here.
[/column]
[column width="4"]
Content here.
[/column]
[column width="4"]
Content here.
[/column]
[/row]


Example 3: (Four Columns)

[row]
[column width="3"]
Content here.
[/column]
[column width="3"]
Content here.
[/column]
[column width="3"]
Content here.
[/column]
[column width="3"]
Content here.
[/column]
[/row]

button

[button text="" url="" new_tab="" size="" icon=""]


new_tab="" ... yes

size="" ... mini, small, big, huge

icon="" ... See Icons section.


Example:

[button text="My Button" url="https://www.example.com"]

social_icon

[social_icon type="" same_tab="" url=""]
[social_icon type="" same_tab="" url=""]
[social_icon type="" same_tab="" url=""]


same_tab="" ... yes

type="" ...

behance, blogger, bloglovin, deviantart, digg, dribbble,

facebook, fivehundredpx, flickr, foursquare, github, goodreads,

instagram, lastfm, linkedin, medium, meetup, paypal,

pinterest, quora, reddit, rss, slideshare, snapchat,

soundcloud, spotify, stack-overflow, tiktok, tumblr, twitch,

twitter (X), unsplash, vimeo, vkontakte, weibo, whatsapp,

wordpress, xing, yelp, youtube


Note: You can use your site's feed url for the rss icon: https://www.yoursite.com/feed/


Example 1:

[social_icon type="facebook" url="https://www.facebook.com/username"]
[social_icon type="twitter" url="https://x.com/username"]


Example 2:

[social_icon type="facebook" same_tab="yes" url="https://www.facebook.com/username"]
[social_icon type="twitter" same_tab="yes" url="https://x.com/username"]

contact_form

[contact_form captcha="" to="" subject=""]


to="" ... Your email address.

captcha="yes"


Example:

[contact_form to="yourname@example.com" subject="New Message from My Site"]

alert

[alert type=""]Text here.[/alert]


type="" ... success, error.


Example 1:

[alert]My alert text.[/alert]


Example 2:

[alert type="success"]My alert text.[/alert]


Example 3:

[alert type="error"]My alert text.[/alert]

tab

[tab_wrap titles="" active=""]
[tab]Text here.[/tab]
[tab]Text here.[/tab]
[tab]Text here.[/tab]
[/tab_wrap]


titles="" ... Separate with commas.


Example:

[tab_wrap titles="Tab One,Tab Two,Tab Three"]
[tab]
Tab one text here.
[/tab]
[tab]
Tab two text here.
[/tab]
[tab]
Tab three text here.
[/tab]
[/tab_wrap]

accordion

[accordion_wrap]
[accordion title=""]Text here.[/accordion]
[accordion title=""]Text here.[/accordion]
[accordion title=""]Text here.[/accordion]
[/accordion_wrap]

toggle

[toggle_wrap]
[toggle title=""]Text here.[/toggle]
[toggle title=""]Text here.[/toggle]
[toggle title=""]Text here.[/toggle]
[/toggle_wrap]

quote

[quote align="" name=""]Text here.[/quote]


align="" ... alignleft, alignright

timeline

[timeline]
[event_group_title icon="" text=""]
[event current="" date="" title="" sub_title=""]Text here.[/event]
[event current="" date="" title="" sub_title=""]Text here.[/event]
[event current="" date="" title="" sub_title=""]Text here.[/event]
[/timeline]


icon="" ... See Icons section.

current="" ... current

skill

[skill title="Fireworks" percent="90"]
[skill title="Photoshop" percent="70"]
[skill title="Illustrator" percent="50"]

testimonial

[testimonial image="" title="" sub_title=""]Description text here.[/testimonial]
[testimonial image="" title="" sub_title=""]Description text here.[/testimonial]
[testimonial image="" title="" sub_title=""]Description text here.[/testimonial]


title="" ... Person's name.

sub_title="" ... Person's job.

image="" ... An image url. Upload your image to your Media Library, then copy its url and use in this parameter.

section_title

[section_title]Title here.[/section_title]

fun_fact

[fun_fact]
An image here.
Heading 4 title here.
[/fun_fact]

service

[service]
An image here.
Heading 4 title here.
Description here.
[/service]

Full-width Images

Edit images in your content. Add full keyword as Image CSS Class to your image from advanced options.

Zoomable Images

Edit images in your content. Add zoom keyword as Link CSS Class to your image from advanced options. And Link To: Media File from display settings.

Parallax Images in Posts

Edit images in your content. Add parallax or parallax half keywords as Image CSS Class to your image from advanced options.

Icons

Available icons here. Select your icon from the list. Don't use the prefix pw-icon-. Only use icon name for the icon="" parameter of the shortcodes.

This theme is coded to be fully compatible with the WooCommerce plugin. You can install the WooCommerce plugin at any time to transform your website into an e-commerce platform. Whether you want to sell digital products or physical goods, it's all possible with this setup.

There are also numerous free and paid extensions available for the WooCommerce plugin. With these, you can add extra features to your website and build a more advanced structure. This way, you can stay one step ahead of your competitors.

For questions about how the theme works with WooCommerce, feel free to ask on our support forums. For questions about the WooCommerce plugin itself, use the WooCommerce support forum (see below).

Install WooCommerce

Go to Plugins > Add Plugin, search for "WooCommerce", and install and activate the plugin.

Shop Settings

The theme has its own settings for your shop:

  • Customizer: Go to Appearance > Customize > Shop.
  • Shop Sidebar: A widget area for the shop pages (see the Sidebar section).
  • Shop Featured Area: A widget area for the shop page (see the Featured Area section).

WooCommerce Sample Data

If you import the demo with the one-click import, the shop products of the demo are imported too (see the Demo Import section). Install and activate WooCommerce before you import the demo.

The WooCommerce plugin comes with its own sample products. You can import them to see how your shop looks with products. The sample files are in the "sample-data" folder of the WooCommerce plugin. See Importing WooCommerce Sample Data for how to import them.

Plugin Resources

LMS: Learning management system.

Use only one LMS plugin to avoid any conflict.

There are two LMS plugins: LearnPress and Tutor LMS. Choose the one that matches your demo.

Use LearnPress plugin for the following demos:

Use Tutor LMS plugin, together with the Tutor Pro and Tutor Certificate Builder plugins that come with the theme, for the following demos:

Install and activate LearnPress, or Tutor LMS with Tutor Pro and Tutor Certificate Builder, from Appearance > Install Theme Plugins.

Important: Install and activate the LMS plugins of your demo before you import the demo. The demo content includes courses and lessons, which can only be imported when the matching LMS plugin is active (see the Demo Import section).

Plugin Resources

LearnPress LMS Plugin

LearnPress Courses Settings: In LearnPress > Settings, find the "Thumbnail dimensions" option in the course settings and set it to 600x600. Then run Regenerate Thumbnails plugin once if you have existing courses.

Tutor LMS Plugin

Translate the Theme

All texts of the theme are translatable. You can translate them into your language with a plugin (Loco Translate) or with a desktop editor (Poedit).

The theme includes a template file that contains all of its texts: efor.pot, in the "languages" folder of the theme. You can also use translation to change the theme's English texts. For example, category archives show the title Browsing Category. You can create an "English (United States)" translation and change this title to something like Posts under Category.

Important: Don't save your translation files in the theme folder. Theme updates replace the whole theme folder, so your translations would be deleted. Save them in one of the folders described below, which theme updates don't touch.

With Loco Translate (Recommended)

  • Install and activate the Loco Translate plugin.
  • Go to Loco Translate > Themes and select Efor.
  • Click "New language" and choose your language.
  • For the location, choose "Custom" (wp-content/languages/loco/themes/). If you don't see this option, create that folder first.
  • Click "Start translating", translate the texts, and click "Save".

With Poedit

  • Open the efor.pot file in Poedit, create a new translation for your language, and translate the texts.
  • Save the translation. Poedit saves a .po file and also creates a .mo file, which is the file WordPress uses.
  • Name the files with the theme name and your language code, like efor-de_DE.po and efor-de_DE.mo for German. Then upload them to the "wp-content/languages/themes/" folder.

Set Your Site Language

Go to Settings > General and choose your language in "Site Language". Your translation appears on the site only when the site language matches it.

Plugin Texts

Some texts, like the portfolio labels and the theme's widgets, come from the Pixelwars Core plugin. The plugin has its own translation files and already includes translations for some languages. To translate or change its texts, follow the same steps under Loco Translate > Plugins > Pixelwars Core.

Multilingual Sites

To publish your content (posts, pages, and menus) in more than one language, use a multilingual plugin. For the theme's own texts, most of these plugins use the theme's translation files, so translate the theme first as described above.

A backup is a copy of your site that you can go back to if something goes wrong, like a failed update, a broken plugin or a hacked site. Keep recent backups, and keep at least one copy outside your server.

What to Back Up

A full backup has two parts. You need both to restore your site:

  • Files: Your WordPress files, especially the "wp-content" folder (themes, plugins and uploaded images) and the "wp-config.php" file.
  • Database: Your posts, pages, comments, menus, widgets and settings, including the Customizer settings.

When to Back Up

  • Before you update the theme, plugins or WordPress (see the Update section).
  • Before you import the demo content into a site that already has content (see the Demo Import section).
  • Before big changes, like switching to another theme or editing the theme's files.
  • Regularly: daily or weekly, depending on how often your site changes.

How to Back Up

  • Hosting backups: Many hosting providers back up your site automatically. Check your hosting control panel or ask your hosting provider how often they back up and how long they keep the backups.
  • Backup plugin: The free UpdraftPlus plugin backs up your files and database on a schedule. It can also send the backups to cloud storage like Google Drive or Dropbox.

Keep copies outside your server (in cloud storage or on your computer), so you can restore your site even if your server has a problem. See WordPress Backups to learn more.

Restore a Backup

Restore your site with the same tool you used to back it up. In UpdraftPlus, go to Settings > UpdraftPlus Backups, find the backup in the list of existing backups and click "Restore". For hosting backups, use your hosting control panel or ask your hosting provider.

Note: From time to time, check that your backups work, for example by restoring one on a test site.

Before You Update

  • Back up your site: Make a full backup of your site (files and database) before you update. See the Backups section.
  • Translations: An update replaces the whole theme folder. If you saved translation files in the theme's "languages" folder, back them up first, because the update deletes them. To avoid this, keep your translations outside the theme folder: Loco Translate can save them in a protected folder (wp-content/languages/loco/) that theme updates don't touch. See the Translation section.
  • Code changes: Changes made directly in the theme files are lost when you update. Make your code changes in the child theme instead (see the Installation section). If you use the child theme, update only the parent theme. The child theme stays as it is.

Update Your Theme

Choose one of the following ways. With the Envato Market plugin, you don't need to download anything. For the other two ways, download the new theme package from your ThemeForest account and unzip it. The theme file to upload (efor.zip) is inside the "Theme/1 - Parent Theme" folder of the package, in the folder with the new version number.

Note: The "Theme/1 - Parent Theme" folder also has a "Previous Version" folder, with the ZIP file of the previous theme version. If your site has a problem after an update, you can go back to the previous version: install this file the same way, via WordPress or via FTP.

Update Your Theme via Envato Market Plugin

The Envato Market plugin connects your site to your ThemeForest account. WordPress can then check for updates of the themes you purchased and install them.

  • The plugin isn't available on WordPress.org. Download it from the Envato Market page, then install it from Plugins > Add Plugin > Upload Plugin.
  • Go to the "Envato Market" page in your dashboard and connect the plugin to your account with a personal token. The page shows you how to create one.
  • When a new version is available, update the theme from the "Envato Market" page or from Dashboard > Updates.

Update Your Theme via WordPress

  • Go to Appearance > Themes > Add Theme > Upload Theme.
  • Click "Choose File", select the new efor.zip file, and click "Install Now".
  • WordPress sees that the theme is already installed and shows the current and the uploaded versions. Click "Replace installed with uploaded".

You don't need to activate another theme or delete the current one first. Switching to another theme and back can mix up your menu locations and widgets.

Note: If your host doesn't allow uploading large files, update the theme via FTP.

Update Your Theme via FTP

You can upload files to your site with an FTP client or with the file manager in your hosting control panel. See Updating WordPress using FTP to learn more about both.

  • Unzip the new efor.zip file on your computer to get the new "efor" theme folder.
  • Upload the new theme folder into "/wp-content/themes/" with a temporary name, like "efor-new".
  • Rename the current "efor" folder to "efor-old", then rename "efor-new" to "efor".
  • Check your site. If everything works, delete the "efor-old" folder.

Note: Don't upload the new folder over the old one. Files that were removed in the new version would stay on your server.

Update Theme Plugins

The theme comes with its own plugins, like Pixelwars Core. A new theme version can include new versions of these plugins, so update them right after you update the theme. Go to Appearance > Install Theme Plugins and update the plugins listed there. WordPress also shows a notice in the dashboard when these plugins need an update.

These plugin updates also appear in Dashboard > Updates and on the Plugins page.

Update WordPress

Keep WordPress up to date, because new versions include security fixes (see the Security section). Before you update to a new major version of WordPress, make a backup and check whether a theme update for the new version is available. You can find your theme's page on ThemeForest in the Pixelwars portfolio.

If you prefer to start major updates yourself, go to Dashboard > Updates and click "Switch to automatic updates for maintenance and security releases only". Maintenance and security releases will still be installed automatically. Don't postpone major updates for long.

Security Recommendations

Using a WordPress site securely is essential for protecting your website from potential threats. Here are some key security recommendations:

Keep WordPress, Themes & Plugins Updated

Always keep WordPress, themes, and plugins updated to the latest versions to prevent security vulnerabilities. See the Update section to learn how to update the theme.

Download Themes & Plugins From Official Sources Only

Download the theme and its updates only from your ThemeForest account or through the Envato Market plugin (see the Update section). Download plugins only from WordPress.org or from their developers' websites. Never use "nulled" (pirated) copies of themes or plugins: they often contain hidden malicious code that can give attackers control of your site.

Remove Unused Themes & Plugins

Delete the themes and plugins you don't use. Deactivated themes and plugins still stay on your server, and a security flaw in them can still put your site at risk. Don't delete the parent theme if you use its child theme, and keep one default WordPress theme (like Twenty Twenty-Five) as a fallback.

Keep PHP Up to Date

WordPress runs on PHP, and old PHP versions no longer receive security fixes. You can see your PHP version under Tools > Site Health > Info > Server. If it is no longer a supported version, ask your hosting provider to switch to a newer one. Before switching, update WordPress, your theme, and your plugins.

Avoid the "admin" Username

Don't use "admin" or other easy-to-guess usernames. WordPress doesn't let you change a username, so if your site has an "admin" account, create a new administrator account with a unique username, log in with it, and delete the old account. When WordPress asks what should be done with the content owned by that user, choose "Attribute all content to another user" and select your new account. Otherwise, all posts and pages of the old account will be deleted.

Use Strong Passwords

Ensure that you use complex passwords for your admin panel, database, and hosting account. Consider using a password manager. Don't re-use the same password on different services, especially if you are using the same username.

Use SSL Certificate (HTTPS)

Ensure your website uses HTTPS with an SSL certificate. Most hosting providers offer free SSL via Let's Encrypt. Once your site opens with https://, go to Settings > General and change both "WordPress Address (URL)" and "Site Address (URL)" to start with https://. See HTTPS for WordPress for more details.

Install a Security Plugin

Use a security plugin like Wordfence, Kadence Security (formerly iThemes Security), or Sucuri Security to add extra protection layers. Important: If you decide to use a security plugin, make sure to activate only one at a time. Running multiple security plugins simultaneously may cause conflicts and errors.

Limit Login Attempts

Prevent brute-force attacks by limiting the number of failed login attempts. Wordfence and Kadence Security include this feature. If you don't use one of them, you can use a plugin like Limit Login Attempts Security (formerly Limit Login Attempts Reloaded).

Enable Two-Factor Authentication (2FA)

For additional security, enable 2FA for your WordPress login to prevent unauthorized access. With 2FA, you enter a one-time code from an app on your phone after your password. WordPress doesn't include 2FA by default. Wordfence and Kadence Security include this feature. If you don't use one of them, you can use the Two Factor plugin.

Backup Your Website Regularly

Use a backup plugin like UpdraftPlus or your hosting provider's backup service to prevent data loss (see the Backups section).

By following these security measures, you can significantly reduce the risk of attacks and keep your WordPress site safe.

Answers to the questions we are asked most often in our support forum. Click a question to see its answer. Each answer links to the section with the details.

Installation and Demo Import

Uploading the theme fails with "The link you followed has expired" or "The theme is missing the style.css stylesheet."

The file you download from ThemeForest is the whole package, with the documentation and the demo files. Unzip it and upload only the efor.zip file that is inside its "Theme/1 - Parent Theme" folder. The theme's ZIP file is about 60 MB, because it includes the premium plugins: if your server's upload limit is lower, WordPress shows "The link you followed has expired". In this case, install the theme with the Envato Market plugin or via FTP, or ask your hosting provider to raise the upload limit (see Install Theme). If a ZIP file in the package doesn't open, the download was incomplete: download the package again.

I bought the theme for one demo, but my site shows another design.

All 13 demos come with the theme, and you choose one when you import the demo content. Until then, your site shows the theme's default design. Go to Appearance > Install Theme Plugins and install the plugins, including the LMS plugin of your demo (see the next question). Then go to Appearance > Import Theme Demos and import the demo you want, for example Demo 06 (Judy West) (see Import Methods).

My site doesn't look like the demo after the import.

Install and activate the theme plugins before the import (see Import Methods): Pixelwars Core and Pixelwars Core Shortcodes, Elementor, JetElements and JetPopup, and the LMS plugin of your demo, LearnPress for Demos 01-05 or Tutor LMS with Tutor Pro for Demos 06-13 (see the Courses section). The import skips the content of plugins that aren't active, like the courses, the popups or the step and testimonial sections of the demo pages. Warnings like "Failed to import course_category" or "Invalid post type jet-popup" in the import log mean that such a plugin wasn't active. Import only one demo, and only once. After the import, check the Elementor Settings and set the permalinks to "Post name" (see Permalink Settings). If your images look cropped or have different sizes, run Regenerate Thumbnails once (Tools > Regenerate Thumbnails). Finally, clear your caches.

The demo import fails or stops.

Most import errors, like "503 Service Unavailable", "500 Internal Server Error", "Looks like some of the plugins failed to install" or a site that shows only "Hello World", come from server limits. Make sure that your server meets the system requirements (PHP version and PHP limits such as memory, execution time, input time and upload size), or ask your hosting provider to raise them. Also install and activate the theme plugins before the import (see Import Methods). If only some demo images fail to import, your server couldn't download them; the rest of the content works, and you can replace them with your own images.

I imported more than one demo, and now my content is duplicated or mixed up.

The import doesn't replace your content: each import adds its pages, posts, menus, popups and widgets again, so the demos mix. For example, the blog page breaks when the "Blog Featured Area" widget area gets two Main Slider widgets. Back up your site first (see the Backups section). If your site has no content of your own yet, the quickest way is to reset it with a plugin like WP Reset, which deletes all content and settings. Otherwise, delete the imported pages, posts, media, menus, popups and widgets yourself, and empty the trash. Then install the theme plugins and import one demo. To use a page of another demo, see the next question.

How do I use a page or a section from another demo?

Don't import a second demo. The theme package has the pages of each demo as Elementor templates, in the "Sample Data/(Plugin) Elementor Page Templates/(demo name)" folder: a .json file for each page, like home.json. Import the file in Elementor's Saved Templates, then edit a page with Elementor and insert the template, or only a section of it, from the "My Templates" tab of the template library (see Mixing Elements from Different Demos in the Elementor section). To use the widgets of another demo, like its header icons or its footer, import the "widgets.wie" file in the "Sample Data/Demo Widget Settings/(demo name)" folder with the Widget Importer & Exporter plugin. Some sections need a plugin: the course lists need the LMS plugin of that demo, and the subscribe buttons need JetPopup.

Courses

The courses page is empty, or a course page says "You are lost!"

Use only one LMS plugin. When LearnPress and Tutor LMS are both active, they conflict, and course pages show "You are lost!" (the theme's "page not found" page). Deactivate the one that your demo doesn't use (see the Courses section). Then select your courses page in the plugin's settings: "All courses page" in LearnPress > Settings > General, or "Course Archive Page" in Tutor LMS > Settings > Advanced. Make sure that no other page uses the slug "courses". Finally, go to Settings > Permalinks, select "Post name" and click "Save Changes", even if it's already selected.

My course pages don't look like the demo.

The course pages come from the LMS plugin. Demos 01-05 use LearnPress and Demos 06-13 use Tutor LMS, and the two plugins have different course pages. For example, the course pages of Demo 03 need LearnPress: with Tutor LMS, they look like the course pages of Demo 06 (see the Courses section). The course list page isn't an Elementor page either: change it in the plugin's settings, like Tutor LMS > Settings > Design. New versions of these plugins sometimes change their pages; then update the theme too, because a new theme version can include the styles for them (see the Update section).

Tutor LMS Pro, JetElements, JetPopup or Amelia asks for a license key.

You don't need a license key to use them. These premium plugins come with the theme, and all their features work without activation. A license key only turns on automatic updates from the plugin's author; without it, you get the new versions with theme updates (see the next question). Your theme's purchase code doesn't work as a license key. If you want automatic updates, reply with your site's address in the Efor Pro Plugin Licenses topic of our support forum (you can use its "Private Content" box), and we send you the keys. Each key works on one domain and one WordPress installation, so request the keys for your final address, after you switch it to HTTPS. You don't need them on a staging site. Enter the Tutor LMS Pro key in Tutor LMS > License, the JetElements and JetPopup keys in Crocoblock > License, and the Amelia key in Amelia's settings. If you move your site to another domain, ask for new keys in the same topic.

How do I update the plugins that came with the theme?

First update the theme (see Update Your Theme). A new theme version can include new versions of its plugins, so go to Appearance > Install Theme Plugins and update the plugins listed there (see Update Theme Plugins). If an update fails, or shows "Update package not available", deactivate and delete the plugin on the Plugins page, then install it again from Appearance > Install Theme Plugins. Your content and settings stay, because they are saved in the database. Tutor LMS Pro doesn't show its updates in Dashboard > Updates, even with a license key ("A valid license key is required"), so update it from Appearance > Install Theme Plugins too, and keep Tutor LMS and Tutor LMS Pro at matching versions. If JetElements or JetPopup still shows "Update package not available" after you entered a license key, go to Crocoblock > License, click "License Manager", press Ctrl+Alt+D (Control+Option+D on a Mac), choose "Delete License Data", click "Go" and add your license again.

How do students log in, register and find their courses?

With Tutor LMS (Demos 06-13), students use the dashboard page, which has the [tutor_dashboard] shortcode: they log in there and see their courses and profile. New students register on the page with the [tutor_student_registration_form] shortcode. The demo import creates these pages. Select them in Tutor LMS > Settings, as "Dashboard Page" in the "General" tab and "Student Registration Page" in the "Advanced" tab, and add them to your menu in Appearance > Menus (see the Menu section): the header has no login icon. To let visitors create an account, also check "Anyone can register" in Settings > General. With LearnPress (Demos 01-05), students use the profile page that you select as "Profile page" in LearnPress > Settings > General.

How do students pay for courses, and why aren't my courses added to the cart?

It depends on your LMS plugin. LearnPress has its own checkout page ("Checkout page" in LearnPress > Settings > General), with PayPal and offline payment. For other payment methods, or to sell courses through the WooCommerce cart, LearnPress needs add-ons, so LearnPress courses don't appear in the cart. Tutor LMS sells courses with its own checkout or with WooCommerce: choose it in Tutor LMS > Settings > Monetization. With WooCommerce, create a product for each course and select it in the price settings of the course. Then courses and shop products use the same payment methods, which you set up in WooCommerce > Settings > Payments. If the cart or checkout page is empty or goes to the homepage, select your cart, checkout and account pages in WooCommerce > Settings > Advanced, and choose the "Medium width" template for the cart and checkout pages (see the WooCommerce section).

After updating to Tutor LMS 4, the student dashboard looks unstyled.

Tutor LMS 4 has a new dashboard. If your child theme has a "tutor" folder (wp-content/themes/efor-child/tutor/), it contains copies of Tutor LMS 3 templates, which replace the new ones, so the dashboard loses its styles. Back up this folder and delete it, or delete the old dashboard templates in it. Then update the theme and the Tutor LMS plugins to their latest versions (see the previous questions) and clear your caches.

Elementor and Pages

I can't edit the blog page (or the courses page) with Elementor.

The page that you select as the "Posts page" in Settings > Reading lists your posts automatically. WordPress builds this page, so Elementor can't edit it and may show "The preview could not be loaded". Change the layout of your blog in Appearance > Customize > Blog, and the slider above it in the "Blog Featured Area" widget area (see the Posts and Featured Area sections). The course list pages are built by LearnPress or Tutor LMS in the same way (see the Courses section). If you want to design a blog page with Elementor, create a page that isn't selected as the "Posts page" and add a posts widget to it.

The Elementor editor is slow or doesn't load.

Elementor needs more server resources than WordPress alone, and each active plugin needs more. Make sure that your server meets the system requirements, or ask your hosting provider to raise the PHP memory limit. If the editor keeps loading, deactivate the plugins that don't come with the theme and try again. Elementor's own fix also helps often: go to Elementor > Settings > Advanced and enable "Switch Editor Loader Method". If only one page doesn't load in the editor, see the previous question.

A page looks different on my site than in Elementor, or my changes don't show.

Clear your caches first: your cache plugin, your server's or CDN's cache and your browser's cache. Then go to Elementor > Tools and click "Clear Files & Data" under "Elementor Cache" to rebuild Elementor's styles. Check "Disable Default Colors" and "Disable Default Fonts" in Elementor > Settings > General, so that Elementor uses the theme's colors and fonts (see the Elementor section). Global colors and fonts in Elementor's Site Settings replace the Customizer's settings, so set them in one place only. Changes in the Customizer show only after you click "Publish". Optimization features that combine or delay CSS and JavaScript files, like those of WP Rocket, LiteSpeed Cache or SiteGround Optimizer, can also break the layout: turn them off and check again.

How do I change the big image or video at the top of the homepage?

The top of each demo homepage is an Elementor section with a background image or video. Edit the homepage with Elementor and open the settings of this section. If the menu covers the section's handle, right-click the section and choose "Edit", or select it in Elementor's Navigator. Change the image or video in the "Style" tab, under "Background". Elementor can show a different background image on tablets and phones: click the device icon next to "Image" and change the image for each device too, otherwise phones still show the demo image. Some demos use a YouTube video from our channel as the background, so our channel's logo can appear on your site: replace it with your own video, preferably a video file uploaded to your Media Library. To play a background video on phones, turn on "Play On Mobile".

My page isn't full width, or how do I hide the header on a landing page?

Edit the page and choose its template in the settings sidebar: "Elementor Full Width" uses the full width of the screen, with the theme's header and footer. Use it for your Elementor pages (see the Elementor section). "Elementor Canvas" shows only your Elementor content, without the header and footer, so use it for a landing page. If a section is still narrow, check its "Content Width" in Elementor. To show a different header style on a page, like a transparent header, see the questions about the header below.

Icons are missing or show as empty squares.

Most often, the icon fonts are blocked because some files still load over http:// on an https:// site (mixed content). Make sure that both addresses in Settings > General start with https:// (see Use SSL Certificate in the Security section). Clear your caches, because cache and optimization plugins can serve old icon files. In Elementor, enable "Load Font Awesome 4 Support" in Elementor > Settings > Advanced, and click "Clear Files & Data" in Elementor > Tools. If the icons still don't show, try turning "Inline Font Icons" on or off in Elementor > Settings > Features.

Header, Logo and Menu

My logo doesn't show, disappears when I scroll, or is too small.

Go to Appearance > Customize > Site Identity. On a transparent header, the theme shows "Image Logo Negative", usually a white version of your logo, and on the white sticky header it shows your normal logo. Upload both, so that your logo shows in both states. Set "Logo Behaviour" to "Stick with Menu" to keep the logo in the sticky header. Change the size with "Image Logo Height (px)", "Image Logo Height Mobile (px)" and "Image Logo Sticky Height (px)". For a sharp logo, upload a PNG file at least twice as tall as the height you set, and choose "Full Size" when you select it. SVG logos need a plugin like SVG Support. The theme shows either an image logo or a text logo: to show your name next to your logo, add it to the image. If the logo disappears only on your live site, turn off lazy loading for it in your cache or image optimization plugin.

The menu text is invisible, or the header doesn't look like the demo (transparent or sticky).

Each page can have its own header: edit the page and find "Page Header Style" in its "Page Settings" box. "Transparent" and its variants put the header over the top image of the page, like on the demo homepages. "Inherit from Customizer" uses the style in Appearance > Customize > Pages > Page Header Style. If your menu text is white on a white header, or the color changes you make in the Customizer don't show on a page, set its "Page Header Style" to "Inherit from Customizer", and use a transparent style only on pages that start with a dark image. The header colors are in Appearance > Customize > Header > General (like "Header Text Color" and "Header Mask Opacity") and in Header > Menu (like "Menu Text Color"). To keep the menu at the top of the screen when visitors scroll, set "Menu Behaviour" to "Sticky" or "Smart Sticky" in Header > Menu. Posts have the same option, "Post Header Style", in Appearance > Customize > Single Post.

How do I remove the shopping cart or the search icon from the header?

The cart icon appears when WooCommerce is active. If you don't sell anything, deactivate WooCommerce. If you need WooCommerce, for example to sell courses with Tutor LMS, hide only the icon with this code in Appearance > Customize > Additional CSS: .shopping-cart { display: none; }. To remove the search icon, go to Appearance > Customize > Header > General and set "Header Search" to "No".

How do I add or change the social media icons in the header?

Go to Appearance > Widgets and open the "Header Social Media Icons" widget area. Each icon is a "(Pixelwars) Social Media Icon" widget, which comes with the Pixelwars Core plugin: edit the icons of the demo, or add a widget for each new icon, and choose the icon and the address of your profile in it (see the Sidebar section). You can also add a Custom HTML or button widget to this widget area, like a "Book a Call" button. For a phone number or short text above the header, use the "Top Bar Left" and "Top Bar Right" widget areas.

How do I edit the footer and the copyright text?

The footer is made of widgets. Go to Appearance > Widgets and edit the "Footer Copyright Text" widget area for the copyright line, "Footer 1" to "Footer 4" for the footer columns, and "Footer Subscribe" and "Footer Instagram" for the subscribe form and the Instagram feed (see the Sidebar section). The number of columns is in Appearance > Customize > Footer. These widgets show on all pages. A header or footer made with the Theme Builder of Elementor Pro replaces the theme's header and footer on the whole site, and the theme's header can disappear even if you made only a footer. In this case, make both with the Theme Builder, or use the theme's widget areas.

Blog

How do I hide the "Visited X times" text or the view count?

The "Visited X times, Y visits today" line below your posts and pages comes from the Top 10 plugin: go to Top 10 > Settings > Counter/Tracker and uncheck the content types in "Display number of views on". The view count in the post details is a theme option: go to Appearance > Customize > Meta and set "Views Count" to "Hidden" in "Blog Meta" (post lists) and in "Single Post Meta" (single posts). Do the same with "Like" to hide the heart button, which comes from the I Recommend This plugin.

The blog page is empty or broken, or how do I change the slider at its top?

The blog page lists your posts automatically: select it as the "Posts page" in Settings > Reading and leave its content empty (see Create a Blog Page in the Posts section). The slider at its top is the "(Pixelwars) Main Slider" widget in the "Blog Featured Area" widget area, which needs the Pixelwars Core plugin. If the blog page looks broken, go to Appearance > Widgets and check this widget area: when a demo is imported twice, it gets two Main Slider widgets, so delete one of them. To remove the slider, delete the widget. To change it, edit the widget: "Slides" shows your sticky posts or your latest posts, and "Ratio" changes its height (see the Featured Area section). The layout of the post list is in Appearance > Customize > Blog.

How do I change the share buttons, or remove the box that appears when I select text?

The share links come from the theme. Go to Appearance > Customize > Meta and set "Share" to "Hidden" in "Blog Meta" and in "Single Post Meta", and set "Share Links" to "No" in Appearance > Customize > Single Post to hide the share links of single posts. The networks of these links can't be changed: for other networks, like LinkedIn or WhatsApp, hide them and use a share plugin instead. The box that appears when you select text in a post comes from the Selection Sharer plugin, which is recommended on the demo import page: deactivate the plugin to remove it.

Forms and Newsletter

The contact form doesn't send emails, or its button goes blank.

The demo contact pages use the [contact_form] shortcode, which sends emails with PHP's mail() function, so your server must allow it. When it can't send an email, the button switches to its error state, which can look blank. Ask your hosting provider to enable it, and check your spam folder. SMTP plugins don't work with this form, because it doesn't use WordPress's mail function. For reliable emails, use a form plugin, like Contact Form 7 (recommended on the demo import page), together with an SMTP plugin like WP Mail SMTP, and put its form on your contact page instead of the shortcode. Also use a form plugin if you need more fields. To change where the shortcode sends the messages, edit the contact page with Elementor and change the email address in the shortcode, like [contact_form to="you@example.com"]. Add subject="..." to change the subject of the emails, and captcha="yes" to add a simple math question against spam. If the shortcode shows as plain text, activate the Pixelwars Core Shortcodes plugin.

The subscribe form says "Please, set up MailChimp API key and List ID."

The subscribe forms of the demo pages come from JetElements (the "Subscribe" widget) and the subscribe popups come from JetPopup, so they don't use the settings of the MC4WP plugin. Go to Crocoblock > JetPlugins Settings. On the "Integrations" page of JetElements, enter your Mailchimp API key and your list (audience) ID. On the "Integrations" page of JetPopup, enter your API key and synchronize your account. You can also enter the list ID in the settings of the widget in Elementor ("Use Target List Id?"). If Mailchimp rejects the form's fields, make the fields that the form doesn't send, like the name, optional in your Mailchimp audience. These forms work only with Mailchimp. The subscribe form in the footer of some demos comes from MC4WP (see Setting Up Mailchimp for WordPress in the Plugins section).

A button opens a subscribe popup instead of my link, or a popup doesn't open.

Some buttons of the demos open a JetPopup popup, like the subscribe box, and the popup is set in the button's settings, so changing the button's link doesn't help. Edit the page with Elementor, select the button, and remove the popup in the "JetPopup" settings of its "Advanced" tab. To change the popup itself, go to JetPopup > All Popups and edit it with Elementor. If a popup doesn't open, or opens only once, set "Cache Settings" to "Inactive" in the "Advanced" tab of its button, check the display conditions of the popup, and clear your caches.

The Submit, Register or Place Order button is missing on a form.

While a page loads, the theme hides the buttons of the forms, and its script shows them when the page is ready. If the theme's script doesn't run, the buttons stay hidden. This happens most often when a cache or optimization plugin delays JavaScript until the visitor interacts with the page, like "Delay JavaScript execution" in WP Rocket or a similar option in LiteSpeed Cache. Turn this option off, or exclude the theme's main.js file from it, and clear your caches. You can also make the buttons always visible with this code in Appearance > Customize > Additional CSS:

.site-content form input[type=submit],
.site-content form input[type=button],
.site-content form button { visibility: visible; }

Speed, Updates and Errors

Scrolling is slow, jumpy or gets stuck.

Go to Appearance > Customize > General > Layout and set "Smooth Scroll" to "No". This option changes how the page scrolls with the mouse wheel, and in some browsers and devices it makes scrolling slow or jumpy, also in popups. If scrolling still gets stuck, for example on iPhones, deactivate the plugins that don't come with the theme and check again.

My site is slow.

The speed of your site depends mostly on your hosting: on shared hosting, your site gets fewer resources at busy times. Make sure that your server meets the system requirements. Use a cache plugin, like W3 Total Cache, and an image optimization plugin, like Optimole. In Appearance > Customize > General > Fonts, set "Include All Font Weights (100-900)" to "No", so that only the font weights you use are loaded. Large background videos and images slow down the first load of a page, so keep them small or use an image instead.

My site breaks or shows a "500 Internal Server Error" after an update.

After a theme update, also update the plugins in Appearance > Install Theme Plugins: old versions of JetElements, JetPopup, Tutor LMS Pro or Amelia can break your pages (see Update Theme Plugins). Then clear your caches. If the problem stays, deactivate the plugins that don't come with the theme, then activate them again one by one to find the plugin that causes it. Before you update WordPress or Elementor to a new major version, check that the theme supports it (see Update WordPress). A "500 Internal Server Error" can also come from an empty border width field in Appearance > Customize > Header > General or Header > Menu: enter 0 instead of leaving it empty. Your hosting provider can tell you the cause from the server's error log.

How do I translate texts like "Buy Now", "type and hit enter" or the contact form labels?

Translate each text where it comes from, in Loco Translate (see the Translation section). The theme's texts, like "type and hit enter" in the search box and "Views", are in Loco Translate > Themes > Efor. Under Loco Translate > Plugins: the texts of the theme's widgets are in Pixelwars Core, the labels of the contact form in Pixelwars Core Shortcodes, the course texts, like "Buy Now" or "Enroll Now", in LearnPress or Tutor LMS, the shop texts in WooCommerce, and "Like this" in I Recommend This. Texts like "Leave a comment" come from WordPress itself (Loco Translate > WordPress). A translation shows only when "Site Language" in Settings > General is the same language. After an update, click "Sync" in Loco Translate to add the new texts, and save your translations in the "Custom" location, so that updates don't delete them.

My fonts don't look like the demo, or my custom font isn't in the font list.

Check "Disable Default Fonts" in Elementor > Settings > General, so that your Elementor pages use the fonts that you choose in Appearance > Customize > General > Fonts (see Fonts with Elementor in the Customization section). Global fonts in Elementor's Site Settings replace these fonts, so leave them empty. The font list comes from the Pixelwars Core plugin: if it shows only "OS Default", activate the plugin. You can't add your own fonts to this list. To use a custom font, add it in Elementor (Custom Fonts, an Elementor Pro feature) or with a custom fonts plugin and select it in Elementor, or load it with @font-face in Appearance > Customize > Additional CSS.

PHP notices or warnings appear at the top of my site.

These messages appear because WordPress is set to show debug messages. Notices don't break your site, but visitors shouldn't see them on a live site. Open the wp-config.php file and set define( 'WP_DEBUG', false );. If you want to keep the messages in a log file instead, use define( 'WP_DEBUG_DISPLAY', false ); and define( 'WP_DEBUG_LOG', true );. See Debugging in WordPress.