Topweb Documentation v1.0

Note: Support is node via email at websitedesigntemplates3@gmail.com

Theme Installation

In order to install the theme you need to have a WordPress copy already installed on your own server. (Fore more details: How to Install WordPress and First Steps With WordPress)

1. After Downloading this package you have to extract first and then need to install the theme
2. Log in to your WordPress Dashboard
3. Go to Appearance > Themes then click to Add New
   
4. Click on Upload Theme .
   
5. Upload your downloaded topweb.zip file and then click on Install Now
   
6. When the installation complete, click Activate to activate your theme.
   
7. Done.

Plugin Installation

After the theme is installed a message box will appear requesting you to install required plugins

Click Begin installing plugins. You will be navigated to Install Required Plugins page.

Next, check boxes to select all the plugins, select the bulk action of install from the dropdown box and then click the Apply button.

When finishing, you will got a confirmation notice that your plugins are activated.

Demo Installation

Your Topweb installation will be ready with data on our demo site, and you can use it as a template to develop your own website.

Have a cup of coffee. The process is within minutes.

When finishing, it should look like this:

Theme Customizing

Go to Appearance > Customize and import Your file then click Import. (You'll get that file from the themes/topweb/sample-data/customizer-data.dat)

Settings Update

1. Go to Elementor → Settings in your admin sidebar and click check the options below. Then click Save Changes.
   
2. Now Import the Elementor Settings from Import Kit (click on Start Import):
   
3. Click Now Import the Elementor Settings Import Kit, Drag and drop elementor-kit.zip file here or add it with Select file button and click on next button right-bottom corner button.(wp-content\themes\topweb\sample-data\elementor-kit.zip)
   
4. Click on Next Button.
   
5. Click on Next Button and Import the Site Settings.
   
6. Done it! and close the elementor settings now.
   
7. Click on Elementor Settings > Features tab and update the Flexbox Container Settings - Make it Inactive.
   

Import / Export

Go to Topweb Options > Import/Export and import Your file then click Import. (You'll get that file from this folder data_export/themes/topweb/sample-data/redux-setting.json)

Blog Settings

Go to Topweb Options > Blog Settings and make your settings then click Save Changes.

404 Settings

Go to Topweb Options > 404 Settings and make your settings then click Save Changes.

Header Settings

Go to Topweb Options > Header Settings and make your settings then click Save Changes.

Footer Settings

Go to Topweb Options > Footer Settings and make your settings then click Save Changes.

Navigation & Menus

1. Go to Appearance → Menus in your admin sidebar and click Primary Navigation Menu option. Then click Save Menu.
   
2. When finishing, it should look like this:
   

Setting Up Front Page

Go to Setting > Reading and choose the page you like to be your front page then click Save changes.

Setting Up Permalinks

Go to Setting > Permalinks and select one from common settings then click Save changes.

Change Theme Colors

You can easily chage the theme color from the admin side. Go to Theme Options > Colors. Set your Primary Color, Secondary Color and Dark Color. After change the color if you want to reset color then click on Reset Section button to the right corner and Save Changes.

Note: Make sure, When you change the color from the Admin side, styles.css (topweb/css/styles.css) will be generated and overwrite. If you make any changes in the styles.css (topweb/css/styles.css) you will lose your hard work changes!

Preview Image After Change the Color

Customization - Simple Way

If you prefer to work with theme as a static source without scss, We recommend that you add your code into this file (topweb/style.css) so whenever theme update is available and you update the theme, You will not lose your hard work!

Font Awesome Icons

Font Awesome includes more than 600 icons that can be easily used on your site. For example you want the download link with the PDF icon.

1. Go to Font Awesome Icons gallery and find the one you need. I our example it is file-pdf. Click the detail, then find and copy .
2. Place the copied line to your link: Download File

Themify Icons

Themify Icons includes more than 320+ icons that can be easily used on your site. For example you want the download link with the file icon.

1. Go to Themify Icons gallery and find the one you need. I our example it is file. Click the detail, then find and copy .
2. Place the copied line to your link: File

Bootstrap Utilities

Theme is using Bootstrap utilities very often. We think that it is better solution as writing all styles for every element into CSS file. It makes the style.css smaller and it is more flexible. You can find more about Bootstrap Utilities.

How to Create a New Page

For Make new page you can check below image:

Step 1: Pages > Add New

Step 2: Add page title

Step 3: Set your parent and Template

Step 4: Click Publish

Use Elementor To Build Page

Step 1: Choose Edit With Elementor to edit your page.

Step 2: Choose Add Element to start adding our premade elements to your new page.

How to Change Page Title

Step 1: Go to Pages > All Pages. Then point at the page you want to edit. Then click Quick Edit option.

Step 2: Edit the title as you want. Delete the current slug. Then click Update.

You can also edit some other options. If you want to edit more options, click Edit instead of Quick Edit.

How To Create Post, Project, Team, Service

Step 1: Navigate to Posts in your WordPress admin.

Step 2: Click on Add New to make a new post. Create a title and insert your post content in the editing field. You can use any of our short code builder elements inside the post.

Step 3: Add Categories from the right side. To assign it to the post, check the box next to the Category name.

Step 4: Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

Step 5: For a single image, click the first Featured Image Box, select an image and click “Set Featured Image”.

Step 6: Once you are finished, click Publish to save the post.

Note: Similar to post you can create service, team, project in the same way.

How To Create Category

Step 1: Post > Categories

Step 2: Name the category and fill to other section below.

Step 3: click Add New Category. Your new Category will aprear in the table of all category immediately.

Similar to Category, you can create a new Tag in the same way.

How To Add Widgets In Sidebar

Step 1: Appearance > Widgets. You can see all of the Sidebar here.

Step 2: Choose the Widgets you want and drag it to the Sidebar you want or click on it to choose the Sidebar.

In the case you want to delete its settings, drag it back.

How To Edit Widgets

1. click Appearance > Widgets. Choose a widget you want to edit.

2. Then choose its area as you wish and click Add Widget.

Then go to the right where you will notice a just-added widget. Type information and click Save.

Finally Widget setup done. See your site now

Contact Form

<div class="quform">
	<div class="quform-elements">
		<div class="row">
			<div class="col-md-6">
				<div class="quform-element form-group">
					<div class="quform-input">[text* your-name class:form-control placeholder "Your name here"]</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="quform-element form-group">
					<div class="quform-input">[email* your-email class:form-control placeholder "Your email here"]</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="quform-element form-group">
					<div class="quform-input">[text* your-subject class:form-control placeholder "Your subject here"]</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="quform-element form-group">
					<div class="quform-input">[number your-phone class:form-control placeholder "Your phone number here"]</div>
				</div>
			</div>
			<div class="col-md-12">
				<div class="quform-element form-group">
					<div class="quform-input">[textarea* your-message class:form-control placeholder "Tell us a few words"]</div>
				</div>
			</div>
			<div class="col-md-12">
				<div class="quform-submit-inner">[submit class:butn class:style-one class:fill "Send Message"]</div>
			</div>
		</div>
	</div>
</div>

Subscribe Form

<div class="quform newsletter-rounded w-95 w-sm-90 mx-auto ml-lg-0 newsletter-butn-icon">
	<div class="quform-elements">
		<div class="row">
			<div class="col-md-12">
				<div class="quform-element m-0">
					<div class="quform-input">
						[email* your-email class:form-control class:rounded-pill placeholder "Subscribe with us"]
					</div>
				</div>
			</div>
			<div class="col-md-12">
				<div class="quform-submit-inner">
					[submit class:btn class:btn-white class:text-primary class:m-0 class:px-4 class:border-0 "Send"]<i class="fas fa-paper-plane text-primary"></i>
				</div>
			</div>
		</div>
	</div>
</div>

Did not find an answer?

If you did not find an answer to your question, please feel free to contact us.

Email: websitedesigntemplates3@gmail.com

ThemeForest Account: WebsiteDesignTemplates

Version 1.0 – 21st May, 2024

• Initial Release