Home 3. Theme Customization

INTRODUCTIONTheme Customization

Theme uses native WordPress Customizer for General theme options. In order to access WordPress Customizer please select ‘Appearance > Customize’ in wp-admin console.

On the left side of the screen you will see the menu with various options and on the right side you will see website preview. Any settings you change in the Customizer will affect entire website, which means all posts and pages, so we are referring to them as global customization settings.

Each change you make will automatically update website preview (page will be refreshed). When you are satisfied with the result click ‘Save & Publish’ and do not forget to make final preview outside customization frame and logged out of WordPress to see how the site would look like to your visitors.

The important feature of Travelicious is that any global setting can be overridden on any single post or page using setting keys which you will find in preformatted text below setting names on the following sections.

Preformatted text present possible values of setting keys. You will learn more about this overriding soon. Now, let’s explore customization settings.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/customize.jpg

SECTION 01General Settings – WordPress Customizer

On General settings panel you will find the following options:
http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/general-settings.jpg

Logo 

Attachment ID or URL

Here you should select main website logo. It is displayed on pages next to the menu, on preloader screen and on sticky header. Recommended size for logo is 310px x 100px.

Alternate Sticky Header Logo

Attachment ID or URL

Here you should select website alternative logo.

This is usually light version of logo (which is supposed to be used on dark backgrounds). The logic is this:

  1. If you do not have Alternative logo defined, main logo will be used in all cases
  2. If you have Alternative logo defined, it will be used on top of the page when Content Below Menu and Sticky Header options are activated. This set up will also change the color of menu and widgets to light.
http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/alt-logo.jpg

Primary Accent Color

Hexadecimal color code or color picker

Accent color is used as a color for links, icons, etc. If you define it, the accent color will influence the general color scheme of the site.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/accent-color.jpg

Secondary Accent Color

Hexadecimal color code or color picker

Another color which influences general color scheme of the site is alternate color. Alternate color can be assigned as a color for buttons, icons, etc. If you define it, all elements with assigned alternate color will be affected.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/alt-color.jpg

Page Background

Attachment ID or URL

Page background image is a static image which serves as a site background if defined.

Hide Default Headline

True / False

This option enables you to display navigation breadcrumbs at the top of the screen. In most user scenarios this option should be set to true (checked).

Template skin

Light / Dark

This is another option which influences general color scheme of the site. Travelicious features two general skin styles – light and dark. The light skin has white colored background and dark colored main font and other ui elements. On the other hand, dark skin has dark colored background and light colored fonts.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/dark-skin.jpg

Sidebar

No Sidebar / Left / Right

This option enables you to define if the sidebar will be visible globally or not.
By customizing this option, user can globally enable (place it on the right or left side) or disable sidebar. Sidebar content can be edited under Appearance > Widgets (from main WordPress menu).

You can choose one of three predefined sidebar layouts:

  1. No Sidebar – No sidebar is displayed
  2. Left – Sidebar is displayed on the left side of main content
  3. Right – Sidebar is displayed on the right side of main content.

Page Width

Default / Boxed

This option enables you to define if the page width will be full width (default) or boxed.

Use Dash in Template Headlines

True / False

This option enables you to define if separator will be used below the widget titles or not. By changing this option, users can globally enable or disable the separator in widgets. Please check this option if you want to use separator in widgets.

Disable Preloader

True / False

This option enables you to define if the preloading animation will be displayed globally throughout the site or not. By changing this option, users can globally enable or disable the preloader animation.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/preloader.jpg

Preloader Text 

Any text

This option enables you to define the text on preloading screen. The preloader needs to be enabled in order to see the effect of this option.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/preloader-text.jpg

Reverse Gradient on chosen Elements

True / False

If this field is enabled the gradient on elements that support gradient color scheme will reverse. For example, if heading has ‘accent to alternate’ gradient, it will reverse to ‘alternate to accent’.

Custom JS

Custom JS code

This option enables you to define global Custom JS code. Enter any JS code you want here and it will be embedded in the <head> element of all pages throughout the site.

This is where you should paste your custom site wise JavaScript, such as Google Analytics script.

Reset Theme Settings

This is not really a setting, so no override. Reset button will just reset all global settings to default values.

SECTION 02Site Identity

Under “Site Identity” panel in Customizer, you can set Site Title, Tagline and Site Icon. When working with site icon, please pay attention to recommended Icon size.
http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/site-identity.jpg

You’ll see the changes in the preview pane to the right. When you’re done, click Save and Publish.

SECTION 04Typography

On Typography settings panel you will find the following options:

Body Font

No Change / Any Google font

Body text font. Using this setting you can set the main font family that’ll be applied throughout the website. Travelicious uses Google webfonts.

Heading Font

No Change / Any Google font

Heading text font. Using this setting you can set the font family for Main Headings.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/heading-font.jpg

Heading Supertitle Font

No Change / Any Google font

Heading Supertitle text font. Using this setting you can set the font family for supertitles in Main Headings.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/heading-supertitle.jpg

Heading Subtitle Font

No Change / Any Google font

Heading Subtitle text font. Using this setting you can set the font family for subtitles in Main Headings.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/heading-subtitle.jpg

Menu Font

No Change / Any Google font

Using this setting you can set the font family for menus.

Button Shape

Hard Rounded / Soft Rounded / Square

1. Hard Rounded:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/buttons-hard-rounded.jpg

2. Soft Rounded:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/buttons-soft-rounded.jpg

3. Square:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/buttons-square.jpg

SECTION 05Blog

On Blog settings panel you will find the following options:

Grid Gallery Columns

2 / 3 / 4 / 5 / 6

Here you can define the number of columns for grid gallery on single posts. On this example, three columns were set.

You can set the post grid gallery format by choosing Gallery as Post format, add the images to the post in the settings panel and check the Grid Gallery setting.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/blog-grid-gallery.jpg

Grid Gallery Gap

No gap / Small / Normal / Large

You can define gap between grid gallery items in pixels using this setting. In the example above the gap is 10px. If you choose 0, the images will be “glued” to each other without any gap in between.

Archive Layout

Standard / Columns / Simple

Travelicious offers three layouts for blog archive pages – standard, columns and simple. Please take a look at the following examples of these layouts:

  1. Standard Layout
  2. Columns Layout
  3. Simple Layout

This setting will affect layout of the main Blog page, as well as the Archive, Category, and Tag pages.

Single Post Layout

Standard / Columns

Travelicious offers two layouts for single blog post pages – standard and columns. Standard layout features post content in one column while columns layout introduces two columns – one for featured image / grid gallery / video, and one for the content itself.

Here is the example of standard layout:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/blog-standard.jpg

Here is the example of columns layout:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/blog-columns.jpg

Show Author Name

True / False

This option enables you to set whether to display author name under post title or not.

Show Post Date

True / False

This option enables you to set whether to display post date under post title or not.

Show Author Avatar in List

True / False

Show Author Info in Post

True / False

Show information about author in single posts (you can add or update the text in Users > Your Profile > Biographical Info from main WordPress menu).

Share on Facebook

True / False

Share on Twitter

True / False

Share on Google Plus

True / False

Share on LinkedIn

True / False

Share on VK

True / False

Sharing options for single posts. If checked, the share icons will be present in posts.

Use Dash in Headlines

True / False

Travelicious offers two types of headlines on blog archive pages and individual post pages.

Check to use dash separator in headlines.

Settings Page Slug

Page slug

Travelicious has a unique way of enabling you to create custom templates for single post pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for single post pages.

The field Setting page slug should contain the slug of your page which serves as a template for blog posts. Once you add the slug to this field, all blog posts will inherit settings and shortcodes of the referenced page.

So, in order to change template elements on blog posts, please locate the page with the slug entered in Settings Page Slug field and edit it.

SECTION 06Destinations

On Destinations settings panel you will find the following options:

Grid Gallery Columns

2 / 3 / 4 / 5 / 6

Here you can define the number of columns for grid gallery on destinations’ items. You can set the post grid gallery format by adding the images to the post in the settings panel and check the Grid Gallery setting.

Grid Gallery Gap

No gap / Small / Normal / Large

You can define gap between grid gallery items in pixels using this setting. If you choose 0, the images will be “glued” to each other without any gap in between.

Single Project view

Standard / Columns

Travelicious offers two layouts for single destination pages – standard and columns.

This setting lets you choose default layout for all Destinations single pages.

Archive Layout

Standard / Columns

Travelicious offers two layouts for destinations archive pages – standard and columns.

This setting will affect layout of the main Destinations’ page, as well as the Archive, Category, and Tag pages.

Share on Facebook

True / False

Share on Twitter

True / False

Share on Google Plus

True / False

Share on LinkedIn

True / False

Share on VK

True / False

Sharing options for single destinations’ items. If checked, the share icons will be present in posts.

Use Dash in Headlines

True / False

Travelicious offers two types of headlines on blog archive pages and individual post pages.

Settings Page Slug

Page slug

Travelicious has a unique way of enabling you to create custom templates for individual destinations’ pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for destinations’ pages.

The field Setting page slug should contain the slug of your page which serves as a template for destinations. Once you add the slug to this field, all destinations will inherit settings and shortcodes of the referenced page.
So, in order to change template elements on destinations, please locate the page with the slug entered in Settings Page Slug field and edit it.

Destination Slug

Page slug

This field should contain the slug of the page that serves as a template for Destinations custom post type.

On Travelicious theme, we used Portfolio custom post type to create destinations.  We changed default slug “portfolio” to “destinations”. In order to change this slug, create a static page with desired slug, and add its slug to this field. Once you save the changes in Customization panel, navigate to Settings > Permalinks, and click ‘Save Changes’.

That way, new slug in the URL will be generated for Destinations’ pages.

Destination Category Slug

Category slug

This field should contain the slug for Destinations category custom post type.

The slug added to this field will display on Destinations category pages. Once you save the changes in Customization panel, navigate to Settings > Permalinks, and click ‘Save Changes’.

That way, new slug in the URL will be generated for Destinations category pages.

SECTION 07Tour Single

These settings are used for single tours’ layout

Single Tour Header Layout

Standard / Based on the Content

If Standard header layout is selected, single tour will display featured image in header.

Here is the example from our demo – Colorful Berlin.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/tour-single-header-layout-standard.jpg

If Based on the Content header layout is selected, single tour will display slider with images and/or video in header. Images and video should be added to Tour Media panel of single tour.

Here is the example from our demo – Exciting Belgrade.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/featured-image-video.jpg
http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/tour-single-header-layout-content.jpg

Similar Tour Columns

2 / 3 / 4 / 5 / 6

Similar Tour Gallery Gap

No gap / Small / Normal / Large

Number of Similar Tours

Any number

Show Similar Tours By

Category / Destination

Display options for Similar Tours tab on Single tour.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/similar-tours.jpg

Show Author Review Summary for a Single Tour

True / False

Enable Ratings in Comments and Reviews for all Tours

True / False

Tour User Review Categories

Any category

Here you can set the categories for users to review on each tour. Categories can be overridden on single tours.

Enable Tour Sharing on Facebook

True / False

Enable Tour Sharing on Twitter

True / False

Enable Tour Sharing on LinkedIn

True / False

Enable Tour Sharing on Google Plus

True / False

Enable Tour Sharing on VKontakte

True / False

Settings Page Slug

Page slug

Travelicious has a unique way of enabling you to create custom templates for individual tour pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for individual tour pages.

The field Setting page slug should contain the slug of your page which serves as a template for Tours. Once you add the slug to this field, all tour items will inherit settings and shortcodes of the referenced page.

So, in order to change template elements on individual tour pages, please locate the page with the slug entered in Settings Page Slug field and edit it.

SECTION 09Tour Booking

These settings are used for booking forms.

Enable Booking & Enquiry Form

True / False

Tour Booking Form

Any form created with Contact Form 7

Please note that forms defined in Contact > Contact Forms must contain two hidden parameters – [tour tour-id id:booking-tour-id] and [tour_title tour-title id:booking-tour-title] in order for mail to be informative for you.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/booking-form-shortcodes.jpg

The tags also need to be added to Message Body.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/message-body-shortcodes.jpg

Enable Booking Form on Single Tour page

True / False

Tour Enquiry Form

Any form created with Contact Form 7

Please note that forms defined in Contact > Contact Forms must contain two hidden parameters – [tour tour-id id:enquiry-tour-id] and [tour_title tour-title id:enquiry-tour-title] in order for mail to be informative for you.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/enquiry-form-shortcodes.jpg

The tags also need to be added to Message Body.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/10/message-body-shortcodes.jpg

Enable Enquiry Form on Single Tour page

True / False

SECTION10Tour Map

These settings are used for map displayed on tour pages.

Google Map Api Key

API Key

Please refer to the following article on how to get API key – Get your API key

Google Map Default Zoom Level

Any number

Google Map Default Latitude Value

Latitude value

Google Map Default Longitude Value

Longitude value

Goggle Map Pin Destination

Attachment ID or URL

Custom map style array

Map code

On Snazzy Maps are available all kinds of Google Map styles. The required map code is possible to add to the Custom map style array field.

SECTION 11Shop

These settings are used with WooCommerce plugin.

Share on Facebook

True / False

Share on Twitter

True / False

Share on Google Plus

True / False

Share on LinkedIn

True / False

Share on VK

True / False

Sharing options for single products. If checked, the share icons will be present in products.

Use Dash in Headlines

True / False

Travelicious offers two types of headlines on blog archive pages and individual post pages. Header with the dash and header without it.

Check to use dash separator in headlines.

Settings Page Slug

Page slug

Travelicious has a unique way of enabling you to create custom templates for individual product pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for individual product pages.

The field Setting page slug should contain the slug of your page which serves as a template for WooCommerce products. Once you add the slug to this field, all shop items will inherit settings and shortcodes of the referenced page.

So, in order to change template elements on individual product pages, please locate the page with the slug entered in Settings Page Slug field and edit it.

ARTICLE 01FAQ

In this section you will find the most common questions regarding the editing of single product pages.
Product is overlapping the menu

If the single product pages appear as they are not formatted, and are overlapping the menu, that probably means that their template page is not set correctly.

In order to fix this, make sure that the template page (Shop single) is published, and its slug is added to Settings page slug field in Appearance >Customize >Shop panel.

How to edit / remove Excerpt text?

In order to edit / remove excerpt text, navigate to the Post editor, and in Screen Options (at the top of the dashboard) enable Excerpt field.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/07/Screenshot_26.jpg

After that, scroll to the bottom of the page editor where you’ll find Excerpt text.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/07/Screenshot_7.jpg
How to change / remove Header background image?

The Header background image on single product pages represents featured image added to the products or their template page (Shop single). In order to replace existing image with your own, click on the image, and when redirected, select image from Media Library.

In order to entirely remove the image, click on ‘Remove featured image’ button.

*Please note that once the featured image is added to the single product pages’ template page, it will override the featured image added to the product.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/07/Screenshot_22.jpg
How to add / remove sidebar from single products?

In order to add sidebar to single product pages, navigate to their template page (Shop single), and in Override Global Settings panel, select ‘Sidebar’ setting, and select its position (left / right).

To remove sidebar, select ‘No Sidebar’.

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/07/Screenshot_23.jpg

*Note that sidebar can also be displayed on selected products, by adding it to the product’s Override Global Settings.

How to entirely remove Header from single products?

In order to remove entire Header from single product pages, make sure to check ‘Hide Default Headline’ field in Appearance >Customize >General Settings panel, or in Override Global Settings at the bottom of the Shop single page editor:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2018/07/Screenshot_24.jpg

SECTION 12Translation

In order to translate the theme, please follow the next steps.

POT file is in languages folder. You can use Poedit or some similar tool to translate the theme. Keep your .po and .mo files in the same folder (languages). If you are not sure how to do it take a look at the article: How to Translate a WordPress Theme.

Also, make sure to translate the Travelicious plugin as well. Repeat the steps as for the theme.

SECTION 13Child Theme

If you want to use Travelicious Child Theme, please follow these steps:
  1. First of all, make sure that parent theme folder is named: travelicious. Otherwise rename the folder.
  2. You should be able to find the folder travelicious-child in the package you have downloaded from ThemeForest.
  3. Please copy this folder to /wp-content/themes folder on your server.
  4. Go to Appearance > Themes in your wp-admin console and activate child theme. Please have in mind that all required plugins need to be activated.

For more info, refer to the article Child Theme.

SECTION 14One Page Site

In order to create one page site, please follow the instructions below:

The best way to start is to install demo content. If you want to install one page demo please refer to the article: Installing Demo Content. You will be able to see how all elements on the single page are set.

1. First of all, navigate to the Bold Page Builder and edit desired section. Insert in required Custom Tab Element ID attribute:

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2017/11/7550172792.jpg

2. Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.

For example: #about

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2017/11/Screenshot_2.jpg

SECTION 15Update Theme

In order to update the theme, please follow the instructions below:

First, please make sure to download newest theme version from ThemeForest Download section.

Then, proceed to replace the old theme files with the new ones on your server via FTP (provided you haven’t made any changes in the source code. If you did, please reapply them to the new version of the theme or they will be lost).

Keep your eyes on potential required plugin update messages at wp-admin dashboard once you replace the files. You should update all required plugins if the updated theme suggests so.

All settings in Customize panel and your content will be preserved.

Note: Once new theme version is online, user who purchased the theme, should get email note from the Envato (ThemeForest).

http://documentation.bold-themes.com/travelicious/wp-content/uploads/sites/37/2017/11/update-theme-preview.png