Theme Bike Rental Documentation

VikWidgetsLoader

IMPORTANT: Before to start using the theme, you need to install and activate the VikWidgetsLoader plugin.

This plugin contains all our widgets that you can use with our themes. Please, click here to install the plugin, otherwise you can find a download link in the Theme Customizer.

Here the list of the VikWidgetsLoader widgets used in our theme:

• VikWP Grid Content
• VikWP Text Slide
• VikWP Google Maps
  
• VikWP Icons

Because the theme has been made for our Vik Rent Items plugin, some of the widgets used on this theme are related to this plugin and they will be installed and activated with it.
Here the list of the Vik Rent Items widgets used on this theme:

• Vik Rent Items Search
• Vik Rent Items Summary
• Vik Rent Items Items

To set up static page as Front Page

• From your WordPress Dashboard go to Settings > Reading.
• In the Front page displays set the option to A static page.
• Select the page created previously from the Homepage dropdown.
• Click on Save Changes to apply your setup.

You can manage the Slider from the Header section of the Theme Customizer.
In the Customiser you will find a section called 'Header Settings', which allows you to chose whether you prefer using a static image or a sequence of sliding images in your header.

• From the WordPress Dashboard > Appearance > Customize > Header Settings

First of all, if you prefer using a Static image in the header of your website, you will need to go in the 'Header Options' subsection.

• From the WordPress Dashboard > Appearance > Customize > Header Settings > Header Options > Static Image
  

The 'Header Type' field will allow you to select which type of header you wish to display. This should be set to 'Static Image'. You will find a link under it which will redirect you to the 'Static Image Options' subsection.

Make sure you published the changes before you click on it, as you will be redirected, and the current changes will be lost. Once clicked on it you should be able to see three fields:

• Title - The title that is displayed over the static background image
• Image Caption - The caption that is displayed over the static background image
• Header Image Arrangement - The "cover" parameter sets the image as background and it'll have scroll effect when you scroll the page, the "Fixed" one instead shows the image without any effect.

From the 'Header Image' section you'll be able to upload your header image, or you will be able to choose from previously uploaded images.

If you prefer using a slider of images in the header of your website, you will need to go in the 'Header Options' subsection. The 'Header Type' field will allow you to select which type of header you wish to display. This should be set to 'Slider'. You will find a link under it which will redirect you to the 'Header Slider Settings' subsection.

In the 'Header Slider Settings' subsection, you will be able to set each individual image (from 1 to 5). In the 'Slider Settings' section you can set the following parameters of the slider:

• Fullscreen - Set if the slider should be displayed in full screen.
• Image Height in px - Set how high should the slider be if it's not fullscreen.
• Text Font - Choose the text font used for each image's title and description.
• Title/Caption/Read More Effect - The animation effect for the title/caption/read more transition.
• Text Align - The alignment of the Title,Caption and Read More text.
• Enable Navigation - If enabled, displays the navigation arrows on the sides of the slider.
• Enable Navigation Dots - If enabled, displays the navigation dots on the bottom of the slider.

You can also set some parameters for each image individually. You can do so from each 'Slider Image' subsection. The parameters available are the following:

• Slider Image - The image to be displayed in the slider.
• Title - The title to be placed over the image when it appears.
• Description - The description to be placed over the image when it appears.
• Read More - The text placed inside the button that appears over the image.
• Read More Link - The link the button placed over the image redirects to.

VikWP Grid Content is a widget loaded by the VikWidgetsLoader plugin, which allows you to display the posts of category in a grid layout.

In the widget parameters you can specify the number of posts you wish to see, select the category of posts to be shown and if you'd like to have a background image. You can also choose whether to display some read more text that links to the full post, or not.
Click here to read our Knowledge Base post that explains the VikWP Grid Content widget in more details.

The VikWP Text Slide widget displays a serious of texts contained in a specific post category.
The slider of texts fades in and out on regular intervals or it could have a carousel layout. The widget could have a background image.

Click here to read our Knowledge Base post that explains the VikWP Text Slide widget in more details.

In our demo website we used this widget two times, the first one in the Homepage, the second one in the About Us page.

With this widget you can locate your important points with Google Maps, the widget allows you to customize your background map, every point with a marker, title and description.
Set the latitude and the longitude coordinates of your locations and optionally add a text, a description and a customized image and shadow for the marker.

Click here to read our Knowledge Base post that explains the VikWP Google Maps widget in more details.

The Icons widget is used to display several icons, optionally with individual links and text. It can be used to represent different functionalities, or as a link for your social accounts.

The widget is very flexible, it allows you to select icons from a big icon library, you can take a look to the icons available from the official FontAwesome website.
Click here to read our Knowledge Base post that explains the VikWP Icons widget in more details.

Here some of the main settings of this panel.

We've already seen this function in the Logo Setup chapter of this documentation.

• Menu Sticky: This parameter will let the header follows the vertical scolling navigation of the website.

• Homepage - Header Position: With this parameter you can choose to display the header over the slider or in the top of it.
  By choosing "Over Slider", your header will be displayed with a black background with transparency. By choosing "Top" instead, the theme will apply the color background selected in the Header Background parameter. On this last case, the slider will not take all the window size in width and height, but just in width, the height will be calculated automatically.
  Here some screenshot of the two choices.

  Over Slider

  Top (In this case we have selected a dark green header background)

• Internal Pages - Header Position: This parameter works in the same way of the Homepage - Header position. But it'll manage the internal pages.
• Menu Text Color: This parameter setup the color of the menu text for homepage and internal pages.

• 1 This is a simple Navigation Menu widget.
  
  Sidebar: Top Bar - Right
• 2 This is the Main Menu, you can configure it from the admin WordPress Appearance > Menus. The menu has been added in the "Main Menu" sidebar.
  For more information about how to configure the menus, please the read the specific chapter here.
• 3 This is the Vik Rent Items Summary widget, it is part of the Vik Rent Items package. This widget show a summary of your purchases.
  We listed just the parameters that we've changed from the default values.
  • Show Summary Button Yes
  • Layout: Default Cart (Override)
  • Page: Our Bikes - itemslist (Select one page that contains a shortcode of Vik Rent Items.)
  Sidebar: Vik Rent Items Cart
• 4 This is the Vik Rent Items Search Form widget, it is part of the Vik Rent Items package. This widget allows you to search an item available in the dates and location selected.
  We listed just the parameters that we've changed from the default values.
  • Title: Hire your bike
  • Show Categories: Yes
  • Page: Our Bikes - itemslist (Select one page that contains a shortcode of Vik Rent Items.)
  Sidebar: Vik Rent Items Search Form Sidebar

This is the content of the Homepage Page. We created a two column content, in the first column you can also find a blockquote text as example.
Here the HTML code we used:

<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":59,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://vikwp.com/demo/themes/vikrentitems/bikerental/wp-content/uploads/sites/2/2021/04/friends-riding-bike-1024x682.jpg" alt="" class="wp-image-59"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading -->
<h2>Bike Experiences on Amsterdam</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Donec vulputate euismod velit eget posuere. In tellus velit, faucibus ac tempus id, suscipit in ipsum. Proin feugiat, nisi ut ornare ultrices, nulla odio blandit est, vel ullamcorper nisl magna ac sapien. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a class="btn" href="#">Discover more</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

• 6 This is the Vik Rent Items Carousel. This widget is part of the Vik Rent Items package. It displays all the items on your Vik Rent Items plugin.
  We listed just the parameters that we've changed from the default values.

  • Title: Any kind of bike
  • Show category name: Yes
  • Show Details button: No
  • Show Description: No
  • Show description: No
  • Show Characteristics: No
  • Description: Choose your bike
  • Layout: Default (override)
  • Page: Select one page that contains a shortcode of Vik Rent Items
  Sidebar: HP - Content Position 01

• 7 This is the VikWP Grid Content. We've already explained this widget on this chapter. Here all the details about it in the homepage.
  We listed just the parameters that we've changed from the default values.

  • Select Category: Select the category containing the post for this area.
  • Limit: 3
  • Show Read More: No
  • Post per row: 3
  • Button All Category Posts: : No
  Sidebar: HP - Content Position 02

• 8 This is the VikWP Text Slide. We've already explained this widget on this chapter. Here all the details about it in the homepage.
  We listed just the parameters that we've changed from the default values.

  • Testimonials Layout: Carousel
  • Testimonials per Row: 1
  • Featured Image position: Under
  Sidebar: HP - Content Position 3

• 9 VikWP Google Maps. We've already explained this widget on this chapter. Here all the details about it in the homepage.
  We listed just the parameters that we've changed from the default values.

  • Height (in px or %): 400px
  • Map Style: Blue Essence
  • Map Zoom Level: 15
  • Contact Enabled: Yes
  • Contact Header: BikeRental Shop
  • Contact Position: Left
  • Insert your address: Your address
  • Insert your email: Your email
  • Insert your telephone: Your phone
  • Description: Monday to Friday: 10am - 6pm
    Saturday: 11am - 4pm
    Sunday: Closed
    
    CONTACT US
  Sidebar: HP - Content Position 03

• 10 This is the VikWP Icons widget, we've already explained this widget on this chapter. Here all the details about it in the homepage.
  We listed just the parameters that we've changed from the default values.

  • Icons Displayed: 3
  • Icons Size: 24
  • Icons Padding: 4
  • Icon Allignment: Top
  • CSS Class: mod-services text-center
  Sidebar: HP - Content Position 03

• 11 The footer is composed by three widgets:

  1. Text widget: it contains a general text with an image.
  2. Three Navigation Menu widgets.
  3. This is an external plugin widget we used for the newsletter. We used the "Newsletter" plugin that you can find for free on this page.
  Sidebar Name: Footer

• 12 VikWP Icons Widget (you can find the widget explaination here).
  We listed just the parameters that we've changed from the default values.

  • Icon Displayed: 3
  • Icon Size: 24
  • Padding Size: 1
  • Icon Alignment: Top
  Sidebar Name: Sub Footer

This chapter explains how to get the About Us page as our demo website.

1 At first we've created a new page named About Us.
To have the same layout as our demo website, you should select the template page "About Us" from the Page Attributes the Template Page "About Us".
If you'd like to have a background image for the page title as our demo website, you should add your image in the Featured Image.

Here the page configuration:

In our case we are using the native Gutember Editor.

• 2 This is the VikWP Icons widget, we've already explained this widget on this chapter. Here all the details about it in the About Us.
  We listed just the parameters that we've changed from the default values.

  • Title: What We Do
  • Icons Displayed: 3
  • Icons Size: 32
  • Icons Padding: 4
  • Icon Allignment: Top
  Sidebar: About Us - Under Content

• 8 This is the VikWP Text Slide. We've already explained this widget on this chapter. Here all the details about it in the homepage.
  We listed just the parameters that we've changed from the default values.

  • Image: We selected a background image
  • Opacity Mask: 0.6
  • Testimonials Layout: Carousel
  • Testimonials per Row: 1
  • Featured Image position: Under
  Sidebar: About Us - Full Size widget

This chapter explains how to get the Contact Us page as our demo website.

As we did for the About Us page, we did also for the Contact Us.
After you have created the page with the text, you should select from the Page Attributes the Template "Contact Us", in this way the page will show the "Contact Us - Under Content".

• 1 The left part is the main content of your page, in this case we just used the shortcode of the Contact Form plugin we are using. It is Contact Form 7 that you can find on this link.

  2 The right part is composed by two widgets located in the "Sidebar Right".
  The two widgets are a standard native "Text" widget and the second one is "VikWP Icons".