Hotello Theme Documentation · 2018-10-10 · Hotello Theme User Manual Getting Started 1 Getting Started Introduction Hotello WordPress Theme is a responsive Hotel WordPress theme

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


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.


3

2. ClickontheAddNewbuttontoopentheAddThemesscreen.

3. ClickontheUploadThemebuttonanduploadthezippedthemefileyouhavereceivedfromStyleMixThemes.

Note:DependingonthespeedofyourInternetconnection,itmaytakesometimetouploadthezipfile.


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.


5

6. PastethetokenintheprovidedboxandclickontheSubmitbutton.Ifactivationissuccessful,youwillseeagreencheckmark.

Youcanfollowthismanualifactivationfails.

Pastethegeneratedtokenhere.


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.


7

GettingHelpYourHotelloThemecomeswithsixmonthsoffreesupport.

IncaseyouarefacingproblemswithusingtheHotelloTheme,youcangethelpinthefollowingways:

• Readouronlinedocumentation.• Watchonlinevideotutorialstolearnhowtocustomizethetheme.• VisitourCommunityForum.• SubmitaHelpTicket.

ClickonHotel>SupportintheWordPressmenutoaccesstheSupportpage.

Note:YoucanalsogetextendedsupportthroughsubscriptionsviaThemeForest.

Clickonthisbuttontocreateasupportaccountifyouhaven’talready

createdone.

Youwillneedaccesstothesupportaccounttosubmitahelpticket.


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.


9

Note:DependingonthespeedofyourInternetconnection,itmaytakesometimetoinstallallthepluginsandimportthedemocontent.

Note:Iftheimportfailsorstalls,pleasetrytoreloadthepageandclickonSetuplayoutbuttononceagainorseetheprevioussection:Whattodoifthethemeinstallationfails.

Note:AllthepluginswhicharenotfreecomeunderourEXTENDEDLicense,soyoudon’tneedtopayfortheirlicensetousethem.Someofthemmighthavemessagesrequiringactivation,buttheyarealreadyactivatedonourside.Nopurchasecodeneeded.Whenusingthemunderourlicenseyouwillneedtowaitforthepluginupdatesinourregularthemeupdates.Ifyouwanttobeabletoautoupdatethemfromwp-admin,youwillneedtobuyyourownpersonallicenseforthat.However,wealwaysincludethelatestversionsofthepluginsineveryupdateofthetheme.

SetupLayoutfeatureinstallsallrequiredplugins,importsthechosendemolayoutandwidgets.AfterfinishingtheproceedyoucanvisityoursitefrontpageinordertoseeallreadyfeaturesJ


10

Tip:Ifyouwanttostartfromscratchafterviewingthedemocontent,youcanremovethedemocontentusingtheResetWPplugin(https://wordpress.org/plugins/reset-wp/).ThispluginresetstheWordPressdatabasebacktoitsdefaults.Itwilldeleteallcustomizationsandcontent,butitdoesnotmodifyfiles;itonlyresetsthedatabase.Pleaseseetheabovelinkformoredetails.


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.


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.


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).


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.


16

TypographysettingsIfyouwanttochangeyourwebsitetypographysettings,youneedtogoHotel>ThemOptions>Typography.It’spossibletochangetypographyoptionsforMain(body)andHeadings,alsoParagraphs,Link,BlockquoteandListsettings.


17

SettingtheGeneralColorSchemeforyourWebsiteWiththeHotelthemeyoucanspecifyabasiccolorschemeforyourwebsite.Youcanselectfrombetweenthreepre-definedschemesorcreateyourowncustomschemebydefiningabasecolor,asecondarycolorandathirdcolor.

TospecifytheColorScheme:

1. ClickonHotel>ThemOptions>ColorsintheWordPressmenu.

2. ClickontheSubmitbuttontosaveyoursettings.

Specifyacustombasecolor,secondarycolor,andthirdcolor.


18

SettingUptheHeaderYoucancustomizethelook-and-feeloftheheader.Youcanalsocontrolwhatitemsappearintheheaderareaofyourpages.

Tosetuporcustomizetheheaderofyourwebpages:

ClickonThemeOptions>HeaderintheWordPressmenu.

HeaderBuilder

Youcansetupthethemeheaderindividually.Everysectionoftheheadercanbemodifiedandit’spossibletoadddifferentelementslike:dropdown,text,menu,popup,button,infobox,etc.

Tochangetheheaderlayout:


19

3. ClickonHotel>ThemeOptions>Header>HeaderbuilderintheWordPressmenu.

4. Drag&Dropneededelements.

5. ClickontheSubmitbuttontosaveyourchanges.

Hereyoucanseedetailedvideotutorial–https://www.youtube.com/watch?v=_WTp-6E762A.


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:


21

ClickonThemeOptions>Blog(orShopPages)intheWordPressmenu.

Note:IfusingthedefaultWordPresssidebars,youcanaddwidgetstothesidebarbygoingtoAppearance>Widgetsanddraggingwidgetsontothesidebars.

Tosetupsidebarsonindividualpagesorposts:

Whilecreatingoreditingthepageorpost,addaWidgetisedSidebaroranSTMSidebarVisualComposerelementtothepage.

Note:Youmayfirsthavetoaddanextracolumnforthesidebarbyclickingonthe

button.

Note:UsetheWidgetisedSidebarelementifyouwanttoaddoneofyourpredefinedwidgetstothecolumn,andusetheSTMSidebarelementifyouwanttoaddoneofyourpredefinedsidebarstothecolumn.

Tip:SeeAppendixA:UsingtheWPBakeryVisualComposerPlugintoSetUpthePagesformoreinformationonusingtheVisualComposer.


22

CreatingAdditionalSidebarsInadditiontotheleftandrightsidebars,youcancreateyourownsidebarsusingVisualComposerwidgetsorelements.Youcanthenaddthesesidebarstoindividualpagesorposts.

Tocreateadditionalsidebars:

1. ClickonVCSidebars>AddNewintheWordPressmenu.

2. Designthesidebarasyouwoulddesignanyotherpage.YoucanalsoaddsectionstothesidebarusingVisualComposerElementsandWidgets,ifrequired.

Note:Onceyouhavecreatedthesidebars,youcanaddthesesidebarstoanyofyourpagesorposts.SeeSettingUpSidebarsformoredetails.


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;


24

MegaMenuchildelementsalsohavespecialoptionssuch:

• MegaMenucolumnwidth;• MegaMenuchildcolumnswidth;• MegaMenuicon;• MegaMenucontentimage;


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: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.


Note:IfyouusetheServicesWithTabselement,eachservicecategoryyouhavedefinedwillappearinaseparatetab.

Specifythenumberofservicestobedisplayed.

Specifywhethertodisplay1,2,3,or4servicepostsperrow.

HotelloThemeUserManual Hotelier

30

Hotelier

HotelierisaneasywaytocontrolyourHotelbusiness.TherearealotofExtensionsandservicesfortheHotelier.YoucanseeitssettingsunderDashboard>Hoteliermenu:


31

Reservations YoucanseeallyourreservationsunderHotelier>ReservationmenuinyourDashboard:

ToaddanewreservationviaDashboardclickonHotelier>AddReservation.


32

CalendarHotelierprovideseasytoseeCalendarsectiononDashboardinordertocontrolallreservations.YoucanseethisunderHotelier>Calendar:

HotelloThemeUserManual Rooms

33

Rooms

AllyourHotelRoomsarelocatedunderHotelier>Rooms:

EachroomhasSettings,Title,ViewOptions,Descriptions,Content,FeaturedandGalleryimages.Pleaseseethenextimageasanexample:


34


35

SettingupRoomCategoriesBeforeuploadingdetailsofeventstoyourwebsite,itisagoodideatofirstcreateroomcategories.Thiswillhelpyousegregatetheroomsbasedontheircategory,anddisplayroomsofjustaparticularcategory,ifrequired.

Tosetuproomcategories:

1. ClickonRooms>CategoriesintheWordPressmenu.

2. CreatecategoriesjustasyouwouldcreatenormalcategoriesinWordPress.

SettingupRatesandFacilitiesBesidescategories,RoomposttypeincludesRateandFacilitytaxonomies:

TosetuproomRatesandFacilitiesclickonRooms>RatesorRooms>FacilitesintheWordPressmenu.


36

CreatingaRoomOnceyouhavedefinedyourroomtaxonomies,youcancreateRoomswithdetails.

TocreateaRoompost:

ClickonRooms>AddNewintheWordPressmenu.


37

HotelloThemeUserManual AddingOtherContent

38

AddingOtherContent

Otherthanthespecialtypesofcontentcoveredintheprevioussectionsofthismanual,youcanalsoaddregularcontenttoyourwebsiteasnormalpagesandposts.YoucancreateyourpagesusingClassicmodeortheVisualComposerBackendorFrontendEditors.


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.


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.


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.


44

Ascanbeseenintheaboveimage,theVisualComposercanworkintwomodes:asaBackendeditor,orasaFrontendeditor.

WorkingwiththeBackendEditorClickontheBackendEditorbuttontoswitchtotheBackendmode.

Toaddanelementtothepage,clickontheAddElementbuttonandselectanelementorwidgetfromVisualComposer’svastarrayofelementsorwidgets.

SwitchtoClassicmode.

ChangepagetitleandaddcustomCSS.

Switchtofull-screenediting

mode.

Selectalayoutortemplatefor

thepage.

Addanelementtothe

page.


45

Note:YouwillfindalltheHotelloThemerelatedelementsorwidgetsintheSTM,STMPostPartials,STMVacancyPartials,andSTMStaffPartialstabs.

Clickonanyitemtoaddittothepage.

Clickonthesetabstoviewelementsofaparticularcategory.


46

Forsomeoftheelementsyoumayhavetospecifyadditionaldetailsorsettings.

Theelementwillbeaddedtoyourpageandformattedaccordingtoyoursettings.

Tomakechangestoanyaddedelement,hoverthemousepointerovertheelement.Youwillseeiconsthatallowyoutomove,edit,copyordeletetheitem.

Tip:AsyouaddelementswiththeVisualComposer,usethePreviewbuttontoseewhatyourpagewilllooklike.


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

Documents

Hotello Theme Documentation · 2018-10-10 · Hotello Theme User Manual Getting Started 1 Getting Started Introduction Hotello WordPress Theme is a responsive Hotel WordPress theme