Created: 09 / September / 2014     |       Latest Update: 15 / July / 2016      |       Email: support@wedesignthemes.com        |   By: designthemes

Shortcodes

This Wordpress theme "SpaLab" comes with several shortcodes that helps in customizing your content easier. In this theme, Shortcode Builder can used to build the essential shortcodes. The following image will show you the essential shortcode builder, and it displays only in Visual Mode of post content textarea.

List of Shortcodes

 

Accordion

Default 
 
[dt_sc_accordion_group]
    [dt_sc_toggle title="Accordion 1"]
        Lorem
    [/dt_sc_toggle]
    [dt_sc_toggle title="Accordion 2"]
        Lorem
    [/dt_sc_toggle]
    [dt_sc_toggle title="Accordion 3"]
        Lorem
    [/dt_sc_toggle]
[/dt_sc_accordion_group]
Framed 
        
[dt_sc_accordion_group]
    [dt_sc_toggle_framed title="Accordion 1"]
        Lorem
    [/dt_sc_toggle_framed]
    [dt_sc_toggle_framed title="Accordion 2"]
        Lorem
    [/dt_sc_toggle_framed]
    [dt_sc_toggle_framed title="Accordion 3"]
        Lorem
    [/dt_sc_toggle_framed]
[/dt_sc_accordion_group]
Attribute Options Input Variable Example
Title   title title="Accordion 1"

 

Animation

[dt_sc_animation effect="swing" delay="400"] Add Content to Animate [/dt_sc_animation]
Attribute Options Input Variable Example
Effect flash,shake,bounce,tada,swing,wobble,pulse,flip,flipInX,flipOutX,flipInY,flipOutY,fadeIn, fadeInUp,fadeInDown,fadeInLeft,fadeInRight,fadeInUpBig,fadeInDownBig,fadeInLeftBig,fadeInRightBig, fadeOut,fadeOutUp,fadeOutDown,fadeOutLeft,fadeOutRight,fadeOutUpBig,fadeOutDownBig,fadeOutLeftBig, fadeOutRightBig,bounceIn,bounceInUp,bounceInDown,bounceInLeft,bounceInRight,bounceOut,bounceOutUp, bounceOutDown,bounceOutLeft,bounceOutRight,rotateIn,rotateInUpLeft,rotateInDownLeft,rotateInUpRight, rotateInDownRight,rotateOut,rotateOutUpLeft,rotateOutDownLeft,rotateOutUpRight,rotateOutDownRight, hinge,rollIn,rollOut,lightSpeedIn,lightSpeedOut effect effect="flash"
delay   delay delay="400"

 

Buttons

[dt_sc_button link="http://google.com" size="small" variation="violet" target="_blank"]Small Button[/dt_sc_button]
[dt_sc_button link="http://google.com" size="medium" variation="blue" target="_blank"]Medium Button[/dt_sc_button]
[dt_sc_button link="http://google.com" size="large" variation="red" target="_blank"] Large Button[/dt_sc_button]
[dt_sc_button link="http://google.com" size="xlarge" variation="yellow" target="_blank"]XLarge Button[/dt_sc_button]
Attribute Options Input Variable Example
Link   link link="http://google.com"
Size small, medium, large, xlarge size size="small"
Background Color   bgcolor bgcolor="#7f7f7f"
Variation blue, chocolate, coral, cyan, eggplant, electricblue, ferngreen, gold,green, grey, khaki, ocean, orange, palebrown, pink, purple, raspberry, red, skyblue, slateblue variation variation="violet"
Text Color   textcolor textcolor="#81d742"
Target _blank, _new, _parent, _self, _top target target="_blank"
Class   class class="custom-class"
Title   title title="Small Button"

 

Blockquotes 

[dt_sc_blockquote type="type1" align="left" textcolor="#a3258e" variation="orange" cite="Designthemes"]Lorem[/dt_sc_blockquote]
[dt_sc_blockquote type="type2" align="left" textcolor="#a3258e" variation="orange" cite="Designthemes"]Lorem[/dt_sc_blockquote]
[dt_sc_blockquote type="type3" align="left" textcolor="#a3258e" variation="orange" cite="Designthemes"]Lorem[/dt_sc_blockquote]
Attribute Options Input Variable Example
Type type1, type2, type3 type type="type1"
Align left, right, center align align="left"
Text Color   textcolor textcolor="#a3258e"
Variation blue, chocolate, coral, cyan, eggplant, electricblue, ferngreen, gold, green, grey, khaki, ocean, orange, palebrown, pink, purple, raspberry, red, skyblue, slateblue variation variation="orange"
Cite   cite cite="Designthemes"

 

Call Out 

[dt_sc_callout_box type="type1" button_text="Purchase Now" link="http://google.com" target="_blank"]
Lorem
Lipsum
[/dt_sc_callout_box]
Attribute Options Input Variable Example
Type type1, type2, type3, type4, type5 type type="type1"
Button Label   button_text button_text="Purchase Now"
Link   link link="http://google.com"
Target _blank, _new, _parent, _self, _top target target="_blank"

 

Call Out With Moving Background 

[dt_sc_callout_box_with_moving_bg background_image_url="#" bgcolor="#eeee22"]
Lorem
Lipsum
[/dt_sc_callout_box_with_moving_bg]
Attribute Options Input Variable Example
Background Image Url   background_image_url background_image_url="#"
Background Color   bgcolor bgcolor="#eeee22"

 

Column Layout

[dt_sc_one_half first]
	[dt_sc_one_third_inner first]Content for 1/3 Column here[/dt_sc_one_third_inner]
	[dt_sc_one_third_inner]Content for 1/3 Column here[/dt_sc_one_third_inner]
	[dt_sc_one_third_inner]Content for 1/3 Column here[/dt_sc_one_third_inner]
[/dt_sc_one_half]
[dt_sc_one_half]
	Content for 1/2 Column here
[/dt_sc_one_half]

 

Colored Box 

[dt_sc_icon_box_colored fontawesome_icon='leaf' title='Well Trained Professionals' bgcolor='#333334' ]
	Lorem
	[dt_sc_button link="#" size="small" target="_blank"]Know More[/dt_sc_button]
[/dt_sc_icon_box_colored]
Attribute Options Input Variable Example
Font Awesome Icons   fontawesome _icon fontawesome_icon='leaf'
Title   title title='Well Trained Professionals'
Background Color   bgcolor bgcolor='#333334'

 

Contact Info 

[dt_sc_address  line1="No: 58 A, East Madison St" line2="Baltimore, MD, USA" /]
Attribute Options Input Variable Example
Line1   line1 line1="No: 58 A, East Madison St"
Line2   line2 line2="Baltimore, MD, USA" 
[dt_sc_phone  phone="+1 200 258 2145" /]
Attribute Options Input Variable Example
Phone   phone phone="+1 200 258 2145" 
[dt_sc_fax  fax="+1 100 458 2345" /]
Attribute Options Input Variable Example
Fax   fax fax="+1 100 458 2345" 
[dt_sc_email  emailid="yourname@somemail.com" /]
Attribute Options Input Variable Example
Emailid   emailid emailid= "yourname@somemail.com" 
[dt_sc_web  url="http://www.google.com" /]
Attribute Options Input Variable Example
Url   url url="http://www.google.com"

 

Counter 

[dt_sc_counter title="Lorem" number="40" /]
Attribute Options Input Variable Example
Title   title title="Lorem"
Number   number number="40"

 

Donut Chart 

[dt_sc_donutchart_small title="Lorem" bgcolor="#808080" fgcolor="#4bbcd7" percent="70" description="Lorem" /]

[dt_sc_donutchart_medium title="Lorem" bgcolor="#808080" fgcolor="#7aa127" percent="65" description="Lorem" /]

[dt_sc_donutchart_large title="Lorem" bgcolor="#808080" fgcolor="#a23b6f" percent="50" description="Lorem" /]
Attribute Options Input Variable Example
Title   title title="Lorem"
Background Color   bgcolor bgcolor="#808080"
Foreground Color   fgcolor fgcolor="#4bbcd7"
Percent   percent percent="50"
Description   description description="Lorem"

 

Donut Chart Type2 

[dt_sc_donutchart_small_type2 title="Lorem" bgcolor="#808080" fgcolor="#4bbcd7" percent="70" description="Lorem" /]

[dt_sc_donutchart_medium_type2 title="Lorem" bgcolor="#808080" fgcolor="#7aa127" percent="65" description="Lorem" /]

[dt_sc_donutchart_large_type2 title="Lorem" bgcolor="#808080" fgcolor="#a23b6f" percent="50" description="Lorem" /]
Attribute Options Input Variable Example
Title   title title="Lorem"
Background Color   bgcolor bgcolor="#808080"
Foreground Color   fgcolor fgcolor="#4bbcd7"
Percent   percent percent="50"
Description   description description="Lorem"

 

Drop Cap 

[dt_sc_dropcap type="Circle" bgcolor="#dd3333" variation="green" textcolor="#0e7759"]A[/dt_sc_dropcap]
Attribute Options Input Variable Example
Type Circle, Bordered Circle, Square, Bordered Square type type="Circle"
Background Color   bgcolor bgcolor="#dd3333"
Variation blue, chocolate, coral, cyan, eggplant, electricblue, ferngreen, gold, green, grey, khaki, ocean, orange, palebrown, pink, purple, raspberry, red, skyblue, slateblue variation variation="green"
Number   number number="40"

 

Dividers 

[dt_sc_clear]
[dt_sc_hr_border]
[dt_sc_hr_border_small]
[dt_sc_hr]
[dt_sc_hr_medium]
[dt_sc_hr_large]
[dt_sc_hr top]
[dt_sc_hr_invisible]
[dt_sc_hr_invisible_small]
[dt_sc_hr_invisible_medium]
[dt_sc_hr_invisible_large]

 

Icon Box 

[dt_sc_icon_box type ="type1" fontawesome_icon='leaf' title='Lorem' link='#' ]Lorem[/dt_sc_icon_box]
Attribute Options Input Variable Example
Type   type1, type2, type3, type4, type5, type6, type7 type ="type1"
Fontawesome Icon   fontawesome _icon fontawesome _icon='leaf'
Title   title title='Lorem'
Link   link link='#'

 

Full Width Section 

[dt_sc_fullwidth_section backgroundcolor="#eeee22" parallax="no" backgroundrepeat="no-repeat" backgroundposition="left top" paddingtop="20" 
paddingbottom="20" textcolor="#81d742"]Lorem [/dt_sc_fullwidth_section]
Attribute Options Input Variable Example
Background Color   background color background color="#eeee22"
Background Image   background image background image= "http://wedesignthemes.com/themes/dt-spalab/wp-content/uploads/2014/07/pricing2.jpg"
Background Opacity   opacity opacity="0.7"
Parallax Effect no,yes parallax parallax="no"
Background Repeat no-repeat, repeat, repeat-x, repeat-y background repeat background repeat="no-repeat"
Background Position left top, left center, left bottom, right top, right bottom, right center, center top, center bottom, center center background position background position="left top"
Padding Top   paddingtop paddingtop="20"
Padding Bottom   padding bottom padding bottom="20"
Text Color   text color text color="#81d742"
CSS Class   class class="custom-class-here"

 

Lists

Ordered Lists 
[dt_sc_fancy_ol style="decimal" variation="blue"]
    Lorem ipsum dolor sit
    Praesent convallis nibh
[/dt_sc_fancy_ol]
Attribute Options Input Variable Example
Style decimal, decimal-leading-zero, lower-alpha,lower-roman,upper-alpha,upper-roman style style="decimal"
Variation blue, chocolate, coral, cyan, eggplant, electricblue, ferngreen, gold, green, grey, khaki, ocean, orange, palebrown, pink, purple, raspberry, red, skyblue, slateblue variation variation="blue"

Unordered Lists 
[dt_sc_fancy_ul style="arrow" variation="blue"]
    Lorem ipsum dolor sit
    Praesent convallis nibh
[/dt_sc_fancy_ul]
Attribute Options Input Variable Example
Style arrow, rounded-arrow, double-arrow, heart, trash, star, tick, rounded-tick, cross, rounded-cross, rounded-question, rounded-info, delete, warning, comment, edit, share , plus ,rounded-plus, minus,rounded-minus, asterisk, cart, folder, folder-open, desktop, tablet, mobile, reply, quote, mail,e xternal-link, adjust, pencil, print, tag,t humbs-up, thumbs-down, time, globe, pushpin, map-marker, link, paper-clip, download, key, search, rss, twitter, facebook, linkedin, google-plus style style="decimal"
Variation blue, chocolate, coral, cyan, eggplant, electricblue, ferngreen, gold, green, grey, khaki, ocean, orange, palebrown, pink, purple, raspberry, red, skyblue, slateblue variation variation="blue"

Manual Lists 
[dt_sc_manual_list type="type1"]
	[dt_sc_box]1[/dt_sc_box]Alternative Therapies
[/dt_sc_manual_list]
Attribute Options Input Variable Example
Type type1,type2 type1 type="type1"

Lists With Font Awesome Icons 
[list_with_font_awesome_icons style="type2"]
	[font_awesome_icon class="fa-leaf"] Created from natural herbs - Ginseng roots extract
[/list_with_font_awesome_icons]

 

Pull Quote 

 [dt_sc_pullquote type="pullquote1" align="left" icon="yes" cite="test"]Lorem [/dt_sc_pullquote]
Attribute Options Input Variable Example
type pullquote1, pullquote2, pullquote3, pullquote4, pullquote5, pullquote6 type type="pullquote1"
align left,right,center align align="left"
icon yes,no icon icon="yes"
textcolor   textcolor textcolor="#eeee22"
cite   test cite="test"

 

Pricing Tables

Type 1 

[dt_sc_pricing_table type ="type1"]
    [dt_sc_one_third first] 
        [dt_sc_pricing_table_item heading='Heading' button_text='Buy Now' button_link='#' price='$15' per='month']
            Text
            Text
        [/dt_sc_pricing_table_item]
    [/dt_sc_one_third] 
    [dt_sc_one_third] 
        [dt_sc_pricing_table_item heading='Heading' button_text='Buy Now' button_link='#' price='$15' per='month' selected]
            Text
            Text
        [/dt_sc_pricing_table_item]
    [/dt_sc_one_third] 
    [dt_sc_one_third] 
        [dt_sc_pricing_table_item heading='Heading' button_text='Buy Now' button_link='#' price='$15' per='month' ]
            Text
            Text
        [/dt_sc_pricing_table_item]
    [/dt_sc_one_third] 
[/dt_sc_pricing_table]
Attribute Options Input Variable Example
Type type1 type type="type1"
Heading   heading heading='Heading'
Button Text   button_text button_text='Buy Now'
Button Link   button_link button_link='#'
Price   price price='$15'
Per Month   per per='month'
Type 2 - With Image 

[dt_sc_pricing_table type =" type2"]
[dt_sc_one_third]
 [dt_sc_pricing_table_item_with_image thumb='http://dummyimage.com/350x200' heading='Heading' button_text='Buy Now' button_link='#' price='$15' 
  per='month']
     Text
     Text
 [/dt_sc_pricing_table_item_with_image]
[/dt_sc_one_third]
[dt_sc_one_third]
 [dt_sc_pricing_table_item_with_image thumb='http://dummyimage.com/350x200' heading='Heading' button_text='Buy Now' button_link='#' price='$15' 
  per='month']
     Text
     Text
 [/dt_sc_pricing_table_item_with_image]
[/dt_sc_one_third]
[dt_sc_one_third]
 [dt_sc_pricing_table_item_with_image thumb='http://dummyimage.com/350x200' heading='Heading' button_text='Buy Now' button_link='#' price='$15' 
  per='month']
     Text
     Text
 [/dt_sc_pricing_table_item_with_image]
[/dt_sc_one_third]
[/dt_sc_pricing_table]
Attribute Options Input Variable Example
Type type2 type type="type2"
Thumb   thumb thumb= 'http://dummyimage.com/350x200'
Heading   heading heading='Heading'
Button Text   button_text button_text='Buy Now'
Button Link   button_link button_link='#'
Price   price price='$15'
Per Month   per per='month'

 

Progress Bars 

[dt_sc_progressbar value='85' type='standard' color='#9c59b6' textcolor='#8a67c7'] consectetur[/dt_sc_progressbar]
[dt_sc_progressbar value='75' type='progress-striped' color='' textcolor=''] consectetur[/dt_sc_progressbar]
[dt_sc_progressbar value='45' type='progress-striped-active'] consectetur[/dt_sc_progressbar]
Attribute Options Input Variable Example
Type standard,progress-striped,progress-striped-active type type='standard'
Value   value value='85'
Color   color color='#9c59b6'
Text Color   textcolor textcolor='#8a67c7'

 

Info Graphics Bar 

[dt_sc_infographic_bar icon="fa-male" icon_size="45" value="45" type="standard" color="#42b794"] Lorem [/dt_sc_infographic_bar]
Attribute Options Input Variable Example
Icon   icon icon="fa-male"
Icon size   icon_size icon_size="45"
Percentage   value value="45"
Type standard,progress-striped,progress-striped-active type type="standard"
Color   color color="#42b794"

 

Tabs

Horizontal 
[dt_sc_tabs_horizontal]
    [dt_sc_tab title="Tab 1"]
        Lorem ipsum
    [/dt_sc_tab]
    [dt_sc_tab title="Tab 2"]
        Lorem ipsum
    [/dt_sc_tab]
    [dt_sc_tab title="Tab 3"]
        Lorem ipsum
    [/dt_sc_tab]
[/dt_sc_tabs_horizontal]


Vertical 
[dt_sc_tabs_vertical]
    [dt_sc_tab title="Tab 1"]
        Lorem ipsum
    [/dt_sc_tab]
    [dt_sc_tab title="Tab 2"]
        Lorem ipsum
    [/dt_sc_tab]
    [dt_sc_tab title="Tab 3"]
        Lorem ipsum
    [/dt_sc_tab]
[/dt_sc_tabs_vertical]
Attribute Options Input Variable Example
Title   title title="Tab 1"

 

Titled Box 

[dt_sc_titled_box type="titled-box" title="Title" icon="fa-home" bgcolor="#dd9933" variation="raspberry" textcolor="#a51584"]Lorem[/dt_sc_titled_box]
Attribute Options Input Variable Example
Type title-box,error-box,warning-box,success-box,info-box type type="titled-box"
Title   title title="Title"
Fontawesome Icon   icon icon="fa-home"
Background Color   bgcolor bgcolor="#dd9933"
Variation blue, chocolate, coral, cyan, eggplant, electricblue, ferngreen, gold, green, grey, khaki, ocean, orange, palebrown, pink, purple, raspberry, red, skyblue, slateblue variation variation="raspberry"
Text Color   textcolor textcolor="#a51584"

 

Toggles

Default 
[dt_sc_toggle title="Toggle 1"]
    Lorem ipsum
[/dt_sc_toggle]
[dt_sc_toggle title="Toggle 2"]
    Lorem ipsum
[/dt_sc_toggle]
[dt_sc_toggle title="Toggle 3"]
    Lorem ipsum
[/dt_sc_toggle]


Framed 
[dt_sc_toggle_framed title="Toggle 1"]
    Lorem ipsum
[/dt_sc_toggle_framed]
[dt_sc_toggle_framed title="Toggle 2"]
    Lorem ipsum
[/dt_sc_toggle_framed]
[dt_sc_toggle_framed title="Toggle 3"]
    Lorem ipsum
[/dt_sc_toggle_framed]
Attribute Options Input Variable Example
Title   title title="Toggle 1"

  •  

    Tool Tip 

    [dt_sc_tooltip type="boxed" position="top" bgcolor="#dd3333" textcolor="#eeee22" tooltip="DesignThemes" href="#" target="_blank"]lorem[/dt_sc_tooltip]
    Attribute Options Input Variable Example
    Type deault,boxed type type="boxed"
    Position left, right, top, bottom position position="top"
    Background Color   bgcolor bgcolor="#dd3333"
    Text Color   textcolor textcolor="#eeee22"
    Tooltip Text   tooltip tooltip="DesignThemes"
    Link   number number="40"
    Target _blank, _new, _parent, _self, _top target target="_blank"

     

    Title 

    [dt_sc_h1_title title="Enter H1 Title" description="Lorem."]
[dt_sc_h2_title title="Enter H2 Title" description="Lorem."]
[dt_sc_h3_title title="Enter H3 Title" description="Lorem."]
[dt_sc_h4_title title="Enter H4 Title" description="Lorem."]
[dt_sc_h5_title title="Enter H5 Title" description="Lorem."]
[dt_sc_h6_title title="Enter H6 Title" description="Lorem."]
    Attribute Options Input Variable Example
    Title   title title="Enter H1 Title"
    Description   description description="Lorem."

     

    Recent Posts 

    [dt_sc_recent_post count="2" column="2" read_more_text_show="false" read_more_text="Read More" excerpt_length="10" excerpt="false" ]
    Attribute Options Input Variable Example
    Count   count count="2"
    Column   column column="2"
    Read More Text Show true, false read_more _text_show read_more _text_show="false"
    Read More Text   read_more_text read_more_text="Read More"
    Excerpt Length   excerpt_length excerpt_length="10"
    Excerpt true, false excerpt excerpt="false"

     

    Recent Posts With Category 

    [dt_sc_recent_post_with_category count="2" category_id="" column="2" read_more_text_show="false" read_more_text="Read More" excerpt_length="10" 
            excerpt="false" ]
    Attribute Options Input Variable Example
    Count   count count="2"
    Category ID   category_id category_id="23"
    Column   column column="2"
    Read More Text Show true,false read_more_ text_show read_more_ text_show="false"
    Read More Text   read_more _text read_more _text="Read More"
    Excerpt Length   excerpt_length excerpt_length="10"
    Excerpt true,false excerpt excerpt="false"

     

    Individual Post 

    [dt_sc_post id="18" excerpt_length="20" read_more_text="Read More"/]
    Attribute Options Input Variable Example
    ID   id id="18"
    Excerpt Length   excerpt_length excerpt_length="20"
    Read More Text   read_more_text read_more_text="Read More"

     

    Catalog Items 

    [dt_sc_catalog_items item_ids="2" column="1"]
    Attribute Options Input Variable Example
    ID   item_ids item_ids="2"
    Column   column column="1"

     

    Catalog Menu Items 

    [dt_sc_catalog_menu_items_list item_ids="2" show_dummy_price="true" link="#"]
    Attribute Options Input Variable Example
    ID   item_ids item_ids="2"
    Show Dummy Price true,false show_dummy _price show_dummy _price="true"
    Link   link link="#"

     

    Portfolio Three Columns 

    [dt_sc_three_columns_portfolio showposts="-1" categories=""]
    Attribute Options Input Variable Example
    Post Counts   showposts showposts="-1"
    Category IDs   categories categories=""

     

    Portfolio Four Columns 

    [dt_sc_four_columns_portfolio showposts="-1" categories=""]
    Attribute Options Input Variable Example
    Post Counts   showposts showposts="-1"
    Category IDs   categories categories=""

     

    Team 

    [dt_sc_team name="DesignThemes" role="Spa Director" email="yourname@domain.com" image="http://placehold.it/500" twitter="#" facebook="#" google="#"
linkedin="#"] Lorem. [/dt_sc_team]
    Attribute Options Input Variable Example
    Name   name name="DesignThemes"
    Role   role role="Spa Director"
    Email   email email= "yourname@domain.com"
    Image   image image= "http://placehold.it/500"
    Twitter   twitter twitter="#"
    Facebook   facebook facebook="#"
    Google   google google="#"
    Linkedin   linkedin linkedin="#"

     

    Testimonial 

    [dt_sc_testimonial image="http://placehold.it/300" name="John Doe" role="Cambridge Telcecom" ]Lorem ipsum [/dt_sc_testimonial]
    Attribute Options Input Variable Example
    Image   image image= "http://placehold.it/300"
    Name   name name="John Doe"
    Role   role role="Cambridge Telcecom"

     

    Testimonial Carousel 

    [dt_sc_testimonial_carousel]
    [dt_sc_testimonial image="http://placehold.it/300" name="John Doe" role="Cambridge Telcecom"]Lorem ipsum [/dt_sc_testimonial]
    [dt_sc_testimonial image="http://placehold.it/300" name="John Doe" role="Cambridge Telcecom"]Lorem ipsum [/dt_sc_testimonial]
    [dt_sc_testimonial image="http://placehold.it/300" name="John Doe" role="Cambridge Telcecom"]Lorem ipsum [/dt_sc_testimonial]
[/dt_sc_testimonial_carousel]
    Attribute Options Input Variable Example
    Image   image image= "http://placehold.it/300"
    Name   name name="John Doe"
    Role   role role="Cambridge Telcecom"

     

    Special Gifts

    Gift option available for only "Standard Products" 

    [dt_sc_gift_products limit="-1" posts_column="one-fourth-column/one-half-column/one-third-column"]
    Attribute Options Input Variable Example
    Limit   limit limit="-1"
    Step2 Description one-fourth-column, one-half-column, one-third-column posts_column posts_column= "one-fourth-column"

     

    Spa Procedure 

    [dt_sc_spa_procedure image_link="http://dummyimage.com/1170x810/a399a3/13131f&text=Image" procedure_title="Ayurveda Spa Highlights" 
procedure_highlight1="Lorem." procedure_highlight2="Lorem." procedure_highlight3="Lorem." rang_title="Price Range" catalog_item_ids="" 
catalog_show_dummy_price="true" button_text="Make a Reservation" button_link="#" /]
    Attribute Options Input Variable Example
    Image Link   image_link image_link= "http://dummyimage.com/1170x810/a399a3/13131f&text=Image"
    Procedure Title   procedure _title procedure _title= "Ayurveda Spa Highlights"
    Procedure Highlight1   procedure _highlight1 procedure _highlight1= "Fusce nec purus dui, id placerat sem."
    Procedure Highlight2   procedure _highlight2 procedure _highlight2= "Fusce nec purus dui, id placerat sem."
    Procedure Highlight3   procedure _highlight3 procedure _highlight3= "Fusce nec purus dui, id placerat sem."
    Rang Title   rang_title rang _title= "Price Range"
    Catalog Item Ids   catalog _item_ids catalog _item_ids= "23"
    Catalog Show Dummy Price true,false catalog _show_dummy _price catalog _show_dummy _price= "true"
    Button Text   button_text button_text="Make a Reservation"
    Button Link   button_link button_link="#"

     

    News Letter 

    [dt_sc_news_letter title="Newsletter" description="Fusce nec purus dui, id placerat sem." placeholder_text="Enter Your Email ID" /]
    Attribute Options Input Variable Example
    Title   title title="Newsletter"
    Description   description description= "Fusce nec purus dui, id placerat sem."
    PlaceHolder Text   placeholder _text placeholder _text= "Enter Your Email ID"

     

    Reserve Appointment 

    [dt_sc_reserve_appointment serviceids="" staffids="" /]
    Attribute Options Input Variable Example
    ServiceIDs   serviceids serviceids=""
    StaffIds   staffids staffids= ""
    Note

    Listing all shortcode is beyond the scope of this document. So we included a page ,where you can find the miscellaneous shorcododes and its usages.

    HTML Structure

    Here is the HTML Structure of the Template (simplified):

    
<!-- **Wrapper** -->
<div class="wrapper">

    <div class="inner-wrapper">

        <!-- **bbar Wrapper** -->
        <div id="bbar-wrapper">
        </div><!-- **bbar Wrapper End** -->

        <!-- **Header** -->
        <div id="header-wrapper">  
            <header id="header">  
                <div class="container">
                    <!-- **Logo - End** -->
                    <div id="logo">
                        .	.	.	.	.
                    </div><!-- **Logo - End** -->            
                    <!-- **Navigation** -->
                    <nav id="primary-menu">
                        .	.	.	.	.
                    </nav><!-- **Navigation - End** -->      
                </div>
        	</header>      	
        </div><!-- **Header - End** -->
        
        <!-- **Main** -->
        <div id="main">
            <!-- **Slider Section** -->
            <section id="slider">
                .	.	.	.	.
            </section><!-- **Slider Section - End** -->        
            <!-- **Container** -->
            <div class="container">        
                <!-- **Primary Section** -->
                <section id="primary" class="content-full-width">     
                    .	.	.	.	.
                </section><!-- **Primary Section** -->
            </div><!-- **Container - End** -->
        </div><!-- **Main - End** -->
        
        <!-- **Footer** -->
        <footer id="footer">
            <div class="container">
                .	.	.	.	.
            </div>        
        </footer><!-- **Footer - End** -->        
        
    </div>
</div><!-- **Wrapper - End** -->

    CSS File & Structure

    The style.css is main css file used in this template. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file. 

    @import "css/reset.css";

	/*----*****---- << General Style >> ----*****----*/
	
	body styles comes here
	
	/*----*****---- << Fonts >> ----*****----*/
	
	Fonts styles comes here
	
	/*----*****---- << Headings >> ----*****----*/
	
	Heading styles comes here
	
	/*----*****---- << Transition >> ----*****----*/
	
	Transition styles comes here
	
	/*----*****---- << Text Elements >> ----*****----*/
	
	Text Elements styles comes here	
	
	/*----*****---- << Tables >> ----*****----*/
	
	Tables styles comes here	
	
	/*----*****---- << Definition Lists >> ----*****----*/
	
	Definition Lists styles comes here
		
	/*----*****---- << Forms >> ----*****----*/
	
	Forms styles comes here
	
	/*----*****---- << Images >> ----*****----*/
	
	Images styles comes here
	
	/*----*****---- << Widgets >> ----*****----*/
	
	Widgets styles comes here
	
/*----*****---- << Layout >> ----*****----*/

	/*----*****---- << Container >> ----*****----*/

	Container styles comes here
	
	/*----*****---- << Header >> ----*****----*/
	
	Header styles comes here
	
	/*----*****---- << Mobile Menu >> ----*****----*/
	
	Responsive Menu styles comes here
	
	/*----*****---- << Main >> ----*****----*/
	
	Main styles comes here
	
		/*----*****---- << Slider >> ----*****----*/
		
		Slider styles comes here
        
		/*----*****---- << Fullwidth Section >> ----*****----*/
		
		Fullwidth Section styles comes here        
		
		/*----*****---- << Breadcrumb >> ----*****----*/
			
		Breadcrumb styles comes here
		
		/*----*****---- << Portfolio >> ----*****----*/
		
		Portfolio styles comes here
		
		/*----*****---- << Pagination >> ----*****----*/
		
		Pagination styles comes here
		
		/*----*****---- << Blog >> ----*****----*/
		
		Blog styles comes here
		
		/*----*****---- << Blog Comment Entries >> ----*****----*/	
		
		Blog Comment Entries styles comes here
		
		/*----*****---- << Side Navigation >> ----*****----*/
		
		Side Navigation styles comes here
		
		/*----*****---- << Procedures >> ----*****----*/
		
		Procedures section styles comes here
		
		/*----*****---- << Reservation >> ----*****----*/
		
		Reservation styles comes here
		
		/*----*****---- << 404 >> ----*****----*/
		
		404 styles comes here
        
		/*----*****---- << Newsletter >> ----*****----*/
		
		Newsletter styles comes here        
		
		/*----*****---- << Footer >> ----*****----*/
		
		Footer styles comes here
        
		/*----*****---- << Contact >> ----*****----*/
		
		Contact styles comes here

    If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.