Mag Theme Documentation

Theme Installation Via WordPress Dashboard

Installing Mag from the WordPress Dashboard

install_theme
Theme installation via WordPress admin dashboard

Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.

  1. Log into your WordPress admin panel and click on the “Appearance” tab.
  2. Now click on the Appearance > Theme. Click on  add-new-theme button .
  3. Click on the “Upload Theme” button, “Browse” for file called install-mag.zip in the extracted folder select “Open”.
  4. The selected zip (Theme file) will be displayed next to ‘Choose file‘ when the file has been selected.
  5. Then click ‘Install Now’. Activate the theme from this page, OR “Return to Themes Page” and activate from there.

Via FTP client

  1. Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.
  2. In the extracted folder you will find ‘install-mag.zip’ Extract this file .
  3. Using an FTP client to access your host web server.
  4. Upload the Theme files in the extracted folder called ‘mag’ to (/wp-content/themes/) directory provided by WordPress. Make sure the it is (/wp-content/themes/mag/ [theme content files])
  5. Visit WordPress Dashboard > Appearance > Themes, then click the Activate on Mag theme.

Install Required Plugins

Ok here’s the thing, you might be thinking why would I need demo content anyway for building my own site. Well in that case it is much more easy to build something from already existing things rather than from the scratch. All you need to do is replace certain stuffs, and your site will be ready.

The first step after activating the theme would be to install all the necessary plugins required by the Mag theme. It is important and highly recommended that you do install the suggested and required plugins before importing the demo data.

required-plugins
Our Theme will suggest the required and recommended plugins in the admin dashboard after activating the theme.

You would see a message like pop up in dashboard after activating the theme as shown in the figure above. This tells you the the required and recommended plugins that are required by this theme that needs to be installed. You can click Begin installing plugins in that message box or navigate to Appearance > Install Plugins from the admin dashboard menu. You will then reach the area as shown in the image below.

plugin-required
List of required and recommended plugins

It is must  that you install all the plugins of type Required. For now in this tutorial (It is best to install all the recommended plugins as well), let’s install all the plugins by  checking the check mark and doing the Bulk-Install action. After successfully installing all the plugins, you should be able to see the page as shown in the image below:

plugin-installation
Successfully Installation of required and recommended plugins by Bulk Installation action.
Word of advice if you are building your site for the first time using our Theme
Import the demo data and start building on top of it, Way more easy and fast !

Import Demo Data

Things to remember !
Make sure you have installed all the plugins before importing the demo data

After you have install all the required plugins, its finally time to import the demo data. We have shipped the demo data along with this theme.

import_data_navigation
Navigating to Import Demo Data area in dashboard
  1. Navigate to Appearance
  2. Under Appearance, click Import Demo Data
  3. Click the buttong, Import Demo Data

When import data has been successfully imported, you should be able to as shown in the image below.

import_data_successful
After successful import of demo data

If your Front page displays is set to Your latest post (settings > Reading), and if you now view your site after importing demo data, your site should look similar to the image as shown below.

demo data site
Looks of the front page soon after installing the demo data

You might have noticed that it lacks menu in the header and it still doesn’t look quite as Demo Site yet. Next we will be focusing on making our site more and more like Demo Site which we have promised to deliver.

Things to remember !
Make sure you have installed and activated Max Mega Menu before proceeding to this section

Our theme utilizes the plugin named Max Mega Menu to build the site header menu. Follow the step as shown in image below:

navigating to menu

Step 1,2,3:
Navigate to Appearance > Menus > Edit Menus (tab)

Step 4,5:
 Select Primary Menu from drop-down and select the menu.

Step 6:
Displays the menu that comes under the menu name Primary Menu which is used for the header menu. Now we need to convert this menu into Max Mega Menu. Before we can do so, we need to assign this menu to a theme location (A location for a menu that is defined by us / theme developer).

 

Next follow the steps as shown in the image below to assign the menu to a theme location.

assigning_menu
Assigning Menu to theme location
  1. Click Manage Locations tab
  2. From the drop-down, select Primary Menu. Remember, earlier we have a menu named Primary Menu. Here we are assigning the menu Primary Menu to the theme location called Primary Menu. (Coincidentally, the name of menu and the theme location happened to be the same here, do not get mixed up with the menu. )
  3. Save the assigning of menu.

Enabling Max Mega Menu

Now, we have assigned the menu to the theme location. Its time to enable the Max Mega Menu. Follow the instruction show below

enabling_mega_menu
Enabling Max Mega Menu
  1. Navigate to Appearance > Menus > Edit Menus (tab)
  2. Make sure the Primary Menu is selected.
  3. Check to enable the Max Mega Menu inside Max Mega Menu Settings box.
  4. Save the setting.
  5. Save the Menu by clicking Save menu

Now the site should have a menu similar like this

menu
After enabling Max Mega Menu
Objective
Creating more elaborate drop-down for header menu using Max Mega Menu.

You might have noticed that the menu we just created is a simple menu with simple drop-down. Lets create more elaborate drop-down menu.

mega_menu_hover
Creating Elaborated Mega Drop-down Menu
  1. Navigate to Appearance > Menus > Edit Menus (tab)
  2. Hover over menu item to reveal the Mega Menu  button. Click it and you will see the popup as shown in image below:
creating_mega_menu
Assigning widget to Drop-down Mega menu
  1. In the popup, navigate to Mega Menu tab
  2. Select the Mega Menu from the drop-down. Which tells that we are creating a complex drop-down menu. In this drop down menu, we can put the widget inside it. Widget inside the menu !! Cool huh…
  3. For this example let’s select the widget named, Mega Menu: Magazine Sub Menu. This particular widget is specially customized to look good in mega menu drop-down.
  4. This is the widget where you will set title of the widget, the category from which post should come and the number of posts to be displayed.
  5. Save the menu and repeat the steps (3,4 and 5) to put 2 more widget for the sake of good visual in the front end, shall we. Close this pop up and make sure you save the menu.

View the site header menu, it should look similar to this now:

menu preview
Preview of Mega menu dropdown

 

Now back in the front end, if you hover the menu item for which we have created Mega Drop Down Menu. The widgets that we placed as an item for the drop-down menu will now be displayed. Noticed, its still look plain and something missing. In our next section we will learn how to assign an image for a category. And then later the image corresponding to the category will be displayed along with the post in the above menu to make it more visually attractive.

 

Setting Up Front Page

objective
To set up front page with the help of Demo Front Page shipped along with the Mag theme.

Its time to build the front page and we will continue building our front page with the help of demo data. It is strongly recommended that you build the front page of your site with the help of demo content, this way you can quickly set up your front page without any hassle. Of course, later in this documentation we will also look into how to create a page/front page from the scratch as well if you really want to build the page/front page from scratch.

First of all, we need to tell the WordPress, which page are we intend to make our home page / front page. Below is the image which shows step by step guide.

front-page-variations
Assigning Front Page
  1. Navigate to Settings > Reading
  2. Select Static Page radio option to overwrite default front page by wordpress.
  3. When you have selected Static Page as front page. The options contains all the pages. We need to select the page which we will make our front page. Remember we told you that this theme comes up with Demo Home page. Amazingly, this theme comes up with 14 different demo home page variations !! from which you can pick from. In the above image I have marked all the variations of page with red box which can be used as home page. For Now we will choose the home page named, Home-Carousel as our front page.
  4. Finally, save the changes and preview the site. Site should look similar as in the image below:
firt preview home page
Site preview after making the Home carousel Page as front page

You might be thinking, ‘Oh well, it looks better but still something is missing’. You are right we are missing couple of things here. One is front page Hero Slider and the Recent News section if you compare to our Demo Site. Next we will look into how the front page have been structured and then we will also put the missing stuff (Hero Slider and Recent news section).

Front Page Structre

Objective
Understand how the front page been structured.

Follow the following steps to set up the Hero section of the front page.

marked-front-page
Front Page marked by the word ‘Front Page’ next to page name in ‘All Pages’
  1. Navigate to Pages > All Pages
  2. Remember we selected Home – Carousel as our front page in previous section. If everything has gone right, you must be able to see the marking Front Page next to the page name in the page list which is acting as a front page. Click the page to enter the page edit mode.
Things to remember !
Make sure you have installed and activate the Visual Composer Plugin before proceeding to this section.

Since the trend of using page builder in WordPress has been a huge success, we too have used the page builder for this theme. It makes easy for customer to grasp the structure of the page visually in the page edit mode. In our theme, we have used the page builder named, Visual Composer. The entire front page has been built with the Visual composer’s components. Each section of the front page is the component of visual composer and each section may contain other visual composer component inside it.

front-page-structure1
s Understanding Front Page structure
  1. Make sure you are in Visual Composer Edit mode when opening page in edit mode.
  2. Hero Section: It is  responsible to make the Hero section of the front page. We will look later  how to manipulate each components in the front page. In-fact, we will look into all the available custom visual composer components. For the regular visual composer component, you can learn more from Visual Composer.
  3. Recent post / Recent News section: It is  responsible to make the Hero section of the front page.
  4. Main Content Area: It is an area (also the wrapper is itself a visual composer component) which consist of other visual composer components inside it.
  5. Sidebar Section: This section is responsible to create the sidebar of the front page (This component is inside the Main Content Area)
  6. Main Content: Comprises different components that makes up the main content of the front page.
  7. Newsletter Subscription area: Area where newsletter subscription is rendered in front page.
  8. Ads Section: Now I am getting lazy.. This is self explanatory.

Setting Up Hero

Objective
Manipulation of Magazine Carousel component to create Hero of the front page.

You might have noticed that we still do not have any hero in our front page. You might also have noticed that, despite the presence of Hero Section when viewing the page (front page) in edit mode, it still not rendering the Hero in our front page. Well, let’s make it then. Follow the step below as shown in figure below:

component
Setting Up of Page HERO
  1. In the same page edit mode, hover over the component named, Magazine carousel, a tool box will reveal showing different controls.
  2. Click on the control, a pencil icon pencil
  3. After clicking the control, component setting box will pop up. This is where we manipulate the component. Below is figure of Magazine Carousel Component settings.
carousel settings
Component: Magazine Carousel components settings

 

  1. Make sure you are in General Tab.
  2. Choose the category of the post from which the content will be displayed to make the Slider/carousel. The list contains all the post/blog categories.
  3. Choose the Hero type. Currently we have five different types of Hero to choose from. That’s not all ! Each Hero types comes up with number of variations. Technically there are currently 11 Variations of Hero to choose from. Isn’t it lots ! More the Better !
    • Carousel ( 3 different variations)
    • Slider (1 Variation)
    • Grids (4 different variations)
    • Mini Article Bottom Preview (1 Variation)
    • Revolution Slider (2 varations)
  4. For now lets choose, Carousel as our Hero type of the variation, Three Column layout.
    Note: 
    Depending Upon which Hero type you have selected from drop-down, additional settings will appear.
  5. Here, you can limit the number of post that will come in HERO
  6. Offset is where you will specify, how many posts to skip before displaying the first post. By default first post will always be the latest post. For now I have put 0 as offset which means no offset and recent post will be displayed first.
  7. After you have selected your preferred settings, click save changes and also update the page and preview it. Now you must have Carousel as your hero in the front page as shown in figure below;
preview-hero
Preview of the Carousel Hero type

Setting Up Recent Post

Objective
Manipulation of Recent Post component to create Recent Post/News section of the front page.

You might have noticed that we still do not have any recent news section our front page as displayed in our Demo Site . You might also have noticed that, despite the presence of Recent Post section when viewing the page (front page) in edit mode, it still not rendering the Recent post in our front page. Well, let’s make it then. Follow the step below as shown in figure below:edit_recent_post_component

Then, Magazine Recent Post Settings box will appear,

recent_post_setting_box
magazine Recent post setting box
  1. From the general tab of the settings box.
  2. Enter the title for the section (Default is Recent news).
  3. Post Source: By default recent post will display the recent post. But if you wish to display recent post from a particular category, you can do that as well. But for now, I will keep the post source as just Recent Post.
  4. You can select the layout of how you wan to present the recent post. There are 3 main variations and each variation has their own variations in turn. In total you can pick from 9 variations.
    • 2-columns (3 variations)
    • 3-columns (5 variations)
    • 4-columns (1 variations)
  5. Depending upon the variations layout you choose in Step 4, further layout of that particular variation will appear to choose from.
  6. Depending upon the variations layout you choose in Step 5, further layout of that particular variation will appear to choose from (Its more like variation within variation within variation… I hope I explained correctly :) ).
  7. Finally save changes and do not forget to update the page as well. Preview the page, recent post should be similar as shown in the figure below:
preview-recent-news
Preview Of Recent News Section

Horizontal and Vertical Posts

Objective
Understand the horizontal and vertical post that are in front page and to know how to manipulate it.

vertical-postzz
Posts Displayed Vertically

horizontal-postzz
Posts Displayed Horizontally

In the figure above, you can see that the post are displayed in two orientations. One is vertical orientation (Left Figure) and the other is horizontal orientation (Right Figure). If you look carefully in our Demo Site in the front page, you would see there are total of  of these posts group. However, only one custom visual composer component is responsible to create this group of posts. The component name is Display Post. Through the component settings, you can specify whether to display the post vertically or horizontally. Have a look at the figure below to know the placing of these component in the front page in page edit mode.

display-post-component
Uses of the ‘Display Post’ component in the front page.

Open up the setting box of one of the Display Post component by clicking  pencil while hovering the component in edit mode.

display-post-settings
Display Post component settings
  1. Under the General Tab,
  2. Choose the category from which the post should be displayed.
  3. Choose the orientation of the post for how to display the post in the site. Available options are horizontal and vertical.
  4. Maximum number of posts to be displayed.
  5. Tell WordPress to skip certain number of posts before displaying the post.
  6. Save changes. 
    Note: You can repeat these steps to remaining 4 Display Post component found in the demo front page.
  7. Update the page and preview it.
A word of Advice
Although you can specify the maximum number of posts as per your liking for the front page. We have noticed that if you give the maximum number of post as 3 when choosing vertical orientation and maximum number of posts as 2 when choosing horizontal orientation gives the best visual effect when using in front page.

Top Categories Section

Objective
To know how to setup Top Categories Section in front page

Open the front page in edit mode and focus on the area as shown in figure below. The area enclosed by red rectangle is responsible to make the Top Categories section of the front page. The name of the component is Display Top Categories.

backend-top-categories
Display Top Categories component

Open up the setting box of of the Display Top Categories component by clicking  pencil while hovering the component in page edit mode.

Display-top-categores-settings
Component: Display Top Categories settings
  1. Choose the category for which you want to make appear in the Popular category section. (Note: Currently we haven’t integrate the algorithm to automatically find the top categories since it takes lots of resources, however we have integrated the popular post algorithm to automatically find the popular post, which we will discuss in this documentation at some point.)
    Note: Make sure you have assigned the image for the category which you have selected in the category selection, since it utilizes the category images in the front page. See Category Images.
  2. Give the title of this section
  3. Save changes, update the page and preview it, you should have the Popular Categories section in front page as shown in figure below:
top-categories-preview
Top Categories component preview in site.

Social Linking

Objective
To make the social linking section to suit our overall page design and and to add different types of social Linking

If you have noticed the social linking section, it should look like in the figure below. Immediately you know that the design is not great if compared to overall site design. Social Linking is done via the use of plugin named, Social Count Plus. We cannot directly edit the design of the plugin so you may have to carry out a few steps before it looks good to our design.

initial-social-linking
Social Linking Section: Viewed without any customization

 

Things to remember
Make sure you have installed and activated the plugin named Social Count Plus before proceeding this section.

Before we directly edit the Social Count Plus (We have created a custom visual component for social count plus as well) from the settings box, we need to set up the plugin to choose what social do we want to look and whether to show counter or not. Follow the step below as shown in the figure below:

social-countplus-settingss
Social Count Plus plugin settings page
  1. Navigate to Settings > Social Count Plus.
  2. Under the settings tab inside social count plus setting page, there are list of most of the social media available, you can choose what social you want in your site. Here I will be choosing Facebook, Google+, Instagram, Pint interest and Twitter since these are the mostly used social site.

Note: To know more about this plugin visit Social Count Plus.

Next we need to choose the design of the social count plus from the same setting page. Click Design tab next to Settings tab. It contains the list of layout model to choose from. To make look good and suit to our theme design choose the following layout model:

social-clount-plus-latyout

And text color white as shown in figure below:

text-color

Now click Save Changes. That is all we need to do from the setting page of Social Count Plus plugin. This will ensure that the output of social count plus will comply to our theme design.

Now back to demo front page, Open up the page in edit mode and focus in the area as shown in the figure below:

social-count-plus-area
Custom component: Social Count Plus

We have created custom visual component named, Social Count Plus (Marked by red rectangle). Open up the setting box of of the Social Count Plus component by clicking  pencil while hovering the component in page edit mode.

soical-count-plus-comp-settings
Custom Component: Social Count Plus Setting box
  1. Give the title of the section for Social Linking Section
  2. Click save changes, update the page, preview the site and the looks and design of the social linking section should have been nicely blend with our theme design as shown in figure below:
social-count-pus-preview
Social Count Plus preview

Primary Sidebar

Objective
To know how to manipulate the content (widgets) inside the primary sidebar of the demo front page

The sidebar is pretty much straight forward in the demo front page. Here we will discuss, which visual composer component is responsible to make the primary sidebar of the front page.

sidebar-widget-edit
Visual Composer Component: Widgetised Sidebar

Page builder, Visual Composer smartly allows us to place any widget area to place in our site. The visual composer component that allows us to do so is called Widgetised Sidebar. Open up the setting box of of the Widgetised Sidebar component by clicking  pencil while hovering the component in page edit mode.

widgettised-sidebar-settings
Visual Composer Component: Widgetised Sidebar Settings
  1. A drop-down selection will list all the available widget area. For the primary sidebar we use the sidebar named Sidebar 1 which is our primary sidebar of our theme.
  2. Save changes.

Now, you may want to add more widgets or remove widgets from the primary sidebar. Here’s how we do it.
Note: By default, we have already placed some widgets inside the primary sidebar.

primary-sidebar
The contents (widgets) inside the primary sidebar
  1. Navigate to Appearance > Widgets
  2. This is the widget area, Sidebar 1 also is the primary sidebar. The widget inside can be removed or more widgets can be added by drag and dropping the widget inside this area.

Newsletter Subscription

Objective
To set up the Newsletter Section using the custom component Mailchimp Subscription.

NOTE: Make sure that you have installed and activated the Mailchimp for WP before proceeding to this section.

You might have noticed that currently, the newsletter subscription area seems to have some problem as shown in figure below.

newsletter-before
Newsletter subscription section before settings has been set

Yes, its perfectly fine for now and we will sort this out by playing the setting of plugin responsible to generate the subscription functionality. We have used the plugin named Mailchimp for WP. Of-course you are free to make use of other subscription as well.

You can have a look on how to set up the Mailchimp subscription Maichimp for WP. However, I will also show you minimum requirement to set up the newsletter subscription as part of the theme documentation. Before you can use the full use of Mailchimp, its needless to say that you must first have Mailchimp Account.

maichimp settings
Mailchimp Settings
  1. Navigate to Mailchimp for WP > Mailchimp
  2. Enter your Mailchimp API key to connect with your Mailchimp account. Get Mailchimp API
  3. Once you entered the correct API key, it will be verified.
  4. If verified successfully it will be marked as connected
  5. It will retrieve all the list associated with your account and display in tabular form.

Next is setting up of the subscription form. Follow the steps as shown in figure below:

mailchimp form
Setting up of Mailchimp subscription form
  1. Navigate to Mailchimp for WP > Forms
  2. Under Fields tab.
  3. Copy and past the following HTML code and put it in the text area

<div class=’form-group’>
<input type=’text’ name=’EMAIL’ placeholder=’Your e-mail’>
</div>
<!– end form-group –>
<div class=’form-group’>
<button type=’submit’>SUBMIT</button>
</div>
<!– end form-group –>

Lastly, we need to tell where should the new subscribers be listed to when subscribers subscribes for the newsletter with this newly created Mailchimp Subscription form. Follow the step below to assign the subscribers to the list.

subscribes_to_list
Mailchimp subscribing to a particular list
  1. Navigate to Mailchimp for WP > Forms
  2. Under Settings tab.
  3. You must choose at least one list.
  4. Click save changes.

Now back in the front page edit mode,

mailchimp_coomponent
Custom Component: Mailchimp Subscription

Open up the setting box of of the Mailchimp Subscription component by clicking  pencil while hovering the component in page edit mode.

maichimp_subscription_settings
Componnent: Mailchimp Subscription Settings
  1. Under General Tab.
  2. Give the title of the section.
  3. Give the tagline (something that will support the title) for this section.
  4. Click Save changes, update the page, preview the site and the newsletter section should be similar to the figure below:
subscript_preivew
Newsletter subscription preview

Instagram Section

Objective
Set up the Instagram widget area in front page with the help of  the visual composer component Widgetised Sidebar.

Note: Make sure you have installed and activated the plugin named, Magazine Instagram Feed. 

Follow the step as shown in figure below:

setting_up_instagram
Setting up Instagram widget area
  1. Navigate to Appearance > Widgets
  2. Inside the widget area called, Instagram Area
  3. Insert the widget named, Instagram Widget by dragging and dropping into area, Instagram area.
  4. click Connect To Instagram, then the widget will have the configuration button after successfully connecting to Instagram.
configure_instagram
Configure Instagram

Click on Configure Widget

instagram_widget
Instagram widget settings
  1. Under Display tab
  2. Make sure it is displayed as Grid 
  3. Grid dimension 1 by 6 for now.
  4. save it.

Now back in the front page edit mode,

instagram_section
Instagram section

Open up the setting box of of the Widgetised Sidebar component by clicking  pencil while hovering the component in page edit mode.

instagram_settings
Visual composer component: Widgetised Sidebar Settings
  1. For Instagram section, we will choose a widget area named, Instagram Area. Remember we put Instagram Widget inside Instagram Widget area. 
  2. Save changes, update the page, preview the site and the Instagram section should look like in the figure below;
instagram_preview
Instagram Section preview

Page Setup

Before we start getting to know with each custom visual composer (Page Builder) component , lets set up the place (page) where we will test each custom component.

  1. Add New Page
  2. Choose the page template Page: Visual Composer Page (refer figure below). Choosing this template will get rid of breadcrumb and sidebar which is placed by default. (Of course we can add sidebar later with the help of visual composer component).
  3. And make sure you are in visual composer edit mode by switching the button swith_button
page-template
Page Template

After this we will look into how to add different page builder components inside the page. However we are not going to look on every page builder component of visual composer. We will only cover those custom builder components which were developed by us for this theme specifically in this documentation. The regular components provided by the visual composer have got their own full fledged documentation here.

Magazine Wrapper Element

Magazine Wrapper is a custom element which acts as a wrapper for different section in the site. It provides a more manageable section within the site. Let’s inset the component in our page (page we created earlier using Page: Visual Composer Page).

adding_page_builder
Inserting Component in the page

 

magazine_wrapper
Custom Magazine Wrapper Component

Under the tab, Magazine (place for custom page builder component) select Magazine Wrapper, as soon as you add the component, its setting box will automatically appear as shown in figure below:

wrapper_settings
Component: Magazine Wrapper settings
  1. Under the General Tab
  2. Type of wrapper to select from (Wrapper could either be of <div> tag or <section> tag)
  3. Give the class name of the wrapper if needed.
  4. Option to whether include container inside wrapper or not.
  5. If container is placed inside the wrapper, you can give the container a class name. Here I have given the class name container. You can too use this container named container since it is defined within our theme.
What is container btw?
It places a mini holder inside the wrapper. Now why is that important ? Sometime you may want to place the content inside the wrapper which you may not want to cover the full width of the screen but still want it to appear at center leaving some gaps to the left and right (equal gaps) side of the screen.

Once you placed  wrapper (with or without container inside it), you can place other component inside it. Well, that’s pretty much about wrapper component. However, it is not compulsory that you you should place other components inside Magazine Wrapper element. It is a nice way to separate the blocks (slider section, subscription section…) and allows to place a container inside it.

One important thing to note is, whenever you place the Magazine Wrapper component, you will see a plus icon inside it which means you can place other component inside it by clicking plus icon. There are basically two types of component in visual composer. One is wrapper type component and the other is non-wrapper type component. Wrapper type component is a  component which allows other component to be placed inside it whereas, Non-wrapper type component don’t. Magazine Wrapper Component is a custom wrapper-type component.

magzine_wrapper_component
Custom Component: Magazine Wrapper (Wrapper type component)

Magazine Map

Magazine Map renders the google map with minimum effort in your page.

magazine_map
Custom Component: Magazine Map

Settings of Magazine Map:

magazine_map_settings
Magazine map settings

Try to match the number in the figure above with the number in the figure below, you will get the idea of what this component does, easy huh…

mapz
Magazine Map Preview

Magazine Paragraph

Magazine Paragraph is another custom component which lets you to inset a paragraph in pages along with its title.

magazine_paragraph
Magazine Paragraph

Setting box of Magazine Paragraph

paragraph_settings
Magazine Paragraph Settings
  1. The title of the paragraph.
  2. Alignment of the paragraph
  3. Content of the paragraph in WYSIWYG editor.

Preview of the output render by this component.

paragraph_preview
Magazine Paragraph Preview

Magazine Photo Viewer

Photo Viewer is another custom builder component which allows to select multiple images from media gallery or from the system to create a slider of image with an image preview facility. We have discussed this component when creating front page with Demo Front Page | Photo Gallery Section here.

photo_viewer

Magazine Display Post

Magazine Display Post is another custom builder component which allows to display a post from a specific category in two different layouts (Horizontal and vertical). We have discussed this component when creating front page with Demo Front Page | Horizontal and Vertical Post here.

display-post

Magazine Recent Post

Magazine Recent Post displays the recent post or can be made to display a recent post from a particular category. We have discussed this component and its settings when creating front page with Demo Front Page | Setting Up Recent Post here.

magazine_recent_post

We may have discussed this component earlier in  Setting Up Recent Posthowever we have only displayed only one variation. Below is the screenshots of all the variations that this component can render in the site.

recent_1
Variation 1: 2 columns (6 – 6)
recent_2
Variation 2: 2 columns (9-3)
rece3
Variation 3: 2 columns (3-9)
race4
Variation 4: 3 columns (3-6-3)
race5
Variation 5: 3 Columns (6-3-3 | Different First Post)
race6
Variation 6: 3 columns (6-3-3 | Different Last Two Post)
race7
Variation 7: 3 columns (3-3-6)
race8
Variation 8: 4 columns

Magazine Social Count Plus

Magazine Social Count Plus is another custom builder component which allows us to insert your social link like Facebook, Twitter, Instagram etc. We have discussed this component when creating front page with Demo Front Page | Social Linking here.

soical-count-plus

social-count-pus-preview
Social count plus preview

Magazine Mail-chimp Subscription

Magazine Mail-chimp Subscription is another custom builder component which allows you to insert Mail-chimp subscription form. We have discussed this component when creating front page with Demo Front Page | Newsletter Subscription  here.

mailchimp

subscript_preivew
Newsletter subscription form powered by Mail-chimp

Magazine Display Top Categories

Magazine Display Top Categories is another custom builder component which allows you to select categories to create the archive link to a post belonging to that particular category. We have discussed this component when creating front page with Demo Front Page | Top Categories Section here.

display top categories

top-categories-preview
Top categories Prevew

Understanding Front End

Before we create page from scratch using page builder (However, I still recommend you to create your front page using our one of the demo front page Learn here) we first need to understand the concept of wrapper and container. Just to give you the idea visually, have a look in the figure below:

site-grid
Wrapper and container structure
  1. In this theme, the width of the site wrapper covers the whole width of the browser view port. Basically the width of the wrapper is 100% of the view port. We can create wrapper with the help of builder component, Magazine Wrapper. 
  2. Container is also a wrapper, unlike site wrapper it does not takes the entire width of the view port. It has some margin at both left and right of the browser and the area inside container always is made center. We can insert Site Container with the help of the component, Magazine Wrapper by telling we need to insert container inside the wrapper with a container class named, ‘container’ (Standard container class name) through its settings box.
  3. For example, here we have placed the component named, Magazine Carousel inside the site wrapper which covers the entire width of view port or full width.
  4. For example, here we have placed the different components Sidebar, Top Categories, Display post inside the container which is inside the site wrapper. Notice these components did not acquire full width.

So basically, we use the site wrapper and site container to whether we want our content to be full width or not. Thumb of rule is,

  • Full width = Site wrapper
  • Center content = container

 

Add Page

Before building the page from a scratch, first we need to add new page. See here for choosing template to create page.

page-template
Choosing Page Template

Overview

Let me tell you, how are we going to structure our page.

  1. Hero Section: Our page will have a Hero (composed of carousel) section using Magazine Carousel component which will be full width.
  2. Recent News Section: Below the hero section, we will place a recent news section using Magazine Recent Post component which will be inside the site container.
  3. Main Content Section: Below the recent news section, we will create a main content section which will be divided into two columns. Column on the left will contain the component, Magazine Display post and Popular Category. Column on the right will contain the primary sidebar which we will do with the help of Widgetised Sidebar component.
  4. All to all, we will learn how to insert wrapper and container in the page using builder component. And also we will learn how to create columns inside the wrapper.

So it’s all clear now for what we are going to do, It’s time to start building our page. Do not get confused with the Demo Front Page tutorial with this Create Page from Scratch section. In Demo-Front-page section we learned only about manipulating the existing component and in this section we will learn more about how to put those component inside the page and the  organization of page structure like (wrapper, container, columns and responsiveness as well).

 

Inserting Page Hero

The component, Magazine Carousel is responsible to create page hero. Before we insert the component, we first need to create a wrapper to wrap the hero section. Lets insert the wrapper first.

add
Inserting Component

Choose the Magazine Wrapper under the Magazine tab to insert the wrapper compnent

magazine_wrapper1
Inserting Magazine Wrapper

The setting of the component,

page_scratc1
Magazine Wrapper settings
  1. Choose the wrapper type, section type to specify that this section will be enclosed by <section> tag.
  2. If you want to give extra class for custom styling purpose, you can do that from here.
  3. In overview we talked about inserting hero section first which will be full width, so we wont be placing container inside this wrapper.
  4. Save changes.
wrapper
Inserting component inside wrapper

Now its time to insert Magazine Carousel component inside this newly created wrapper. Click the icon plus inside the wrapper and select the Magazine Carousel component to place inside the wrapper. After you have selected the Magazine Carousel component, its setting box will appear. We have already discussed on about the settings of this component Here. After inserting component, it should look like the figure below:

carousel_inside_wrapper
Magazine carousel inside site wrapper

If you update the page, and preview the site, page should have the hero as shown in figure below:

magazine_carousel
Page Preview with Page Hero:Post carousel

Inserting Recent News Section

The component, Magazine Recent Post is responsible to display recent Post. Before we insert the component, we first need to create a wrapper to wrap the this section as well. Insert the wrapper and inside the wrapper insert the the component Magazine Recent Post. As we looked in overview section we are going to put this section inside the container. Here’s what you need to do in order to place container inside the wrapper and in turn we will be able to put our component inside the container.

after section
Inserting another section/wrapper after another section

Make sure you have place container inside the wrapper with the class name container for container when inserting wrapper component (Magazine Wrapper) comportment. it should look like the figure below:

container-non contiaoner
Inside and outside container

Now its time to insert Magazine Recent Post component inside this newly created wrapper. Click the icon plus inside the wrapper and select the Magazine Recent Post component to place inside the wrapper. After you have selected the Magazine Recent Postits setting box will appear. We have already discussed on about the settings of this component Here. After inserting component, it should look like the figure below:

recent
Magazine Recent Post inside the container

Update the page and preview the page. So far our page is looking like in the figure below:

so_far
Page So far, after adding Hero and Recent News Section

Inserting main content section

As we mentioned in overview, our next task is to create the main content after recent news section. We will divide this main content into two columns. In which, the right column will be used as a placeholder for the primary sidebar of the site.

To do so, first we need to insert the site wrapper (Magazine wrapper) with container inside it and inside the site wrapper (with container) we will insert another component named, Row (standard visual composer component) and we will divide this row into two columns of size span-9 (left column, made up of 9 grids) and span-3 (right column, made up of 3 grids).

What is Grids, btw?
Think as your browser view-port is made up of 12 equal separate vertical area which exactly covers the entire view port. Now when I say, left column as span-9 which means that left column is occupying  the space covered by 9 vertical area out of 12 vertical areas. Similar is with the case of span-3 column which occupy 3/12 view-port area.

row_inside

row
Inserting Row inside wrapper
row_inside_wrapper
Row inside Wrapper

Creating Columns

So far we have created Hero section, recent news section and also have setup the main content holder section earlier. Now its time to divide the main content holder into two columns. Lets do this.

create columns
Accessing control of the row to create columns inside the row

Hover over the area enclosed by red rectangle in the figure above to reveal more control as shown in figure below. Click the custom.

custom

Now, mention the column size

span
Column size

Now it should look like in the image below:

column
Row division into columns

Inserting content in main section

After creating columns, its pretty much straight forward to insert other component. Insert the Magazine Display Post (more info on this component) component in the left column. It should look like in the image below after inserting the component.

add_another_component
Adding magazine display post in left column

Append another component, named Magazine Top Categories (more info on this component) after Magazine Display Post. And also insert Widgetised sidebar component in right column (select Sidebar 1) .Now it should look like in the figure below.

finsihed
Completed Main section

General

The things like what header type you want to use, what footer type (dark mode or light mode), social link etc.. can be manipulated via theme options. there are lots of theme options, I am only going to cover those options which really needs explanation, most of the theme options are self explanatory.

Accessing theme option:

ot
Navigating to theme options
  1. Changing Global site link colur:
    Go to theme options. In general tab look for Site Link Colour.

    sitel_link_colur
    Changing Site Link Colur
  2. Computing Popular post:
    There are two parameter in our theme to compute the popular post. We calculate depending upon number of views and how old is the post. Since we cannot solely rely on number of views of post to regard it as popular because older post will automatically have higher number of views. So we limit how old the post should be in order to make that into popular post.

    related_post
    how far the popular post be calculated from?
  3.  Enable/Disable scroll top button:
    enable_scroll
    scroll to[

Header

Navigate to Appearance > Theme Options > Header [tab]

  1. Choosing Header Menu type menutype
  2. Enable/Disable tiny top bar
    tin
    tiny_top[

Blog (Single Page)

Changing the layout of the single page / Blog page
single_page

 

 

Enable or disable Page scroll percentage in blog page
scroll _precentage
page_scroll_preveiw

 

 

Enable / Disable banner Image in single blog:
You can enable or disable banner image in single post. We have a default banner image displayed initially, however you can change the banner image by navigating to Appearacne > Theme Options > Blog [Tab] and look for the setting ‘Enable image banner in blog posts’ and ‘Single Page Banner Image’. Note this banner image set from Theme options will be applied globally to all the the posts. However if you want to have a particular banner image for a particular post, you can overwrite via single post edit.
enabl_banner

 

panner_preview

 

Post/Blog Share Buttons

We have implemented the social share for a single blog or post with the help of Easy Social Share Plugin. Here we will show you how to make this plugin render exactly as shown in our demo.

Note :
Make sure you have installed and activated the plugin, Easy Social Share Buttons. Look for the list of recommended plugins in Appearance > Install Plugins
single_post_share
Setting Share button in single page
  1. Navigate to Settings > Easy Social Share 
  2. Click Post Share Buttons tab
  3. Choose share button type of  Share Count . Remember, that we have not specified particular Share Button Location. Our theme display the share button in single page/blog with the help of short code. So, you don’t have to check the option here.
  4.  Save settings.

Related Posts / Articles

When viewing blog / single post, we have also placed the section called Related Articles / Posts. It displays the similar post related to the post you are viewing. By default, only two related post is displayed in single post.

However, you can change the maximum number of the related post to display in the single page.

related_posts
Customizing the maximum number of related post to display in single post

First navigate to Appearance > Theme Options > Blog (tab) and look for the setting ‘Maximum number of related posts to be displayed’.

  1. By sliding the slider, you can increase or decrease the value by which it determines the maximum number of related posts to be displayed in single post.

Single Post sliding Image Gallery

In this demo, post with slider image, you can see that there is a slider image instead of single feature image of the post. We can make a sliding image gallery by creating a gallery in a single post where you can put multiple image related to post which will be rendered as a slider at the top of the post.

image_slider_single_post
Creating Gallery for a single post

First, navigate to Posts, choose any of the post and open it in edit mode. Under the Post Options meta box of the post, you should be able to see the section as shown in image above.

  1. Enable or disable the image slider in the post.
  2. Choose the image from the media gallery to create a gallery. Update the post, preview it, should look something like in the image below:
slider_preview
Slider Image Gallery Preview

 

Setting Up popup Subscription

Our theme also integrate pop up based subscription in addition to Mailchimp Subscription. In this section we will discuss on how to setup the pop up based subscription.

Things to Remember
Make sure you have installed and activated the plugin, PopUp by Supsystic before you proceed to this section.

For the pop up style subscription, our theme utilizes the the plugin named, PopUp by Supsystic to display the popup.

popup
Creating Pop Up Subscription
  1. Navigate to PopUp by Supsystic > Add New PopUp
  2. Select the popup design. Here we have chosen Girl Common Type.
  3. Give the name of popup
  4. Save it.

After creating new popup subscription box, its time to manage its settings.

popup settings
Popup Settings
  1. Navigate to PopUp by Supsystic > Show All PopUps. Choose the newly created popup. And click Show All PopUps tab
  2. Inside Main tab
  3. Here, you can configure when to show pop up. For now I have chosen When Page Loads
  4. Where to show this popup
  5. Method of how you want the user to close the popup
  6. Here, I am choosing an option where the popup will be shown to only the first time visitor.
  7. Save it.
choosing_image
Customizing image in popup
  1. Now if you click Design Tab, there are number of options you can play with.
  2. For now, I am going to change only the image of the pop up
  3. The selected image.
  4. Save the changes.

subscription_service

 

Changing the submit button text:

subscribe button
Changing the subscription button text

In the above image, you might have noticed the word, subscribe seems to be not fitting well. Well, do not worry this preview is just the admin preview. Once this popup render in the site, our custom css will takeover and everything will be good.

Changing the body text of pop up:

popup_body_text
Changing the text of popup body

In the above image, go to Design Tab > Texts. Then there you can change the body text of the popup.

subscription_service
Choosing Subscription Service
  1. From Subscribe tab, you can choose the subscription service and configure its settings.
  2. Here I have chosen, Mailchimp as my subscription service. You might have different.

Changing / Playing with CSS and HTML (Only if you Know)

customizing_css
Customizing with Custom CSS and HTML (Markup)
  1. Customizing the PopUp Css and HTML can be done via the tab, CSS/HTML code.
  2. You can learn here by clicking on how to edit the design Manually.
  3. CSS customization area
  4. HTML customization area.

 

Side Hiding Menu Box

You might have noticed that when you click the the breadcrumb icon in the header on the right side. A new hidden menu is revealed. Well, we have called this hidden menu a Side Hiding Menu Box. Below is the screen shot of the hiding menu box.

side-hiding-preiview
Side Hiding Menu Box

 

The following screenshot show how to manipulate the side hiding menu box:

side_hiding_box
Side Hiding Menu box manipulation
  1. Navigate to Appearance
  2. Navigate to Widgets
  3. You can drag in the widget in Side Hiding Menu box widget area to show up in side hiding menu box.

Tiny Top Bar

Tiny Top bar is a thin top bar that appears at the top of the page. Below is the image showing the tiny top bar in the page.

tiny_top_bar_column
Showing Tiny Top bar in the page

Of course you can enable / disable the Tiny top bar from the theme options. Navigate to Appearance > Theme Options  > Header [tab] and look for the following settings/options

tiny_top_bar
Tiny Top bar settings

 

The content of the tiny top bar is controlled via different widget area. Navigate to Appearance > Widgets. Refer the image below for the content manipulation.

top_bar_widgget
Manipulating content of Tiny Top Bar