Thank you for purchasing Pixwell!

Pixwell

Documentation & Usage

1. Getting Started

Checking Server Requirements

WordPress requirements

In order to proceed with the theme installation, you need to make sure you have the latest version of WordPress (5.1+) on your self-hosted site.

If you are new to WordPress, I would recommend learning a little bit about it before you get started. Below is helpful Resources to get you started with WordPress:

Theme requirements

The theme can work all almost servers, but we recommends following server settings:

  1. PHP : Version 5.4 or greater. the recommended version is 7.2
  2. MySQL: Version 5.6 or greater.
  3. upload_max_filesize: 8MB or greater.
  4. memory_limit: 64MB or greater, the recommended is 256M (if you use Woocommerce plugin).
  5. max_input_vars: The minimum value is 2000 but the recommended is 10000.

Server requirements

There are several methods to check server requirements. We explain about the most common method: WP-ServerInfo plugin

The plugin allows you to easily check almost all the server configs. Install the plugin like any other WordPress plugin then follow below steps:

  1. From your dashboard, go to Dashboard -> WP-ServerInfo page. It shows some general information about your server.
  2. To see all server information, click on Display PHP Information and Display MYSQL Information.

Configuring Server Settings

Configuring server settings requires some technical knowledge. A site owner needs to be familiar with php.ini, .user.ini and .htaccess files and using the FTP software.

Note: If you're not a technical user, Please contact your host provider to configure the settings for you.

Configuring the settings in php.ini and .user.ini files

PHP configuration file (php.ini) is a special file which holds the settings when PHP runs. In almost of the servers, we can override default configuration by creating a php.ini in the root directory (public_html).

  1. Create an empty file called php.ini in root directory of your website where WordPress is installed.
    Note: You can access to website directory thought Cpanel or using FTP software. In most of the servers, it's in the public_html folder.
  2. Add following codes in the file:
    memory_limit=256M
    post_max_size=32M
    upload_max_filesize=32M
    max_input_vars=10000
    max_execution_time = 60
  3. Check your server settings as explained in the previous section to make sure changes are applied. If you see no change, try to rename php.ini file to .user.ini. It's possible your server does not allow overriding server settings.
Note: To increase the memory limit, you can also add the code below to your WordPress wp-config.php :

define('WP_MEMORY_LIMIT', '256M');

Configuring the settings in .htaccess file

If the above method cannot work, you can try to config via .htaccess file.

.htaccess is a configuration file for the web servers running Apache Web Server software. You can also use this file configure some of the server settings.

To add the settings in the file:

  1. Open .htaccess file in an editor. You can find the file in the root directory of WordPress installation.
    Note: You can access to website directory thought Cpanel or using FTP softwares. In most of the servers, it's in the public_html folder.
  2. add the code below at the end of the file:
    php_value memory_limit 256M
    php_value post_max_size 32M
    php_value upload_max_filesize 32M
    php_value max_input_vars 10000
    php_value max_execution_time = 60
  3. Check your server settings as explained in the previous section to make sure changes are applied.

Troubleshooting

If the settings do not apply Please follow below steps:

  • Contact Host Provider: If you can not find the php.ini or .htaccess file or the changes doesn't work as expected, it is best to contact the host provider. They will happy to help you with this issues.
  • Open a support ticket: Please open a ticket in the support tab of this item.

Backup & Restore Website Data

Backup website

We recommend use backup features of your hosting. The way described below is just the fallback option.

In case you would like to backup your website, you can follow steps below:

  1. Download All-in-one WP Migration plugin and install it.
  2. Navigate to Site Migration -> Export.
  3. Click to Advanced option to expand them. Select checkboxes to choose data that don't needed to be backed-up (sometimes, excluding themes and plugins may be a good idea).
  4. Click on the export button to start exporting.

Restore website

  1. Navigate to Site Migration -> Export. Then drag &drop the backup file to upload it.
  2. Wait to finish.

That's all!

Renew Theme Support

When you purchase a theme, you will be granted an inclusive 6 months of support for that item. When this expires you can choose to renew your item support for a further 6 or 12 months at a fee. Please continue reading below to learn more about this, or click the button below to read Envato's'What Is Item Support?'

How to renew the item support

The price of a 6-month support extension for a Regular License is calculated as:

  • 37.5% of the item price (30% of the list price) when purchased at the same time as the license.
  • 62.5% of the item price (50% of the list price) when purchased during the support period.
  • 87.5% of the item price (70% of the list price) when purchased after the support period has ended.

To renew support, Please follow steps below:

  1. First, sign in to your ThemeForest account and go to your Dashboard/Profile.
  2. Click on the Downloads Tab, then click on the expired support item.
  3. Click the button Renew Support on the left of the item page.
  4. You'll be redirected to the checkout page. Confirm your payment details and follow the on screen prompts to finish purchasing the extension.

What will happen if I donnot renew the item support?

The only thing that changes is that you will not be received support. However, You will continue to receive theme updates that contain bug fixes, patches and new features.

2. Getting Help

What is FTP?

FTP is a standard network protocol for downloading and uploading files from your computer to the server.

We recommend you to try FileZilla, it's free software and available in most popular platforms.

Using FileZilla software

To use FileZilla software, folow the steps below:

  1. Download and install FileZilla.
  2. Navigate to File -> Site Manager and click on the New Site button. Set logon type as Normal. Then open panel in your hosting account to find Host name, port, username and password. Fill them in corresponding fields in FileZilla.
  3. Click on the Connect button. After that a list of files and folders on the server will appeare. Now you can edit files and folders from your local computer and upload them to the server.

Find Your Purchase Code

After you completed a purchase, The item will be added to your download page. It will include a Main File, installable package and also the License Certificate which includes your Purchase Code.

How to find purchase code:

  1. To find your purchase code, you need to log into your ThemeForest account and go to your download page.
  2. Search for the theme name in downloads page
  3. Click on the arrow link of the Download button next to the name of the Theme
  4. Select the 'License Certificate & Purchase Code' download link.
  5. Download the link in Text of PDF format and you will see your Item Purchase Code there.

Need Customisation Theme

Theme Customisations is not a part of the support package.

Item support does not include services to modify or extend the item beyond the original features, style and functionality described on the item page.

If you want to find extra customization, we recommend you get help from someone at: https://studio.envato.com/

3. Theme Installation

Download and Install Theme

Download theme

After you purchase the theme on Themeforest, you can download the theme.

Please Note: You can download 2 packages from ThemeForest:

  1. First is the full package with documentation links and some additional files. You need to unzip this package to find the theme file (pixwell.zip) to install
  2. Second is the package with the theme itself, this is the package you can install directly.

Install theme via WordPress

In order to install the theme into WordPress, you should directly upload the theme file via the WordPress Theme Uploader.

  1. Log into your admin panel and browse for Appearance -> Themes.
  2. Click Add New
  3. Click the Upload Theme
  4. Find the package pixwell.zip on your device and click Install Now button.
  5. Click Activate, once the upload has finished.

Missing style sheet error when installing the theme:

A common issue, it means that you have uploaded the full package. you just need to unzip the package and find pixwell.zip archive to install

"Are you sure you want to do this?" error when installing the theme:

While installing your theme through WordPress admin, you may encounter this error message. This is most likely due to your hosting php.ini configs.

The Pixwell theme file is around 3mb and some servers set the default value for max_upload_limit to 2mb.

To solve this issue, you should either increase your maximum upload size to 10mb on your hosting or ask hosting provider to do it for you. This is a very common request and they should be able to help you out. Once the limit is increased, you can re-try the install.

Install theme via FTP

A further option to install the theme would be to upload it via FTP manager. It really doesn't matter which of the two ways you choose, Use this way when you get problems when installing.

  1. Login to your FTP account and navigate to your WordPress Installation directory.
  2. Navigate to the folder /wp-content/themes
  3. Unzip theme archive pixwell.zip on your device.
  4. Upload the "pixwell" folder (not the .zip-file)
  5. Now log into your WordPress admin dashboard.
  6. Navigate to Appearance -> Themes.
  7. Now you will see the theme in the listing, Activate it.

Install Default Plugins

Install Plugins

We suggest you install the all requested plugins at the first to make the theme can work full functionality.

After activating the theme, your website will auto redirect to plugins page to help you install all default plugins of this theme or You can manually go to Appearance -> Install Plugins:

If not, Please click on "Begin Installing Plugins" link or navigate to Appearance > Install Plugin to navigate the install plugin page.

  1. Check all plugins to install:
  2. At the Bulk Actions, select the Install and click on the Apply button.
  3. After finished, navigate back to plugin page select active and click on Apply button.

Pixwell Core (Required)

This plugin is the requested plugin for this theme. It will enable all theme functions and features. It is must be activated for Pixwell.

Pixwell Importer (Optional)

Pixwell Importer is the plugin that allows you can import demo via Theme Options panel with 1 Click.

After import and completed to setup a website. you can deactivate and delete this plugin on your live website.

Elementor (Recommended)

This is a free 3rd plugin to build page layouts. The theme already is included the built-in Ruby Composer. However, you can use this plugin if you wish. You can consider choosing between Ruby Composer and Elementor. The theme supported all layouts for both builders.

Breadcrumb NavXT (Recommended)

This plugin generates locational breadcrumb trails for your WordPress powered blog or website.

You can also use the breadcrumb feature of SEO Yoast Plugin, the theme also supports this feature as well.

WooCommerce (Optional)

This plugin will enable the shop features on your website.

YITH WooCommerce Wishlist (Optional)

Offer to your visitors a chance to add the products of your woocommerce store to a wishlist page.

MailChimp for WordPress (Optional)

Allowing your visitors to subscribe to your newsletter should be easy.

oAuth Twitter Plugin (Optional)

This plugin allows your website can connect to twitter via API and provides a settings screen for easy integration into WordPress.

If you have the plan to use Twitter feed plugin, you need to install this plugin.

Envato Market Plugin (Optional)

This is plugin that allow you can automatically get notice and auto update the theme.

The Envato Market plugin can install WordPress themes and plugins purchased from ThemeForest and CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

  1. Install and active the plugin via Appearance -> Install Plugins
  2. Click the 'Envato Market' menu in WordPress and connect to the API.
  3. Click on "generate a personal token" to create a token and input to the Token form.

That's all.

Using Child Theme

What is child theme?

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade parent theme.

You can install Child theme in the same way you have installed main theme. you can add your custom code directly to Child Theme files to make changes appear on your site. These changes won't be overwritten during updates.

There are no disadvantages of not using a Child Theme if you have no plans to modify or custom the parent theme.

You can refer the URL below for further information: http://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/

Customizing CSS via child theme

After active child theme, You can easily add your custom CSS by going to Appearance -> Editor, and selecting style.css to add your code there.

Install Demo Content

There are some points to consider before using demo content:

  • Demos content needs to be installed in a fresh installation of WordPress.
  • We do not have right to include images of demos in the content due to copyright issue, so images will look different with the demo. The structures of demos will still be left intact so can use your own images in their places if you desire.

One-click to import demos

You can easily import the demo data via special theme page, just navigate to:

Your Dashboard > Theme Options > Demo Importer

This will help you get started

This features will import Content, Theme Options and widgets. Be patient until the installation is complete. It may take several minutes in some web hosts. At this stage, several automatic steps happen:

  1. Import media content to your server
  2. Import post/page data to your server
  3. Import menu to you server
  4. Import theme options to your server
  5. Import widgets to your server

After the successful installation, click on "SAVE CHANGES" button at the top right of the theme options panel to make sure everything will working smooth is as.

You can select a part of demo content as: pages, widgets and theme options to import If your website already has content.

Select "All Demo Content" in case you are running on a fresh WordPress installation with no content at all.

Manual Import

The theme comes with a .xml file containing demo content you can import into your WordPress site. In case something went wrong with automatic demo import, you can import content manually.

Go to ThemeForest Download Page and download All files & documentation, then unzip this archive and in demo-content folder, you can locate all demo content files.

  1. content.xml: this file includes posts, pages, menus and media contents.
  2. pages.xml: this file includes page contents. Use this file if your website already has content and you want to import the home page layout.
  3. theme-option.txt: this file use to import theme options settings.
  4. widget.wie: this file use to import widgets.

Import XML content:

  1. Navigate to Tools -> Import.
  2. Click on WordPress link (if the Importer plugin is not installed, install it).
  3. Select the content.xml file located in the archive which you have downloaded from ThemeForest and click Upload file and import button. It will take a few minutes to install and upload all content.
  4. After finished, Navigate to Appearance -> Menus -> Menu locations then assign Menu for menu and then click Save.

Import Theme Options:

  1. Select the theme-option.txt file located in the archive which you have downloaded from ThemeForest. Open this file with TXT editor, select all text and then copy it.
  2. Navigate to Theme Options -> Imported/Exported. Click Imported from the file. and then paste texts you have just copied. And then, click Import (2 times).

That's all.

Import Widgets:

  1. Install and active plugin: Widget Importer & Exporter
  2. Navigate to Tools -> Widget Importer & Exporter
  3. Click on Import link.
  4. Select the widgets.wie file located in the archive which you have downloaded from ThemeForest and click "Upload file" button.
  5. Click import button.

Setup HomePage:

  1. Navigate to: Dashboard -> Settings -> Reading
  2. At the "Front Page Displays" option select "A static page"
  3. At the "Front page:" dropdown, Please select Home page.

Troubleshooting

99% of issues when importing demo due to web hosts, Below is a list of common issues which you may face during demo installation:

One-click import could not complete

The issue happens when PHP maximum execution time is less than theme requirements. Please read this section to increase your server maximum execution time to recommended value: Configuring Server Settings

  1. Prefresh the import page and try to re-import.
  2. Change php.ini config and try to re-import,
  3. Switch to manual import method

One-click import stuck at 99%

The issue happens when PHP max input vars is less than theme requirements. Please read the section to increase your server max_input_vars to recommended value: Configuring Server Settings

Error 504 (Gateway Time-out)

The issue happens when PHP maximum execution time is less than theme requirements. Please read this section to increase your server maximum execution time to recommended value: Configuring Server Settings

Other issues

If you faced any other issues, open a support ticket at the support tab of this item.

Demo Images

All images are copyrighted and they don't include demo content. If you need to use any of them on your website, you need to acquire the appropriate license.

4. Theme Options

What is Theme Options?

Theme Options is the main feature of Pixwell. Almost options of the theme are located here, which you can do your global settings for your website. There are 2 ways to access Theme Options:

  • Via The Panel: navigate to Your Dashboard -> Theme Options.
  • Via Customize Page: navigate to Appearance -> Customize page.
Please Note: Some special options cannot display on the customize page, so we recommend you should use the panel if you want to see all options.

Cannot See The Theme Options?

Please make sure that you have installed and activated Pixwell Core plugin.

Contact the theme support, so we able to check and help you.

6. Posts

How to Create a New Post?

Creating Posts

Pixwell supports 4 WordPress native post formats. Each format supports various post templates for you can an amazing post, it has it's own custom fields (except Standard) for simple content making:

  1. Default post format with featured image
  2. Video post format
  3. Audio Post format
  4. Gallery Post format

To create a new post, You can navigate to Posts -> Add New.

Further information from WordPress codex: Posts Screen

Customizing posts

In Pixwell you have two different types of options to customize your posts:

Global Options: These options will be applied to all posts. To get started, navigate to:
Your Dashboard -> Theme Options -> Single Post Settings.

Individual post Options: These options will be applied to the current post. You can see the settings panel (bellow editor) in the post editor page.

Post Featured Image

Pixwell requests featured images for posts. It is used by all blocks and layouts to display your content.

How are featured images cropped?

By default in Pixwell, all featured images are crop Center-Center

However, Center Top cutting will work best with a huge variety of pictures, especially if it have humans, the head is generally at the top.

To change the crop setting, Navigate to Theme Options -> Style & Design -> Featured Image - Crop Position

Run Regenerate thumbnails once to resize for old your site images.

Set Featured Image

To add featured images for posts, Please follow steps below:

  1. Navigate to Post -> Add New.
  2. At the right of the screen, click on the "Set featured image" link to set your featured image.
The recommended minimum image size to upload is at least 1200*800px or bigger. If you upload images without at least that size, WordPress will not be able to generate all thumbnails as expected.
The theme will automatically create post featured image if you input video from Vimeo, Youtube or Dailymotion.

How to Enable or Disable Comments?

To getting started, follow steps below:

  1. navigate to the post editor page.
  2. At the top-right corner of the screen, click on Screen Options to be sure that you have Discussion checked.
  3. Once checked that option, scrolling down to the bottom of the page. look for Discussion section and verify to have the boxes checked to enable comments.
  4. To disable comments, uncheck the option.

How to Create a Video Post?

Pixwell supports video post format. It is perfect if you have a video and you want to replace featured image and show it at the top of your post. Available video hosted that the theme supports are:

  • Vimeo
  • Youtube
  • DailyMotion
  • Self-hosted video

To create a video post, follow steps below:

  1. Navigate to Post -> Add New.
  2. Select "video" at the format box (the right of the screen)
  3. Scroll down the page to see the post options panel, select "Video Settings" tab.
  4. Input the video URL or you can upload your video.
  5. Settings for your video post and "Save Changes" the post.

Video post format will automatically generate featured image if you add the video URL from: Youtube, Vimeo or DailyMotion. After you update the post, the Featured Image box will display the generated preview image.

You can also replace it with your image by set your featured image into the box.

How to Create Audio Post?

Pixwell supports audio post format. It is perfect if you have a audio and you want to replace featured image and show it at the top of your post. Available audio hosted that the theme supports are:

  • Soundcloud
  • Mixcloud
  • Self-hosted audio

To create a audio post, The ways as same as creating a video post:

  1. Navigate to Post -> Add New.
  2. Select "Audio" at the format box (the right of the screen)
  3. Upload a featured image for this post.
  4. Scroll down the page to see the post options panel, select "Audio Settings" tab.
  5. Input the audio URL or you can upload your audio file.
  6. Settings for your video post and "Save Changes" the post.

How to Create a Gallery Post?

Pixwell supports gallery post format. It is perfect if you want to show a gallery grid or slider at the top of your post. Available gallery types that the theme supports are:

  • Gallery Slider
  • Gallery Grid

To create a gallery post, The ways as same as creating a video post:

  1. Navigate to Post -> Add New.
  2. Select "Gallery" at the format box (the right of the screen)
  3. Upload a featured image for this post.
  4. Scroll down the page to see the post options panel, select "Gallery Settings" tab.
  5. Select images to display for gallery
  6. Settings for your gallery post and "Save Changes" the post.

Gallery post support the lightbox popup and detail information for each image of your gallery:

How to Create a Review Post?

Review feature allows you to create review posts using a system based on the score so you can easily create product reviews for your website.

Creating a review post

To create a review post, follow steps below:

  1. Navigate to Post -> Add New.
  2. Scroll down the page to see the post options panel, select "Review Settings" tab.
  3. Select "Enable" in the "Review Box" to enable review feature.

The pros/cons

Review feature allows you can create a list of the pros and cons for products. using "/" to divide each element, Ie:

  • positive 1/positive 2/positive 3
  • negative 1/negative 2/negative 3
The recommended size for the featured image for the review box is 760*400

How to Enable/Disable Meta Info in Single Post Page?

Pixwell provides options for you can sort order and enable/disable any post meta info in single post pages: author name, date post, comments, view...

To getting stared, follow step below:

  1. Navigate to Your Dashboard -> Theme Options -> Single Post Settings -> Styles & Design.
  2. At this section, you will see the Entry Meta Bar Manager.
  3. To disable an element, drag and drop it to "Disable" section.
  4. To enable an element, drag and drop it to "Enable" section.

Author Box

The Author Box is a section that appears on the author page and at the end of single post pages. Author box will automatically display as default if you fill author information.

Author Information

To add author information, follow steps below:

  1. Navigate Users -> Your Profile.
  2. fill information boxes.
  3. For additional information as social profiles, job name. please make sure that you have installed and activated "Pixwell Core" plugin.

Author Avatar Image:

You can add an avatar to your profile in two ways:

  1. Register a Gravatar account on the Official website, and then upload your avatar. Using this way, your avatar will display on all website you commented on.
  2. You use WP User Avatar plugin, Once installed, the avatar option will appear in Users -> Your Profile.

Enable/Disable Author Box

The enable/disable author option and other boxes in single post pages are located at: Theme Options -> Single Post Options -> Styling Options -> Single Box Options.

How to Set a Primary Category for a Post?

It is useful in case you have posts with a lot of categories and you want to display only one in listings. To get started, follow steps below:

  • Navigate to the post editor page.
  • Scroll down the page to see the post options panel, select "General Settings" tab.
  • In "Primary Category" dropdown selection, select a category.
  • Click on the "Update" button to save your changes.

7. Category

How to Create a Category?

WordPress categories are a very convenient way to organize your posts. You can have parent and child categories making hierarchical arrangement of your posts possible.

To create a category, follow steps below:

  1. Navigate to Posts -> Categories page.
  2. On the left side of the page, you will see a tab that allows you to create categories.
  3. Fill in the category name, its slug (will be used in the category URL).
  4. click on the "Add New Category" button to create a new category.

How to Set Options for a Category?

You have 2 type of options for a category in Pixwell:

  • Default Categories Options: it will apply to all categories.
  • Individual Category Options: you can set up options to a specific category, those settings will override default category settings.

Default Categories Options

Default options of categories are located in Theme Options. To get started, navigate to:
Theme Options -> Category Page Settings.

Individual Category Options

You can settings for each category, to get started, follow steps below:

  1. Navigate to Posts -> Categories page.
  2. Select a category you want to edit, click on "edit" link to navigate the edit category page editor.
  3. Scrolling down to the bottom page, you will see all options for this category is located here.

8. Blog

How to Create a Blog Page?

The blog page is useful when you want to have a separate page that shows all latest blog posts. To create a blog page, follow steps below:

  1. Navigate to the Dashboard, click Pages, then click the "Add New" button.
  2. Enter a title for the blog page, and then click Publish.
  3. Next, navigate to Settings -> Reading area and look for the Front Page display area.
  4. Change the radio button "A static page". in the "Posts Page" dropdown selection, select the page you just created. Then save changes.

How to set the blog page as Homepage?

You can set blog page as Homepage via WordPress Settings. Follow steps below:

  • Next, navigate to Settings -> Reading area and look for the Front Page display area.
  • Select "Your latest posts" option, then save changes.

How to Set Up Blog Post Options?

After you add the blog page, you can navigate to Theme Options -> Blog (Index) Settings to set up layout and other options for this page.

9. Pages

How to Create a Page?

creating a WordPress page is very similar to creating a post. Just remember that pages are intended for static content.

To get started adding a new page to your website, follow steps below:

  1. Navigate to Dashborad -> Pages -> Add new
  2. Add the Title of the page.
  3. Next, add some content.
  4. The Publish section of the page editor is exactly the same as for writing posts. When you're ready to publish, you can either publish immediately, save this or a draft, or schedule the page to be published later.

How to Create a Contact Page?

There are a lot of plugins for WordPress that allow you to add a contact form to a page. The theme support Contact Form 7", a most popular plugin.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

You can find docs, FAQ and more detailed information about Contact Form 7 on contactform7.com. If you were unable to find the answer to your question on the FAQ or in any of the documentation.

Create a contact page

To create a contact form using contact form 7 plugin, follow steps below:

  1. Install "Contact Form 7" plugin: Navigate to admin dashboard, click on Plugins -> Add New and enter Contact Form 7 in the Search box. From the results, click on the Install Now button. After finished, click on Active the plugin.
  2. Create a Contact Form: click on Contact -> Contact Forms from the admin dashboard. You can manage multiple contact forms there.
  3. Get contact shortcode: Just after installing the Contact Form 7 plugin, you'll see a default form named "Contact form 1", and a code like this:
    [contact-form-7 id="1234" title="Contact form 1"]
  4. Create Page: Copy this code. Then, navigate to "Page -> Add New" and then input contact form shortcode into the contents of the page.

Now your contact page setup is complete. Visitors to your site can now find the form and start submitting messages to you.

Customizing a Form

Navigate to Contact -> Contact Forms then select the form you would like to edit. Tags can be created using a list with the tags as below:

  • text fields (text, text*, email, email*, textarea and textarea*)
  • checkboxes, radio buttons and menus (checkbox, checkbox*, radio, select and select*)
  • file uploading and attachment (file and file*)
  • captcha
  • submit button

To add fields to a form, make tags for them and insert them into the 'Form' field. You'll find unfamiliar codes in the 'Form' field, for example: [text* your-name]. These codes are called "tags" in the vocabulary for Contact Form 7.

A tag has a rather complex syntax, but don't worry! You don't have to learn it. You can use the "Generate Tag" tool to generate as many tags as you want.

The second word in the tag is its name. For example, the name of [text* your-name] is 'your-name.' This name is important as it is used later in your mail template.

Customizing Mail

You can edit mail templates in the 'Mail' field set as you did with the form template. You can use tags there as well, but note that tags for mail are different from those tags for forms.

Tags you can use in a mail template contain only one word in brackets and look like [your-name]. You should be aware that this 'your-name' is the same as the name of the form tag which is noted in the previous example. The two tags correspond with the same name.

In mail, [your-name] will be replaced by the user's input value, which is submitted through the corresponding form field, which, in this case, is [text* your-name].

10. Create Home page & Page Builder

How to Build Home Page?

What is Ruby Composer?

Ruby Composer is a built-in page builder of Pixwell that enable you to edit pages (the area between the header and the footer) on your WordPress site via an enhanced drag-and-drop editor. This gives you a simple way to use WordPress to build unique layouts using our predefined templates or using your own creativity.

Creating a page to use Ruby Composer

To get started, follow steps below:

  1. Navigate to Page -> Add New.
  2. Add the title of the page, for example: Home.
  3. Click on the "Ruby Composer" button to switch to the builder.
  4. The composer panel section will appear on the page.

Creating sections

After selecting the "Page Composer" template you will see Ruby Composer interface which easily lets you create page layouts. There are 2 sections that you can create:

  • Full-Width Section: this section contain full-width blocks without sidebar.
  • Has Sidebar Section: this section contain blocks with the left or right sidebar.

Click on section images to create sections you want. You can create as many as you wish.

Creating blocks

Each section contains blocks, Pixwell supports various blocks and each block is included many styles to allow you can create your own layouts:

Full-width blocks:

Has sidebar blocks:

Click on block images to create blocks you want. You can create as many as you wish.

Configuring Section

Each Section, Ruby Composer allows you can change the margin, padding, background and sidebar for each section.

Click on the "Blocks" (left side) to return the blocks panel.

Configuring blocks

Each block, Ruby Composer allows you can to filter posts to display. To get started, click on "block header" to open block settings.

Block Filter Settings:

Block Header Settings:

Block Layout Settings:

Displaying a page build with Ruby composer as Front Page (Home):

To setup the homepage to show the page you created, follow steps below:

  1. Navigate to Reading -> Settings.
  2. Select "A static page (select below)" in the "Front Page Displays" option.
  3. Assign the page you just created to"Front page"option.

Defined Templates

Pixwell is included defined templates, that allow you can quickly create a page like demos. Follow below steps:

  1. Click on "Templates" at the right side to open the this panel.
  2. Click on a template name you want, a confirm box to appear. Click okay to load this template to your page content.
You can save your page content as a template and load it on other pages.

11. Elementor

What is Elementor?

The theme is most compatible With Elementor, this is the best builder for WordPress with more than 2 million active users.

To use Elementor, Please install and acvitate plugin: https://wordpress.org/plugins/elementor/

Create a Page with Elementor

To create a page or post with this plugin, follow steps below:

  1. Navigate to Page -> Add New.
  2. Add the title of the page, for example: Home.
  3. Click on the "Edit with Elementor" button to switch to the builder.
  4. The page will reload and composer panel section will appear on the page.

Important Steps - set the page exactly is as below:

  1. Click on the "Settings" icon at the bottom of the left panel
  2. In the "Page layout" option, select "Elementor Full Width"
  3. Click on the "Menu" icon at the left top of the left panel.
  4. Select "Global Settings".
  5. In the "Content Width" input "1170".
  6. Click "Update" to save your changes.

After then, You can build the site layout. For further information, You can refer the plugin documentation: https://www.youtube.com/channel/UCt9kG_EDX8zwGSC1-ycJJVA/videos

12. Sidebars and Widgets

How to Use Widgets?

This section provides you with detailed information on how to use Widgets in Pixwell.

What is the sidebar?

The sidebar is a special area used for site pages to show some widgets. It is useful when you need to display area with the same elements on several pages (e.g. single pages, category pages).

Pixwell provides some predefined Sidebar widget areas.

How to add widgets to a sidebar?

Widget areas:

To add a widget, you need to navigate to Your Dashboard -> Appearance -> Widgets. The below is the list of the widget areas available in Pixwell theme:

  • Default sidebar: This is default sidebar at the right on your website. Use this widget area if you want to add the widget to all page, posts.
  • Left Side (Mobile Menu) Section: this is the hidden sidebar at the left of your website. It only visible when user trigger to button on the menu bar on mobile devices. It also contains navigation for mobile devices.
  • Top Footer - Full Width Section : this is the full-width area at the top of the footer. It only visible if you add widgets. You can only put Instagram widget and text widget and adverts widget into this section.
  • Top Website - Full Width Section : this is the full-width area at the top of the header. It only visible if you add widgets. You can only put Instagram widget and text widget and adverts widget into this section.
  • Footer - Column 1/2/3/4: those are footer columns, use this widget section to add your widget to the footer section of all pages.
  • Single Content - Top Section: This is a section at the top content of single post page. This will allow you can add a advert widget.
  • Single Content - Bottm Section: This is a section at the bottom content of single post page. This will allow you can add a advert widget.

Add widgets to sidebars:

To add widgets to a sidebar, following steps below:

  1. Go to Appearance -> Widgets.
  2. Select a widget and then drag and drop it to the sidebar wherever you wish.
  3. Once you've dropped a widget to the widget areas, WordPress automatically updates the Theme and it will appear in its area.
  4. To customize the widget features, click the down arrow in the upper right corner to expand the widget's interface.
  5. Click on "Save" button to finish.

Create custom sidebars

In some cases, you want to have a specific widget area for a specific posts or pages. Please continue reading the section below: How to create a custom sidebar

How to Create a Custom Sidebar?

In some cases, you want to have a specific widget area for a specific posts or pages. The good news that the theme has a feature for this which gives you the ability to create unlimited widget areas and assign them to page/posts you want. To get started, follow steps below:

Create a custom sidebar

  1. Navigate to Your Dashboard -> Theme Options -> Sidebar Settings.
  2. At create Sidebar, click on "Create Sidebar" button, A small text field will appear, then input a sidebar name/ID you want to create.
    Don't use special charsets for this field.
  3. Click "Save Changes" to finish.
  4. Once finished to create the sidebar, You can navigate to Your Dashboard -> Appearance -> Widgets, the new sidebar section will appear.

Navigate to Your Dashboard -> Appearance -> Widgets, select a widget and then drag and drop it into the sidebar you just created. To customize the widget features, click the down arrow in the upper right corner to expand the widget's interface.

Assign a sidebars to pages

You can assign any sidebar (widget area) for your single page

  1. Navigate to Pages -> Edit.
  2. Scroll down the page to see the page options panel, select a sidebar in "Sidebar Name" option

Assign a sidebar for single posts

You can assign any sidebar(widget area) for your post on the website in 2 ways below:

Globally for a specific type of pages via Theme Options > Single Post Settings > Single Layout > Assign a Sidebar.

Separately for a specific post:

  1. Navigate to Posts -> Edit.
  2. Scroll down the page to see the page options panel, Select Layout Settings tab.
  3. Select a sidebar in "Sidebar Name" option

Assign a sidebar for blog post page

Blog post page is a page which will list all the latest posts (index.php). that page has been set up at Settings -> Reading -> Front page displays.

To setup sidebar for the blog post page, Navigate to Theme Options -> Blog (Index) Settings -> Assign a Sidebar.

Assign sidebar for category pages

To setup sidebar for all category pages, Navigate to Theme Options -> Category Page Settings -> Assign a Sidebar.

You can also assign sidebar for the special category page. To start, follow steps below:

  1. Navigate to Posts -> Categories
  2. At the right of the screen, select a category you want to edit, and click on "edit" link.
  3. Scrolling down the page, you will Sidebar Settings of this category.

Assign sidebars for archive pages

  • Archive page Navigate to Theme Options -> Archive Page Settings -> Assign a Sidebar.
  • Search page: Navigate to Theme Options -> Search Page Settings -> Assign a Sidebar.
  • Author page: Navigate to Theme Options -> Author Page Settings -> Assign a Sidebar.

How to Create an Instagram Access Token?

In order to display your Instagram photos on your website, you are required to provide an Instagram Access Token. There are two ways to get it:

What should I do when the access token stop working?

For some reason (maybe due to expired), your acess token is stopped working. You just need to create a new token.

14. Translate Theme

How to Translate The Theme?

In case you would like to translate this theme to your language, there are several ways to do this.

Change default language to make the translation feature can work. Navigate to Settings -> General -> Default Language to see the option.

Changing this option tells WordPress you want to use translation

Translate via the Quick Translate feature.

To quickly translate the theme, You can navigate to Your Dashboard > Theme Options > Quick Translate.

Translate via LOCO translate plugin

The easiest way to translate your entire website is to use Loco Translate plugin. Please follow steps below:

  • Tell WordPress what language to use. Navigate Settings -> General -> Default Language and select your language.
  • Download the plugin: https://wordpress.org/plugins/loco-translate/
  • Follow the instruction steps of the plugin, create a .PO file and translate strings you want.

You can continue reading the section below for further information

How to Use Loco Translate Plugin to Tranlaste The Theme?

This section gives detailed information on how to use Loco Translate plugin to Pixwell.

Loco Translate is a WordPress plugin for translating themes and plugins. It generates a PO file from the POT file then compiles it to MO file on the fly as soon as you can start to translate the theme or plugins.

How to install the plugin

Navigate to WordPress Dashboard -> Plugins -> Add New menu and search for Loco Translate to filter out the plugins list and click on the Install button to install the plugin

Activate the plugin after the installation is finished.

How to Translate using Loco Translate

Follow the steps below to translate the theme with this plugin:

  1. Tell WordPress what language to use. Navigate Settings -> General -> Default Language and select your language.
  2. Go to WordPress Your dashboard -> Loco Translated -> Themes to access the main translation page of the plugin. This page will take you to a list of all available themes in your WordPress.
  3. In the Theme Page, select pixwell
  4. Click on "New Languge" link.
  5. Select a language from the dropdown list of common languages. In this example, we'll select 'Greek'. You could achieve the same result by entering "el" (lanague code) into the text field instead.
    To keep the translation files safe after theme update, select Custom or System from Choose a Location option. If you are using a Child theme, only Custom or System option should be chosen.
  6. With the language and folder location selected, click the "Start translating" button and you'll be taken to the editor screen for translating the theme.

Translate some strings

  1. Once on the editor screen you'll see all the strings the theme has defined. Untranslated strings are shown in bold blue. To start with they will all be untranslated.
  2. The basics of the editor should be fairly intuitive. Select the English string at the top and enter your translation in the pane at the bottom. You can ignore most of the editor buttons for now. We're just going to enter a translation and save it.
  3. Continue to translate as much as you like and when you're ready click the Save icon in the editor toolbar. Congratulations, you've saved your first WordPress translation.

Check the Result

Now you can go to the front end of the website and see the translated string has been applied.
That's all.

Translate theme Using Poedit (.POT file)

Poedit is easy to use open source program available for Mac OS X, Windows and UNIX/Linux.

  1. Install Poedit.
  2. Open Poedit and go to File -> New catalog from POT file and select the POT in Theme Options -> languages folder.
  3. A catalog properties box will pop up asking for information about what you are translating. Enter the language you want to translate here.
  4. After you hit "OK," you'll be asked what you want to name your translation file. The name is important and there's a particular format you will need to follow. For example, if you're translating Español, the file should be named es_ES.po and for a translation for the Français would be fr_FR.po
    Check out the GNU `gettext' utilities to find your language and country codes.
  5. Save your file in the languages folder of the theme.
  6. Now you can start translating strings you want. Poedit has a simple and straight forward interface that doesn't involve a steep learning curve. The space at the top will display all the text ready to translate, and any completed translations will display to the right. The boxes underneath show the source text you've selected to translate, your translation and any notes for translators. Translating a line of text is really easy - just select a word or phrase, enter your translation and click "Update."
  7. When you've finishing translating, simply save your file. Poedit will automatically create both .po and .mo files in the theme's languages folder.
  8. Now that the theme has been translated, you can upload it to your WordPress install either using FTP or by logging into your WordPress site and uploading your theme by going to Appearance -> Themes -> Install Themes (after you've zipped theme again, of course).

That's all.

15. Update Theme

How do I Update the Theme?

If direct customizations have been made to the main theme, they will be overwritten when the theme is updated. We recommended the way to apply the customizations is to use a child theme.
Backup your website and theme folders completely to make sure you have a restore point in case of any complications.

Update using Easy Theme Update plugin

You can also update the theme via the 3rd plugin: https://wordpress.org/plugins/easy-theme-and-plugin-upgrades/

  1. Download, Install and active the plugin.
  2. Backup your website completely to make sure you have a restore point in case of any complications.
  3. Go to Themeforest to download the latest version of the theme.
  4. Unzip the file you just downloaded from ThemeForest and locate the WordPress Theme (i.e. pixwell.zip).
  5. Navigate to Appearance -> Themes
  6. Click on Add New button on this page.
  7. Click on Upload Theme button.
  8. Click Choose File and locate the new theme file on your device.
  9. Click Install Now button.
  10. Click Activate button.

Update using Envato Market (Automatic Updates)

The Envato Market plugin allows you to access your Envato WordPress purchases from within your WordPress Dashboard.
It allows you to receive update notifications and update automatically with one click.

Envato Market plugin has been included in the theme. If you haven't installed yet, Please navigate Appearance -> Install Plugins.

You can also download it here: http://envato.github.io/wp-envato-market/

  1. Install and Activate the plugin.
  2. Backup your website completely to make sure you have a restore point in case of any complications.
  3. Navigate to Envato Market , follow the instructions to generate a Global OAuth Personal Token, and enter the Token to the field of the config page.
  4. You will see the notice of the update when the new version is released.

That's all.

Update using FTP

  1. Go to Themeforest to download the latest version of the theme to your device.
  2. Connect to your hosting via FTP software
  3. Upload the theme folder you unzipped to wp-content/themes
  4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.
  5. It will take between 10 to 20 minutes to replace all files. Once you are done, login to your WordPress dashboard and go to Theme Options. On the header the theme version will be changed to the latest version. This is the indication that your theme is updated.

16. Troubleshooting

Problems with SSL

If you have problems with SSL, for example: images cannot display, mixed content layouts. You can try to use the plugin below to fix it:
https://wordpress.org/plugins/really-simple-ssl/

Stylesheet Missing Issue When Installing This Theme

A common issue, it means that you have uploaded the full package. You just need to unzip the package and find pixwell.zip archive to install.

You can refer this section for further information: Getting Help

Font Awesome Icons Or Custom Fonts Missing?

All browsers require fonts to be hosted on the same domain and a subdomain is considered a separate domain name. If your font awesome icons or custom fonts are not showing up in a certain browser, below is the solution for you:

Open .htaccess file in an editor and add codes below. You can find the file in the root directory of WordPress installation.

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>
Note: You can access to website directory thought Cpanel or using an FTP software. In most of the servers, it's in the public_html folder.

Are You Sure You Want to Do This?

While installing your theme through WordPress admin, you may encounter this error message. This is most likely due to your hosting php.ini configs.

Pixwell theme file is around 3mb and some servers set the default value for max_upload_limit to 2mb.

There are two ways to solve this issue:

  • Upload theme via FTP: You can install the theme via FTP upload method.
  • Change php.ini file: To solve this issue, you should either increase your maximum upload size to 10mb on your hosting or ask hosting provider to do it for you. This is a very common request and they should be able to help you out. Once the limit is increased, you can re-try the install.

What to do when images are not displaying consistent in size?

After you have changed your WordPress theme to Pixwell. The theme is using different image ratios and/or image dimensions for the thumbnails than your previous WordPress theme was doing.Maybe your images are not being displayed consistently in size on your website.

In This section, we have shared a plugin called "Regenerate Thumbnails", which allows you to regenerate the new thumbnails after changing your WordPress Theme.

Why do you need to regenerate thumbnails after a theme change?

When you upload an image, WordPress will generate thumbnails that are needed by your WordPress theme. After you have changed the theme, these previously generated thumbnails won't be regenerated automatically. To fix this issue, you can download and install the "Regenerate Thumbnails" plugin and run it once to enforce WordPress to regenerate your thumbnails.

To get started, Follow steps below:

  1. Download and install the "Regenerate Thumbnails" plugin.
  2. Navigate to Tools -> Regen. Thumbnails and click on Regenerate All thumbnails button.

Regenerate thumbnails via The Library Page

You can also Regenerate thumbnails in bulk as shown below under Media -> Library Page. Select all images for which you want to regenerate the thumbnails and choose "Regenerate thumbnails" in the drop down, click on Apply button.

What if regenerate your thumbnails does not help?

If you still have issues with image size after regenerating your thumbnails, maybe this due to reasons below:

Uploaded images don't meet the minimum requirements of Pixwell

Check if the uploaded images meet the minimum requirements of Pixwell. Because in case the uploaded images are too small, regenerating thumbnails usually won't help as that process won't enlarge your images and it will skip those images.

The recommended minimum image size to upload is at least 1100*700px. If you upload images without at least that size, WordPress will not be able to generate all thumbnails as expected.

Clear your cache plugins

Make sure that you have clear all the image cache before checking your website.

Enjoy using Pixwell. © 2019 THEMERUBY.COM