[spb_text_block animation=»none» animation_delay=»0″ padding_vertical=»15″ padding_horizontal=»20″ width=»1/1″ el_position=»first last»]
Rows are incredibly flexible and can contain any elements within them. They can have color, image or video backgrounds. They also support standard and full-width content.
Check out the examples below
[/spb_text_block] [spb_row element_name=»Row» wrap_type=»content-width» row_bg_type=»image» row_bg_color=»#252525″ color_row_height=»content-height» bg_image=»15251″ bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»scroll» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»slant-ltr» row_bottom_style=»none» parallax_video_overlay=»color» row_overlay_opacity=»50″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»no» vertical_center=»true» inner_column_height=»col-natural» row_expanding=»no» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»1px» width=»1/4″ el_position=»first»] [spb_text_block animation=»none» animation_delay=»0″ padding_vertical=»10″ padding_horizontal=»10″ width=»1/2″]
Standard Row with image background and left-to-right slant top style.
[/spb_text_block] [spb_blank_spacer height=»1px» width=»1/4″ el_position=»last»] [spb_blank_spacer height=»100px» width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»full-width» row_bg_type=»color» row_bg_color=»#ffffff» color_row_height=»content-height» bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»none» row_overlay_opacity=»0″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»yes» vertical_center=»true» inner_column_height=»col-natural» row_expanding=»no» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0 mb0 pb0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»20px» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»1px» width=»1/4″ el_position=»first»] [spb_text_block animation=»none» animation_delay=»0″ padding_vertical=»10″ padding_horizontal=»10″ width=»1/2″]
They can also contain content in full-width (edge-to-edge) mode.
See below
[/spb_text_block] [spb_blank_spacer height=»1px» width=»1/4″ el_position=»last»] [spb_blank_spacer height=»60px» width=»1/1″ el_position=»first last»] [spb_section spb_section_id=»15399″ el_class=»pb0 mb0″ width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»content-width» row_bg_type=»image» row_bg_color=»#252525″ color_row_height=»content-height» bg_image=»15248″ bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»color» row_overlay_opacity=»50″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»no» vertical_center=»true» inner_column_height=»col-natural» row_expanding=»no» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»100px» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»1px» width=»1/3″ el_position=»first»] [spb_text_block animation=»none» animation_delay=»0″ padding_vertical=»10″ padding_horizontal=»10″ width=»1/3″]
They can also be used as parallax sections like this.
[/spb_text_block] [spb_blank_spacer height=»1px» width=»1/3″ el_position=»last»] [spb_blank_spacer height=»100px» width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»full-width» row_bg_type=»color» row_bg_color=»#eceff1″ color_row_height=»content-height» bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»none» row_overlay_opacity=»0″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»yes» vertical_center=»true» inner_column_height=»col-natural» row_expanding=»no» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0 mb0 pb0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»20px» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»1px» width=»1/4″ el_position=»first»] [spb_text_block animation=»none» animation_delay=»0″ padding_vertical=»10″ padding_horizontal=»10″ width=»1/2″]
They can expand and shut.
See below
[/spb_text_block] [spb_blank_spacer height=»1px» width=»1/4″ el_position=»last»] [spb_blank_spacer height=»60px» width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»content-width» row_bg_type=»color» row_bg_color=»#f7f7f7″ color_row_height=»content-height» bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»none» row_overlay_opacity=»0″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»no» vertical_center=»false» inner_column_height=»col-natural» row_expanding=»yes» row_expading_text_closed=»Expanding Row Example» row_expading_text_open=»Click to shut me» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0 mb0 pb0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»60px» width=»1/1″ el_position=»first last»] [spb_image image=»14887″ image_size=»full» frame=»noframe» intro_animation=»none» animation_delay=»200″ fullwidth=»no» lightbox=»no» link_target=»_self» caption_pos=»hover» remove_rounded=»no» width=»1/2″ el_position=»first»] [spb_text_block title=»Maecenas ultrices viverra» animation=»none» animation_delay=»0″ padding_vertical=»0″ padding_horizontal=»6″ width=»1/2″ el_position=»last»]
Doce erat magna, aliquot vitae semper vitae, accusant vel nis. Vivamus pellentesque orci sit met odio dictum eget kommod nulla consequent. Prooien iaculis trirtique nis ut eleifend. Ut sum noluisse insolens appellantur, discere epicurei nominati id duo. Id eventi vidisse omnesque qui. Sale decore tamquam eso ne, in pri amet pertinax, vel option nominavi id. Ferri elitra semper ius ad, ea pro dique vivendo repudiandae, delenit asseveri ex ius. Per aliquip liberasse accomodare an, et vim clima deleniti, phaedrum dissentiunt ad has.
Vix vide fieriest tractates ut. Efficiantur necessitatibus eos ei, magna nemore labores ei pro. Ne sed oratio eigendi, accuaam detracto cu vim, mei oblique bonorum constituam te. Et nec maxime utroque. Sumo adolescent qui ea, no pro vitae dolores maluisset.
[/spb_text_block] [spb_blank_spacer height=»30px» width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»content-width» row_bg_type=»color» row_bg_color=»#f7f7f7″ color_row_height=»content-height» bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»none» row_overlay_opacity=»0″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»no» vertical_center=»false» inner_column_height=»col-natural» row_expanding=»yes» row_expading_text_closed=»Expanding Row Example» row_expading_text_open=»Click to shut me» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0 mb0 pb0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»60px» width=»1/1″ el_position=»first last»] [spb_image image=»14887″ image_size=»full» frame=»noframe» intro_animation=»none» animation_delay=»200″ fullwidth=»no» lightbox=»no» link_target=»_self» caption_pos=»hover» remove_rounded=»no» width=»1/2″ el_position=»first»] [spb_text_block title=»Maecenas ultrices viverra» animation=»none» animation_delay=»0″ padding_vertical=»0″ padding_horizontal=»6″ width=»1/2″ el_position=»last»]
Doce erat magna, aliquot vitae semper vitae, accusant vel nis. Vivamus pellentesque orci sit met odio dictum eget kommod nulla consequent. Prooien iaculis trirtique nis ut eleifend. Ut sum noluisse insolens appellantur, discere epicurei nominati id duo. Id eventi vidisse omnesque qui. Sale decore tamquam eso ne, in pri amet pertinax, vel option nominavi id. Ferri elitra semper ius ad, ea pro dique vivendo repudiandae, delenit asseveri ex ius. Per aliquip liberasse accomodare an, et vim clima deleniti, phaedrum dissentiunt ad has.
Vix vide fieriest tractates ut. Efficiantur necessitatibus eos ei, magna nemore labores ei pro. Ne sed oratio eigendi, accuaam detracto cu vim, mei oblique bonorum constituam te. Et nec maxime utroque. Sumo adolescent qui ea, no pro vitae dolores maluisset.
[/spb_text_block] [spb_blank_spacer height=»30px» width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»content-width» row_bg_type=»color» row_bg_color=»#f7f7f7″ color_row_height=»content-height» bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»none» row_overlay_opacity=»0″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»no» vertical_center=»false» inner_column_height=»col-natural» row_expanding=»yes» row_expading_text_closed=»Expanding Row Example» row_expading_text_open=»Click to shut me» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0 mb0 pb0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»60px» width=»1/1″ el_position=»first last»] [spb_image image=»14887″ image_size=»full» frame=»noframe» intro_animation=»none» animation_delay=»200″ fullwidth=»no» lightbox=»no» link_target=»_self» caption_pos=»hover» remove_rounded=»no» width=»1/2″ el_position=»first»] [spb_text_block title=»Maecenas ultrices viverra» animation=»none» animation_delay=»0″ padding_vertical=»0″ padding_horizontal=»6″ width=»1/2″ el_position=»last»]
Doce erat magna, aliquot vitae semper vitae, accusant vel nis. Vivamus pellentesque orci sit met odio dictum eget kommod nulla consequent. Prooien iaculis trirtique nis ut eleifend. Ut sum noluisse insolens appellantur, discere epicurei nominati id duo. Id eventi vidisse omnesque qui. Sale decore tamquam eso ne, in pri amet pertinax, vel option nominavi id. Ferri elitra semper ius ad, ea pro dique vivendo repudiandae, delenit asseveri ex ius. Per aliquip liberasse accomodare an, et vim clima deleniti, phaedrum dissentiunt ad has.
Vix vide fieriest tractates ut. Efficiantur necessitatibus eos ei, magna nemore labores ei pro. Ne sed oratio eigendi, accuaam detracto cu vim, mei oblique bonorum constituam te. Et nec maxime utroque. Sumo adolescent qui ea, no pro vitae dolores maluisset.
[/spb_text_block] [spb_blank_spacer height=»30px» width=»1/1″ el_position=»first last»] [/spb_row] [spb_row element_name=»Row» wrap_type=»content-width» row_bg_type=»video» row_bg_color=»#252525″ color_row_height=»content-height» bg_image=»14320″ bg_type=»cover» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_mp4=»http://swiftideasvideos.s3.amazonaws.com/agency_work.mp4″ bg_video_webm=»http://swiftideasvideos.s3.amazonaws.com/agency_work.webmhd.webm» bg_video_loop=»yes» parallax_video_height=»window-height» row_top_style=»none» row_bottom_style=»none» parallax_video_overlay=»color» row_overlay_opacity=»50″ row_padding_vertical=»0″ row_padding_horizontal=»0″ row_margin_vertical=»0″ remove_element_spacing=»no» vertical_center=»true» inner_column_height=»col-natural» row_expanding=»no» row_animation=»none» row_animation_delay=»0″ row_el_class=»no-shadow pt0 mt0″ minimize_row=»no» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»100px» width=»1/1″ el_position=»first last»] [spb_blank_spacer height=»1px» width=»1/3″ el_position=»first»] [spb_text_block animation=»none» animation_delay=»0″ padding_vertical=»10″ padding_horizontal=»10″ width=»1/3″]
…and they can also be used as video background sections set to window height like this.
[/spb_text_block] [spb_blank_spacer height=»1px» width=»1/3″ el_position=»last»] [spb_blank_spacer height=»100px» width=»1/1″ el_position=»first last»] [/spb_row]