×

Theme Documentation

How to Start

Welcome to the CGS Insurance Agency theme instruction page! It is simple and easy to understand. If any modification is required, we are open for suggestions. Let’s begin! The table of contents of this documentation is displayed on the left-hand side.

Theme Installation

You can install the themes with an ease! Once you have downloaded you should have a cgs-insurance-agency.zip file.

Upload Theme

  1. First, you need to log in to the WordPress Administration Panel.
  2. Then you have to go to Appearance >Themes.
  3. Next, you have to select ‘Add New’.
  4. Then, you have to click on ‘Upload Theme’.
  5. Click on ‘Browse’ and find ‘cgs-insurance-agency.zip’ theme on your PC.
  6. Choose ‘cgs-insurance-agency.zip’ and click ‘Install Now’.Using FTP

    You can use FTP client like FileZilla to connect with your web server.

  7. Unzip cgs-insurance-agency.zip to your Desktop screen.
  8. Using an FTP client to access your host web server, go to wp-content > themes and upload your new copy of your cgs-insurance-agency theme.

Activate the theme

  1. First, log into WordPress Dashboard with your login credentials.
  2. Select the Appearance panel and then Themes.
  3. You will be able to view the theme in the list.
  4. Then click on Activate option.
  5. The theme will be activated immediately.

Additional information: WordPress Codex – Using Themes

Active License key - Premium Theme

Once you have purchased and installed the theme, do not forget to activate your license Key to get regular update and support.

Menu

How to upload demo content?

Please follow the below instructions to upload the demo content:

Demo Content

  1. First, Go to dashboard.
  2. Click Tools -> Import
  3. Then, Install WordPress (Import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.)
  4. Run Importer
  5. Upload the Downloaded xml file.
  6. Lastly, select Submit.

How to setup homepage like demo?

First, you have to create and publish a new page.

Demo home

  1. Click on Settings > Reading > Your homepage displays
  2. Then set a page as “Front page” and another page as “Posts page” and finally save your settings.

Demo home 2

Setup Menu

Select Appearance > Menus.

From Menus, click “Add a menu” option and you will be able to create a menu.

Assign Display location to the created menu.

Menu

Additional information: WordPress Custom Menu

Add Logo and Favicon

Click CGS > Theme Option > General.

logo_favicon

Theme Options

CGS Themes comprises its own custom theme options. This is where you can have a control over fields like navigation settings, favicon, your logo and much more. These options can be accessed in the WordPress Dashboard menu under CGS > Theme Options.

General Settings

General Settings

Logo

Over here you will be able to upload your own logo file to appear in the header of every page of your website.

Favicon

Once you install an image here, it will add a favicon image to represent your site in browser address bars and bookmark menus.

Fixed Navigation Bar

The fixed navigation bar points to the navigation bar as it becomes fixed at the top of your screen when scrolling down the page. To provide more readable screen space, the menu bar will also shrink slightly upon scrolling. The navigation bar is enabled, by default.

Enable Cgs Gallery

You can add simple image galleries to your pages or posts with the WordPress media uploader which contains a Create Gallery feature. You can enable this option if you want to replace the default WordPress gallery style with the Cgs gallery style.

Color Pickers Default Palette

Over here you will be able to change the default color palette for all color pickers within the Cgs Builder and Visual Builder. You can set all the colors required for customizing your theme so that these same colors will be available throughout the building process.

Grab the first post image

Thumbnail images are created using custom fields, by default. However, if you rather use the images that are already there in your post for your thumbnail (and bypass using custom fields) you can activate this option. Once activated, thumbnail images will be initiated automatically using the first image in your post. Make sure the image must be hosted on your own server.

Blog Style Mode

By default, the theme shortens your posts on index/homepages automatically to create post previews. If you would like to show your posts in full on index pages like a traditional blog then you can activate this feature.

Shop Page & Category Page Layout for WooCommerce

In case if you are using WooCommerce integration, you can define which layout you want your shop to use on product and product category pages.

Google API Key

The Maps module works with Google Maps API and to function properly, a valid Google API Key is required. Before you use the map module, kindly make sure you have added your API key here. Click here to create your Google API Key.

Enqueue Google Maps Script

In your Cgs Builder Pages, you can disable this option to remove the Google Maps API script. It can upgrade compatibility with third-party plugins that also enqueue this script.

Please Note: Modules that count on the Google Maps API in order to function properly, such as the Maps and Fullwidth Maps Modules, will still be available but will not be able to function while this option is disabled (unless you manually add Google Maps API script).

Social Media Icons

Cgs helps you to place your social media links inside of your footer. Here you can have a control which social media icons you wish to display and where you would like them to link to.

Number of Products displayed on WooCommerce archive pages

You are eligible to designate how many WooCommerce products are displayed on the archive page. This option works from the Settings > Reading options in wp-admin.

Numbers of posts per page

State how many posts you would like to be displayed when a user visits a Category Page, an Archive Page, Search Results Page, or Tag Page.

Date Format

You can change the format of the date with this option. For further details, please refer to the WordPress codex here: Formatting Date and Time

Use excerpts when defined

This will allow the use of excerpts in posts or pages.

Responsive shortcodes

This option allows shortcodes to respond to various screen sizes.

Google Fonts subsets

It helps to enable Google Fonts for Non-English languages.

Back To Top Button

This one provides you the option to display a Back To Top Button (at the bottom right of your page) while scrolling.

Smooth Scrolling

It allows the smooth scrolling with the mouse wheel. Smooth Scrolling is also helpful when using anchor links to link to specific areas of the page.

Custom CSS

This is where you can put any custom CSS to customize your site. For extensive CSS modifications, we suggest you to always use a child theme.

Navigation

Navigation > Pages

Navigation Pages

Exclude pages from the Navigation Bar

In this window, all of your existing pages will appear. By default, each and every new page will appear in your navigation. If you wish you can uncheck any page here if you do not want to display a specific page or pages.

Show Dropdown Menus

Disable this feature, if you wish to remove the dropdown menus from the page’s navigation bar.

Display Home Link

When clicked, by default the theme creates a Home link that leads back to your blog’s homepage. In case if you are using a static homepage and have already created a page called Home to use, this will result in a duplicate link. In this case its mandatory to disable this feature to remove the link.

Sort Pages Links

Select how page links should be sorted here.

Order Page Links by Ascending/Descending

Mention in which order your sorted page links should appear.

Number of dropdown tiers shown

With this option, you are eligible to control how many tiers your page’s drop-down menu has. Once you the number it allows for additional menu items to be shown.

Navigation > Categories

Navigation Categories

Exclude Categories from the Navigation Bar

In this window, all of your existing pages will appear. Each and every new category will appear in your navigation by default. If you want you can uncheck any category page here if you do not want to display a specific category or categories.

Show Dropdown Menus

You can disable this feature if you wish to remove the dropdown menus from the categories navigation bar.

Hide Empty Categories

If a category has been created but is not being used by any posts, you can choose either or not to display it in your navigation. Empty categories are hidden, by default.

Number of Dropdown Tiers Shown

This option allows you to control how many tiers your page’s drop-down menu has. By increasing the number allows for additional menu items to be shown.

Sort Category Links

Select how category links should be sorted here.

Order Category Links by Ascending/Descending

Mention further in which order your sorted category links should appear.

Navigation > General Settings

Navigation General Settings

Disable top tier dropdown menu links

In some instances, users might want to create parent categories or links as placeholders to hold a list of child links or categories. In this case, it is not recommendable to have the parent links lead anywhere, but instead merely serve an organizational function. By allowing this option will remove the links from all parent pages/categories so that they don’t lead anywhere when clicked.

Alternative scroll-to-anchor method

Sometimes when you are going to use the CSS ID of a section to link directly to it from another page, the page’s final scroll position can be inaccurate. You can enable this option to use an alternative method for scrolling to anchors which can be more perfect than the default method in some cases.

Builder

Builder

Layout

Layout > Single Post Layout

Single Post Layout

Choose Which Items to display in the post info section

Over here you can choose which items can appear in the post info section on single post pages. In this area, the basic information about your post gets displayed, usually below the post title. The highlighted items shown below will be displayed.

Show Comments on posts

If you wish you can disable this option if you need to remove the comments and comment form from single post pages.

Place Thumbs on Posts

By default at the beginning of your post on single post pages, the thumbnails are placed. If you wish to remove this initial thumbnail image to avoid repetition simply disable this option.

Layout > Single Page Layout

Single Page Layout

Place Thumbs on Pages

Thumbnails are not placed on pages (they are only used on posts), by default. In spite of that, if you want to use thumbnails on posts you can go ahead. You just need to enable this option.

Show Comments on Pages

Comments are not placed on pages, by default, however, if you would like to allow people to comment on your pages you need to enable this option.

Layout > General Settings

General Settings

Post Info Section

In this section, you can choose which items to appear in the post info section on pages. In this area, usually below the post title, which displays basic information about your post. The highlighted items will be visible in the posts.

Show Thumbs on Index pages

Please enable this option to show thumbnails on Index Pages.

Ad Management

Ads

Enable Single Post 468×60 banner

By enabling this option will display a 468×60 banner ad on the bottom of your post pages below the single post content. Once it has been enabled you must fill in the banner image and destination URL below.

Input 468×60 advertisement banner image

Over here you can provide 468×60 banner image URL.

Input 468×60 advertisement destination url

Over here you can provide 468×60 banner destination URL.

Input 468×60 adsense code

Provide your Adsense code here.

SEO Management

SEO > Homepage SEO

Homepage SEO

Enable canonical URL’s

Canonical URL is the search engine friendly URL that helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and PageRank degradation. Sometimes it may happen that some pages may have different URL’s all leading to the same place.

Enable meta descriptions

Tick this box if you want to display meta descriptions on category/archive pages. The description is based on the category description you choose when creating/editing your category in wp-admin.

Choose title autogeneration method

In this section, you can choose how your titles on index pages are generated. You are eligible to change in which order your blog name and index title will be displayed, or you can remove the blog name from the title completely.

Define a character to separate BlogName and Post title

Over here you can change which character separates your blog title and index page name when using autogenerated post titles. Common values are | or –

SEO > Single Post Page SEO

Single Post Page SEO

Enable custom titles

The theme creates post titles based on the title of your post and your blog name, by default. If you desire to make your meta title different from your actual post title then you can define a custom title for each post using custom fields. It is mandatory to enable this option for custom titles to work, and you must choose a custom field name for your title below.

Enable custom description

If you wish to add a meta description to your post you can do so using custom fields. It is required to enable this option for descriptions to be displayed on post pages. You will be able to add your meta description using custom fields based off the custom field name you define below.

Enable custom keywords

If you wish to add meta keywords to your post you can do so using custom fields. It is required to enable this option for keywords to be displayed on post pages. You will be able to add your meta keywords using custom fields based off the custom field name you define below.

Enable canonical URL’s

Canonical URL’s helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and PageRank degradation. Few pages may have different URL’s all leading to the same place. For example, domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage.

Custom field Name to be used for title

When you mention your title using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom title you would desire to use.

Custom field Name to be used for description

When you describe your meta description using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom description you would desire to use.

Custom field Name to be used for keywords

When you describe your keywords using custom fields you should use this value for the custom field Name. The Value of your custom field should be the meta keywords you prefer to use, separated by commas.

If custom titles are disabled, choose autogeneration method

In case, you are not using custom post titles you can still have control over how your titles are generated. You will be able to choose in which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.

Define a character to separate BlogName and Post title

Here you are eligible to change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –

SEO > Index Page SEO

Index Page SEO

Enable custom title

The theme, by default. uses a combination of your blog name and your blog description, as mentioned when you created your blog, to create your homepage titles. However, if you wish to create a custom title then simply enable this option and fill in the custom title field below.

Enable meta description

The theme, by default, uses your blog description, as defined when you created your blog, to fill in the meta description field. In case you would like to use a different description then enable this option and fill in the custom description field below.

Enable meta keywords

This theme does not add keywords to your header. Many search engines don’t use keywords to rank your site anymore, but some people define them anyway just in case. If you wish to add meta keywords to your header then enable this option and fill in the custom keywords field below.

Enable canonical URL’s

Canonical URL’s helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and PageRank degradation. Few pages may have different URL’s all leading to the same place. For example, domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage.

Homepage custom title (if enabled)

You can add your custom title here if you have enabled custom titles. Whatever you type here will be placed between the < title >< /title > tags in header.php.

Homepage meta description (if enabled)

You can add your custom description here if you have enabled meta descriptions.

Homepage meta keywords (if enabled)

You can add your custom keywords hereby enabling the meta keywords. It is required to separate the Keywords by commas. For example: WordPress,themes,templates,elegant.

If custom titles are disabled, choose autogeneration method

You can still have control over how your titles are generated without using custom post titles. Here you can select in which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.

Define a character to separate BlogName and Post title

Over here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –

Integration

Integration

For adding third party code to certain areas of the theme the integrate tab is perfect.You can add the Code to your websites head and body, as well as before and after each post. For example, if you need to add a tracking code to your website (such as google analytics), but you are not sure which PHP file to edit in order to add the code to the < body > of your website, you can simply insert this code into the “body” field of the Integration tab.

Enable header code

To remove the header code below from your blog you need to disable this option. This helps you to remove the code while saving it for later use.

Enable body code

To remove the body code below from your blog you need to disable this option. This helps you to remove the code while saving it for later use.

Enable single top code

To remove the single top code below from your blog you need to disable this option. This allows you to remove the code while saving it for later use.

Enable single bottom code

To remove the single bottom code below from your blog it is required to disable this option. You are eligible to remove the code while saving it for later use.

Add code to the < head > of your blog

Once you place any code here it will appear in the head section of every page of your blog. This is useful when you require to add javascript or CSS to all pages.

Add code to the < body > (good for tracking codes such as google analytics)

Whatever code you place here will appear in the body section of all pages of your blog. This is helpful if you need to input a tracking pixel for a state counter such as Google Analytics.

Add code to the top of your posts

Whatever code you place here will be placed at the top of all single posts. This is helpful if you are looking to integrate things such as social bookmarking links.

Add code to the bottom of your posts, before the comments

If you wish to place any code here it will be placed at the top of all single posts. This is helpful if you are looking to integrate things such as social bookmarking links.

Theme Customizer

CGS Themes consists of its own custom theme options. Over here you can control things like your logo, favicon, navigation settings, and so much more. The above-mentioned options can be accessed in the WordPress Dashboard menu under CGS > Theme Customizer.

General Settings

General Settings > Site Identity

Site Identity

General Settings > Layout Settings

Layout Settings

In the layouts panel, you can adjust various sizing and spacing options for your website. It allows you to increase or reduce the spacing between columns, rows, and sections, and adjust the size of your sidebar. Even you can also enable “Boxed Layout” mode from within this panel.

ENABLE BOXED LAYOUT

You will be able to change your site into a box layout which frames the content of your site and exposes a background that can be customized.

WEBSITE CONTENT WIDTH

Over here you can set the max width of your content section. As your content is on a responsive layout, it will adjust to smaller sizes but will not expand any wider than the max width set here. The default is set to 1080px. For most standard laptops and desktops this is a good width.

WEBSITE GUTTER WIDTH

Between the columns in each row Gutter width corresponds to the amount of horizontal space (margin).

The Optional values for gutter width range from 1 to 4.

  1. Allows zero margins between columns.
  2. Allows a 3% right margin between columns.
  3. Allows a 5.5% right margin between columns.
  4. Allows a 8% right margin between columns.

USE CUSTOM SIDEBAR WIDTH

This option sets the default sidebar width for your theme. It is applicable to all pages on your theme that have a sidebar and are not built using the Builder.

SECTION AND ROW HEIGHT

The amount of vertical spacing (top and bottom padding) for each section and row is adjusted by these options.

THEME ACCENT COLOR

You should change this first before you start changing the colors for your other elements. Once you are done with changing it, save & publish your settings and refresh your page. It is the updated Theme Accent Color which populates other elements automatically.

General Settings > Typography

Typography

In the typography panel, it is easy to adjust the default appearance of the text across your entire website. You can adjust the size of the body font and header fonts, which will be reflected across all areas of the site proportionally. Even you can also adjust their colors as well as line height, letter spacing, and font styles. Last but not the least you can also choose between dozens of fonts to be applied to each.

BODY TEXT SIZE

This allows you to change the default body text for your theme. The default size is 14px.

BODY LINE HEIGHT

The height of the lines in the paragraph should be the same.

HEADER TEXT SIZE

CGS Themes allows you to set your default Header text size here. These effects elements of CGS Theme like the Fullwidth Header Module titles.

HEADER LETTER SPACING

This option adjusts the horizontal space between letters. The Header Letter Spacing value has an effect on all of the header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles.

HEADER LINE HEIGHT

Just like for the letter spacing value, the header line height value affects all of the header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles. 1em is the default settings because of the larger font size.

HEADER FONT STYLE

To change the font style of your headers you can use these options.

HEADER AND BODY FONT

In CGS Theme, the default font is Open Sans, but the CGS Theme Customizer has almost a hundred fonts to choose from! Pick any of these built-in fonts and test which one works best for your theme.

BODY LINK COLOR

By default, the body link color is inherited by your theme accent color. But if you wish you can always change it here.

BODY TEXT COLOR

It allows you to change the color of your body text.

HEADER TEXT COLOR

It allows you to change the color of your headers.

General Settings > Background

Background

You can adjust the background color of your theme with the background panel, as well as upload a custom background image and adjust its positioning on the page. When paired with the Boxed Layout setting in the Layouts panel mentioned earlier, background images and colors work great.

Header & Navigation

Header & Navigation > Header Format

Header Format

Over here you can adjust your header’s general format, such as switching between the main layouts modes: Default, Centered, Centered Inline Logo, Slide-in, and Fullscreen. By choosing Centered will it place your logo above your navigation menu and centered both within the header. By selecting Centered Inline Logo it will place the logo in-line with your nav menu elements, centered between the links. By enabling Vertical Navigation from within this section, it will create a drastically new look for your site, putting the navigation bar on the left of your content.

Header & Navigation > Primary Menu Bar

Primary Menu Bar

You can adjust the size, style, and color of your primary navigation menu, in this menu. As you can see this is the large white bar at the top of your page that consists of your logo and your primary menu links. Very easily, within this panel you can do a lot of things, such as you can adjust the height of your logo, the background color of the menu bar and the color of your links.

Make Full Width

This option extends the menu the full width of the browser window.

Hide Logo Image

Here, if you wish, you can completely hide the logo image from your menu.

Menu Height

Over here you can change the menu height to whatever you want. Be aware not to make your menu height too large since you could be wasting a valuable real estate on a menu instead of your homepage content.

Logo Max Height

Over here you can increase or decrease the max width percentage of your logo to make it bigger or smaller.

Text Size, Letter Spacing, Font, Font Style, Text Color, Active Link Color

These options enable you to customize the menu links.

Background Color

This enables you to change the background color of your primary menu.

Dropdown Menu Settings

It is not necessary that your dropdown menu have to inherit the style of the main menu. Over here you can create a unique design for your dropdown menu. Also, you can even add custom animation when displaying the dropdown menu.

Header & Navigation > Secondary Menu Bar

Secondary Menu Bar

Amongst the two navigation bars that appear above your main navigation bar, the secondary menu bar is the smaller one. Unless and until you have assigned a menu to the secondary menu location this menu will not appear. After enabling a smaller blue menu bar will appear. This panel particularly allows you to customize that menu bar and the text within it, adjusting the background color, text color, and text styles.

Header & Navigation > Fixed Navigation Settings

Fixed Navigation Settings

To the top of your screen, the fixed navigation bar refers to the navigation bar becomes fixed when you scroll. Carefully you will notice that as you scroll down your page, your menu bar remains fixed to the top of the screen and shrinks to provide more readable space on the screen. Everything is customizable from within the Fixed Navigation panel. Even you can adjust the height of the menu if you think it shrinks too small, and also can adjust the colors of the menu and the menu links independently from the menu’s non-fixed state.

Header & Navigation > Header Elements

Header Elements

As you know, header elements are various optional things that appear in your navigation bar, each of which can be toggled on and off here, such as your phone number, social follow icons, the search icon, and email address.

Footer

Footer > Layout

Layout

Footer > Widgets

Widgets

Footer > Footer Elements

Footer Elements

Footer > Footer Menu

Footer Menu

Footer > Bottom Bar

Bottom Bar

Buttons

Buttons > Buttons Style

Buttons Style

Over here you can adjust the general appearance of your buttons using the various customizer controls. Also, you can change the color of your button text & background, adjust the button font size and style, and even create rounded buttons using the border-radius slider. Apart from this, you can change the default font and icon used within the buttons.

Buttons > Buttons Hover Style

Buttons Hover Style

It allows you to adjust the button’s hover style as well. Just make a hover style different from the normal button style, the effect will be transitioned during hover, creating a pleasing animation. In addition, this animation is triggered when the visitors hover over the button with their mouse.

Blog

Blog > Post

Post

Mobile Styles

Mobile Styles > Tablet

Tablet

Over here you can adjust the styles seen by viewers on tablet-sized screens. Also, you can adjust your font sizes, including body and header fonts, as well as your website spacing, such as the spacing between rows and sections.

Mobile Styles > Phone

Phone

It allows you to adjust the styles seen by viewers on phone-sized screens. Also, you can adjust your font sizes, including body and header fonts, as well as your website spacing, such as the spacing between rows and sections.

Mobile Styles > Mobile Menu

Mobile Menu

Once you reach the main mobile breakpoint, the navigation menu appearance changes to a more standard mobile-style. Viewers on phones and tablets are able to see this menu. You can adjust the appearance of this mobile menu, by overriding the general styles which you have chosen for your Primary Navigation bar within the Header & Navigation panel of the Theme Customizer.

Color Schemes

Color Schemes

Menus

Menus > Header

Header

Menus > View All Locations

View All Locations

Widgets

Widgets

Homepage Settings

Homepage

Additional CSS

Additional CSS

CGS Module

Accordion

Audio

Bar Counters

Blog

Blurb

Button

Call To Action

Cgsder

Circle Counter

Code

Comments

Contact Form

Countdown Timer

Email Optin

Filterable Portfolio

Gallery

Image

Login

Map

Number Counter

Person

Portfolio

Post Navigation

Post Slider

Post Title

Pricing Tables

Search

Shop

Sidebar

Slider

Social Media Follow

Tabs

Testimonial

Text

Toggle

Video

Video Slider

Cgs Builder

What Is The Visual Builder?

The Cgs Builder generally comes in two forms: The standard “Back-end Builder” and the front-end “Visual Builder.” The feature of both the interfaces is to allow you to build exactly the similar types of websites with the similar content elements and design settings. The interface is the only difference. The Back-end Builder which lives inside of the WordPress Dashboard and it can be accessed along with all of the other standard WordPress settings. It is inside the WordPress UI and replaces the standard WordPress post editor. It’s perfect for making quick changes while you are inside the dashboard, but it’s also confined by the dashboard and is rendered as a block-based representation of your website. This particular tutorial will be focusing only on the visual builder.

Visual Builder Backend

On the other hand, the all new Visual Builder enables you to build your pages on the front-end of your website! It’s an excellent experience and allows for much faster design. If you add content or adjust design settings inside the visual builder, your changes appear instantly. Click on the page and just start typing. Even you can highlight text and adjust its font and style. Also, you can add new content, build your page and watch everything happen right before your eyes.

Visual Builder Frontend

Enabling The Visual Builder

Once you are logged in to your WordPress dashboard, it allows you to navigate to any page on the front-end of your website and click the “Enable Visual Builder” button which is in the WordPress admin bar to launch the visual builder.

While you are editing your page on the back-end, you can switch to the visual builder by clicking the “Enable Visual Builder” button that is placed at the top of the back-end CGS Builder interface (note, you must first enable the CGS Builder before the visual builder button will appear).

Cgs Backend

Cgs Frontend

CGS Library

Saving New Items To The Library

Library 2

Library 2

Library 4

With CGS’s Visual Builder, whenever you hover over a module, row or section in the CGS Builder, the menu bar includes a button to save the item to the library for later use. Click the icon, mention your template name and click “Save to Library”.

Creating & Managing Items In The Library

Library 5

Once you add a new item to your library, this item can be managed and edited from within the CGS > CGS Library page in your WordPress Dashboard. While accessing this page you will get a list of all of your library items. Easily you can sort your list via the controls at the top of the page, and you can edit any of your library items by clicking the “edit” link next to the item in the list. We just went over how to add an item to the library while you are using the CGS Builder. Even you can also build new items from scratch from inside of the CGS Library. If you build a new library item, it will be available in the “Add From Library” tab while using the CGS Builder. To create a new item in the library, click the “Add New” button at the top of the screen while inside the CGS > CGS Library page in your WordPress Dashboard.

Adding Library Items To Your Page

Library 5

Library 5

Once an item has been added to your CGS Library, it can be easily accessed when building new pages. At any time when you add a new Module, Row or Layout to your page, you will notice an “Add From Library” tab. By clicking this tab will reveal all of the items in your library. You can click on the item that you would like to add to your page.

Import & Export

Library

The CGS Library is a powerful tool for web designers, as it allows you to build and categorize custom designs that you can use to jump-start your future projects. By using the portability system, these custom designs can now be easily transferred between websites and shared with your peers. To export CGS Library items, you will first need to navigate to the CGS > CGS Library page in your WordPress Dashboard. Here you will see a list of all of your CGS Library items, along with an “Import & Export” button at the top of the screen. Clicking this button will launch the portability popup.

Export Library Items

Library Export

Within this popup, inside the “Export” tab, you can click the “Export CGS Builder Layouts” button to start exporting your entire CGS Library. If you want you can also choose a name for your export file. By exporting large library collections, especially those that contain high-resolution photos can take some time. We recommend exporting your library into moderately-sized collections.

By clicking the option “Import & Export” once again its required to launch the portability popup. Select the “Only export selected items” checkbox before exporting. Now CGS will only export the items that you have previously selected from your CGS Library.

Once the export process has completed, your browser will automatically download a .JSON file. This file is useful to import your exported items into a new website using the “Import” tab inside the portability popup.

Import Library Items

Library Import

Once you have exported a CGS Library collection, you can import it onto a new website. You have to use the same portability popup to do this. Firstly, navigate to your CGS > CGS Library page and then click the “Import & Export” button. Now you will need to click the “Import” tab to reveal the import options.

Within the Import tab, click the “Choose File” button and locate the .JSON file that you previously have exported. After selecting the file, click on the “Import CGS Builder Layouts” button to begin importing. After the import process has completed, you will notice that the CGS Library items have been added to your library and included images have been imported into your WordPress Media Library.

Layouts

Export Individual Layouts

Layouts Eport

Individual CGS Builder Layouts can also be exported. The process works exactly the same as exporting library items, the only difference is that individual items can be exported and imported directly from and onto the post which you are currently editing within the CGS Builder. When using the CGS Builder, look for the CGS portability icon. By clicking this icon will launch the portability system, and you can export your current CGS Layout.

Import Individual Layouts

Layouts Import

Once you have exported your CGS Layout and downloaded the .JSON file, this file can be imported into a new page. The Imported layouts will replace your current page content with the exported content. To import a CGS Builder Layout, click the portability icon within the CGS Builder to launch the portability system. Navigate to the Import tab. Click the “Choose File” button and locate your previously-exported CGS Builder layout and click the “Import CGS Builder Layouts button.”

CGS Widgets

Widgets

CGS Role Editor

High Level Theme Privileges

role editor

Over here you can adjust the highest level theme settings, which will limit access to the main CGS menu items (such as the CGS Theme Options and Theme Customizer).

Builder Interface

builder interface

Over here you can limit high level actions within the builder, such as the ability to edit, delete or move items within the builder. With a common implementation of these settings may be to enable the editing of items, but disable the ability to move or delete items within the builder. Also, you can disable access to the CGS Builder altogether.

Library Settings

library settings

Over here you can control user’s access to the CGS Library. Also, you can disallow users from editing GLobal Modules. The changes which are made to global modules often have far-reaching implications, it’s sometimes safer not to allow your clients to edit them at all.

Settings Tabs

settings tabs

The Settings tabs refer to the three categories of options available within the settings box of every modules, row, and section. General Settings, Advanced Design Settings, and Custom CSS these are the settings tabs. Everything you need to build an awesome CGS website can be found in the General Settings, but if you want to get a little more advanced then you can move into the Design Setting and Custom CSS tabs. It’s a great idea to disable these latter tabs for your clients.

Settings Types

settings types

You can also control the types of settings available within those tabs, in addition to being able to disable entire settings tabs. This provides you with even more fined tuned control over what your clients can edit. Just for an example, you might want to only allow your clients to control the Text content of modules, but stop them from adjusting colors and layout options.

Module Use

module

Lastly, you can also disable the use of entire modules. Once a module is disabled for a user, they will be unable to edit modules of that type or add new modules of that type to the page. Just for an example, you may want to disable every mode except for the Text and Image modules if you really want to keep things streamlined for your clients.

Portability

module

Contact Us

(323) 325-6029

Newsletter

Submit email to subscribe

Follow Us

© Copyright 2018 cgstheme.com · All Rights Reserved

Pin It on Pinterest