Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • User Guide For

    Încărcat de

    PriyankaSingh
    14 vizualizări27 pagini
    Wordpress theme guide. Web development and easy website.

    Titlu original

    User Guide for

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Wordpress theme guide. Web development and easy website.

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    14 vizualizări27 pagini

    User Guide For

    Încărcat de

    PriyankaSingh
    Wordpress theme guide. Web development and easy website.

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 27

    1

    wplocker.com
    Table of Contents
    1.ThemeOptions
    1.1GeneralOptions
    1.2StyleOptions
    1.3HeaderOptions
    1.4FooterOptions
    1.5HomePage
    1.6ContactPage
    1.7PortfolioOptions
    1.8BlogOptions
    1.9SocialandSEOOptions
    1.10ThemeAutoUpdate
    2.TheHomepageSlider
    2.1AddingSlides
    2.2OrdertheSlides
    3.Custommenus
    4.Shortcodes
    4.1Grid
    4.2ProgressBar
    4.3Tabs
    4.4Teammember
    4.5Icon
    4.6Button
    4.7Divider
    4.8Quote
    4.9Testimonials
    4.10Arrow
    5.Customwidgets
    5.1FlickrPhotostream
    5.2DribbblePhotostream
    5.3LatestPosts
    5.4SocialLinks
    5.5TwitterWidget
    5.6ContactWidget
    6.ThePortfolio
    2
    wplocker.com
    Beforeyougetgoingwiththisdocumentation,wehighlyrecommendthatyouwatchthis
    videothatwillgetyoutothepointofhavingasitesetupjustlikeinthethemedemo.
    Nowletsgetcranking...
    1. Theme Options
    1.1 General Options
    HereyouwillfindthegeneraloptionsfortheFusethemeplustheonebuttondemodata
    importbutton.Byusingthisfeature,wewillimportallthepages,posts,customposts,
    menus,widgetsandthemeoptionstogetyoursitesetupjustlikeintheFusedemo.
    Enableordisablethesmoothscrolling(theApplestylescrolling)foraprofessional
    lookingwebsite.
    Setupthesitelogo(bothnormalandRetinasizedlogoimage2x),thefavicon,theApple
    iconandtheMetroicon.YoucanalsoenteryourGoogleAnalyticstrackingcode.
    3
    wplocker.com
    1.2 Style Options
    Hereyoucanplaywiththestylingoptionstheweprovide.
    Changetheoverallaccentcolorwithabuiltincolorpickerandadjustthecolortomatch
    yourlogoorcompanycolor.
    Youcanalsochangethedefault,includedfont,withoneofthe600+GoogleWebFonts,
    withainstantlivepreviewoftheselectedfont.
    IfyouneedtomakesomeminorCSSchangestothesite,youcanusetheCustomCSS
    StyleboxtoaddthenecessaryCSSoverwriterules.Formoreadvancedchanges,we
    recommendthatyoueditthe.scssfilesorhireadeveloper.Youcanalsoaddcustom
    javascriptcodethatwillbeaddedtoyour<head>section.
    4
    wplocker.com
    1.3 Header Options
    Fromhereyoucanchoosewhetherornottohaveasecondheaderthatwillappearwhen
    youscrolldown.
    Youcanalsosettheheaderfeaturedimageheight(inpixels)thatwillbeusedwhenthe
    youdonthaveanyheadercontent(addedintheHeadersectionundertheWPeditor
    area).SowhenyouinputsomeheaderHTMLcontent,thissettingwillbeignored.When
    youjustaddafeaturedimagetoapostorpage,butnoheaderHTMLcontent,thiswillbe
    theheightoftheimage.
    Ifyouwantustodisplaythefullfeaturedimage,youcansetthissettingto0.
    5
    wplocker.com
    1.4 Footer Options
    FromthissectionyoucancontrolthespecialfooterTwitterfeed(theusername,the
    numberoftweetsandthetitleforthefollowlink).
    Youcanalsodefinethecopyrighttextandchoosewhetherornottoshowyoursocial
    linksdefinedintheSocialandSEOOptionstab.
    6
    wplocker.com
    1.5 Home Page
    Thissectionoffersyouthecontrolsforthehomepage.
    Youcanchoosewhetherornottodisplaytheparallaxanimatedslider,editthecontent
    belowthatslider(theprimarycontentarea),choosewhetherornottodisplaythelatest
    portfolioprojects,andeditthecontentbelowtheportfoliolatestprojects(thesecondary
    contentarea).
    Theportfolioitemsthatappearonthefrontpage,bydefault,aretakenlatestfirst(sothey
    orderedbydateofpublication,descending).But,youalsohavetheoptiontomarkthe
    projectsthatarefeatured(intheeditsectionofeachproject),andthosewillappearfirst
    onthehomepage.
    7
    wplocker.com
    1.6 Contact Page
    Hereyouhavetheoptionstomanagethecontactpageinformation.
    YoucansetthetitleandthecontentoftheboxthatappearsontheleftoftheContact
    Form7Form.AlsoyoucanselectaformfromtheexistingonesinContactForm7.
    Note:Thecontactformneedstohaveacertainsyntaxtoappearlikeinthedemo.Hereisittheform
    contentthatweareusinginthedemo:
    <divclass="row">
    <divclass="span6">
    <p>[text*yournameplaceholder"Name"]</p>
    <p>[email*youremailplaceholder"Email"]</p>
    <pclass="radio"><label>TYPE:</label>[radioradio731use_label_elementdefault:3"Support"
    "Job""General"]</p>
    </div>
    <divclass="span6"><p>[textareayourmessageplaceholder"Message"]</p></div>
    </div>
    <divclass="shcarrowshcarrowaccentwpcf7arrow">[submit"Send"]</div>
    8
    wplocker.com
    Nextyoucansetyourcontactinformation(thatwillbeusedalsointheFuseContact
    widget)thatwillappearontheleftoftheGoogleMap.
    NextyoucanchoosewhetherornottodisplayaGooglemapofyourlocation,andinput
    theneededmaplink.Youcanalsoturnon/offthecustomstylingoftheGMap.
    1.7 Portfolio Options
    Inthissectionyoucancontroltheportfoliopage(thearchivefortheprojects)titleand
    headerimage(werecommenduploadinganimageofatleast1200pxwidesincethiswill
    beafullwidthimage.
    Youcanalsochoosewhetherornottodisplaythecategorydescriptiononthetopofthe
    portfoliocategorypages,setthetextforthecategorylinks/filters(dependingonwhattype
    ofpaginationyouchoose).
    NextyoucanchoosebetweenAJAXpoweredpaginationwithaconfigurablelinktext
    andclasicalNext/Previouspaginationlinks.
    Youalsohaveadvancedcustomposttypecontrolstodefinethesingularandplural,
    changetheslugfortheprojectandportfolio,andalsowhetherornotyouwanttousetags
    foryourprojects.
    9
    wplocker.com
    1.8 Blog Options
    Inthissectionyoucontrolthelookofyourblogarchiveandsinglearticlepages.Youcan
    choosefrom2differentlayoutsforyourarchives(sidebarleftandcontent,andsidebar
    rightandcontent).
    Youcanalsochoosewhetherornottoshowthearticlefeaturedimagesontheblog
    archivesandchangethewordcountforthearchivearticleexcerpts.
    Thesamelayoutoptionsforthesinglearticlelayout(sidebarrightandsidebarleft).Here
    youcancanalsocontrolwhetherornottodisplaythesocialsharinglinksatthebottomof
    eachpost(ifso,youcanchooseforeachonealso).Herestill,youcanchoosetodisplay
    theauthorboxandthecommentstitle.
    10
    wplocker.com
    1.9 Social and SEO Options
    ThissectionisdedicatedtothesocialandSEOoptimizationofyoursite.Youcan
    choosewhetherornottoletusaddthesocialmetatagsthatthesearchengineandshare
    buttonssolove.Wewillneedfromyou,foreachsocialservice,Facebook,Googleand
    Twitter,someinforegardingpublishers,appIDsthatcontrolthesocialpresenceofthe
    website,profileURL.Theexplanationsprovidedforeachfieldareprettyclear.
    NextyouhavetooptionofwhetherornottouseourTwitterWidgetthatwillallowyouto
    displayyourlatesttweetsinyoursidebarorfooter.SincethechangesoftheTwitterAPI
    (v1.1),youarerequiredtodoafewextrastepstomakesureyourtweetsaredisplayed.
    Youwillneedtofollowthislink:https://dev.twitter.com/apps/newandsetupanewTwitter
    Application.
    Note:ThesecredentialsarealsousedfortheTwittersliderinthefooterarea(seeFooterOptions).
    AfteryouvecreatedityouwillseeontheappsmainpagetheConsumerKeyand
    ConsumerSecret(pastethoseintheappropriatefields).TogettheOAuthAccessToken
    andOAuthAccessTokenSecret,youwillneedtogeneratethemusingthebuttonatthe
    bottomofthepage.
    11
    wplocker.com
    Inthissection,youcanalsoplaywiththesocialiconsthatwillbeusedforthecustom
    SocialIconswidgetandtheFootersociallinks(seeFooterOptionstab).Inputyoursocial
    linksandordertheiconswithdrag&drop.
    1.10 Theme Auto Update
    WehaveintegratedinourthemetheEnvato(ThemeForest)APIthatallowsustoupdate
    yourthemewithjustoneclick.ForthistoworkyouwillneedtogotoyourEnvatoaccount
    ,intheSettings>APIKeyssection,andsetupanewAPIkey.Pastethatintogetherwith
    yourEnvatoaccountusernameandanotificationwillappearinyouradminbarassoon
    asanupdateisavailable.
    12
    wplocker.com
    2. The Home Slider
    Yourbeautifulfrontpagecomesintegratedwithafullwidthsliderwithniceanimated
    text,smoothtransitionsandparallaxscrolling.Allyouneedtodoisaddslidesfrom
    theleftsidemenusectionHomepageSlider.
    13
    wplocker.com
    2.1 Adding Slides
    Simplyaddnewslideslikeyouwoulddowithposts.Foryourcomfort,wevemadea
    custominterfaceforadding/editingslidesallowingyoutoenterallthedatanecessaryfor
    youslidestorock.
    UploadorselectandexistingbackgroundimageintheImagesectionusingthe
    WordpressMediaUploader.
    AddtheslidercontentintheContentsectionusingtheWordpresseditor.Youcanhave
    aslittleasaH1titleoryoucanuseourPixelGradeShortcodesplugintoaddicons,
    andmuchmore.Theremaining2inputsallowyoutosetthebuttontextandthelinkofthe
    button.Allthiscontentwillappearabovethebackgroundimage,withnicetransition
    animations.
    Ifyouwantthisslidetobeavideoslide,youcanpasteinanembedcodeoruploadyour
    ownselfhostedmoviesinthesectionbelowthemaincontent.
    14
    wplocker.com
    2.2 Order the Slides
    Toorderthehomepageslides,youneedgointotheeditmode,orusetheQuickedit
    feature,andassignanordernumbertoeachslide.
    Ifyouhaveinstalledandactivatedourrecommendedplugin,SimplePageOrdering,you
    canalsosorttheslideswithdraganddropintheslideslist.Itisuptoyou,butwelovea
    nicedrag&drop.
    3. Custom menus
    Fusewilladdonecustommenuzoneuponactivation,allowingyoutousetheWordpress
    menueditortocontrolthenicelyintegratedmenusatthetopandfooter.
    GotoAppearance>Menus,andcreateonemenuastheheadermenu(youcanhave
    multiplelevels).AfterthatassignthemenutotheHeaderMenulocation,ontheleftside
    section,ThemeLocations.
    15
    wplocker.com
    4. Shortcodes
    Hereiswherethebeautylies.Wevetakenthatextramileandcraftedanadvancedbut
    simpletouseshortcodespluginthatwillallowyou
    togivestructureandblingtoyourpagesandposts.
    Toensureeaseofuse,everythingisvisual,nicely
    packedinamodalwindowaccessiblefromthe
    Wordpresseditor.LookforthatfunkyPbutton.
    16
    wplocker.com
    4.1 Grid
    Themainshortcodethatwillbetheworkhorseofyourpages,istheGridshortcode.This
    enablesyoutodividethecontentintoamultitudeofcolumnsviaasimpleandintuitive
    sliderinterface.Simplychoosehowmanycolumnsdoyouwantandthendragthesliders
    toselecttheproportionsofeachcolumn.Togetthatmuchneedededge,youcanadda
    customcolortothebackgroundoftherowofcolumns(hexadecimalcolorcode)and
    makethebackgroundextendtothefullwidthofthescreen.
    Onceyouaredone,hittheInsertbuttonandwewillgenerateforyoutheshortcode,with
    somedummycontentforeachcolumn.Fromhereyoucanaddwhatcontentyoudesirein
    eachcolumn,text,imagesorevenothershortcodes.
    Youcanhavemultiplerowsofcolumnsinonepage,withdifferentcolumnconfigurations,
    butweurgeyoutotakethetimeandthinkthingsover,soyoudontclutteryourpages
    withtoomuchcomplexity.JustaheadsuptokeepFuseworkinginyourfavour:)
    17
    wplocker.com
    4.2 Progress Bar
    Thisshortcodewillhelpyouaddaanimatedprogressbarwithpercentage,titleand
    marker.
    4.3 Tabs
    ThisshorcodehelpsyoudefinetabswithTitle,FontAwesomeIconandcontent,likethe
    onesonthefrontpageofFuse.ClickontheNewTabbuttontoaddanewtab.
    18
    wplocker.com
    4.4 Team Member
    Thisshortcodehelpsyouaddteammemberinformationinastructuredway,likeyoucan
    seeatthebottomoftheAboutpage.YousimplyaddtheName,Title,Descriptionandan
    imageandyouaregoodtogo.Ifyouoryourteammembersaresociallyengaged(whois
    notthesedays)youcanalsoaddthelinkstothemainsocialnetworks:Twitter,
    Facebook,LinkedInandPinterest.
    19
    wplocker.com
    4.5 Icon
    Becauseiconsarecool,wevemadeiteasyforyoutoaddiconsusingthefamous
    FontAwesomeandEntypoicons.Wealsoallowyouchoosebetween2background
    styles(arectangleorcircle)and3sizes(small,mediumandlarge).Allthesesoyoucan
    bettermakeyourpoint.
    20
    wplocker.com
    4.6 Button
    Tofurtheremphasizeyourcalltoactionorlinks,youcanusethisButtonshortcodetoget
    abeautifulbuttonthatisinlinewiththerestofthetheme(wereallyhatethosepesky
    defaultbrowserbuttons).Simplyinputthebuttonlinkandlabelandyouaregoodtogo.
    Youcanalsochoosethesizeofyourbutton:small,mediumorbig.Forcustomstylingyou
    canaddaCSSclassand/orid.
    4.7 Divider
    Thisshortcodewillhelpyouaddaniceformattedhorizontaldivider,togowithyour
    beautifultheme.Youcancontrolthealignment,thesizeandthecoloringoftheline.
    21
    wplocker.com
    4.8 Quote
    Withthisshortcodeyoucanaddaniceformattedquotewithauthorandlink.Betterthan
    thatolddefaultonethatWordPressgivesyou.
    4.9 Testimonials
    Thisisonehellofastraightforward
    shortcode.Justclickonthebuttonandyou get
    asimpleshortcodethattellsuswhereyou
    wanttodisplayasliderofyourtestimonials.
    Youcanmanagethetestimonialsfromthe
    Testimonialsmenuontheleftside.
    4.10 Arrow
    Anotherstraightforwardshortcodethatsimplyaddsanicearrowinyoucontent(seethe
    arrowsonthecontactpage).
    22
    wplocker.com
    5. Custom widgets
    Tohelpyoufurthercustomizeyoursidebarsandfooterwevecomeupwithaseriesof
    customcodedwidgetsthatintegratebeautifullywithyourFusetheme.Youcanfindthe
    widgetsandthesidebarsintheAppearance>Widgetssectionoftheleftsidemenu.
    5.1 Flickr Photostream
    Usethiswidget(calledFuseFlickrWidget)toaddthelatestphotosfromausersstream
    oraFlickrRSSfeed.Youcansetthewidgettitle,usernameorRSSurl,tags(tofilterthe
    streamtocertaintopics)andthenumberofimagestodisplay(werecommendtokeep
    thisnumbershort,somewherebetween8and12themaximumallowedis20).
    5.2 Dribbble Photostream
    Usethiswidget(calledFuseDribbbleWidget)toaddthelatestphotosfromausers
    Dribbbleaccount.Youcansetthewidgettitle,theDribbbleusernameandthenumberof
    imagestodisplay(werecommendtokeepthisnumbershort,somewherebetween8and
    12themaximumallowedis20).
    23
    wplocker.com
    5.3 Latest Posts Slider
    Usethiswidget(calledFuseLatestPostsSlider)todisplayinyoursidebarorfooterthe
    latestblogpostsintheformofasliderconsistentwiththeTwittersliders.Youcaninput
    theTitleofthewidgetandthenumberofposts.
    5.4 Social Links
    Thisisaverysimpletousewidget(calledFuseSocialLinks).Itsimplydisplaysthe
    sociallinksyouvepreviouslysetupintheFuseThemeOptions,usingourcustom
    designedsocialicons.YoujustneedtotellittheTitleandyouredone.
    5.5 Twitter Widget
    Usingthiswidgetyoucandisplayyourlatesttweetsinyoursidebarorfooterwitha
    beautifulanimatedslideshow.WehaveusedthelatestTwitterAPI(v1.1)soyouarein
    theclear.Butpleaserefertosection1.9ofthisguide,becauseyouhavetosetupsome
    accesscredentialsfirst(thesearemandatorywiththenewAPIversion).
    5.6 Contact Widget
    Usethiswidgettoaddayourcontactinformation(inputtedintheContactPagesectionof
    theThemeOptions)inyoursidebarorfooter.
    24
    wplocker.com
    6. The Portfolio
    Wehavesavedthebestforlast...Letsgetcranking...
    Letusgivesomeinformationabouthowthe
    portfoliogridbasedgalleryissettowork.
    Keepingupthemainidea,wevedecided
    thatwewillmakeiteasyforyou.
    Foreachproject(youcanadd/editnewones
    intheleftsidemenuitemProjects)youjust
    havedefinetherowsofcontentusingour
    customportfoliolayoutbuilder.Youwillbe
    abletocontrolhoweachrowisorganized
    andhoweachrowflowsintooneanother.
    Youhave8layoutstochoosefromforyour
    rows.6rowtypeswithcontentandimages
    and2rowtypesforvideos.Asyoucansee
    wehaveyoucoveredwhenitcomesto
    diversityinpresentingyourwork.
    25
    wplocker.com
    Youcanorderyourportfoliorowswithdrag&dropbyclickanddragontheOrderside
    button.
    ToaddanewrowclickontheAddbutton.Tochangethelayoutofanexistingrowuse
    theEditbuttonandchooseadifferentlayoutfromthepopup.
    ToeditthecontentofacontentareasimplyclickonitandafullWordPressEditorwill
    popupinamodal.YouwillbeableyouseourawesomePixelGradeShortcodespluginto
    addaniconhereandthere.Thechoiceisyours.
    FortheheadersectionoftheprojectyouhavetheHeaderSettingsareaatthebottom
    whereyoucanchoosewhetherornotthisisafeaturedproject(thatwillappearonthe
    homepage),whatHTMLcontentshouldbeshownintheheader,ifany,andthe
    backgroundcoloroftheheadersectionifnoFeaturedimageisselected(fromtheright
    sidemenuifyoudontseetheFeaturedimagesection,pleasechecktoseeifthe
    checkboxischeckedfromtheScreenOptionsdropdownintheupperrightcornerofthe
    page).
    26
    wplocker.com
    Ontheportfolioarchivepagewewilltakethefirstrowofeachprojectanddisplayit,so
    choosethefirstonewisely.Stillonthepage,youcanchoosefromThemeOptions>
    PortfolioOptionstouseAJAXpaginationwithAJAXloadingofthenextprojects,orthe
    classicalNext/Previouspaginationlinks.
    Youalsohaveportfoliocategorypageswhereyoucan,inaddition,displayasmall
    categorydescriptioninthetopsection.
    Thankyouforbuyingandwehopeyouarehavingablastwithourtheme!
    Ifnotpleaseuseoursupportsystemtogethelp:http://pixelgrade.ticksy.com/
    ThePixelGradeTeam
    27
    wplocker.com

    S-ar putea să vă placă și