How to Edit Imported Demo Site

You may have successfully imported the Spacious demo into your WordPress website up to this point. Now, if you want to alter the demo, along with the content, images, header, and footer, this article will help you.

The Customizer feature included in the theme can be used to change the majority of settings. Please go to WordPress Dashboard > Appearance > Customize to use the customizer. You will be taken to the customizer interface, where the menu and site preview is located on the left and right sides, respectively. Select from the various choices listed on the customizer menu to modify your site.

Spacious 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, and Sidebar Layout options for the Spacious site.
  • Social Icons – It contains the settings for Social Icons on the top header of the Spacious theme.
  • Header – All the settings related to the header section, such as Site Logo, Header Top Bar, and Primary Menu, are available in the Header section.
  • Slider – It contains the settings for the Spacious slider along with the ways to customize it.
  • Footer – All the settings related to the footer section, such as Footer Widget style Footer Bottom Bar are available in the Footer section.

Editing the Home Page of Spacious Demo #

You might want to alter the current content and substitute new content after importing the demo. All text and images from the Spacious demo are added to your site once it has been imported.

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

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

Top Bar #

Top-bar in Spacious

The Top Bar of the Spacious theme contains the Social Icons, Contact Info, and Top Bar Menu by default.

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 Spacious comes with Site-Logo (left) along with a Search Bar and the Primary Menu (Right). For customizing the Site Logo navigate to WordPress Dashboard > Appearance > Customize > Header > Site Identity.

Customizing Site Logo

Similarly, navigate to WordPress Dashboard > Appearance > Customize > Widgets > Header Sidebar to customize the search bar’s title.

Customizing Search Bar

Primary Menu #

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 #

Different widgets can be added to the Spacious theme, but all are not added to the site. The widgets can be added and removed based on your requirements.

This instruction will demonstrate how to update the imported widgets and add new widgets to your website.

  1. Editing Existing Widgets
  2. Adding New Widgets

Editing Existing Widgets #

In this section, we will demonstrate how to edit the widgets that have been imported to your site after the demo import.

  • Business Top Sidebar:
Business Top Sidebar Content

The Business Top Sidebar Area displays the Call To Action widget along with the Services widget of the Spacious theme. The CTA widget allows you to add the CTA text and button, whereas the Services widget allows you to display the contents of the pages of your site along with their featured images.

Customizing Business Top Sidebar

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

  • Business Middle Left Sidebar:
Business Middle Left Sidebar

This section appears just below the Business Top Sidebar Area. It uses the TG: Featured Single Page widget to display one of the existing pages of your site.

Customizing Business Middle Left Sidebar

For adding the widgets inside the section, navigate to WordPress Dashboard >Appearance > Widgets and select the Business Middle Left Sidebar.

  • Business Middle Right Sidebar:
Business Middle Right Sidebar

It appears just beside the Business Middle Left Sidebar area and below the Business Top Sidebar. Inside the section, you will see the TG: Testimonial widget, but you can also use other widgets of your choice.

Customizing Business Middle Right Sidebar

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

  • Business Bottom Sidebar:
Business Bottom Sidebar

Just below the Business Middle Left and Right Sidebar lies the Business Bottom Sidebar. We have included the following widgets in this section:

  • TG: Featured Widget
  • TG: Team
  • TG: Pricing Table
  • TG: Fun Facts
  • TG: Our Clients
  • TG: Featured Posts
Customizing Business Bottom Sidebar

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

  • Right Sidebar:
Right Sidebar

The Right Sidebar refers to the section on the right side of the site on all the pages except the Home Page. Once you Navigate to the Right Sidebar section, you will see different widgets like Search Bar, Recent Posts, Archives, and Categories. You can add or delete the widgets available according to the site requirements. The screenshot above shows the right sidebar of the blog post “Hello World”.

Customizing Right Sidebar
  • Footer Sidebar One:

This section refers to the first column of the footer area. It appears just below the content area, and the widget that has been added is Recent Posts Extended.

Footer Sidebar One

If you want to make changes to the existing Footer Sidebar One widgets, please navigate to WordPress Dashboard > Appearance > Widgets and select Footer Sidebar One location.

Customizing Footer Sidebar One
  • Footer Sidebar Two

This section refers to the second column of the footer area just beside Footer Sidebar One. The widget that is available here is the Text widget.

Footer Sidebar Two

Please navigate to WordPress Dashboard > Appearance > Widgets and select Footer Sidebar Two to make changes to the widget in this location.

Customizing Footer Sidebar Two
  • Footer Sidebar Three

It is the section beside Footer Sidebar Three and refers to the third column of the footer area. The widget that is available here is the Navigation Menu.

Footer Sidebar Three

This section can be customized by navigating to your WordPress Dashboard > Appearance > Widgets and selecting Footer Sidebar Three.

Customizing Footer Sidebar Three
  • Footer Sidebar Four

This section refers to the last column of the footer area, and the widget that has been added is again the Text widget.

Footer Sidebar Four

Please navigate to WordPress Dashboard > Appearance > Widgets and select Footer Sidebar Four to make changes to the widget in this location.

Customizing Footer Sidebar Four

Adding New Widgets #

While you can edit the already added widgets, some of the widgets are still available for use in the Spacious theme that has not been added during demo import. In this case, you can add the available widgets of the theme to your site as per your requirements.

In the example below, we have added a widget to the Footer Sidebar Full-Width area of Spacious. If you have noticed, there are no widgets added in this section after the demo has been imported. So we are going to show you how to add the widgets to it.

  • Footer Sidebar Full-Width

This section appears below the Footer Sidebar One, Two, Three, and Four sections. Below is the screenshot to show the position of that location:

Footer Sidebar Full Width

You can add the widget here in the following way:

  • Navigate to your WordPress Dashboard > Appearance > Widgets.
  • Click on the widget location Footer Sidebar Full Width.
  • Click on the Add Block button.
  • Select the widget of your choice from the widget’s list and add it to that location.
Adding a widget to Footer Sidebar Full Width Widget Location

You can similarly select your desired widget’s location and add the widgets of your choice to your site.

Scroll to top