Hotello Theme Documentation · 2018-10-10 · Hotello Theme User Manual Getting Started 1 Getting...
Transcript of Hotello Theme Documentation · 2018-10-10 · Hotello Theme User Manual Getting Started 1 Getting...
Hotello Theme Documentation
Also available Online manual and Video tutorials.
© 2001 – 2018 Stylemix LLC
TableofContents
GettingStarted.............................................................................................................................1
Introduction....................................................................................................................................1
SystemRequirements.....................................................................................................................2
InstallingtheTheme........................................................................................................................2
Whattodoifthethemeinstallationfails....................................................................................6
ViewingSystemStatus....................................................................................................................6
GettingHelp....................................................................................................................................7
ImportingtheDemoContent..........................................................................................................8
ImportantFeaturesoftheHotelloWordPressTheme..................................................................11
BootstrapFramework...............................................................................................................11
PluginsInstalledwiththeTheme..............................................................................................11
TypesofPosts............................................................................................................................12
SettingUpyourWebsite.............................................................................................................14
CustomizingtheTheme.................................................................................................................15
GeneralThemeOptions............................................................................................................15
Typographysettings..................................................................................................................16
SettingtheGeneralColorSchemeforyourWebsite....................................................................17
SettingUptheHeader...................................................................................................................18
HeaderBuilder..........................................................................................................................18
SettingUptheFooter....................................................................................................................20
SettingUpSidebars.......................................................................................................................20
CreatingAdditionalSidebars.....................................................................................................22
AddingMenustoyourWebsite....................................................................................................23
SettingUptheStandardMenus................................................................................................23
MegaMenuforyourWebsite...................................................................................................23
AddingCustomIcons.....................................................................................................................25
LocalizingorChangingtheLanguageoftheTheme......................................................................25
AddingTestimonials...................................................................................................................26
DisplayingTestimonialsonOtherPagesorPosts..........................................................................27
AddingDetailsofServicesOffered..............................................................................................28
DisplayingtheServiceDetails........................................................................................................29
Hotelier......................................................................................................................................30
Reservations..................................................................................................................................31
Calendar........................................................................................................................................32
Rooms........................................................................................................................................33
SettingupRoomCategories..........................................................................................................35
SettingupRatesandFacilities.......................................................................................................35
CreatingaRoom............................................................................................................................36
AddingOtherContent................................................................................................................38
AdditionalOptionsforPagesandPosts........................................................................................38
MiscellaneousFeatures..............................................................................................................39
AddingaBlogtoyourWebsite......................................................................................................39
IncorporatingaWooCommerceShopinyourWebsite................................................................40
Updatingthetheme...................................................................................................................41
UpdatingviatheWordPressAdminPanel(usingDashboard>Updates).....................................41
UpdatingviatheWordPressAdminPanel(usinganExtraPlugin)................................................42
UpdatingviaFTP............................................................................................................................42
AppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePages...........................43
WorkingwiththeBackendEditor.................................................................................................44
WorkingwiththeFrontendEditor................................................................................................47
AppendixB:UsingtheRevolutionSlider.....................................................................................48
HotelloThemeUserManual GettingStarted
1
GettingStarted
IntroductionHotelloWordPressThemeisaresponsiveHotelWordPressthemetargetedespeciallyforhotel,chalet,resort,motel,hostel,bedandbreakfastandapartmentwithall-in-onebookingsystemwithinthemepackage.Hotelloispoweredbyhotelbookingmanagementfeaturessuchasseasonalpricing,bookingmanagement,taxes,flexibleratesandmanymore.Withouradvancedbookingmanagement,customerscansearchavailableroomsandbookonline.
SomeofthefeaturesoftheHotelloThemeinclude:
• CompleteBookingSystem-Noextrapluginpurchaserequired!• SingleRoomPageTemplates-SeveralSingleRoomPagetemplateswithroomfeatures,
prices,galleryandbookingform.• CheckRoomAvailability-SearchAvailabilityResultsbasedondates,numberofadultsand
children.• FlexiblePricingOptions-SeasonalPricingdependingonspecificperiod/dates.Min/max
daysofaccommodation.• FlexibleRates-Ratesbasedontheaccommodationspecifications(e.g.breakfast,parking,
internet,etc.).• EmailNotifications-Getnotificationbyemailaboutnewreservationorcancellation.• OnlineandOfflinePayments-MakeapaymentonlinefromyourwebsiteviaPayPalorcash.• TaxesandFees–Setpricingonallaccommodationcharges:addmandatoryfees,
accommodationtaxes,servicetaxes.Theguestscanseethesummaryandtotalofchargesbeforemakingabooking.Allthisinfooneachbookingisstoredintheadmindashboardaswell.
• Real-timeWeather-Weatherisveryimportantforholidays.Wecreatedareal-timeweatherwidgetwhichyoucanaddonyourwebsite.
• GDPRCompliant-Yourguestswillfindthecheckboxforopt-inconsentbeloweachbookingformtoacceptyourwebsitetermsandconditionsbeforereservation.
• MultilingualSupport-Easilytranslateawebsitetoanylanguage.• Responsive&MobileFriendly-Hotelloisfullyresponsiveandlooksgreatonalldevices.• BuiltwithSASS–themoststableandpowerfulprofessionalgradeCSSextensionlanguage• CompatiblewithFirefox,Safari,Chrome,EdgeandIE10+• Bootstrap-basedResponsiveLayouts• AbilitytohaveaBackgroundimageforyourwebsite
HotelloThemeUserManual GettingStarted
2
• Abilitytouseanyof800+GoogleFonts• VisualComposerdrag&droppagebuilder• WooCommercecompatibility• CustomSVGandFontAwesomeicons• One-clickdemocontentimport• RetinaReady• SEOready
SystemRequirementsToinstalltheHotelloThemeyoumusthaveaworkingversionofWordPressalreadyinstalled.ForinformationregardingtheinstallingoftheWordPressplatform,pleaseseetheWordPressCodexathttp://codex.wordpress.org/Installing_WordPress.
InstallingtheThemeYoucaninstallthethemejustasyouwouldinstallanyotherWordPressTheme.
Note:Inordertoinstallatheme,youwouldneedtologintoyourWordPressadminareawithAdministratorrights.
Tip:Ifyouwish,youcanviewavideooftheInstallationprocessathttps://youtu.be/WkZnOS1ZDFM
Toinstallthetheme:
1. IntheWordPressDashboard,clickonAppearance>ThemestoopentheThemesscreen.
HotelloThemeUserManual GettingStarted
3
2. ClickontheAddNewbuttontoopentheAddThemesscreen.
3. ClickontheUploadThemebuttonanduploadthezippedthemefileyouhavereceivedfromStyleMixThemes.
Note:DependingonthespeedofyourInternetconnection,itmaytakesometimetouploadthezipfile.
HotelloThemeUserManual GettingStarted
4
4. OncethefileisuploadedclickontheInstallNowbuttontoinstallthetheme.
Note:Ifyouhavetroubleinstallingthetheme,pleaseseethenextsection:Whattodoifthethemeinstallationfails.
5. Oncethethemeisinstalled,youneedtoactivatethethemetoenabletheHotelloThemedemosandthemeautoupdatefeature.ClickonActivatetoactivatethetheme.Youwillthenhavetogenerateatoken.
Stepsforactivatingthetheme:
1)ClickontheGenerateaPersonalTokenlink.AnewwindowwillopenthattakesyoutotheEnvatoAccountsign-inpage.
2)SigninusingthecredentialsofthesameaccountyouusedtopurchasetheHotellotheme.
3)Enteranameforthetoken.(Thisnameistoidentifythistokenanytimelater.)
4)SelectthefollowingcheckboxesfromthePermissionsNeededsection:
*ViewYourEnvatoAccount Username, *DownloadYourPurchasedItems, *VerifyPurchasesYou’veMade,and *ListPurchasesYou’veMade.
5)SelectthecheckboxtoagreetothetermsandconditionsandthenclickontheCreateTokenbutton.
6)Anewpagewillloadwithatokeninabox.SelectthetokentextandcopyittotheclipboardbypressingCtrl+Conyourkeyboard.
HotelloThemeUserManual GettingStarted
5
6. PastethetokenintheprovidedboxandclickontheSubmitbutton.Ifactivationissuccessful,youwillseeagreencheckmark.
Youcanfollowthismanualifactivationfails.
Pastethegeneratedtokenhere.
HotelloThemeUserManual GettingStarted
6
WhattodoifthethemeinstallationfailsIftheimportstallsandfailstorespondafterafewminutes,orifWordPressgivesyouanerrormessage,youaresufferingfromPHPconfigurationlimitsthataresettoolowtocompletetheprocess.Youshouldcontactyourhostingproviderandaskthemtoincreasethoselimitstoaminimumasfollows:
• max_execution_time600• memory_limit128M• post_max_size32M• upload_max_filesize32M
YoucanverifyyourPHPconfigurationlimitsbyinstallingasimplepluginfoundhere:http://wordpress.org/extend/plugins/wordpress-php-info.YoucanalsocheckyourPHPerrorlogstoseetheexacterrorbeingreturned.
ViewingSystemStatusYoucanalsoviewsomeofyourWordPresssystemsettingsbygoingtotheHotelloThemeSystemStatuspage.(ClickonHotel>SystemStatusintheWordPressmenu.)ThispagewillprovideinformationaboutyourWordPressenvironmentandyourserverenvironment.
Anyitemsthatrequireyourattentionwillbehighlightedinyellow.
HotelloThemeUserManual GettingStarted
7
GettingHelpYourHotelloThemecomeswithsixmonthsoffreesupport.
IncaseyouarefacingproblemswithusingtheHotelloTheme,youcangethelpinthefollowingways:
• Readouronlinedocumentation.• Watchonlinevideotutorialstolearnhowtocustomizethetheme.• VisitourCommunityForum.• SubmitaHelpTicket.
ClickonHotel>SupportintheWordPressmenutoaccesstheSupportpage.
Note:YoucanalsogetextendedsupportthroughsubscriptionsviaThemeForest.
Clickonthisbuttontocreateasupportaccountifyouhaven’talready
createdone.
Youwillneedaccesstothesupportaccounttosubmitahelpticket.
HotelloThemeUserManual GettingStarted
8
ImportingtheDemoContentOncethethemeisinstalled,youwillfindanewHotelmenuintheWordPressdashboard.Youcanusethismenutoaccessthedifferenttheme-relatedpages.
Don’tknowwheretostartonbuildingupyoursite?Wehavecreatedanoptionforyoutorecreateourthemedemositewithjustoneclick.
Tip:Beforeimportingthedemocontent,youcancheckoutthevariousdemosathttp://hotel.stylemixthemes.com/.Youcanseethedifferentdemosanddecideonwhichonesuitsyourfirmthebest.
ClickonHotel>DemoImportintheWordPressmenu:
Tip:Youcanusethedemocontentasastartingpointforyourwebsiteandmodifythecontenttosuityourneeds.Inthatcase,selectthedemolayoutthatismostappropriateforyourwebsite.
Eachdemolayoutrequiresanumberofpluginstofunctionproperly.Fortunately,StyleMixThemeshasmadeiteasyforyoutoinstallthepluginsandtheywillbeinstalledautomaticallyduringdemosetupproceed.Inordertostarttheimportproceed,clickontheSetuplayoutbutton.
HotelloThemeUserManual GettingStarted
9
Note:DependingonthespeedofyourInternetconnection,itmaytakesometimetoinstallallthepluginsandimportthedemocontent.
Note:Iftheimportfailsorstalls,pleasetrytoreloadthepageandclickonSetuplayoutbuttononceagainorseetheprevioussection:Whattodoifthethemeinstallationfails.
Note:AllthepluginswhicharenotfreecomeunderourEXTENDEDLicense,soyoudon’tneedtopayfortheirlicensetousethem.Someofthemmighthavemessagesrequiringactivation,buttheyarealreadyactivatedonourside.Nopurchasecodeneeded.Whenusingthemunderourlicenseyouwillneedtowaitforthepluginupdatesinourregularthemeupdates.Ifyouwanttobeabletoautoupdatethemfromwp-admin,youwillneedtobuyyourownpersonallicenseforthat.However,wealwaysincludethelatestversionsofthepluginsineveryupdateofthetheme.
SetupLayoutfeatureinstallsallrequiredplugins,importsthechosendemolayoutandwidgets.AfterfinishingtheproceedyoucanvisityoursitefrontpageinordertoseeallreadyfeaturesJ
HotelloThemeUserManual GettingStarted
10
Tip:Ifyouwanttostartfromscratchafterviewingthedemocontent,youcanremovethedemocontentusingtheResetWPplugin(https://wordpress.org/plugins/reset-wp/).ThispluginresetstheWordPressdatabasebacktoitsdefaults.Itwilldeleteallcustomizationsandcontent,butitdoesnotmodifyfiles;itonlyresetsthedatabase.Pleaseseetheabovelinkformoredetails.
HotelloThemeUserManual GettingStarted
11
ImportantFeaturesoftheHotelloWordPressThemeThissectiondescribessomenoteworthyfeaturesofthistheme.
BootstrapFrameworkTheHotelloThemeusestheBootstrapframework,soyoucanhavealayoutgridofupto12columnstodesignyourpages.Further,eachwidgethasitsownmaximumandminimumwidths,soyouhavetheflexibilityofadjustingthewidthsofthewidgetsdependingonthelayoutofthepages.
PluginsInstalledwiththeThemeAsmentionedbefore,theHotelloThemerequiresanumberofpluginstofunctionproperly.Thefollowingtablegivesyouabriefdescriptionofeachoftheplugins:
Plugin Required/Optional Howithelpsyou…AddToAnyShareButtons
Recommended Allowsyoutoshareyourpostsandpageson100+sharingandsocialmediasitesincludingFacebook,Twitter,Pinterest,Google,WhatsApp,LinkedIn,Tumblr,andReddit.
BreadcrumbNavXT
Required Allowsyoutosetupbreadcrumbnavigationonthepagesshowingthevisitorsthepathtotheircurrentlocationonyourwebsite.
ContactForm7 Recommended Allowsyoutoeasilydesignandaddformstoyourwebsite.
CustomIconsbyStyleMixThemes
Required Thesearecustomiconsthatarerequiredfortheproperfunctioningofthetheme.
HotelloThemeUserManual GettingStarted
12
Plugin Required/Optional Howithelpsyou…
ForceRegenerateThumbnails
Recommended Deletesallexistingthumbnailsandforcestheregenerationofthumbnails.
InstagramFeed Recommended AllowsyoutocustomizeanddisplayInstagramFeedsonyourwebsite.
MailChimpforWordPressLite
Recommended HelpsyouaddsubscriberstoyourMailChimplistsusingvariousmethods.Youcancreategoodlookingopt-informsorintegrateMailChimpwithotherformsonyoursite.
RecentTweetsWidget
Recommended AllowsyoutodisplayTweetsfromTwitteronyourpagesorposts.
SliderRevolution Required Helpstodisplayimageslidersorcarouselsonyourwebpages.Usefulforpicturegalleries,introductions,etc.Hasmanyslideroptionsforvariedpurposes.
STMConfigurations
Required ImportstheDemopages.
TinyMCEAdvanced
Recommended Enhancesthenormalpage/posteditorthatcomeswithWordPress.
WooCommerce Recommended Helpsyousetupyouronlinestoretosellthingsonyourwebsite.
WPBakeryVisualComposer
Required Helpsyoubuildpagesquicklyandeasilywithanintuitivedrag-and-dropinterface.
Note:WeprovideextrapluginswithEXTENDEDlicensesandincludelatestupdatestoeveryversionofthethemes.Thepluginswillbeupdatedwheneveryouupgradeyourtheme.
TypesofPostsTheHotelloThemecomeswithmanybuilt-intypesofpoststhatareusefulforbusiness,finance,orHotellofirms.Thefollowingtableliststhevarioustypesofpostsavailable:
Type Usedfor…Rooms Displayingaroomwithdetails.
Services Displayingdetailsofservicesofferedbyyourfirm.
Testimonials Displayingtestimonialsfromsatisfiedcustomersorclients.
HotelloThemeUserManual GettingStarted
13
ChangingtheTitleofCustomPostTypesIfyouwant,youcanchangethetitleofthefollowingcustomposttypes:
• Services• Rooms• Testimonials
Tochangethetitleoftheabove-mentionedcustomposttype:
1. ClickonHotel>ThemeOptionsintheWordPressmenu.
2. HereselectPostTypesandthenselectthecustomposttypeyouwanttoedit.
3. AftermakingthechangesclickontheSave&Publishbuttonatthetopofthepage.
Note:IfyouchangeanyoftheSTMPostTypenames,youwillneedtoregeneratetheWordpressPermalinks.Todothis:
ClickonSettings>PermalinksintheWordPressmenutoopenthePermalinkSettingspage.Atthebottomofthepage,clickontheSaveChangesbutton.WordPresswillregeneratethepermalinksusingthenewnamesyouhavegiven.
HotelloThemeUserManual ThemeOptions
14
SettingUpyourWebsite
OncetheHotelloThemeisinstalled,youwillnowhavetocustomizethethemetosuityourneeds.Thefollowingaresomeofthetasksyouneedtocompletetocustomizethetheme:
• Buildyourownheader,setupheaders,footers,andsidebarsforyourwebsite.• Chooseyourowncolorschemeandtypographyoptions.• Typeintheaddressandotherinformationaboutyourorganization.• Designandaddwidgetstoyourwebsite.• Setupthemenusofthewebsite.• Changethemainlanguageofthesite(ifyourmainlanguageisnotEnglish).
HotelloThemeUserManual ThemeOptions
15
CustomizingtheThemeYoucanperformgeneralcustomizationoftheHotelloThemebygoingtoHotel>ThemeOptions(justasyouwouldnormallydoforanyothertheme).Here,youcansetupthefollowing:
• Generalsitesettingssuchaslogoandsiteicon;defaultvisualizationoptions;defaultTitleBoxsettings,GoogleandPayPalAPIcredentials,etc.
• HeaderandFooterforyourpages.• Colorsscheme• Typographysettings.• PageandPostTypeoptions.• GeneralPageSettingssuchasthebackgroundimageforthehomepage;fontsettingsfor
theheadingsandbodytextofyourpages;andthelayoutorstructureofcertainpagessuchasthearchiveandshoppages.
GeneralThemeOptions
Hereyoucansetupglobalwebsitesettingssuchassitelogo/icon,viewtypesforbasicmodules,sitewidthandsitelayoutoptions,defaultsettingsforpageTitleBox,GoogleandPayPalAPIsettings.
HotelloThemeUserManual ThemeOptions
16
TypographysettingsIfyouwanttochangeyourwebsitetypographysettings,youneedtogoHotel>ThemOptions>Typography.It’spossibletochangetypographyoptionsforMain(body)andHeadings,alsoParagraphs,Link,BlockquoteandListsettings.
HotelloThemeUserManual ThemeOptions
17
SettingtheGeneralColorSchemeforyourWebsiteWiththeHotelthemeyoucanspecifyabasiccolorschemeforyourwebsite.Youcanselectfrombetweenthreepre-definedschemesorcreateyourowncustomschemebydefiningabasecolor,asecondarycolorandathirdcolor.
TospecifytheColorScheme:
1. ClickonHotel>ThemOptions>ColorsintheWordPressmenu.
2. ClickontheSubmitbuttontosaveyoursettings.
Specifyacustombasecolor,secondarycolor,andthirdcolor.
HotelloThemeUserManual ThemeOptions
18
SettingUptheHeaderYoucancustomizethelook-and-feeloftheheader.Youcanalsocontrolwhatitemsappearintheheaderareaofyourpages.
Tosetuporcustomizetheheaderofyourwebpages:
ClickonThemeOptions>HeaderintheWordPressmenu.
HeaderBuilder
Youcansetupthethemeheaderindividually.Everysectionoftheheadercanbemodifiedandit’spossibletoadddifferentelementslike:dropdown,text,menu,popup,button,infobox,etc.
Tochangetheheaderlayout:
HotelloThemeUserManual ThemeOptions
19
3. ClickonHotel>ThemeOptions>Header>HeaderbuilderintheWordPressmenu.
4. Drag&Dropneededelements.
5. ClickontheSubmitbuttontosaveyourchanges.
Hereyoucanseedetailedvideotutorial–https://www.youtube.com/watch?v=_WTp-6E762A.
HotelloThemeUserManual ThemeOptions
20
SettingUptheFooterYoucancustomizethelook-and-feeloftheFooter.Youcanhaveuptofourfootersonyourpages/posts.Youcancontrolwhatitemsappearinthefooterareaofyourpages.Youcanalsoselectbetweentwoheadingstylesforthefooterandwritethecopyrightmessagetobedisplayedonthewebsite.
Tosetuporcustomizethefooterofyourwebpages:
1. ClickonThemeOptions>FooterintheWordPressmenu.2. ClickonMaintocustomizefooterstyles,orclickonSocialstospecifywhichsocialicons
shouldappearinthefooterandCopyrightforbottomfooterinformation.
Note:Ifyouwanttohavemultiplefooters,youcanspecifywhatinformationshouldbeshowninthedifferentfootersbygoingtoAppearance>WidgetsanddraggingwidgetsintothedifferentFooterareas.
SettingUpSidebarsThePearlThemehastwosidebars,leftandright.Thesesidebarscanbeselectedforarchivesaswellassinglepagesorposts.YoucancreateadditionalsidebarsusingVisualComposerwidgetsorelements.Theseadditionalsidebarscanthenbeaddedtoindividualpagesorposts.
Tosetupthesidebars:
HotelloThemeUserManual ThemeOptions
21
ClickonThemeOptions>Blog(orShopPages)intheWordPressmenu.
Note:IfusingthedefaultWordPresssidebars,youcanaddwidgetstothesidebarbygoingtoAppearance>Widgetsanddraggingwidgetsontothesidebars.
Tosetupsidebarsonindividualpagesorposts:
Whilecreatingoreditingthepageorpost,addaWidgetisedSidebaroranSTMSidebarVisualComposerelementtothepage.
Note:Youmayfirsthavetoaddanextracolumnforthesidebarbyclickingonthe
button.
Note:UsetheWidgetisedSidebarelementifyouwanttoaddoneofyourpredefinedwidgetstothecolumn,andusetheSTMSidebarelementifyouwanttoaddoneofyourpredefinedsidebarstothecolumn.
Tip:SeeAppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePagesformoreinformationonusingtheVisualComposer.
HotelloThemeUserManual ThemeOptions
22
CreatingAdditionalSidebarsInadditiontotheleftandrightsidebars,youcancreateyourownsidebarsusingVisualComposerwidgetsorelements.Youcanthenaddthesesidebarstoindividualpagesorposts.
Tocreateadditionalsidebars:
1. ClickonVCSidebars>AddNewintheWordPressmenu.
2. Designthesidebarasyouwoulddesignanyotherpage.YoucanalsoaddsectionstothesidebarusingVisualComposerElementsandWidgets,ifrequired.
Note:Onceyouhavecreatedthesidebars,youcanaddthesesidebarstoanyofyourpagesorposts.SeeSettingUpSidebarsformoredetails.
HotelloThemeUserManual ThemeOptions
23
AddingMenustoyourWebsiteTheHotelloThemesupportsuptofourmenus.Youcanhaveamenuatthetopofyourwebsitepagesanduptothreemenusinthesidebars.Inadditiontotheabovelocations,youcanalsoaddoneofthefourmenustoanypageyouwantusingtheVisualComposerCustomMenuwidget.
SettingUptheStandardMenus
Asmentionedabove,yourthemeallowsyoutohaveamenuatthetopofyourwebsitepagesanduptothreemenusinthesidebars.
TosetuptheStandardMenus:
3. ClickonAppearance>MenusintheWordPressmenutoopentheMenuspage.4. YoucannowsetupthemenusasyouwoulddoforanyotherWordPresstheme.
MegaMenuforyourWebsite
ThePearlThemesupportsuptofourmenus.Youcanhaveamenuatthetopofyourwebsitepagesanduptothreemenusinthesidebars.Inadditiontotheabovelocations,youcanalsoaddoneofthefourmenustoanypageyouwantusingtheVisualComposerCustomMenuwidget.
YoucangottoAppearance->Menuinordertochangeyourmenuitemsappearance.Forfirstparentofthethememegamenuincludesparameterslike:
• MegaMenutype-BoxedorWide;• Megamenucolumns-itsetshowmanycolumnswouldbeyourMegaMenuchildelements;
HotelloThemeUserManual ThemeOptions
24
MegaMenuchildelementsalsohavespecialoptionssuch:
• MegaMenucolumnwidth;• MegaMenuchildcolumnswidth;• MegaMenuicon;• MegaMenucontentimage;
HotelloThemeUserManual ThemeOptions
25
AddingCustomIconsThePearlthemecomeswithasetoficonsthatyoucanuseonyourpages.Ifyouwant,youcanuseyourownsetoficonsusingspeciallygeneratedicons.
Toaddyourownsetofcustomicons:
1. Designyouriconsandsavethemas.SVGfiles.2. Convertthe.SVGfilestoafontset(.zipfile)byvisitinghttps://icomoon.io/app/3. ClickonSTMIconManagertoopentheIconFontsManagerpageanduploadthefontset
.zipfilebyclickingontheUploadNewIconsbutton.
LocalizingorChangingtheLanguageoftheThemeIfyouareusingtheHotelloThemeinanon-Englishspeakingcountry,youcanchangethelanguageofthethemesothatthewp-adminareawillbeinthelanguageofyourchoice.
Youcanchangeyoursite’smainlanguageviaSettings>General>SiteLanguage.ThiswillchangeallyourWordPressrelatedpromptstotheselectedlanguage,butyouwillstillhavetolocalizethethemerelatedoptionsandscreens.
It’seasytolocalizeyoursiteusingtheLocoTranslateplugin.(Youcanseearelatedtutorialinthefollowingpage:https://localise.biz/help/wordpress/translate-plugin/beginners.)
AnotherwayistoaddyourtranslationsusingthePoEditplatform.Basically,youneedtocreatea.pofilethatcontainsthetranslationsandPoEditwillgeneratea.mofileforyou.Youthenneedtouploadthe.mofiletoyourtheme’slanguagefolder(../wp-content/themes/theme-folder/languages/).
Note:Beforeaddingtranslationsforstaticstrings,youneedtorenamethelanguagefilescorrectlyaccordingyoursite’slanguage.Thethemelanguagefilesarelocatedinthe../wp-content/themes/theme-folder/languages/folder.YoucanfindalistoflanguagecodesatWordPressinyourLanguage.Asanexample,thelanguagecodeforEnglishisen_EN,soyouwouldsavethetranslatedfilesasen_EN.poanden_EN.mo.
Note:TheHotelloThemecomeswithmanycustomposttypes.Youwillneedtochangethenamesofthesecustomposttypestothelanguageofyourchoice.SeeChangingtheTitleofCustomPostTypesformoreinformation.
HotelloThemeUserManual Testimonials
26
AddingTestimonials
Testimonialsareimportantforstrengtheningthecredibilityofyourorganization.
YoucaneasilyaddTestimonialsusingacustomposttypeofTestimonials.Youcanalsodefinecategoriesforthetestimonialsanddisplaytestimonialsofdifferentcategoriesondifferentpages.
ToaddTestimonialposts:
1. ClickonTestimonials>AddNewintheWordPressmenu.
Typethenameofthepersongivingthetestimonial.
Typethetestimonialhere.
Optionally,addanimageasaFeaturedImage.
Typethedetailsofthepersongivingthetestimonial.Youcanoptionallyaddabackgroundimageforthetestimonial.
HotelloThemeUserManual Testimonials
27
DisplayingTestimonialsonOtherPagesorPostsOnceyouhavecreatedtheTestimonialposts,youcandisplaythemalloverthesite,byjustinsertingaVisualComposerTestimonialsorTestimonialsCarouselelement.
Todisplaythetestimonialsonthewebsite:
1. AddtheVisualComposerTestimonialsortheVisualComposerTestimonialsCarouselelementonanypageorpostwhereyouwanttodisplaythetestimonials.
Tip:SeeAppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePagesformoreinformationonusingtheVisualComposer.
Tip:IfusingtheCarouselelement,youmustspecifythenumberoftestimonialstodisplay(intheCarouselsettingspage),orelsetheCarouselwillnotdisplay.
Selectfromoneofthreedisplaystyles.
Specifythenumberoftestimonialstobedisplayed.
Specifywhethertodisplay1,2,or3testimonialsperrow.
Selectthetestimonialcategory,orselect“All”todisplayallthe
testimonials.
Specifywhethertousearrowsorbulletsfornavigation.
HotelloThemeUserManual Services
28
AddingDetailsofServicesOffered
YoucanusethecustomServicesposttypetoadddetailsofservicesofferedbyyourfirm.
ToaddServiceposts:
1. ClickonServices>AddNewintheWordPressmenu.
2. YoucanoptionallyaddthecostoftheserviceintheInformationpanel.
Typethenameoftheservice.
DesignthepageusingVisualComposer
elements.
Optionally,addanimageasaFeaturedImage.
HotelloThemeUserManual Services
29
DisplayingtheServiceDetailsOnceyouhavecreatedtheServiceposts,youcandisplaythemanywhereonthesitebyjustinsertingaVisualComposerServicesorServicesWithTabselement.
Todisplaytheservicesdetailsonthewebsite:
1. AddtheVisualComposerServicesortheVisualComposerServicesWithTabselementonanypageorpostwhereyouwanttodisplaytheservicedetails.
Tip:SeeAppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePagesformoreinformationonusingtheVisualComposer.
Note:IfyouusetheServicesWithTabselement,eachservicecategoryyouhavedefinedwillappearinaseparatetab.
Specifythenumberofservicestobedisplayed.
Specifywhethertodisplay1,2,3,or4servicepostsperrow.
HotelloThemeUserManual Hotelier
30
Hotelier
HotelierisaneasywaytocontrolyourHotelbusiness.TherearealotofExtensionsandservicesfortheHotelier.YoucanseeitssettingsunderDashboard>Hoteliermenu:
HotelloThemeUserManual Hotelier
31
Reservations YoucanseeallyourreservationsunderHotelier>ReservationmenuinyourDashboard:
ToaddanewreservationviaDashboardclickonHotelier>AddReservation.
HotelloThemeUserManual Hotelier
32
CalendarHotelierprovideseasytoseeCalendarsectiononDashboardinordertocontrolallreservations.YoucanseethisunderHotelier>Calendar:
HotelloThemeUserManual Rooms
33
Rooms
AllyourHotelRoomsarelocatedunderHotelier>Rooms:
EachroomhasSettings,Title,ViewOptions,Descriptions,Content,FeaturedandGalleryimages.Pleaseseethenextimageasanexample:
HotelloThemeUserManual Rooms
34
HotelloThemeUserManual Rooms
35
SettingupRoomCategoriesBeforeuploadingdetailsofeventstoyourwebsite,itisagoodideatofirstcreateroomcategories.Thiswillhelpyousegregatetheroomsbasedontheircategory,anddisplayroomsofjustaparticularcategory,ifrequired.
Tosetuproomcategories:
1. ClickonRooms>CategoriesintheWordPressmenu.
2. CreatecategoriesjustasyouwouldcreatenormalcategoriesinWordPress.
SettingupRatesandFacilitiesBesidescategories,RoomposttypeincludesRateandFacilitytaxonomies:
TosetuproomRatesandFacilitiesclickonRooms>RatesorRooms>FacilitesintheWordPressmenu.
HotelloThemeUserManual Rooms
36
CreatingaRoomOnceyouhavedefinedyourroomtaxonomies,youcancreateRoomswithdetails.
TocreateaRoompost:
ClickonRooms>AddNewintheWordPressmenu.
HotelloThemeUserManual Rooms
37
HotelloThemeUserManual AddingOtherContent
38
AddingOtherContent
Otherthanthespecialtypesofcontentcoveredintheprevioussectionsofthismanual,youcanalsoaddregularcontenttoyourwebsiteasnormalpagesandposts.YoucancreateyourpagesusingClassicmodeortheVisualComposerBackendorFrontendEditors.
Tip:SeeAppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePagesformoreinformationonusingtheVisualComposer.
AdditionalOptionsforPagesandPostsThefollowingadditionaloptionsareavailablewhileaddingpagesandposts:
1. Youcanaddsliderstothepage(ifyouhavesetupslidersusingtheRevolutionSliderplugin).
2. Youcanchangetheformattingofthepagetitlearea(foraparticularpage)usingthePagesetuppanel.
HotelloThemeUserManual MiscellaneousFeatures
39
MiscellaneousFeatures
TheHotelloThemealsosupportsblogs.Youcansetupacustomblogpage.Youcanalsohavecustomsidebarsontheblog.
TheHotelloThemeisalsocompatiblewiththeWooCommerceplugin,soyoucanhaveane-commerceshoponyourwebsite.
AddingaBlogtoyourWebsiteYoucanalsohavearegularblogonyourwebsitewhereyou(oranyonewithadmin/authorrights)canputupposts.
Note:BlogpostscanbepublishedfromtheWordPressadminarea.Onlysomeonewithadminorauthorrightscanputupblogposts.
YoucanassignanypageyoucreateasthestartpageofyourblogbyclickingonAppearance>Customize>SiteSettings>StaticFrontPageandselectingthepageinthePostspagedrop-downlist.
HotelloThemeUserManual MiscellaneousFeatures
40
IncorporatingaWooCommerceShopinyourWebsiteWooCommerceisthemostpopulare-commercepluginforWordPress.Nowyoucanhaveashopwithalle-commercefeaturesonyourWordPresssite.
Beforeyoustartaddingproducts,pleasegothroughtheWooCommercepluginsettingsandspecifyeverythingyouneedforyourshop.
Pleaseseehttps://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/formoredetailsonsettingupashopusingtheWooCommerceplugin.
HotelloThemeUserManual UpdatingtheTheme
41
Updatingthetheme
Wewillperiodicallyprovideupdatesofyourtheme.Theseupdatesareessentialifyouwanttohaveabug-freewebsiteaswegivenewfeaturesandimprovementstothethemeovertime.SomeoftheseupdatesmightbeneededinordertomakethethemecompatiblewithnewerversionsofWordPress.
Note:Thereisnoriskoflosingyoursettingsandpageswhenyouupdatethetheme.However,anymodificationsyouhavemadetothecorethemefileswillbelost,soyoushouldbackupthosefilesbeforeyouupdatethetheme.
Tip:Afterupgradingthetheme,youcanupdateextrapluginsviaAppearance>InstallPlugins.
TherearethreewaysofupdatingourWordPressthemestonewerversions:
• UpdatingviatheWordPressAdminPanel(usingDashboard>Updates)• UpdateviatheWordPressAdminPanel(usinganextraplugin)• UpdatingviaFTP
UpdatingviatheWordPressAdminPanel(usingDashboard>Updates)TheeasiestwayofupdatingthethemeisviaDashboard>Updates.Whenanupdateisavailableforyourtheme,youwillgetanotificationinyourWordPressDashboardandyoucanupdateyourthemebyclickingonDashboard>Updatesandupdatingthetheme(justasyouwouldupdateanyotherinstalledtheme).
Note:Youwillneedthetokenkeyyouhadgeneratedwhenyouhadoriginallyinstalledthetheme.YouwillfindthisundertheSettings>APIKeyssectionofyourprofileonThemeforest.
Tip:Afterupgradingthetheme,youcanupdateextrapluginsviaAppearance>InstallPlugins.
HotelloThemeUserManual UpdatingtheTheme
42
UpdatingviatheWordPressAdminPanel(usinganExtraPlugin)ForthismethodyoushouldfirstinstalltheEasyThemeandPluginUpgradesplugin(http://wordpress.org/plugins/easy-theme-and-plugin-upgrades/)Thispluginwillupdateyourthemewhenyouuploadthetheme.zipfile.
OnceyouhaveinstalledtheEasyThemeandPluginUpgradesplugin:
1. DownloadthethemefileupdatefromThemeForest.2. Extractthehotello.zipfilefromthedownloadedthemefile.3. IntheWordPressdashboard,clickonAppearance>Themes>AddNew>UploadTheme>
Browse...4. Selectthehotello.zipfilethatyouextractedinstep2andclickonInstallNow.
Tip:Afterupgradingthetheme,youcanupdateextrapluginsviaAppearance>InstallPlugins.
UpdatingviaFTPAnotherwayofupdatingyourthemeisviaFTP.
Extractthecontentsofthehotello.zipfile(whichyouwillfindinsidethethemeupdatefileyouhavedownloadedfromThemeforest).Thecontentswillbeextractedtoafoldercalledhotello\andtosubfolderswithinthehotellofolder.
Tip:Makesureyourunzippingsoftwaredoesnotcreateanyextradirectorywiththesamenamenestedwithinthehotello\folder.Inotherwords,makesureyouextractthefilestohotello\andnothotello\hotello\.
UsinganFTPprogram,uploadthehotello\folder(anditssubfolders)to/wp-content/themes/onyourwebserver.
Note:TheFTPprogramwillgiveawarningthatthehotello\folderalreadyexists.ChooseReplaceAll.
Tip:Afterupgradingthetheme,youcanupdateextrapluginsviaHotello>Plugins.
FinalTip:Whichevermethodyouusetoupdateyourtheme,clearyourbrowsercacheaftereachupdateifyounoticeanythingoff.Oldthemefilescansometimespersistinyourlocalcacheandmakeyouthinksomething’swrong.
HotelloThemeUserManual AppendixA
43
AppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePages
YourHotelloThemeincorporatestheWPBakeryVisualComposerpluginthathelpsyoubuildpagesquicklyandeasilywithanintuitivedrag-and-dropinterface.
Note:ThisappendixgivesyouabriefoverviewofusingtheWPBakeryVisualComposertocreateyourpages.Pleaseseehttp://codecanyon.net/item/visual-composer-page-builder-for-wordpress/full_screen_preview/242431toviewashortmanualonhowtousetheVisualComposer,orhttp://vc.wpbakery.com/video-tutorials/toseesometutorialvideos.
Tip:ClickonVisualComposer>GeneralSettingsintheWordPressmenutosetuporcontrolthefunctioningoftheVisualComposerplugin.
YoucancontrolwhethertheVisualComposerpluginshouldbeenabledornotfordifferenttypesofpagesandpostsintheVisualComposerSettingspages.IftheVisualComposerisdisabled,youwillseetheWordPressClassicEditorwithbuttonstoswitchtotheVisualComposer(asinthefollowingimage):
SwitchtotheVisualComposerBackendEditor.
SwitchtotheVisualComposerFrontendEditor.
HotelloThemeUserManual AppendixA
44
Ascanbeseenintheaboveimage,theVisualComposercanworkintwomodes:asaBackendeditor,orasaFrontendeditor.
WorkingwiththeBackendEditorClickontheBackendEditorbuttontoswitchtotheBackendmode.
Toaddanelementtothepage,clickontheAddElementbuttonandselectanelementorwidgetfromVisualComposer’svastarrayofelementsorwidgets.
SwitchtoClassicmode.
ChangepagetitleandaddcustomCSS.
Switchtofull-screenediting
mode.
Selectalayoutortemplatefor
thepage.
Addanelementtothe
page.
HotelloThemeUserManual AppendixA
45
Note:YouwillfindalltheHotelloThemerelatedelementsorwidgetsintheSTM,STMPostPartials,STMVacancyPartials,andSTMStaffPartialstabs.
Clickonanyitemtoaddittothepage.
Clickonthesetabstoviewelementsofaparticularcategory.
HotelloThemeUserManual AppendixA
46
Forsomeoftheelementsyoumayhavetospecifyadditionaldetailsorsettings.
Theelementwillbeaddedtoyourpageandformattedaccordingtoyoursettings.
Tomakechangestoanyaddedelement,hoverthemousepointerovertheelement.Youwillseeiconsthatallowyoutomove,edit,copyordeletetheitem.
Tip:AsyouaddelementswiththeVisualComposer,usethePreviewbuttontoseewhatyourpagewilllooklike.
HotelloThemeUserManual AppendixA
47
WorkingwiththeFrontendEditorTheBackendEditorshowsyouthe“blocks”thatmakeupyourpage,butdoesnotshowyouwhatyourpageactuallylookslike.Alternatively,youcanworkwiththeFrontendEditortoseewhattheactualpagelookslikeasyoucreate/editit.
Note:ThiswasjustabriefoverviewofusingtheWPBakeryVisualComposertocreateyourpages.Pleaseseehttp://codecanyon.net/item/visual-composer-page-builder-for-wordpress/full_screen_preview/242431toviewashortmanualonhowtousetheVisualComposer,orhttp://vc.wpbakery.com/video-tutorials/toseesometutorialvideos.
ChangepagetitleandaddcustomCSS.
Seewhatyourpagelookslikeonatablet
orsmartphone.
HotelloThemeUserManual AppendixB
48
AppendixB:UsingtheRevolutionSlider
YourHotelloThemeincorporatestheRevolutionSliderpluginthatallowsyoutodisplayaseriesofimagesorothercontentonyourwebpagesasasliderorcarousel.Thisisusefulforpicturegalleries,introductions,etc.
Note:ThisappendixgivesyouabriefoverviewofusingtheRevolutionSlider.Pleaseseehttp://www.themepunch.com/revslider-doc/slider-revolution-documentation/formoredetailedinstructions.
Beforeyoucanaddaslidertoapage/post,youfirsthavetocreatetheslider.ClickonSliderRevolutionintheWordPressmenutoaccesstheSliderspage.
Youcancreateanewsliderfromscratchoryoucanuseafreeorpaidtemplate.
Oncethesliderhasbeencreated,youcanaddittoyourpages/postsinoneofthefollowingways:
• Inthepage/posteditor,addashortcode[rev_slider alias=“xxx”](where“xxx”
isthenameoftheslider),orusingtheClassicEditor,clickonthe buttonandselectaslidertoinsertitatyourcursorlocation.
• UsingVisualComposer,addaRevolutionSliderwidget/elementto