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.

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 #

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.

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.

Primary Menu #

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 #

All the content below the menu and above the Footer below is the content section of the ColorMag site. The content section of the ColorMag is designed through different widgets. So you will not require any page builder plugin to design the content area. It can be done using the widgets.

For replacing the contents, navigate to WordPress Dashboard > Appearance > Widgets. Now you will see a list of areas of your site like the Right Sidebar, Slider Area, Content Top Area, Footer Area, etc. These are all the locations of your 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: 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.

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:

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.

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:

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.

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:

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.

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:

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.

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:

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.

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:

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.

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.

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.

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.

Footer Section #

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

Footer Bottom 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.

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.