Getting Started

Thank you for choosing Pantograph! Lets begin starting your project with Pantograph.

Save the downloaded theme’s files on your pc first. Navigate to the Downloads section in your Envato / ThemeForest account, your purchases are kept there. Click the Download button to get the theme, make sure you’re clicking the “Installable WordPress file only”.

After that please follow the following 3 steps.

Step 1: Theme Installation →

Theme Installation

Now that the theme’s files are saved on your pc, you can log into WordPress administration dashboard to upload and install it.

  1. Navigate to Appearance > Themes and click the “Add New” / “Upload Theme
  2. Upload the file you’ve downloaded from ThemeForest in the previous step and click Install Now.
  3. Once the file has been uploaded click the Activate link.


Step 2: Plugin Installation →

Plugin Installation

After choosing design from your design settings page, you should visit your plugins page (Settings > Plugins Page). You need to download the 3 required plugins and then upload those plugins in your wordpress by visiting ‘Plugins > Add New‘ page. Install the 3 plugins and activate them.

Step 3: Demo Content Import →

Demo Content Import

Importing demo data (post, pages, images, theme settings, widgets …) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.

When you import the data, the following things might happen:

  • No existing posts, pages, categories, images, custom post types or any other data will be deleted or modified.
  • Posts, pages, images, widgets, menus and other theme settings will get imported.
  • Please click on the Import button only once and wait, it can take a couple of minutes.

Step 1 : Before importing the demo content you can check the full preview of demo site. Click on the import button of your chosen demo. A pop up form will appear where you will see a link given to open the Theme-Options import codes. Click on that link and then click on the ‘Import’ button. It can take around 5 minutes to complete the importing.

Step 2 : Need to import theme options for your current demo. Navigate Apperence > Theme Options > Import/Export and paste your theme options content from the page you opened a while ago by clicking on ‘From Here’ link appeared when you clicked on ‘Import’ button.

Please copy the theme options content which demo is imported. 

Step 3 (optional): Create Mega Menu →

After completing above steps, you are all done – Have fun!

Make a New Page from Scratch

1. Create your new page and give it a name, e.g : Home and Set the page template to Page WIth VC Template

 

2. You will see new buttons so that you can toggle between classic mode and builder mode as well as a button to take you to the live front-end editor. Now we will use Classic Mode to add elements.

3. By Clicking on ‘Add Element’ button you can see the List of all elements which can be added and configured on your page.

 

4. Find the tab by Fluent-Themes Shortcodes. When click on by Fluent-Themes Shortcodes then you can see like the following image

 

5. You can click on any element from there to use it in your page. For example, if you want to use ‘Home Slider’ element, just click on the ‘Home Slider’. You will find a pop-up with the settings fields of ‘Home Slider’ element. Select a Category and fill up the settings fields as you need. Then make sure click on the Save Changes button and Update/Publish your page.

 

6. Look at the following image to know how to change the ‘Header style’, ‘Footer style’, ‘Body background color’ for this particular page.

 

7. When you are done adding elements to your page, click on Publish/Update button. Now you page is ready. If you want to add new element in your page you can add.

How to make a Full Width Section

 

To make a section/row full-width, click on the ‘Edit Row’ icon.

Now you should choose Stretch row and content (no paddings) to make the section full width.

Front Page Setup

Choose your “Home Page”.

To set this as your homepage, go to Settings > Reading in the dashboard. In the “Front page displays” section check the “static page” option and select the page Home you just created from the dropdown then save the settings.

That page you created and added the homepage page template is now loaded when anyone visits your website homepage.

How to Change Theme Options Like Logo, Favicon, Header, Footer … etc

After installing the theme, you should see a Theme Options menu in Appearance > Theme Options and click on Theme Options menu.

Now you can choose Header Top Bar, Top Bar Menu, Header Default Menu, Logo, Favicon, Single Post Default Style, Category Default Style, Author info Show/Hide, Background Color, Font, Box Style, Breadcrumbs Show/Hide, Social Links, Footer, Footer Logo, Copyright Text from the several option tabs.

How to Setup Header Top Bar?

By default, After install the theme header top area don’t show. But you can give permission to show on the top. Go to Appearance > Theme Options > Header Top Bar and ON the switch for showing top bar.

After showing the top bar add the Background Color, necessary menu items and links from Appearance > Theme Options > Header Top Bar. Of course you have opportunity to add your social media links.. Go to Appearance > Theme Options > Social Media and add your desired links.

 

Setup Top Navigation Menu

You need to create Menu from Appereance -> Menus and choose create a new menu option.

 

After that you can choose Pages, Posts, Custom Links(useful for One-Page layout’s menu), Categories from the left column and click Add to Menu button. The selected menus will be added under the Menu Structure. Then you will need to choose Theme Locations under the Menu Settings:

  • Choose Main Menu if you want to use the menu at the top of your website.
  • Choose Footer Menu if you want to use the menu as Quick Links of the Footer.

For More info see the image below:

How to Setup Mega-Menu Dropdown / Multi-Column Dropdown

Step 1: Once The Pantograph Extensions plugin is activated Mega Menu is available in your admin panel dashboard.

 

Step 2: Enable WPBakery for Mega Menu

1. Navigate to WPBakery > Role Manager
2. In Post Types choose ‘Custom’ and then make sure mega_menu is checked.

 

Step 3: Add a new Mega Menu item

1. Navigate to Mega Menu > Add New
2. Give it a title, lets say “Mega Menu One” item. The title is not used anywhere in displaying the menu.
3. Click on Backend Editor. It will display WPBakery Backend Editor. We will use this back end editor to build our Mega Menu item.

 

4. Click on ‘Add Element’ and from the elements popup choose ‘Category For Mega Menu’ or ‘Tab Mega Menu’

 

5. For ‘Category for Mega Menu’ element’s settings popup choose a category, then click on ‘Save Changes’ button and finally click on ‘Publish’ button.

 

6. For ‘Tab Mega Menu’ element’s settings popup you need to fill the Tab name and select a category, then click on ‘Save Changes’ button and finally click on ‘Publish’ button.

 

7. Now create a menu from the Appearence>Menus and click on Screen Options to expand the options. And check the Mega Menu and CSS Classes item.

 

8. Now you see the Mega Menu on the left side; you can select this mega menu item and click on the Add to Menu button. Drag the mega menu item and use it as a child menu for a parent menu. In the parent menu need to expand and add css class ‘dropdown megamenu’

 

9. Now select a menu like ‘Main Menu’

 

How to use different Header Style?

1. How to make Header Style only for current page?

In the right side of your page editor you have option to choose ‘Header Style’ for this particular page..

 

2. How to make Header Style for full website?

We use this feature from Appearance > Theme Options > Header and choose a Website Header Style from the listed item. Possible to change the menu background color for style Four, Five and Seven Header Style from Header Menu Background

 

How to use different Footer Style?

1. How to make Footer Style only for current page?

In the right side of your page editor you have option to choose ‘Footer Style’ for this particular page.

2. How to make Footer Style for full website?

We use this feature from Appearance > Theme Options > Footer/Contact and choose a Website Footer Style from the listed item. Background color changing option is available as well.

 

How to place widgets on your website?

In this important step, we will show you where and how to place widgets. You can place widgets either through the WordPress customizer Appearance => Customize => Widgets or in your WordPress dashboard if you go to Appearance => Widgets. Widgets can be placed simply via drag and drop, so just pull your favored widget to the widget area you like.

Here you can see the available widget areas of Pantograph Magazine & Blog Theme

Sidebar Widgets: Widget area (sidebar right) on single posts, pages and archives.

Footer Widgets: Widget area (In Footer) on all pages.

Footer Social Links: Widget area (In Footer) on all pages.

Note: Just follow the instructions from the following image.

 

Custom Sidebar

You can create ‘custom sidebar’, which is useful when you want to insert widgets in your homepage., Just take action from Appearance => Sidebar, Enter a name and make a new sidebar.

 

Now you can see it on the Appearance => Widgets page. Add some widget items in your created sidebar

 

Now you can insert it in your Home Page (If you need)

 

How to Make Different Category Page Style

By default, this theme shows a default category posts style, But if you want you can choose category post style for the all the categories Or Individual category.

For all category:

To choose a default design for your category pages visit Appearance > Theme Options Choose a Category Style from the General tab.

 

For Individual category:

Navigate to Posts > Categories . There you can make a certain category page design different than the default design. Option fields are there waiting for you to choose from.

Like Choose a Template (Which is category page style), Category Color (Background Color only for this category), Single Page Layout (Which is use for a single post view style), Category Title (If you want to give a custome category title), Number of Post to Show (How many post want to show per page for this category), Category Page Image (In the post you can provide featured image and custom image url, So which one want to show on the category page?) Show/Hide Category Title/Description/Breadcrumb ( You can Show/Hide Category Title/Description/Breadcrumb)

 

Same thing for edit any Category

 

How to manage single post options?

1. How to Choose Single Post Style for all post?

Go to Appearance > Theme Options > General Now select Single Post Style.

 

2. How to Choose Single Post Style for current post?

When you add new post from Posts > Add New just choose a post attributes Template

 

3. How to Manage Post Breadcrumbs?

Go to Appearance > Theme Options > Header Now switch ON to show Post Breadcrumbs on single posts.

 

4. How to Choose Author Info On Single Post?

Go to Appearance > Theme Options > General Now switch ON to show author info on single posts.

 

5. How to make Post as a Featured Post?

When you add new post from Posts > Add New just choose Featured Post Yes.

 

6. How to make Primary category for Current Post?

When you add new post Posts > Add New you can choose primary category from bottom categories dropdown.

 

7. How to make Video Format Post?

When you add new post Posts > Add New just choose Format Video and give an youtube video link in the content box.

 

8. Can i use custom image without feature image?

Yes, You can use custom image URL instead of Feature Image. When you add new post give a custom image URL in this field

 

How to add author information?

After logging in to you WordPress dashboard, Go to Users > Your Profile Now fill with your information and update profile.

 

How to use sidebar and change design?

1. How to make sidebar only for current page?

At first you need to create sidebar area for adding widgets (follow the guidelines given here to create custom sidebars). After creating sidebars you can use it on your current pages which is build using page builder. Add Widgetised Sidebar element on your page, and Select the Sidebar which you want to show as sidebar in the current page.

 

Want to change Widgets Design?

We can change widgets design for current page. Just follow the below image instruction. These options are placed at the bottom of the page editor. After changing something click on ‘Publish/Update’ button of the current page. It’s simple!

 

2. How to make change default sidebar design?

We can change widgets design for all pages. Just follow the below image instruction and make interactive default sidebar design. Appearance > Theme Options > Sidebar and make changes as you need.

 

How to use a post block properly?

Note: When you want to make a page like Homepage, you need to know how to use the ‘Post Block’ elements..

There are many options available, which will help you to make an interactive website using Pantograph WordPress theme. You can see the option fields for each post block when you edit/add a post block in your page..

Helpline : You can see the post block layout beside each post block name. The common option fields for each blocks are explained here:

    1. Heading : Heading means a post block Headline. You can use or not. If you don’t need Headline keet it blank and save the post blcok.
    2. Select Category : You can choose a category for showing posts in this post block.
    3. Do you want Image Animate? : We can see this effect when mouse hover on the image. If you want click on Yes or don’t need to make change.
    4. Do you want Border? : Border can help you to make box style post block. If you want to make box style then click on Yes checkbox.
    5. Block Border Color : After clicking on Yes checkbox to make border. Will available border color feature. So if you need to change border color for this post block you can do.
    6. Block Background Color : After clicking on Yes checkbox to make border. Will available Block Background color feature. So if you need to change Block Background color for this post block you can do. By default it contains white color.

  1. Do you want Next – Prev button? : This feature only for Block 1 and Block 6 which is use to make pagination. If you want you can choose Yes to make Next-Previous pagination
  2. Do you want Tab options? : This feature only for Block 1 and Block 6 which is use to make tab item post category.
  3. Choose Category For Top Tab : After clicking on Yes checkbox for Tab options, will available this feature to select Top Tab item for this block post.
  4. Choose Category For Top Tab Dropdown : After clicking on Yes checkbox for Tab options, will available this feature to select Top Tab Dropdown item for this block post.

 

  1. Choose Background For Tab Dropdown : After clicking on Yes checkbox for Tab options, will available this feature to select Top Tab Dropdown background color. If text color and background color will same then users can see the text. That’s why we can change the background color for dropdown items.
  2. Large Post ID (Optional) : Most of the post blocks have 1 post as Large. So if you can show a post permanently for this post block you can use a post ID.
  3. Large Post Title Limit In Character (Optional) : Just Character limit for this large post title
  4. Large Post Excerpt Limit In Word (Optional) : Description word limit for the large post.
  5. Post Item : How many post want to show for this post block, You can limit with this.

 

  1. Another Posts Title Limit In Character (Optional) : Just Character limit for this post block another post title excerpt large post.
  2. Another Posts Excerpt Limit In Word : Description word limit for this post block another post title excerpt large post.
  3. Block color : This option use to change block posts hover color, meta, author link. But you can use individually options for hover, meta and post title. Apply this feature and you can see some of difference on the post block.
  4. Block Heading Color : Block Heading Color can change by this feature
  5. Block Heading Background Color : To change Heading Background Color. By deafult Heading Background Color is white. When heading color will use white then it will make a conflict. So if you need to use white heading color you can change heading background color. After that you can see the text. Not only for this reason, you can choose heading background color for your necessity.

 

  1. Block Post Title color : Just to change the post title color, By default this color is black.
  2. Block Text color : You can change the block text color if you need.
  3. Block Link Hover color : You can set Hover Color for all links in this block posts.
  4. Block Date & Meta color : Available option to change Date and Time color
  5. Order By : You can set order by options to show the post according this options
  6. Order : You can set Ascending or Descending order to show the posts

 

How to manage blocks and widgets blank space?

1. How to add or avoid blank space top or bottom for a widget?

Go to Appearance > Appearance > Widgets Now collapse your widgets and you can add Top and Bottom margin for widgets. So you can recover the blank space using this margin options.

 

2. How to avoid or add empty space between blocks?

We have an option to add empty space between the blocks. And it can help us to make a good looking web layout. Because margin & padding is most important for design. And we can manage this empty space with this empty space element of WPBakery page builder.

 

How to make post block like box?

1. How to make post block like a box style?

 

Want to post block like this post block? Okay, Edit your post block and select Yes from“Do you want Border?”

 

2. How to make post block like a box style with background color?

 

Want to post block like this post block? Okay, Edit your post block and select Yes from“Do you want Border?”. After clicking on Yes button you can see the Block Border Color and Block Background Color. So now you can change the border and background color for this post block.

 

How to make box style page?

1. How to make box style for specific pages?

If you want to make a page boxed style which page will contain all content in container. With your necessary settings, You just click on “Yes” radio button under Do You Want Box Style? and Publish/Update page. Now this page will be boxed styled page, and it will work only for current page. 

2. How to make box style for full website?

Don’t worry about it. You have an option to make box style for whole website, which will make your whole website boxed styled. Just make a change ON/OFF switch from Appearence > Theme Options > General “Do You Want Box Style?”

 

How to make Black style page?

1. How to make black background style for specific pages?

To make balck style for specific page, You need to change body background color under Body Background Color and Publish/Update the page. Now this page will convert within black background style. And now you may need to change addons color style according the design which you want to make. Obviously its only not for black style, you can choose any kind of background color

 

2. How to make black background style for full website?

Need to change body background for all pages? You have an option to change body background for whole website. Just choose a background color from Appearence > Theme Options > General “Website Global Body Background”

 

Note: For example, When choose a color from Appearence > Theme Options > General “Website Global Body Background”. It will work for all pages but if individually pages already choose different background color from Body Background Color. At now current page background color will show for this page from Body Background Color.

Creating Mega Menu

Setup Mega-Menu

1: Once The Pantograph Extensions plugin is activated Mega Menu is available in your admin panel dashboard.

2: Enable WPBakery for Mega Menu

a. Navigate to WPBakery > Role Manager
b. In Post Types choose ‘Custom’ and then make sure mega_menu is checked.

 3: Now add mega menu item in Main Menu from the Appearence>Menus and click on Screen Options to expand the options. And check the Mega Menu and CSS Classes item. And select Main Menu from Select a menu to edit: and press Select button.

4: Now you see the Mega Menu on the left side; you can select this mega menu item and click on the Add to Menu button. Drag the mega menu item and use it as a child menu for a parent menu. In the parent menu need to expand and add css class ‘dropdown megamenu’

Finally, Save Menu from right side.