Magnus Multi-Purpose Responsive Wordpress Theme

Premium Themes & Templates from ArtofThemes


Magnus Multi-Purpose Responsive Wordpress Theme is powerful multipurpose theme that will help you to build practically any site: for Blogs, Store Fronts, Magazines, Portals, Design Studios, Corporate Websites and whatever your mind can dream up!

We hope you will enjoy working with Magnus theme. Thank you for purchasing our theme.

Yours faithfully,
ArtofThemes.

WordPress is well-known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Bluehost, mediatemple) to automatically install WordPress for you. However, if you wish to install WordPress yourself, click below button to read about Famous 5 Minute Installation.

5 Minute Installation Guide

Alternatively you may be interested on below topics:

You can either install the theme by uploading it from the admin panel, which is the easiest method, or you can upload it via FTP to your server. Some hosting companies restrict the upload size of files, so if the first method doesn't work, please try the second one (via FTP).

Warning! While installing your theme through wordpress admin, you may encounter an error message saying “are sure you want to do this?”. This is mainly due to your hosting php settings. Magnus theme zip file is roughly around 7mb and in some hostings the default value for max_upload_limit left default which is 2mb. To solve this problem you should either increase your maximum upload size (to 10mb) on your hosting admin panel or ask your host to do it for you if you do not have the privilege to alter your server php settings. 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 and you’ll be all good to go.


Here are the steps for both methods:

Installing the Theme via Upload from the Admin Panel


Installing the Theme via FTP (in case it doesn't work via the Admin Panel)

This tutorial shows you how to set up widgets in your Magnus Theme.

Widget Options

Widgets can be displayed in different styles with additional icons and badges. The /layouts/module.php takes care of displaying all these module variations. In general you can say that all widgets can have a style, an icon and a badge.

To apply these variations to a widget, go to the Widget Options of your theme in the WordPress administration. After choosing a widget simply select the style, the icon and the badge in the dropdown boxes and click on Save.

Common Options

A subtitle can be added to a widget title by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Appearance » Widgets and add the subtitle text behind two "|" characters in the title field of the widget of your choice on the right.

A subtitle can be added to a menu item by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Appearance » Menus and select your menu in the tabs on the top. Then, create a new menu item or edit an old one. Place two "|" (pipe) characters behind the title's caption and enter a text for the subtitle.

If you'd like to display icons for drop down menu items, just navigate to the desired level 2 menu item of your Main Menu. Appearance » Menus » Select Your Menu.

Click on the little arrow to expand the menu item settings and type in the path to the icon file in the field Image. Using the relative path to the directory /wp-content/uploads. But you can change it to your needs.

In the WordPress admin dashboard, go to Appearance » Widgets. Create a widget and drag & drop it to the position menu on the right.

A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and assign them to any menu item. This allows you to load different theme settings on different pages.

New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.

The Default Profile

In the general theme settings you find a parameter called Default Profile. Here you choose the profile which will be loaded on all your pages. By default it is set to the profile called default. Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here.

Profiles can also be loaded in the frontend of your website by adding a parameter to an URL. For example index.php?profile=myprofile. We use this feature for example to load the different theme variations by clicking on a link on the website. But if you don't need this it should be disabled. This can be done by setting Dynamic Profiles to No, right below the Default Profile parameter.

New profiles can be created in the profile theme settings by clicking on Add and entering a name for your new profile.

Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.

To add new values or to select different options than the default ones, you first need to activate the override with the checkbox on the left.

If you later decide, that you don't want to override one of the default values any longer, simply uncheck the box.

Manually created profiles can be renamed, deleted and assigned to different pages.

One of the major features is the ability to assign different profiles to different pages. This allows you to change the theme's style and layout only on certain pages.

To assign a profile to a single or multiple pages, click on Assign Pages and select the pages you want to load your new profile. You can select multiple items by holding Ctrl-Key while clicking.

Please note that you can only assign one profile per page. If you have already assigned a profile to a page, it will be displayed in grey color and can't be selected.

One of the most common uses of profiles is to load different page and module layouts for certain pages.

For example let's say your module layout for position Top-A is set to Equal, which means the modules will float horizontally next to each other. But on your frontpage you need your modules on that position to be displayed with the Stack layout, so your modules appear vertically above each other.

To do so you create a new profile called Frontpage, activate the checkbox for Top-A Layout and select Stack. Next click on Assign Pages, to select your frontpage and to save your changes. Now the layout setting for Top-A will be overridden on the frontpage.

Another common use is to hide the System Output on certain pages if you want your page to just contain modules or widgets and no article.

Magnus compatible with WPML. You are able to control your widgets as explained at Set up the WordPress widgets. All created widgets will be automatically displayed on all translations of the concerned page.

Howto translate widgets

In the following we'll show you, how to setup different widgets per language.

First you have to install and activate Widget Logic. With Widget Logic you are able to controll Widgets with the help of PHP.
Add copies of the widgets you want to translate. You need one copy per widget for every language in wich you want to translate your widget. In the following we will configure the widgets so they will be only displayed in one language.

Go to Appearance » Widgets and select successively every translated widget. For the english translation add the following code to Widget logic:
 

ICL_LANGUAGE_CODE == 'en'


You can find the language code of your disired language at WPML » Languages » Edit Languages

 

For Language selector Widget:

Firstly:
Go to WPML » Languages  » Language switcher options

Language switcher widget
Choose where to display the language switcher widget: toolbar-r



And then:

Go to Appearance » Widgets » toolbar-r widget position:

 

Visual Composer is very unique plugin, it will help you managing your content at the WordPress site. Nowadays many websites have complex grid layouts with columns, tabs, sliders and etc. In the past, to create that type of layouts you should be html guru or shortcodes operator ninja.

But not anymore! I've prepared a short video for you to get you up running in no time. See yourself how easy it is. Complex layouts combined with professionally designed plugins made easy!

Visual Composer Video Demo

Plugin Installation

Visual Composer installation doesn't differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.

  1. Login to your website
  2. Go to Plugins -> Add New section
  3. Click Upload link
  4. Browse to the plugin's zip file (it is located in the folder you've downloaded from CodeCanyon) and choose that file.
  5. Click "Install Now" button
  6. Wait while plugin is uploaded to your server
  7. Click "Activate Plugin" button

That's it!

On Visual Composer settings page (Settings->Visual Composer), you should select content types where Visual Composer should appear.Now you are ready to go. Create new post/page and switch to the "Visual Composer" mode.

Concept

After installing and enabling Visual Composer plugin you can start creating your layouts. There's one concept/design pattern you should know.

In the Visual Composer editor mode you'll have "Add element" button, which you should click or drag to the working canvas, to add content block or row to your page.

Clicking the "Add element" button will show the content element selection menu. Content blocks are divided into categories (Show all, Content, Social, Structure, WordPress Widgets).

Rows

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis).

Columns

Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

Content Elements

This is a list of available content elements that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.

Available Content Elements

  1. Row
  2. Text block
  3. Twitter widget
  4. Separator (Divider)
  5. Separator (Divider) with text
  6. Message box
  7. Facebook like
  8. Tweetmeme button
  9. Google+ button
  10. Pinterest button
  11. FAQ (Toggle)
  12. Single image
  13. Image gallery
  14. Tabs
  15. Tour section
  16. Accordion
  17. Teaser (posts) grid
  18. Posts slider
  19. Widgetised sidebar
  20. Button
  21. Call to action button
  22. Video player
  23. Google maps
  24. Flickr widget
  25. Raw html
  26. Raw js
  27. + All default widgets that comes with WordPress

3rd Party Plugins Support

Occasionally Visual Composer is extended with support for popular third party plugins. Currently this third party plugins are supported:

  1. Layer Slider
  2. Revolution Slider
  3. Contact Form 7
  4. Gravity Form

After placing content element to the working canvas (page), click pencil icon to see options available for this particular shortcode (content element).

Templates

Templates allows you to save predefined sets of elements as a template and then reuse it when you'll need it next time. More about template system.

Widget Title in Visual Composer

You can use this sample codes inside the text block:

<div class="mod-nobox widget_text deepest">
<h3 class="module-title">Consectetur<span class="color"> Mauris</span></h3>
Ligula sed varius pellentesque, orci mauris consectetur erat, non auctor dolor nibh ut erat. Ut viverra ligula id sem tristique interdum. Nam tortor mi, semper id elementum quis, rhoncus quis quam.
</div>

Revolution slider is delivered a documentation inside its plugin. to make it easier for you, we used their documentation content right here to get familiar with this awesome plugin.

Slider

After pressing the "Create New Slider" button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).

You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (please do not use special characters or spaces here, this defines the shortcode for you to use in your content).

The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.

The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).

The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.

Slides

The next step is creating/editing slides. You get there by just clicking on "Edit Slides" in the Slider Form window.

Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert Into Post" (all like you are used to it in your WP editor). You can always click on the pic to change it.

Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button.

The "Edit Slide" leads you to the next chapter "Slide".

Slide & Creative Layers

In the "Edit Slide" view you see the heart of our plugin. The drag&drop Caption editor.

But first please note that you have another chance here to change the background image with the "Change Image" button.

To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File").

In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.

You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.

The "Layers Sorting" drag&drop list determines the Layers' z-index. This list specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Video Wizard:

 

Below, you can see the widgets and positions for the homepage:

 

How to customize a theme

In this tutorial we'll show you, how to start customizing a Warp theme and which tools you need to learn to make small modifications like changing the look and colors of a theme.

Web Developer Tools

Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme's CSS files.

Editing CSS styles directly in your browser

Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so you can not only edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.

Finding the right CSS file in your theme

As you might already have noticed, next to each css-selector (in our case #headerbar) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your template's directory structure have a look at this tutorial.

Tip: Disable the theme's Gzip and Compression feature or any other caching script you may be using on your your site when you start out on customizations. If you don't do this, you will not see the file and line locations of the code you want to customize and you also will not see changes you made immediately. Also remember to frequently clear browser caches.

More Resources

Here are some useful resources to get you started with the web developer tools:

Thanks so much to,

"Revolution Slider", "Visual Composer" and "CSS3 Responsive Web Pricing Tables Grids For WordPress" plugins:

Please note that this plugins is not a freeware though. You cannot use it apart from theme unless you purchase appropriate license.

Again. This is important! You can use this plugins inside Magnus theme for free. If you want to use it apart from this theme – you should get a license.

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to open a ticket in our help desk. We also do have an FAQ section right in our help desk, so have a look on them too.

Help Desk