This feature is available only for Premium members

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

Description and Code

 

The Section shortcode lets you insert a full width or fixed width section in your page. You can use it for example for one page layout. Here's an example of the shortcode in code view:

[section_component menu_anchor="" section_100_width="no" background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="yes" border_size="0px" border_color="" border_style="solid" padding_top="20px" padding_bottom="20px" class="" id=""]Your Content Goes Here[/section_component]

 

Parameters

 

  • menu_anchor
    • defines anchor which will be used in one page menu
    • Possible values - string - like section-contact
  • section_100_width
    • defines if the section container will have 100% width or defined layout width
    • Possible values - yes or no
  • background_color
    • defines the section background color
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • background_color_2
    • defines the section background color 2 for Linear or Radial Gradient style
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • background_color_fill
    • defines the background color fill style
    • Possible values - flat, linear, radial
  • background_color_linear
    • defines the background color orientation of Linear Style
    • Possible values - vertical or horizontal
  • background_image
    • defines the path for the image that you want to show as background
    • Possible values - string - like http://example.com/wp-content/uploads/image.jpg
  • background_repeat
    • defines the background image repeat
    • Possible values - no-repeat, repeat, repeat-x, repeat-y
  • background_position
    • defines the position of the background image
    • Possible values - left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom
  • background_attachment
    • defines if the background image scrolls
    • Possible values - scroll or fixed
  • background_attachment_parallax
    • defines if the background will have Parallax effect
    • Possible values - yes or no
  • border_size
    • defines the border width of the section
    • Possible values - use unit with pixels like 1px
  • border_color
    • defines the section border color
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • border_style
    • defines the section border color
    • Possible values - solid, dashed, dotted
  • padding_top
    • defines the section padding top
    • Possible values - use unit with pixels like 20px
  • padding_bottom
    • defines the section padding bottom
    • Possible values - use unit with pixels like 20px
  • class
    • custom class for CSS of component
    • Possible values - string - like custom-element-class
  • id
    • custom ID for CSS of component
    • Possible values - string - like custom-element-id

 

Basic Examples

 

Example of section with flat color background style

Example of section with linear color background style

Example of section with radial color background style

Example of section with scrolling background image

Example of section with fixed background image

 

Examples With Parallax Effect

 

Headline For Parallax Section

Ut tincidunt velit urna, eget interdum nisi sodales at. Phasellus mollis non mi et fringilla. Aliquam tempus nibh et diam maximus, ac dictum ante consectetur. Vivamus in enim ac odio fermentum vehicula at porta dui. Duis porttitor nibh odio, quis gravida est tempus a. Praesent ligula odio, sodales id erat at, egestas dictum arcu. 

Headline For Parallax Section

Aenean vitae tortor eu ipsum tristique cursus. Nullam sit amet dignissim turpis. Nulla vel nibh non diam dictum porttitor. Donec eu magna ac ex porttitor commodo. Integer dignissim elit id ex egestas, eu rhoncus metus commodo.

Headline For Parallax Section

 

Sed consequat interdum vulputate. Proin quis sem erat. Mauris a suscipit turpis. Sed pretium non enim non consequat. Donec semper nunc sed mauris maximus, sed consequat eros malesuada.