Start

Simple booking WordPress theme


 

Travelo is a wordpress theme made for tourism purposes.

Build on a clean design, and in a good thought funcionality Travelo can be your best choice if you have a Travel Company but you don't have an online payment service available. Travelo is a simple product which makes possible the User to book an offer by writting personal details, which will be approved/declined from the agent of the tour company. The main importance is on the filter, which can categorize your offers in a good way for the users.

How to set up the theme?

Just upload travel.zip via theme uploaded on your wp-admin and you're ready to go.

If you get any error after you installed the theme than this could happen :

1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead
2.Or delete the Theme folder and install .zip file which is in this package

Creating a Tour

(We recommend you to create the filter and tour attributes before you start creating tours).

To create a new tour go at Tours / Add new.

 

    1. Add the main text first, then start filling the other data
    2. Write the price/cost of the tour.
    3. Enter the currency (you can use different currency for different tours)
    4. Enter the description of the tour which will be shown on the buckets at hompage.
    5. Enter the short descriptions of the tour which will be visible on the slider.

tour1

 

    1. Add the available dates for the tour (Arrival and Return).
    2. Write custom attributes and check them to be visible at a tour.

tour2

 

    1. Upload the images that you want on the inside tour slider. (650x352 px).
    2. Use tabs for more detailed description or specifications.

tour3

 

    1. Rate the tour by its exclusivity (1 to 5 stars).
    2. Enable/Disable tabs on the page.
    3. Enable/Disable default attributes of tours.
    4. Check if you want the category to be on slider.
    5. Check if you want the reviews to be on the tour page.
    6. Enable/Disable the user ratings.

tour4

 

Setting up the homepage

Pages / Add new / Select Home from the templates
Name the page Home.

How to set up tour on homepage slider?

To select the tours that you want to be shown on the slider you shoud go
At pages / home / and at slider module you will select the tours and re-order them.

To make it look same as in the demo you should procced as this while creating a tour:

 

  1. Write the description you want to be shown on slider(hompage)
  2. Choose if you want the category too.
  3. Don't forget, the slider image will be the featured image of the tour.
  4. The recommended size is 1645 x 550 px.(you can use larger photos, but please try to maintain the same ratio, in order to avoid image deformations.

home2_slider

 

Search Filter

The search filter is a very helpful element for users to filter the results fast for finding better and more accurate results.

The filter can be built for your needs at Umbrella Theme Options / Filter:
We recommend up to 4 filters ( 3 + 1 Price included).

filter1

 

1. You can categorize with price from $ amount to $ amount on as many rows as you want. Below price are the attributes which will be shown down the photo gallery of an offer/tour page.
2. You can name the attributes and choose if you want them to show on filter.
3. After this you need to create categories of attributes which are shown at Tour dropdown menu on wp-admin.

filter2

 

Create categories for each attribute, for example:
Location: England, France, Germany, Spain
Type: Group Tour, Simple Tour, Festival
Hotel: Hilton, 4 Seasons, Sheraton
These attributes will save you time while adding tours, you can select them with checkbox.

Note:
The permalink for the search page mustn’t be “search” because it conflicts with the wordpress default search page.

ex: localhost/website/search
You must choose a different permalink name.
Ex : localhost/website/search-results

Attention:
Don't forget to make the home template as the homepage of your website.
This could be done at Settings / Reading /
- Front page display / A static page / Choose your home template.

Setting up the About Us Page

There are three main options to set up the about page as in our demo site.

1.The full width block where you can add your main company information and details.

about1_text

 

2.Three small block when you can enter simple data, different specifications and maybe some details for job opportunities.

about2_paragraphs

 

3.You can add your staff, write the name, the position, text details and link the icons to the social networks.

about3_staff

Setting up the Tours page

This is a very simple step, you just need to create a new page choose the name and choose the template “Tours”.
Choose the featured photo on the right and you're done.

Setting up the Blog

Pages / Add new / Choose the blog from the templates. Add a featured image.
Don't forget to customize your sidebar at Appearance / Widgets.

If you delete all widgets the blog will become 3 columns and at the single page (article template) will turn on a full width page, including the post image will increase the size.

When you create a post you have to add the title, the content, the description which will be shown at the blog page, the article photo and the big featured image (which is optional).

Setting up the Booking

1. First you need to create the page by going at Pages / Add new / Choosing the template Booking.
2. Then at Umbrella Options / Booking Options you can build the simple booking form
3. You can add as much booking fields you want by adding a field name and choosing the field type which can be text, phone, number, date.
You can choose if a field should be mandatory (requested) or optional.
For example: Name, Surename, Phone, Country, Address, Arriving date, leaving date, Number of adults, number of children etc. + you can add a big box for extra message.
4. The email is mandatory in the beginning and can't be changed to optional, in order to keep in touch with real users and avoid spammers.

booking1

 

5. You can enable a pop up for the terms of conditions that could be filled with content on the editor. (if you enable this option, this is going to be mandatory to users).
6. You can choose the mail subject and the messages text for approved and unapproved bookings.

booking2

 

You can manage the bookings at Booking menu on the wp-admin:

BookingPanelPage

 

You can see the booking.
Approve or Unapprove, Send e-mail or Delete it!

 

New Feature:

You can directly receive e-mails when a booking is done.

You need to enable the email notification and add the email address that you want to receive the email's

To enable this feature go to Options on admin panel and in the options go to Booking options

email-send

 

Setting up the Contact page

Pages / Add new / Choose Contact from the templates.

1. Write your address/location
2. Write a title for the contact form
3. Write your mobile phone number
4. Write your email address
5. Write your fax number
6. Point your location to the map (google maps).

contact1

Setting up the Default page

Pages / Add new / Leave the Default template selected.
This template allows you to have a page and a sidebar at the same time.
The sidebar can be customized at Appearance / Widgets.
You can add a featured image for this too.

Setting up the Full Width page

Pages / Add new / Select the Full Width page.
This template gives you the possibility to create a page in full site size without sidebar or extra modules.

Setting up the Default Tour Attributes

This is a great tool if you have a lot of similarity between tours/offers.

With this options (which can be found at Umbrella Options/Default Tour Attributes) you can add some attributes that will remain default and can be shown in a tour be checking the box “enable default tour attributes” at the tour creating page.

default_tour_attributes

How to set up the Shortcodes

Travelo gives you several useful shortcodes to make your wordpress daily use easier:

– The block quote
[blockquote] Text goes here [/blockquote]

 

– Headings h1, h2, h3, h4, h5, h6 styled
In the case below just change the 1 to the other 2,3,4,5,6 numbers to get the style.
[h1]The first line of text is here[/h1]

 

– Accordions
[accordion]
[accordion_item title="Title1"]For at least 40,000.[/accordion_item]
[accordion_item title="Title2"]A highly developed[/accordion_item]
[/accordion]

Just replace the “Title1” with your title and the text with your content.
To add more accordions just copy one of the existing and change the tile and conent. Careful with the starting & ending tags [accordion][/accordion]

 

– Tabs
[tabgroup]
[tab title="Tab1"]The earliest.[/tab]
[tab title="Tab2"]A highly.[/tab]
[/tabgroup]

Just replace the “Tab1” with your title and “the earliest” with your content and you're done. To add more tabs, just copy one of the lines ex. [tab title="Tab1"]The earliest.[/tab] and edit the data in it.

 

– And white, black, blue, green, orange, red buttons.

The last but not least, some cool colorful buttons that can be used to link to other important pages. (according to the colors, these can take a lot of attention to users).

[buttonWhite][button link="http://www.google.com"]Text[/button][/buttonWhite]

Change it with your url, and the “text” to your link name. The buttons come on several colors so you can change the “White” to Black, Blue, Green, Orange, Red and get the respective colors.

New Features Travelo 2.0

  1. Responsive
  2. Skins
  3. Revolution Slider
  4. Skitter slider Short code
  5. Short code Tours
  6. Font Awesome Short code
  7. Short code Columns
  8. Google Fonts
  9. Price Removal
  10. Widget Tour Search
  11. Sidebar Right
  12. Tour Alert - Fix
  13. Special char Booking - Fix
  14. Bucket Height - Fix
  15. Tab - Fix
  16. search.php - Fix

Responsive

The Responsive feature is always on. But if you need to disable the this feature you can go to Options -> Main -> Disable Responsive

Responsive is tested on I phone 3-4 , I pad , Samsung Galaxy s2, s3, Note 2. For  other media screens it was tested with https://quirktools.com/

 

Skins

5 new skins + the default.

To change the skin go to Options->Main -> Skins and choose the one that you want.

  1. Default
  2. Blue
  3. Green
  4. Orange
  5. Pink
  6. Purple 

Disclaimer: Skins panel in the demo is not included in the theme. The skin panel is only for presentation.

Revolution Slider

When the theme is installed it will show a message that you can and need to install the Revolution Slider just click begin installation and all its done.

There is a dummy content that you can import and it will import the slider like in the demo. You can find the dummy content in the Theme package.

When you create a slider you can copy the short-code and put in every editor. But if you want to put the slider in the header (on top of the content), you can find a filed in every page, post, tour post "Do Shortcode". So if you put the shortcode in that field or put the alias of the slider it will show the slider in the header.

Here is a video that themepunch has created on how to setup the revolution slider http://www.youtube.com/watch?feature=player_embedded&v=cVleysEPHM4

 

 

 

Skitter slider

In Travelo 2.0 is also the free awesome skitter slider.

In the skitter slider you can choose between 5 themes of the slider

  1.  Default
  2. Minimalist
  3. Round
  4. Clean
  5. Square

You choose also the sizes of the slider

  1. Small 200 x 100 
  2. Medium 500 x 200
  3. Large 800 x 300

And you can choose for every image a different effect.  Here is the list of slider effects:

  1. cube
  2. cubeRandom
  3. block
  4. cubeStop
  5. cubeHide
  6. cubeSize
  7. horizontal
  8. showBars
  9. showBarsRandom
  10. tube
  11. fade
  12. fadeFour
  13. paralell
  14. blind
  15. blindHeight
  16. blindWidth
  17. directionTop
  18. directionBottom
  19. directionRight
  20. directionLeft
  21. cubeStopRandom
  22. cubeSpread
  23. cubeJelly
  24. glassCube
  25. glassBlock
  26. circles
  27. circlesInside
  28. circlesRotate
  29. cubeShow
  30. upBars
  31. downBars
  32. hideBars
  33. swapBars
  34. swapBarsBack
  35. swapBlocks
  36. cut
  37. random
  38. randomSmart

How to setup skitter Short code

Go to Options -> Shortcode slider

You can use Add slider button to add a new slider.

After a new slider fields has opened you must add a slider name, a unique name because this its the slider ID (alias).

Choose the theme of the slider.

Choose the size of the slider

After you added those filed you need to press the button add image, and  it will open some fields to insert an image.

So now you need to add an image, the description  and choose an effect to it.

Note: You can make how many sliders as you want. But they all need to have different names.

After all this is done.

You need to go to the page, post, tour_post or every editor that you want and you can see the icon of the slider gallery. So when you press this button a shortcode will appear in the editor and just put the name of the slider in the shortcode.

[Slider name="Unique Name"]

 

skitter

Short code Tours

To add the slider with all your tours on a different page (The slider like in the home page that displays all the tours).

You need just to press this button  tours in the editor and the shortcode will appear. Now just click update and all is done.

Short code Font Awesome

Font Awesome is a shortcode to add icons with up to 316 icons.

It's easy to add an icon anywhere you want, just like this:

[fontAwesome name="icon-name" size="icon-size"] [/fontAwesome]

 

You can use 3 different sizes, like:  icon-large, icon-2x, icon-3x, icon-4x, or leave it blank for normal size.

here they are a list of icons you can use:

  1. icon-glass
  2. icon-music
  3. icon-search
  4. icon-envelope-alt
  5. icon-heart
  6. icon-star
  7. icon-star-empty
  8. icon-user
  9. icon-film
  10. icon-th-large
  11. icon-th
  12. icon-th-list
  13. icon-ok
  14. icon-remove
  15. icon-zoom-in
  16. icon-zoom-out
  17. icon-off
  18. icon-signal
  19. icon-cog
  20. icon-trash
  21. icon-home
  22. icon-file-alt
  23. icon-time
  24. icon-road
  25. icon-download-alt
  26. icon-download
  27. icon-upload
  28. icon-inbox
  29. icon-play-circle
  30. icon-repeat
  31. icon-refresh
  32. icon-list-alt
  33. icon-lock
  34. icon-flag
  35. icon-headphones
  36. icon-volume-off
  37. icon-volume-down
  38. icon-volume-up
  39. icon-qrcode
  40. icon-barcode
  41. icon-tag
  42. icon-tags
  43. icon-book
  44. icon-bookmark
  45. icon-print
  46. icon-camera
  47. icon-font
  48. icon-bold
  49. icon-italic
  50. icon-text-height
  51. icon-text-width
  52. icon-align-left
  53. icon-align-center
  54. icon-align-right
  55. icon-align-justify
  56. icon-list
  57. icon-indent-left
  58. icon-indent-right
  59. icon-facetime-video
  60. icon-picture
  61. icon-pencil
  62. icon-map-marker
  63. icon-adjust
  64. icon-tint
  65. icon-edit
  66. icon-share
  67. icon-check
  68. icon-move
  69. icon-step-backward
  70. icon-fast-backward
  71. icon-backward
  72. icon-play
  73. icon-pause
  74. icon-stop
  75. icon-forward
  76. icon-fast-forward
  77. icon-step-forward
  78. icon-eject
  79. icon-chevron-left
  80. icon-chevron-right
  81. icon-plus-sign
  82. icon-minus-sign
  83. icon-remove-sign
  84. icon-ok-sign
  85. icon-question-sign
  86. icon-info-sign
  87. icon-screenshot
  88. icon-remove-circle
  89. icon-ok-circle
  90. icon-ban-circle
  91. icon-arrow-left
  92. icon-arrow-right
  93. icon-arrow-up
  94. icon-arrow-down
  95. icon-share-alt
  96. icon-resize-full
  97. icon-resize-small
  98. icon-plus
  99. icon-minus
  100. icon-asterisk
  101. icon-exclamation-sign
  102. icon-gift
  103. icon-leaf
  104. icon-fire
  105. icon-eye-open
  106. icon-eye-close
  107. icon-warning-sign
  108. icon-plane
  109. icon-calendar
  110. icon-random
  111. icon-comment
  112. icon-magnet
  113. icon-chevron-up
  114. icon-chevron-down
  115. icon-retweet
  116. icon-shopping-cart
  117. icon-folder-close
  118. icon-folder-open
  119. icon-resize-vertical
  120. icon-resize-horizontal
  121. icon-bar-chart
  122. icon-twitter-sign
  123. icon-facebook-sign
  124. icon-camera-retro
  125. icon-key
  126. icon-cogs
  127. icon-comments
  128. icon-thumbs-up-alt
  129. icon-thumbs-down-alt
  130. icon-star-half
  131. icon-heart-empty
  132. icon-signout
  133. icon-linkedin-sign
  134. icon-pushpin
  135. icon-external-link
  136. icon-signin
  137. icon-trophy
  138. icon-github-sign
  139. icon-upload-alt
  140. icon-lemon
  141. icon-phone
  142. icon-check-empty
  143. icon-bookmark-empty
  144. icon-phone-sign
  145. icon-twitter
  146. icon-facebook
  147. icon-github
  148. icon-unlock
  149. icon-credit-card
  150. icon-rss
  151. icon-hdd
  152. icon-bullhorn
  153. icon-bell
  154. icon-certificate
  155. icon-hand-right
  156. icon-hand-left
  157. icon-hand-up
  158. icon-hand-down
  159. icon-circle-arrow-left
  160. icon-circle-arrow-right
  161. icon-circle-arrow-up
  162. icon-circle-arrow-down
  163. icon-globe
  164. icon-wrench
  165. icon-tasks
  166. icon-filter
  167. icon-briefcase
  168. icon-fullscreen
  169. icon-group
  170. icon-link
  171. icon-cloud
  172. icon-beaker
  173. icon-cut
  174. icon-copy
  175. icon-paper-clip
  176. icon-save
  177. icon-sign-blank
  178. icon-reorder
  179. icon-list-ul
  180. icon-list-ol
  181. icon-strikethrough
  182. icon-underline
  183. icon-table
  184. icon-magic
  185. icon-truck
  186. icon-pinterest
  187. icon-pinterest-sign
  188. icon-google-plus-sign
  189. icon-google-plus
  190. icon-money
  191. icon-caret-down
  192. icon-caret-up
  193. icon-caret-left
  194. icon-caret-right
  195. icon-columns
  196. icon-sort
  197. icon-sort-down
  198. icon-sort-up
  199. icon-envelope
  200. icon-linkedin
  201. icon-undo
  202. icon-legal
  203. icon-dashboard
  204. icon-comment-alt
  205. icon-comments-alt
  206. icon-bolt
  207. icon-sitemap
  208. icon-umbrella
  209. icon-paste
  210. icon-lightbulb
  211. icon-exchange
  212. icon-cloud-download
  213. icon-cloud-upload
  214. icon-user-md
  215. icon-stethoscope
  216. icon-suitcase
  217. icon-bell-alt
  218. icon-coffee
  219. icon-food
  220. icon-file-text-alt
  221. icon-building
  222. icon-hospital
  223. icon-ambulance
  224. icon-medkit
  225. icon-fighter-jet
  226. icon-beer
  227. icon-h-sign
  228. icon-plus-sign-alt
  229. icon-double-angle-left
  230. icon-double-angle-right
  231. icon-double-angle-up
  232. icon-double-angle-down
  233. icon-angle-left
  234. icon-angle-right
  235. icon-angle-up
  236. icon-angle-down
  237. icon-desktop
  238. icon-laptop
  239. icon-tablet
  240. icon-mobile-phone
  241. icon-circle-blank
  242. icon-quote-left
  243. icon-quote-right
  244. icon-spinner
  245. icon-circle
  246. icon-reply
  247. icon-github-alt
  248. icon-folder-close-alt
  249. icon-folder-open-alt
  250. icon-expand-alt
  251. icon-collapse-alt
  252. icon-smile
  253. icon-frown
  254. icon-meh
  255. icon-gamepad
  256. icon-keyboard
  257. icon-flag-alt
  258. icon-flag-checkered
  259. icon-terminal
  260. icon-code
  261. icon-reply-all
  262. icon-mail-reply-all
  263. icon-star-half-empty
  264. icon-location-arrow
  265. icon-crop
  266. icon-code-fork
  267. icon-unlink
  268. icon-question
  269. icon-info
  270. icon-exclamation
  271. icon-superscript
  272. icon-subscript
  273. icon-eraser
  274. icon-puzzle-piece
  275. icon-microphone
  276. icon-microphone-off
  277. icon-shield
  278. icon-calendar-empty
  279. icon-fire-extinguisher
  280. icon-rocket
  281. icon-maxcdn
  282. icon-chevron-sign-left
  283. icon-chevron-sign-right
  284. icon-chevron-sign-up
  285. icon-chevron-sign-down
  286. icon-html5
  287. icon-css3
  288. icon-anchor
  289. icon-unlock-alt
  290. icon-bullseye
  291. icon-ellipsis-horizontal
  292. icon-ellipsis-vertical
  293. icon-rss-sign
  294. icon-play-sign
  295. icon-ticket
  296. icon-minus-sign-alt
  297. icon-check-minus
  298. icon-level-up
  299. icon-level-down
  300. icon-check-sign
  301. icon-edit-sign
  302. icon-external-link-sign
  303. icon-share-sign
  304. icon-compass
  305. icon-collapse
  306. icon-collapse-top
  307. icon-expand
  308. icon-eur
  309. icon-gbp
  310. icon-usd
  311. icon-inr
  312. icon-jpy
  313. icon-cny
  314. icon-krw
  315. icon-btc
  316. icon-file
  317. icon-file-text
  318. icon-sort-by-alphabet
  319. icon-sort-by-alphabet-alt
  320. icon-sort-by-attributes
  321. icon-sort-by-attributes-alt
  322. icon-sort-by-order
  323. icon-sort-by-order-alt
  324. icon-thumbs-up
  325. icon-thumbs-down
  326. icon-youtube-sign
  327. icon-youtube
  328. icon-xing
  329. icon-xing-sign
  330. icon-youtube-play
  331. icon-dropbox
  332. icon-stackexchange
  333. icon-instagram
  334. icon-flickr
  335. icon-adn
  336. icon-bitbucket
  337. icon-bitbucket-sign
  338. icon-tumblr
  339. icon-tumblr-sign
  340. icon-long-arrow-down
  341. icon-long-arrow-up
  342. icon-long-arrow-left
  343. icon-long-arrow-right
  344. icon-apple
  345. icon-windows
  346. icon-android
  347. icon-linux
  348. icon-dribble
  349. icon-skype
  350. icon-foursquare
  351. icon-trello
  352. icon-female
  353. icon-male
  354. icon-gittip
  355. icon-sun
  356. icon-moon
  357. icon-archive
  358. icon-bug
  359. icon-vk
  360. icon-weibo
  361. icon-renren

Short code Columns

You will find the shortcodes in the editor (1/2 , 1/3, 1/4, 1/6)

Just press the button and the shortcode will appear, now you put the text in the shortcode and all is done.

Google Fonts

To change the font of your site, go to Options->Main->Google Fonts and choose what ever font do you like. There are more then 500 fonts that you can choose from.

 

Price Removal

If you have the need to disable all prices of all your tours without deleting all the prices. Just go to Options->Main and you will see Disable Price. Click on that check box and all the prices will be removed from the web but not from your admin panel because maybe you need to show them again in some point.

Fixes

  1. Special char Booking
  2. Bucket Height
  3. Tab
  4. search.php

1. We realized that the booking form worked fine if you don't use special chars like (. , - / ? ) etc.

Now this is fix so you can name the filters (inputs) like you want.

2. Bucket height was fixed so every time you added text more then the bucket height was, the text was displayed out of the bucket, Now is fixed so the the bucket height is dynamic.

3.  Each time you pressed enter(new line) it displayed like a new tab, So that is fixed now.

4. search.php was missing on the theme so now we added it and designed it so now you can use the search widget.

 

Note: If any of you have those issues, please update the theme.