ūüõć Black Friday Deals ūüõć Get 40% off on all our Premium Themes. ‚ú®Limited to 100 Users Only‚ú® Coupon Code: BF2021

This documentation will guide you through the installation, configuration and customization option of the theme.

If you have any questions or need any assistance related to the theme, feel free to open a support ticket. Our support team will be more than happy to help you out.

Theme Installation

Installation via FTP/cPanel

  • Download a copy of Viral Mag zip file.
  • Save the downloaded theme zip file in your hard drive.
  • Extract the downloaded zip file you will find a folder with style and other theme files inside it.
  • Now Connect the FTP server using the FTP details and copy the extracted folder to ‚Äėsite-name/wp-content/themes/‚Äô path.
  • Now go to the¬†Dashboard > Appearance > Themes.
  • You‚Äôll see the¬†Viral Mag¬†theme in the theme dashboard.
  • Activate¬†the theme.

Install via WordPress Dashboard

To install the theme via WordPress Dashboard follow these steps:

  • Go to Dashboard > Appearance > Themes.
  • Click on Add New button then search for the Viral Mag keyword in the search field.
  • Hover over the Viral Mag theme from the search result and click on the Install button.
  • Once installed activate the theme.

Import Demo Content

Viral Mag theme comes with a one-click demo import feature. It will allow you to install the demo data in a single click and save your time as you won’t have to build your website from scratch.

To install the demo data on the website:

  • Go to¬†Appearance > Viral Mag Settings.
  • On the right side of the page, you will see a¬†Demo Importer Section. Click on the ‚ÄúInstall Demo Importer Plugin‚ÄĚ button.

  • After the plugin is installed and activated, click on the ‚ÄúGo to Demo Importer Page‚ÄĚ
  • You will land on the HashThemes¬†OneClick Demo Importer Page¬†where you will see a list of free and premium demos.

  • You can directly install the free demos. While for the premium demos, you need to purchase the pro version of the theme ‚ÄstViral Pro.
  • Click on the ‚ÄúPreview‚ÄĚ button to get a quick view of the demo and the ‚ÄúInstall‚ÄĚ button to install the demo.
  • On clicking the¬†‚ÄúInstall Button‚Ä̬†a popup will appear that will show the list of required plugins for demo import and to reset your website. If you do not have important content then it is recommended to reset the website so that demo import works flawlessly. Resetting websites will delete all your content.

  • If you have no problem resetting your website then check the ‚ÄúReset Website‚ÄĚ option and click on the ‚ÄúImport Demo‚ÄĚ button.
  • The demo installation window will appear that will install all the required contents like XML content, customizer settings, widgets, and other required contents.
  • Congratulation, the demo data is successfully installed on your website. Now you can view your imported website.

You can also check out our video tutorial for a better understanding of how to import demo content on your website using the HashThemes Demo Importer Plugin:

Home Page Setup

Setting Home Page with Elementor

Viral Mag is an Elementor based WordPress theme that allows you to create a static homepage from the Elementor page builder.

To set up the homepage using Elementor Page Builder, follow these step:

  • Go to¬†Page > Add New¬†to create a new page.
  • Set¬†Title¬†for your new page and choose the page template¬†Elementor Full Width.
  • Once done, click on the¬†Publish¬†button to save changes.

  • Now go to¬†Settings > Reading to assign your Elementor homepage.
  • Inside the¬†Your homepage displays set the option to A static page and choose the page you have created using the Elementor Full Width page template from the Front Page drop down list.

  • Once done, click on¬†Save Changes button.
  • Now go to Viral Mag Settings > Recommended Plugin¬†to install¬†Elementor¬†and¬†Hash Elements¬†plugin.

  • Then, edit your newly created page and click on ‚ÄúEdit with Elementor‚ÄĚ to create your homepage from Elementor.

  • Drag and Drop different elements that you want to add on your homepage.

  • Once done, click on the ‚ÄúUpdate‚ÄĚ button to save changes.

Setting Your Latest Post As Front Page

In the above step, the post page will be entirely overwritten by the featured homepage of the theme. So, if you want to a post page on your featured homepage, follow these steps:

  • Go to¬†Settings > Reading.
  • Inside the¬†Your homepage displays¬†set the option to¬†Your latest posts.
  • Then, set the number of blogs that you want to display on your homepage.

  • Click on¬†Save Changes.

Template Color Setup

Before setting up anything, everyone wants to set the primary color of the theme. Viral Mag allows you to choose from unlimited sets of color for your website through color picker. To set the theme primary color, follow these steps:

  • Go to¬†Appearance > Customize > Color Settings.
  • Click on¬†Select Color¬†and pick the color of your choice.

  • Click on the ‚ÄúPublish‚ÄĚ button to save changes.

General Settings

There are always few things that you will want to set up before adding any content to your website. Accordingly, Viral Mag also has a group of general settings under this heading:

The general settings include

  1. Background Image
  2. General Option

Background Image

The Background Image option allows you to choose the custom background image and background color of the website. To configure the background image of your website, follow these steps:

  • Go to¬†Dashboard > Appearance > Customize.
  • Go to¬†General Settings > Background.
  • Now choose the back.

General Option

The theme provides you the option to either set full-width layout or boxed layout of your website. To set the layout of your site, you need to follow these steps:

  • Go to¬†Dashboard > Appearance > Customize.
  • Go to¬†General Settings > General Option.
  • Now Choose either a Full-Width Layout¬†or¬†Boxed Layout¬†as per your requirement.

  • Also, set the container width and sidebar width of your website.
  • Besides, you can also enable/disable the page title, breadcrumb, and back to top button.
  • Once done, click on¬†Publish¬†button.

Header Settings

Viral Mag theme allows you to configure each and every element of the header from the header layout to header elements and their design.

Logo & Favicon

To upload the site logo, follow these steps.

  • Go to¬†Appearance > Customizer > Header Settings > Logo & Favicon.
  • Click on the¬†Select Logo¬†button and choose the logo from the media library.
  • You can also add the¬†Site Title and Site Tagline¬†and choose its color.
  • Click on¬†Select Site Icon¬†to upload the favicon.

  • Once done,¬†Publish¬†the changes.

Header Layout

Viral Mag comes with 2 different header layouts to choose from. You can choose any of them as per your choice. To choose the header layout:

  • Go to¬†Appearance > Customizer > Header Settings.
  • Click on the Header Option.
  • Now, choose the best matching one for your website.

  • Also, set the logo height and the menu responsiveness of the website.
  • Once done, click on Publish button to save change.

Header Top Bar

In the header top bar settings, you can enable/disable top header, configure the color setting, set the top header height. You can also what content to display in the left and right top header. You can either display social icon, menu, widget, custom HTML text or ticker on the top bar.

  • Go to¬†Appearance > Customizer > Header Settings.
  • Click on¬†Header¬†Option.
  • Click on the¬†Top Bar¬†tab.
  • Enable/Disable the¬†Top Header.
  • If enabled, choose the¬†top header background color,¬†text color¬†and¬†anchor color¬†for the top header.
  • Also, set the¬†header height.
  • Set the¬†‚ÄúDisable in mobile‚Ä̬†option either to show or hide it in the mobile device. If disabled, the¬†top header¬†will not show on the screen smaller than 768px.

Choose what content to display in the left and right top header. You can choose either to display Social Icon, Menu, Widget, or HTML content.

If you have chosen Social icons, follow the below steps

  • Click on the¬†Social Icon¬†in the description text.
  • Click on¬†Add New¬†to add social icons
  • Choose the icon and add the link
  • Follow the steps again to add more social icons

If you have chosen Menu, follow the below steps

  • Go to¬†Appearance > Menu.
  • Create a new menu
  • Enter the Name of the Menu and click on¬†Create Menu¬†button
  • Now add the¬†menu items¬†and click on¬†Save Menu.
  • Now go back to¬†Appearance > Customizer > Header Settings.
  • Click on¬†Top Header Tab
  • In the¬†Select Menu¬†option, the newly created menu will appear. select it

If you have chosen Widget, follow the below steps

  • Go to¬†Appearance > Widget.
  • Select the¬†Widget Area¬†from the drop-down menu.
  • Add the widgets to the¬†Widget Area¬†that you had selected for the top header
  • In case you need to create a¬†new widget, you can go through the article:

If you have chosen HTML Text, follow the below steps

  • Add your text in the¬†HTML Text¬†field. This field also supports¬†HTML¬†so you can add formatting to the text and even¬†HTML¬†elements.

Creating General Menu

1)Defining a Menu

You must define a menu before you can add items to it.

  • To create a menu, go to¬†Appearance > Menus¬†to bring up the menu option.
  • Click on¬†create a new menu.
  • Give the name to your new menu.
  • Click on¬†Create Menu¬†button to create the menu.

Your new custom menu is now defined.

2) Adding Items to a Menu

You can add different link types into your menu, these are split between panes left of the menu you’re currently editing.

  • Locate the pane entitled Pages.
  • Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  • Select the Pages that you want to add by clicking the checkbox next to each Page‚Äôs title.
  • Click the¬†Add to Menu¬†button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  • Click the¬†Save Menu¬†button once you‚Äôve added all the menu items you want.

After you have added the menu items, select the display location of your menu to ‚ÄúPrimary Menu‚ÄĚ and then click on¬†Save Menu.

Alternatively, you can create the menu and add its item directly from the customizer.

  • To create the menu from the customizer, go to¬†Appearance > Customize > Menus¬†to bring up the menu options.
  • Click on¬†create a new menu.
  • Give the name to your new menu.
  • Choose the location of the new menu.
  • Click on the¬†Next¬†button to continue.
  • Now add the menu items as per your need and set the menu location to¬†Primary Menu.
  • Once done, click to¬†Publish¬†to save.

3) Configuring the menu

After you have created and added the menu on your website:

  • Go to¬†Appearance > Customize > Header Option.
  • Click on¬†Main Menu¬†tab.
  • Enable/Disable¬†Sticky Header.
  • Choose the¬†Header Height.
  • Show/Hide¬†Search Button, Social Icons and¬†Off-Canvas Menu.
  • Choose¬†Header Background Color and Header Bar Background Color for Mobile.
  • Enable/Disable¬†Top and Bottom Border.
  • If enabled choose¬†Border Color.

You can make the menu responsive after certain px resolution size. To do that, you can go through the article: Enable Responsive Menu

Typography Settings

With Typography Settings, you can change the typography parameters like Font Family, Font Style, Text Transform, Text Decoration, Font Size, Line Height and Font Color of each and every element of the website.

Go to Appearance > Customize > Typography Settings.

There are 7 setting options for the typography.

1. Body Typography

This typography setting applies to the body content. Choose the best matching font, configure its style/weight, text transform, text decoration, size, line height, and letter spacing. You can also pick your own font color.

2. Menu Typography

This typography setting applies to the menu text. Choose the best matching font, configure its style/weight, text transform, text decoration, size, line height, and letter spacing.

3.  Page Title

This typography setting applies to the title of pages, posts, and archives. Choose the best matching font, configure its style/weight, text transform, text decoration, size, line height, and letter spacing. You can also pick your own font color.

4. Headers (H1, H2, H3, H4, H5, H6)

This typography setting applies for all the heading with HTML tag H1, H2, H3, H4, H5, H6. Choose the best matching font, configure its style/weight, text transform, text decoration, leigh height, and letter spacing.

5. Front Page Block Title

This typography setting applies to the block titles that appear on the front page. Choose the best matching font, configure its style/weight, text transform, text decoration, size, line height, and letter spacing.

6. Front Page Post Title

This typography setting applies to the post titles that appear on the front page. Choose the best matching font, configure its style/weight, text transform, text decoration, size, line height, and letter spacing.

7. Widget Title

This typography setting applies for sidebar and footer widget titles. Choose the best matching font, configure its style/weight, text transform, text decoration, size, line height, and letter spacing.

Blog/Single Page Settings

Blog Page Settings

By default, WordPress displays your content in a blog format on the homepage. But you can set a custom homepage as we described earlier and a separate page for blog posts. The blog setting applies to the blog page either you set it on the homepage or set a separate page for the blog. This setting also applies to the archive and search page. To configure the blog/archive page:

  • Go to¬†Appearance > Customize > Blog/Single Page Settings.
  • By default, the blog tab will be active. If the block tab is not active, click on the¬†Blog Page¬†tab.
  • Choose any of the 2 available layouts for your blog archive page.
  • If you want to exclude any category on the blog archive page, check the category present in¬†Exclude Category. The checked category won‚Äôt be included on the blog archive page.

  • You can change the text that links to the full detail page. For that, change the¬†Read More Text¬†option.
  • Enable/Disable¬†Posted Date, Author, Comment, Category, Tag.

  • Once done, click on the¬†‚ÄúPublish‚Ä̬†button to save changes.

Single Post Settings

The theme comes with 2 different single post layouts with tons of configuration options.  To configure the post page:

  • Go to¬†Appearance > Customize > Blog/Single Page Settings.
  • Choose the single post layout.
  • Enable/Disable¬†display category, post author, posted date, comment counts, post view, reading time,¬†and¬†tags.
  • You can enable/disable the¬†author box to present the detail about the author, previous/next post to display the previous post and next post, and post comments.

  • Once done, click on the¬†‚ÄúPublish‚Ä̬†button to save changes.

The theme provides you the option to change the sidebar position of different pages and posts of the website. It will help you to display the widgets in a unique way.

To configure the sidebar settings:

  • Go to¬†Appearance > Customize > Sidebar Settings.
  • Enable/Disable Sticky Sidebar Option.
  • Choose the most suitable sidebar positions for pages, posts, archive page, blog page, search page, and¬†shop page.

  • Now go to the¬†Styles¬†tab and choose the most suitable sidebar style.

  • Once done, click on the ‚ÄúPublish‚ÄĚ button to save changes.

The theme provides an option to choose from 5 different styled footer column layouts. You can also upload the image for the footer or set the background color, border color, title color, text color, and anchor color. To configure the footer settings:

  • Go to¬†Dashboard > Appearance > Customize > Footer Settings.
  • Choose the¬†Footer Column layout from the available 5 styles.
  • Add the¬†Copyright Text. You can add any text you want. Leave it blank if you do not want to add anything.

  • Now, Go to styles and set the Footer Background Image.
  • Don‚Äôt upload the¬†Footer Background Image¬†if you do not want to show the image in the background. Instead set the¬†Footer Background Color, Footer Border Color, Footer Title Color, Footer Text Color, and Footer Anchor Color.

You can add different widgets in the footer section. To add widgets on the footer:

  • Go to¬†Appearance > Widgets.
  • Drag and Drop the available widgets on the¬†Footer Widget Area.

‚ÄĒ THE END ‚ÄĒ