vc_row_inner Shortcode
The vc_row_inner shortcode creates a nested row inside a regular column. It provides a second grid level for vc_column_inner children without taking on the page-level width and visibility responsibilities of vc_row.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[vc_row_inner]
Content
[/vc_row_inner]Inner-row controls
An inner row shares many presentation controls with vc_row, including vertical alignment, parallax, border, color, desktop and mobile background images, animated backgrounds, background video, overlays, padding, viewport state, responsive visibility, z-index, ID and custom classes. Use the accepted values and defaults documented for the corresponding outer-row controls.
Its supported attribute groups are:
- Structure and appearance:
vertical_align,horizontal_scroll,horizontal_scroll_behavior,parallax,border_width,border_color,border_style,bg_color,padding_width. - Images and animation:
bg_img_url,bg_img_url_size,bg_img_loading,bg_img_url_mobile,bg_img,animated_bg_loop,animated_bg_loop_direction,animated_bg_loop_speed. - Background video:
video_bg,video_type,video_youtube_url,video_vimeo_url,video_thumbnail_image,video_thumbnail_loading,video_start_after_interaction,video_mp4_url,video_webm_url,video_ogv_url. - Overlay:
overlay,one_color_overlay,gradient_color_1,gradient_color_2,gradient_orientation,change_opacity. - Behavior and identification:
sticky_row,sticky_row_mode,viewport_class,device_visibility,z_index,el_id,el_class.
What is unique to an inner row
sticky_row_mode accepts replace (default) or stack when sticky_row="yes". Replacement swaps the previous managed sticky row for this one; stacking keeps the new row below the existing sticky row.
horizontal_scroll="yes" adds flex-nowrap of-x-scroll to the inner .row, keeping its columns on one line and allowing horizontal scrolling when their combined width exceeds the available space.
horizontal_scroll_behavior accepts native (default), scroll, or hover
when horizontal scrolling is enabled. The enhanced modes apply to this inner
row's own columns and share the same script, touch/reduced-motion fallback and
keyboard behavior as the outer-row option. Use separate rows for independently
pinned sequences; nested page-scroll rows retain native scrolling.
See Choose horizontal row scrolling
for setup and verification.
An inner row does not expose the outer row's full-width, full-height, split background, background slider, next-section arrow, role visibility or purchased-product visibility controls. Its direct children must be vc_column_inner, and the complete inner row must remain inside a regular vc_column.
When video_type="self-hosted", video_mp4_url also accepts the logical URL copied from Media → Videos. The current site must own the ready video. Its standard progressive output is generated independently from Scroll, and Jarallax consumes the temporary signed MP4 exactly like a direct self-hosted URL, so Video.js is not loaded and no permanent CloudFront address is stored in the shortcode.
Enclosed content
Place only vc_column_inner children between the tags and keep the whole structure inside vc_column. The visual builder maintains this hierarchy and should be used for moving or resizing nested columns.
Verification
Inspect the nested grid at every breakpoint and confirm its inner columns wrap in a logical reading order. When horizontal scrolling is enabled, confirm the .row remains on one line and every inner column is reachable horizontally. If sticky behavior is enabled, verify replace and stack interact as intended with other managed sticky rows.