How to Edit Imported Demo Site

Well, coming up here, you might have successfully imported the ColorMag demo to your WordPress website. Now, you might be wondering how to edit the demo content or replace the demo content, images, Header, Footer, and more with your own.

Most settings can be achieved via the Customizer option available within the theme. To get the customizer, navigate to WordPress Dashboard > Appearance > Customize. You will be redirected to the customizer interface, where you will get the site preview on the right side and the customizer menu on the left. You can choose the different options available on the customizer menu for customizing your site.

ColorMag Site with Customizer Option
ColorMag Site with Customizer Option

Go through the following links to see how each section is customized, as well as the options provided by this theme in detail:

  • Global – It contains the necessary settings such as Colors, Site layout, Typography options for the Colormag site.
  • Front Page – It contains the settings for the Frontpage of your site, such as Unique Post system, Changing View All text, etc.
  • Header – All the settings related to the header section, such as Site Logo, Header Top Bar, Primary Menu, are available in the Header section.
  • Footer – All the settings related to the footer section, such as Footer Widget style Footer Bottom Bar are available in the Footer section.
  • Additional – Options such as customizing the social icons, Integration to APIs are available under the Additional section.
  • Widgets – It includes all the settings of the widgets that are added on the ColorMag site.

Editing the Home Page of ColorMag Demo #

After importing the demo, it is necessary to change the existing content and replace it with a new one. Once you have imported the ColorMag demo, all the contents and images get imported to your site.

ColorMag theme comes with various demos for different sites. In this guideline, we take one of the ColorMag demos with step by step explanation on editing the content after you have imported it.

Let’s get started by editing the top header of the homepage of the ColorMag theme.

Top Bar #

Top-Bar Section
Top-Bar Section

The Top Bar of the ColorMag theme contains the Date, Breaking News Widget, and Social Icons by default. Besides these options, you can also add the Menus to the Top Bar section.

For editing the Top Bar navigate to WordPress Dashboard > Appearance > Customize > Header > Top-Bar. You can change all the necessary settings from the option available.

Primary Header #

The Header section of the ColorMag comes with Site-Logo (left) and Advertisement widget (Right). For customizing the Site Logo navigate to WordPress Dashboard > Appearance > Customize > Header.

Customizing Site Logo
Customizing Site Logo

Similarly, navigate to WordPress Dashboard > Appearance > Customize > Widgets > Header Sidebar for changing the Ads appearing on the right side. Add the TG: 728×90 Advertisement widgets inside the Header Sidebar or any other Advertisement widgets.

Customizing-Advertisement-Widget
Customizing-Advertisement-Widget

Primary Menu #

Primary Menu Customization
Primary Menu Customization

The primary menu section in ColorMag appears just below the primary header section. You can customize the primary menu from WordPress Dashboard > Appearance > Customize > Header > Primary Menu.

Under the primary menu section, you will find the customization options for the primary menus like Colors, Typography options, and more.

Content #

ColorMag themes have many widgets but all the widgets are not used on the site. Likewise, in the demo, we have not included all the widgets available with the ColorMag theme. These widgets can be added or deleted upon your site requirements.

In this guideline, we will be showing you both the methods of editing the imported widgets and adding the new widgets to your site.

  1. Editing Existing Widgets
  2. Adding New Widgets

Editing Existing Widgets #

Once you have imported the demo, you can see the content on your site. These contents are added to your site via the widgets. In this section, we will be showing you each section of the theme imported via demo.

  • Front Page: Slider Area:
The Front Page: Slider Area
The Front Page: Slider Area

The Front Page: The slider Area helps you display the slider on the homepage of the ColorMag theme. To display the slider, you will need to use the TG: Featured Category Slider, which will help you display the latest post or display the slider via category.

Customizing The Front Page: Slider Area
Customizing The Front Page: Slider Area

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Front Page: Slider Area.

  • Front Page: Area Beside Slider:
Front Page: Area Beside Slider
Front Page: Area Beside Slider

This section appears just beside the Front Page: Slider Area. It uses the TG: Highlighted Posts widgets to display the latest post or via the selected category in the widget.

Customizing Front Page: Area Beside Slider
Customizing Front Page: Area Beside Slider

For adding the widgets inside the section, navigate to WordPress Dashboard >Appearance > Widgets and select the Front Page: Area Beside Slider.

  • Front Page: Content Top Section:
Front Page: Content Top Section
Front Page: Content Top Section

It appears just below the Front Page: Slider Area and FrontPage: Area beside the slider section. Inside the section, we have TG: Featured Posts (Style 4), TG: Featured Posts (Style 1), TG: Featured Posts (Style 7), TG: Featured Posts (Style 6), widgets in the ColorMag demo, but you can use other feature post styles to display the latest post or post via category.

Customizing  Front Page: Content Top Section
Customizing Front Page: Content Top Section

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Front Page: Content Top Section.

  • Front Page: Content Middle Left Section:
Front Page: Content Middle Left Section
Front Page: Content Middle Left Section

Just below the Front Page: Content Top Section on the left lies the Front Page: Content Middle Left Section. We have included the TG: Featured Posts (Style 2) on the ColorMag demos inside the section.

Customizing Front Page: Content Middle Left Section
Customizing Front Page: Content Middle Left Section

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Front Page: Content Middle Left Section.

  • Front Page: Content Middle Right Section:
Front Page: Content Middle Right Section
Front Page: Content Middle Right Section

Just below the Front Page: Content Top Section on the Right lies the Front Page: Content Middle Left Section. We have included the TG: Featured Posts (Style 2) on the ColorMag demos inside the section.

Customizing Front Page: Content Middle Right Section
Customizing Front Page: Content Middle Right Section

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Front Page: Content Middle Right Section.

  • Front Page: Content Bottom Section:
Front Page: Content Bottom Section:
Customizing Front Page: Content Bottom Section

The Front Page: Content Bottom Section lies just below the Front Page: Content Middle Section. Inside this section, we have used the TG: 728×90 Advertisement widgets. Depending on your site requirements, you can use other widgets available within the ColorMag Theme.

Customizing Front Page: Content Bottom Section
Customizing Front Page: Content Bottom Section

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Front Page: Content Bottom Section.

  • Advertisement Above the Footer:

This section appears below the Front Page: Content Bottom Section. It helps display different ads on your site. In addition, you can use the other advertisements widgets available within the ColorMag theme for displaying the ads.

  • Right Sidebar:
Right Sidebar
Right Sidebar

The Right Sidebar refers to the section on the right side of all the above sections. Once you Navigate to the Right Sidebar section, you will see different widgets like TG: Breaking News Widgets, TG: 300×250 Advertisement, TG: Featured Posts (Style 2), TG: Tabbed Widget, TG: 125×125 Advertisement, TG: Random Posts Widget. You can add or delete the widgets available according to the site requirements.

Customizing Right Sidebar
Customizing Right Sidebar

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Right Sidebar Section.

Adding New Widgets #

Well, some of the widgets are not added in the demo of the ColorMag theme. In this case, you can add the available widgets of the ColorMag theme to your site upon the requirements.

In the example below, we have added a widget to the Front Page: Top Full-Width Area of the ColorMag theme. If you have noticed, the section does not appears while importing the demo. So here we are showing you to add the widgets to the different sections of your site.

  • Front Page: Top Full-Width Area:

The Front Page: Top Full-Width Area appears just below the Primary menu section. In this section, you can add Images, Text, Blocks, or any other widgets.

Front Page: Top Full Width Area Section
Front Page: Top Full-Width Area Section

In the demos of the ColorMag, we have not displayed the widget, but you can check the image above regarding the position of the Front Page: Top Full-Width Area on the site.

Customizing Front Page: Top Full-Width Area Section
Customizing Front Page: Top Full-Width Area Section

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Front Page: Top Full-Width Area.

By following the method you can add the widgets which are not available while importing the demo of the ColorMag theme.

The Footer is the section of content at the very bottom of the site. Right below the Advertisement Above the Footer section, you can find different sections customizing the Footer for your theme.

Footer Sidebar Upper
Footer Sidebar Upper
Footer Sidebar Below
Footer Sidebar Below

For adding the widgets to the footer area, navigate to WordPress Dashboard > Appearance > Widgets, where you will find many sections as explained below:

  • Footer Sidebar One (Upper): The Footer Sidebar One (Upper) just appears on the left side at the starting of the Footer area. In the demos, you can find the TG: Featured Posts (Style 2) widgets. However, you can use other widgets according to the site requirements.
Customizing Footer Sidebar One Upper
Customizing Footer Sidebar One Upper

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar One (Upper) Area.

  • Footer Sidebar Two (Upper): The Footer Sidebar Two (Upper) just appears in the Middle of the Footer area. In the demos, you can find the TG: Random Posts Widget. However, you can use other widgets according to the site requirements.
Customizing Footer Sidebar Two Upper
Customizing Footer Sidebar Two Upper

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar Two (Upper) Area.

  • Footer Sidebar Three (Upper): The Footer Sidebar Three (Upper) just appears at the Third Place of the Footer area. In the demos, you can find the TG: Featured Posts (Style 3). However, you can use other widgets according to the site requirements.
Customizing Footer Sidebar Three Upper
Customizing Footer Sidebar Three Upper

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar Three (Upper) Area.

  • Footer Sidebar One (Below): The Footer Sidebar One (Below) just appears on the left side below the Footer Sidebar (Upper) area. In the demos, you can find the Text widget which is loaded with Title, Content, and ColorMag Logo.
Customizing Footer Sidebar One Below
Customizing Footer Sidebar One Below

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar One (Below) Area.

  • Footer Sidebar Two (Below): The Footer Sidebar Two (Below) lies next to the Footer Sidebar One (Below) area. In the demos, you can find the navigation menu (Useful Link) section which you can change and replace with other widgets.
Customizing Footer Sidebar Two Below
Customizing Footer Sidebar Two Below

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar Two (Below) Area.

  • Footer Sidebar Three (Below): The Footer Sidebar Three (Below) lies next to the Footer Sidebar Two (Below) area. In the demos, you can find the navigation menu (Other Themes) section which you can change and replace with other widgets.
Customizing Footer Sidebar Three Below
Customizing Footer Sidebar Three Below

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar Three (Below) Area.

  • Footer Sidebar Four (Below): The Footer Sidebar Four (Below) lies next to the Footer Sidebar Three (Below) area. In the demos, you can find the Text widget which is loaded with Title, and Content.
Customizing Footer Sidebar Four Below
Customizing Footer Sidebar Four Below

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar Four (Below) Area.

  • Footer Sidebar Full Sidebar: It displays the widgets in a single column all over the footer area. You can use any widgets available.
Footer Sidebar Full Sidebar
Footer Sidebar Full Sidebar

For adding the widgets inside the section, navigate to WordPress Dashboard > Appearance > Widgets and select the Footer Sidebar Full Width Area.

Customizing Footer Sidebar Full Sidebar
Customizing Footer Sidebar Full Sidebar

Once you have set the widgets in the footer area, you can follow the guideline for customizing the footer area: Customizing Footer Area.

Just Below the Footer section, there lies the Footer Bottom Area. Generally, it consists of Copyright information, Social Icons, and Scroll To Top Button.

Footer Bottom Bar
Footer Bottom Bar

Note: We have explained the steps above by taking an example of the ColorMag Pro demo. If you are using other demos, you can follow a similar method as explained above for editing your imported demo content.

Scroll to top