Alter - Creative Responsive Multipurpose WordPress Theme

created: 08/30/2020
latest update: 08/30/2020
by: Design Solutions
designsolutionslab.com

Welcome to Alter - Creative Responsive Multipurpose WordPress Theme

Installing Alter

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called ds-Alter.zip. You can install the theme by using one of two installation methods:

WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
1. Login to WordPress admin
2. Go to admin panel > Appearance > Themes > Add New > Upload Theme
3. Click on "Choose File" and select ds-Alter.zip
4. Click on "Install Now"
FTP upload - If you wish to install via FTP, here are the steps you need to take:
1. Using FTP client, login to the server where your WordPress website is hosted
2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
3. Using FTP client, upload the ds-Alter directory to themes directory on remote server

You should see a notification at the top of the screen that required plugins need to be installed. Please install and activate all of the required plugins, since they are necessary for the theme to function properly.

Great - you can now start building your site!

Install Required Plugins

To let Theme work correctly we recommend to instal following plugins:

Elementor
After active Elementor plugin please go to Elementor -> Settings tab and check:
- Checking this box will disable Elementor's Default Colors, and make Elementor inherit the colors from your theme.
- Checking this box will disable Elementor's Default Fonts, and make Elementor inherit the fonts from your theme.
Contact Form 7
One Click Demo Import
SVG Support

To make your website faster we recommend as well:

Autoptimize
WP Fastest Cache

Updating Alter

You can update your theme manually by performing the following steps:

Download the latest theme zip file from ThemeForest
Extract it and locate ds-Alter.zip
Extract ds-Alter.zip and locate the ds-Alter folder
Copy/Replace content of the ds-Alter folder to the /wp-content/themes/ds-Alter folder of your web site.

Important F.A.Q.

1. Why can't I save my menu?

WordPress by default has a limited number of menu items. When you import our demo site, which contains a lot of menu items, you might not be able to save changes you make to a menu. You can fix this problem by contacting your hosting and asking them to add the following lines to php.ini file:

suhosin.post.max_vars = 5000
suhosin.request.max_vars = 5000

2. Why is there a smiley displayed on blank pages?

This problem is most likely related to JetPack and memory settings of your hosting. You can either disable JetPack or read what the JetPack developer wrote: Regarding the memory limit, please refer to the WordPress Codex section concerning this problem. Some sites that load many plugins alongside WordPress ultimately require a higher memory limit than WordPress defaults to, but since this is limited to specific hosts and configurations, it must be dealt with on an individual basis. You'll find the Codex article at: https://codex.wordpress.org/Common_WordPress_Errors#Allowed_memory_size_exhausted

3. How do I optimize my site?

Please use this tool to investigate reasons for slow loading: https://developers.google.com/speed/pagespeed/insights/?hl=en

To make your website faster we recommend as well:

Autoptimize
WP Fastest Cache

4. How to translate or rename default theme labels?

You can use the Codestyling localization plugin (https://wordpress.org/plugins/codestyling-localization/) to translate/rename all the theme's labels. Another solution is to edit the Theme folder/languages/en_US.po file directly in editor and manually edit labels you want to translate.

5. Why do I see a white screen when importing demo content?

If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 120 seconds. Possible ways of achieving this are:

By Wp-config.php changes - set_time_limit(120);
In htaccess - php_value max_execution_time 120;
In php.ini file - max_execution_time = 120

Ask your hosting provider to take care of this for you.

Once you've installed Alter, you can start building your site.

Customize options

Go to theme Customization page (Appeearance -> Customize).

Site Identity

There you can:

Add Site Title
Add Tagline
Upload Logo
Upload favicon

Color Scheme

In this tab you can change default colors to your own. It's very easy, you can select color from color picker.

Font styles

There you can:

Select family font for body
Select family font for headings

Other customizations

There you can use CDN for Assets (All Bootstrap Assets and FontAwesome will be loaded in CDN).

Menu Creation

To create a menu, go to Appearance > Menus from the admin panel. Click on "Create a new menu." Enter a name for your menu, and then click on "Create Menu".

Every page that you've created up until now will be listed in the section on the left called Pages. Simply check the ones that you want added to the menu, and then click on the "Add to Menu" button. Once added, you can click and drag the menu items to rearrange them, or nest them one under the other.

Underneath the menu items, under the section Menu Settings, check "Top Navigation" and click "Save Menu" in order to activate the menu you've just created. You should now have a functional menu on your pages.

General Look and Feel

Finally, let's set up the general look and feel of your site. If you'd like to keep the fonts and colors you see on the Alter demo site, then you do not need to do anything more. Otherwise, go to Customize. Under Color Scheme and Font Styles, choose a default font family for your site, as well as the default content background color.

Now that you've set up some basic elements, you're ready to begin building your pages.

Building Pages

To create a new page, go to Pages > Add New from the admin panel. Enter a title for your page in the text field near the top of your screen. Then choose the "Full Width" template for your page in the section on the right called Page Attributes. This will allow you to have sections on your page that go across full width of the screen.

At the bottom section of your screen are local page settings.

After this click blue button Edit With Elementor to use elementor builder.

Additional Notes

Font Icon Packs

Please note that Alter comes with font icon pack Font Awesome. You can see an overview of all the available icons at the following links:

Font Awesome: https://fortawesome.github.io/Font-Awesome/icons/

Importing Demo Content

With the Alter theme, you have the option to either start creating your site from scratch, or choosing to import one of the included demo sites to use as a starting point, and then modifying it to suit your needs. In this section we will explain how to do the latter.

If you plan on building an online shop with Alter, you should install the WooCommerce plugin before importing the demo content. For more information on how to install WooCommerce, please read the WooCommerce section of this User Guide.

If you plan on using contact forms on your website, you should instal the Contact Form 7 plugin before importing the demo content so you recieve all the contact forms from our demo site. For more information on how to install Contact Form 7, please read the Contact Form 7 section of this User Guide.

Alter comes with a one-click import module. To import one of the included demo sites, please follow these steps:

Login to your WordPress admin panel
Navigate to Alter Dashboard -> Appearance -> Import Demo Data
From the Import tab choose the demo site that you would like to import. Note that you can look up demos by various categories.
Click on the Import button and wait for the import process to finish.

Please note that the images we use on our demo sites are copyrighted, and if you'd like to publish them on your site, you would need to purchase them separately. We bought most of our images on Freepik.com.

Blog Posts

To create a new blog post, go to Posts > Add New from the admin panel.

Enter a title for your post in the text field near the top.

Now it's time to categorize this post.

Under Format, in the section called Categories, select the categories that you wish to add this post to. Alternatively, if you'd like to create a new category, click on "+ Add New Category." A text field will unfold where you can enter a name for the category.
Then click on "Add New Category".
Once you've checked the categories where you want this post to go to, click the "Publish button".
Under the Categories section are the Tags and Featured Image sections. Here you can add tags to your post, and upload an image to be displayed for this post on blog list pages, respectively.

Widgets are easy to manage and can be incredibly useful to have on your site.

Widget Areas

Sidebar - this is the WordPress default widget area for blog posts.
Header Bottom Right - here you can add widgets to the right side of the Header Bottom (next to the menu).
Footer Top 1, 2, 3, & 4 - here you can add widgets to the Footer Top columns.
Footer Bottom 1, 2, 3 - here you can add widgets to the Footer Bottom Center (for example, copyright text).

To start creating your menu, go to Appearance > Menus from the admin panel.

Now let's go to Edit Menus. At the bottom of the page, in the section Menu Settings, you're also able to assign the current menu to a location.

When creating a menu, you can click on the little triangle on each menu item in order to open up a list of editable settings.

Let's go over them:

Navigation Label - Here you can enter a navigation label for this menu item. By default, the label is the same as the page title.
Title Attribute - The title attribute will pop up once viewers hover over the navigation label.

Anchors (One Page Site Functionality)

You can add anchors to menu items in order to scroll to the element on the page. In order to do that, you need to perform the following steps:

You need to set anchor ID(s) while editing the page. You can do that by editing properties of the Row element in Elemetor. In the "Anchor ID" field, simply type in the name of the anchor. You can type any text without empty spaces.
You can repeat step 1 for several rows of the page.
Now you can edit the menu. In Appearance > Menus, create Custom link and in URL field put your Anchor ID f.ex #services.

We cerated few custom shortocdes to arrange blog posts:

[home_posts] - This shows 3 latest posts in 3 columns
[home_post_hero] - This shows 1 latest post full width
[home_post_hero_small] - This shows 2 posts full width - with offset 1 post
[home_posts_below] - This shows 12 posts in 2 columns - with offset 1 post

Alter comes with WooCommerce integration, which allows you to build an online shop. For more information on installing and configuring WooCommerce, please visit this page:

https://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

In order to setup WooCommerce with our theme, please perform the following steps:

Go to Plugins > Add New from the admin panel.
Type "WooCommerce" in the search field.
Locate "WooCommerce - excelling eCommerce" in the search results and click on "Install Now".
Once installation is complete, click on "Activate Plugin".
You will see a notice saying "Welcome to WooCommerce � You're almost ready to start selling :)". If you plan on importing Alter demo content, click on "Skip Setup". Otherwise, click "Install Pages".
If importing the demo content, you should first set the product image sizes in order to achieve the same look that we did. Go to WooCommerce > Settings and click the "Products" tab. Under the section Product Image Sizes.

Alter makes it possible to create forms for various purposes with the help of Contact Form 7.

In order to setup Contact Form 7, please perform the following steps:

Go to Plugins > Add New from the admin panel.
Type "Contact Form 7" in the search field.
Locate "Contact Form 7" in the search results and click on "Install Now".
Once installation is complete, click on "Activate Plugin".

Now when you use Visual Composer, you will see a new shortcode in the list of shortcodes - the Contact Form 7.

Click on this shortcode to add your form. There are several fields to fill in:

Form title - Enter text to use as form title. Leave blank if no title is needed.
Select contact form - Choose a previously created contact form from the drop down list.
Style - You can style each form element individually in theme Options > Contact Form 7. Here you can choose which style will be applied.