byPixelGrade
shared on wplocker.com
User Guide
Table of Contents
1.ThemeOptions 1.1GeneralOptions 1.2StyleOptions 1.3HeaderOptions 1.4FooterOptions 1.5HomePage 1.6ContactPage 1.7PortfolioOptions 1.8BlogOptions 1.9SocialandSEOOptions 2.TheHomepageSlider 2.1AddingSlides 2.2OrdertheSlides 3.Custommenus 4.Shortcodes 4.1Columns 4.2Teammember 4.3Icon 4.4Glossary 4.5Circle 4.6Button 5.Customwidgets 5.1FlickrPhotostream 5.2DribbblePhotostream 5.3LatestPosts 5.4SocialLinks 5.5Newsletter 6.ThePortfolio
shared on wplocker.com
1. Theme Options
1.1 General Options
HereyouwillfindthegeneraloptionsfortheSennatheme.
shared on wplocker.com
Enableordisablethesmoothscrolling(theApplestylescrolling)foraprofessionallooking website. Setupthesitelogo(bothnormalandRetinasizedlogoimage2x),thefavicon,theApple iconandtheMetroicon.YoucanalsoenteryourGoogleAnalyticstrackingcode. 3
1.2 Style Options
Hereyoucanplaywiththestylingoptionstheweprovide. Changetheoverallaccentcolorwithabuiltincolorpickerandadjustthecolortomatch yourlogoorcompanycolor.
shared on wplocker.com
Youcanalsochangethedefault,includedfont,withoneofthe600+GoogleWebFonts, withainstantlivepreviewoftheselectedfont. IfyouneedtomakesomeminorCSSchangestothesite,youcanusetheCustomCSS 4
StyleboxtoaddthenecessaryCSSoverwriterules.Formoreadvancedchanges,we recommendthatyoueditthe.scssfilesorhireadeveloper.Youcanalsoaddcustom javascriptcodethatwillbeaddedtoyour<head>section.
1.3 Header Options
shared on wplocker.com
Fromhereyoucanchoosewhethertheheaderportionshouldstayfixed(floatontopofthe contentandremainatthetopofthescreen),orshoulditbeanormalheaderthat disappearswhenyouscrolldown.
1.4 Footer Options
Fromthissectionyoucancontrol thesitewideCalltoActionsection block,andedititscontents,button andlink.Youcanalsodefinethe copyrighttext.
1.5 Home Page
Thissectionoffersyouthecontrols forthehomepage.
Youcanchoosewhetherornotto displaytheparallaxanimatedslider, editthecontentbelowthatslider (theprimarycontentarea),choosewhetherornottodisplaythelatest3portfolioprojects, andeditthecontentbelowtheportfoliolatestprojects(thesecondarycontentarea).
1.6 Contact Page
Hereyouhavetheoptionsto managethecontactpage information.
shared on wplocker.com
Youcanchoosewhetherornot todisplayaGooglemapof yourlocation,andinputthe neededmaplink,editthe contactinformation,editthe pagecontentontheleft,the pagetitleandchoosethe previouslycreatedContact Form7contactform.
1.7 Portfolio Options
Inthissectionyoucanportfoliopage(thearchivefortheprojects)titleandheaderimage (werecommenduploadinganimageofatleast1200pxwidesincethiswillbeafullwidth image).
shared on wplocker.com
Youalsohaveadvancedcustomposttypecontrolstodefinethesingularandplural,change theslugfortheprojectandportfolio,andalsowhetherornotyouwanttousetagsforyour projects.
shared on wplocker.com
1.8 Blog Options
Inthissectionyoucontrolthelookof yourblogarchiveandsinglearticle pages.Youcanchoosetheheader imagethatwillbeshownbehindthe blogarchivepages,choosefrom3 differentlayoutsforyourarchives(full widthwithoutsidebar,sidebarleftand content,andsidebarrightandcontent). Youcanalsochoosewhetherornotto showthearticlefeaturedimagesonthe blogarchivesandchangetheword countforthearchivearticleexcerpts. 8
Thesamelayoutoptionsforthesinglearticlelayout(fullwidth,sidebarrightandsidebar left).
shared on wplocker.com
1.9 Social and SEO Options
Thissectionisdedicatedtothesocial andSEOoptimizationofyoursite.You canchoosewhetherornottoletusadd thesocialmetatagsthatthesearch engineandsharebuttonssolove.We willneedfromyou,foreachsocial service,Facebook,GoogleandTwitter, someinforegardingpublishers,app IDsthatcontrolthesocialpresenceof thewebsite,profileURL.The explanationsprovidedforeachfieldare prettyclear.
Inthissection,youcanalsoplaywiththesocialiconsthatwillbeusedforthecustomSocial Iconswidget.Inputyoursociallinksandordertheiconswithdrag&drop.
shared on wplocker.com
2. The Homepage Slider
Yourbeautifulfrontpagecomesintegratedwithafullwidth sliderwithniceanimatedtext,smoothtransitionsand parallaxscrolling.Allyouneedtodoisaddslidesfromthe leftsidemenusectionHomepageSlider.
2.1 Adding Slides
Simplyaddnewslideslikeyouwoulddowithposts.Foryourcomfort,wevemadea custominterfaceforadding/editingslidesallowingyoutoenterallthedatanecessaryfor youslidestorock.
10
shared on wplocker.com
UploadorselectandexistingbackgroundimageintheImagesectionusingtheWordpress MediaUploader. AddtheslidercontentintheContentsectionusingtheWordpresseditor.Youcanhaveas littleasah1titleoryoucanuseourPixelGradeShortcodesplugintoaddcolumns, icons,andmuchmore.Theremaining2inputsallowyoutosetthebuttontextandthelinkof thebutton.Allthiscontentwillappearabovethebackgroundimage,withnicetransition animations.
11
2.2 Order the Slides
Toorderthehomepageslides,youneedgointotheedit mode,orusetheQuickeditfeature,andassignanorder numbertoeachslide.
3. Custom menus
Sennawilladd2custommenuzones uponactivation,allowingyoutouse theWordpressmenueditortocontrol thenicelyintegratedmenusatthetop andfooter.
shared on wplocker.com
GotoAppearance>Menus,and create2menus,oneastheheader menu(youcanhavemultiplelevels) andoneasthefootermenu(onlyone level).Afterthatassigneacheach menutotherespectivelocation,inthe leftsidesectionThemeLocations.
4. Shortcodes
Hereiswherethebeautylies.Wevetakenthat extramileandcraftedanadvancedbutsimpleto useshortcodespluginthatwillallowyoutogive structureandblingtoyourpagesandposts.To ensureeaseofuse,everythingisvisual,nicely packedinamodalwindowaccessiblefromthe Wordpresseditor.LookforthatfunkyPbutton.
12
4.1 Columns
Themainshortcodethatwillbetheworkhorseofyourpages,istheColumnsshortcode. Thisenablesyoutodividethecontentintoamultitudeofcolumnsviaasimpleandintuitive sliderinterface.Simplychoosehowmanycolumnsdoyouwantandthendragtheslidersto selecttheproportionsofeachcolumn.Togetthatmuchneedededge,youcanadda customcolortothebackgroundoftherowofcolumns(hexadecimalcolorcode)andmake thebackgroundextendtothefullwidthofthescreen. Onceyouaredone,hittheInsertbuttonandwewillgenerateforyoutheshortcode,with somedummycontentforeachcolumn.Fromhereyoucanaddwhatcontentyoudesirein eachcolumn,text,imagesorevenothershortcodes.
shared on wplocker.com
13
shared on wplocker.com
Youcanhavemultiplerowsofcolumnsinonepage,withdifferentcolumnconfigurations, butweurgeyoutotakethetimeandthinkthingsover,soyoudontclutteryourpageswith toomuchcomplexity.JustaheadsuptokeepSennaworkinginyourfavour:)
4.2 Team member
Thisshortcodehelpsyouaddteammember informationinastructuredway,likeyoucansee atthebottomoftheAboutpage.Yousimplyadd theName,Title,Descriptionandanimageand youaregoodtogo.Ifyouoryourteammembers aresociallyengaged(whoisnotthesedays)you canalsoaddthelinkstothemainsocialnetworks: Twitter,Facebook,LinkedInandPinterest. 14
4.3 Icon
Becauseiconsarecool,wevemadeit easyforyoutoaddiconsusingthefamous FontAwesomeicons.Wealsoallowyou choosebetween2backgroundstyles(a rectangleorcircle)and3sizes(small, mediumandlarge).Allthesesoyoucan bettermakeyourpoint.
shared on wplocker.com
4.4 Glossary
Usingthisshortcodeyoucanaddaglossaryattheendofyourpagesorposts,witha customstyledtitle,linkandleftorrightaligned.SimplyinputtheTitle,Link,Contentand Alignment.YoucanalsoinputaCSSclasstoallowyoutocustomstyletheglossary.
4.5 Circle
Tomakeyourpointaboutcertainkeyaspectsofyourvision,youcanusetheCircle shortcodetoaddawordenclosedinnicelystyledcircle.Maybeatthetopofyourcolumns definedusingtheColumnshortcode?
4.6 Button
15
Tofurtheremphasizeyourcalltoactionorlinks,youcanusethisButtonshortcodetogeta beautifulbuttonthatisinlinewiththerestofthetheme(wereallyhatethosepeskydefault browserbuttons).Simplyinputthebuttonlinkandlabelandyouaregoodtogo.Youcan alsochoosethesizeofyourbutton:small,mediumorbig.Forcustomstylingyoucanadda CSSclassand/orid.
5. Custom widgets
Tohelpyoufurthercustomizeyoursidebarsandfooterwevecomeupwithaseriesof customcodedwidgetsthatintegratebeautifullywithyourSennatheme.Youcanfindthe widgetsandthesidebarsintheAppearance>Widgetssectionoftheleftsidemenu.
5.1 Flickr Photostream
shared on wplocker.com
Usethiswidget(calledSennaFlickrWidget)toaddthelatestphotosfromausersstream oraFlickrRSSfeed.Youcansetthewidgettitle,usernameorRSSurl,tags(tofilterthe streamtocertaintopics)andthenumberofimagestodisplay(werecommendtokeepthis numbershort,somewherebetween8and12themaximumallowedis20).
5.2 Dribbble Photostream
Usethiswidget(calledSennaDribbbleWidget)toaddthelatestphotosfromausers Dribbbleaccount.Youcansetthewidgettitle,theDribbbleusernameandthenumberof imagestodisplay(werecommendtokeepthisnumbershort,somewherebetween8and 12themaximumallowedis20). 16
5.3 Latest Posts
Usethiswidget(calledSennaLatestPosts)todisplayinyoursidebarorfooterthelatest blogposts,thefirsthavingbesidesthetitlelink,ashortexcerpt.YoucaninputtheTitleof thewidgetandthenumberofposts.
5.4 Social Links
Thisisaverysimpletousewidget(calledSennaSocialLinks).Itsimplydisplaysthesocial linksyouvepreviouslysetupintheSennaThemeOptions,usingourcustomdesigned socialicons.YoujustneedtotellittheTitleandyouredone.
5.5 Newsletter
shared on wplocker.com
6. The Portfolio
Usethiswidgettogetacustomstylednewsletterform.
Letusgivesomeinformationabouthowtheportfoliogridbasedpatchworkstylegalleryis settowork.Keepingupthemainidea,wevedecidedthatwewillmakeiteasyforyou.For eachproject(youcanadd/editnewonesintheleftsidemenuitemProjects)youjusthave toaddyourcontent,uploadtheimages(werecommendatleast700pxwideimages)and, thisisimportant,tosettheFeaturedimage.Thiswillbetheimagethatwillbeusedasthe bigimageonthehomepage,portfoliopage,andtheprojectpage.
17
Therestoftheimageswillbechosenbasedontheiraspectratiobecausewe(andyouwe think)wanttocropaslittleaspossiblefromyourcarefullymadepictures.Soforeach smallerimagewetrytofindsuitablecandidates.Ifyouhaventuploadedenoughimages toaproject(weneedatleast45dependingofthepositionoftheprojectinthegalleryso ifyouuploadmorethan5youwillbecovered)wewillfillthatpositionwiththesiteaccent color,definedintheThemeOptions>StyleOptions. Ontheprojectpage,weonlycropthebigimage,therestbeingshrunktofitthegrid,sono croppingthere.
shared on wplocker.com
18
