Design Panel

Tourfic Settings > Settings > Design Panel

The design panel allows you to modify all of the visual or design elements shown on your multi-vendor website. However, if people want, they can use this feature for smaller hotel business websites as well. 

In addition to the global settings, you can also change the design language separately for hotels, tours, and apartments.

Global Options

Any attributes you apply to this section will be applied as global properties throughout different categories. 

Primary Color and Primary Color of all Paragraphs/Text:

In these sections, you can determine the primary color or accent used throughout the website and the primary color that all texts will follow (unless you override it). You can open the color picker by clicking on the select color button beside each section (shown below). 

Tourfic Global Design panel - Themefic

Typography

Global body fonts family

This determines the global font settings that apply to all the body texts (paragraphs, texts, hyperlinks) on the website. Simply click on the selection dropdown menu and choose a font from the extensive list. 

Global heading fonts family

This determines the font used for all the headings and titles throughout the site. This covers all HTML heading tags from h1 to h6. 

Tourfic Global Design panel font family 1 - Themefic

Font Settings

You can specify individual font settings for all font types. This section allows you to modify font settings for H1 — H6 headings and paragraph fonts separately. All of the fonts have these 4 properties: 

  1. Font size: You can determine the font size from this menu. This size is specified in pixels (px). You only need to input the numerical value here. 
  2. Line Height (REM): This allows you to determine the line height (the gap after a sentence). Note that this is written in REM, not pixels. 
  3. Font Weight: This determines the weight of the font (bold, light, or medium). The font-weight is determined through a dropdown menu (the higher the number is, the bolder the font).
  4. Font Style: The font style tab allows you to determine if the font will be normal or italic. 
Tourfic Global Design panel heading settings - Themefic

Button Text Color and Button Background Color

These two sections allow you to set the colors for the button text and button backgrounds. 

The colors have two states: normal and hover (i.e., when the mouse is hovered on the button). 

Tourfic Global Design panel Button style - Themefic

Sidebar Booking Form

This section allows you to change the gradient colors found on the sidebar booking feature that you’ll find on search results and single listing pages.

Tourfic Global Design panel sidebar - Themefic

FAQ Styles 

These colors apply to the FAQ section available on hotels, apartments, and tours. 

Tourfic Global Design panel FAQ - Themefic

Review Styles

You can change the colors applicable to the review section on hotels, tours, and apartments alike. You can change the color and background color for ratings, single parameters, and reviews. This is how the review section looks on the front end: 

Tourfic Global Design panel Review - Themefic

Color Settings for Template

You can determine the color settings for a template that supports custom colors. Here, template 3 can have custom colors for the background, highlights, and the icon. 

Hotel Settings

Unlike the global design settings, this section allows you to change the visual properties only for hotels. 

Hotel Type Color ( Template 3)

This changes the color of the text above the single hotel heading. It’s only applicable to supported templates (e.g., template 3).

Tourfic hotel Design panel service name - Themefic

Share Icon Color 

This section changes the color of the share icons for hotels

Map Button Background ( Template 2, 3)

You can change the background color of the map button from here. This is also limited to the supported template (template 2, 3). 

Tourfic hotel Design panel map button - Themefic

Map Button Text Color

Use this section to change the map button’s text color. 

Features Color

This changes the colors of the icon on the Popular Features section.

Room Table Styles

This section allows you to modify the colors in the hotel room showcase tables. 

Tour Settings

Price Section 

You can change the price, text, borders, or background colors for the price section on tours from here.

Information / Summary Section

This section modifies the color of the information and summary portion found on your tour listings. 

Sticky Booking Form

Customers will find a floating sticky form at the bottom of their display when scrolling down. This section modifies that sticky form specifically. 

Include – Exclude Section

This section targets the Include – Section available for tours. 

Travel Itinerary

These colors apply to the travel itinerary customers find on tour listings. Note that this isn’t applicable to the downloaded version of the itinerary.

Travel Itinerary PDF

You can also allow customers to download a PDF version of the travel itinerary. These colors specifically affect that file’s colors, distinct from the previous section.

Apartment Settings 

These colors apply to the apartment listings only. 

Booking Form

Apartment listings have separate booking forms, and this section determines the colors on them.  

Apartment Host

You can determine the colors for the Apartment Host section for your apartment listings here.