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.