Inicio - Documentación - POM Theme - 09 Shortcodes - 09.1 Shortcodes reference - `vc_row` Shortcode

vc_row Shortcode

The vc_row shortcode renders the row component.

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]
Content
[/vc_row]

Attributes

Attribute Default Accepted values Purpose
row_title — String unless stated otherwise This title is visible only in the admin area and helps site editors differentiate rows.
full_width — container, full_width, only_content Choose the width behavior for the row and its content. Only content removes the row wrapper, so the remaining row settings and column wrappers do not apply. This is useful for carefully designed reusable blocks.
full_height — yes If checked row will be set to full height.
vertical_align — String unless stated otherwise Controls the vertical alignment and column height.
horizontal_scroll — yes Keeps columns on one line by adding flex-nowrap and enables horizontal scrolling with of-x-scroll on the rendered .row.
horizontal_scroll_behavior native native, scroll, hover Selects native scrolling, horizontal movement with vertical page scroll, or pointer-hover movement. Requires horizontal_scroll="yes".
parallax — content-moving Add parallax type background for row.
border_width — String unless stated otherwise Controls the border width.
border_color — String unless stated otherwise Controls the border color.
border_style — solid, dotted, dashed, double, groove, ridge, inset, outset Controls the border style.
next_section_arrow — yes Add an arrow to go to next section.
scroll_to_next_section_border_color — String unless stated otherwise Next section border color. Available when next_section_arrow is yes.
scroll_to_next_section_icon — String unless stated otherwise Choose scroll to next section icon. Available when next_section_arrow is yes.
scroll_to_next_section_icon_color — String unless stated otherwise Next section icon color. Available when next_section_arrow is yes.
bg_color — String unless stated otherwise Choose background color.
bg_img_url — String unless stated otherwise Choose image from media library.
bg_img_url_size full-original-ratio Any registered WordPress image-size slug Selects the generated size used for the main background image.
bg_img_loading lazy lazy, eager Controls both desktop and mobile background images. Lazy loading requires enabling Advanced > Lazy Load in the theme settings.
bg_img_url_mobile — String unless stated otherwise Choose mobile background image from media library.
bg_img — String unless stated otherwise Controls the bg_img.
bg_split — left, right Limit the background image, background video, and overlay to the left or right half of the parent width while keeping content inside its container. The background color is not split.
bg_split_mobile — above, below Controls the background position on mobile.
animated_bg_loop — yes If checked, background image will be animated.
animated_bg_loop_direction — left, right, top, down Choose the loop direction. Available when animated_bg_loop is yes.
animated_bg_loop_speed 50 Number Controls the loop speed. Available when animated_bg_loop is yes.
video_bg — yes If checked, video will be used as row background.
video_type — vimeo, self-hosted Choose the video source. Available conditionally according to video_bg.
video_youtube_url — String unless stated otherwise Add YouTube link. Example: https://www.youtube.com/watch?v=##########. Available conditionally according to video_type.
video_vimeo_url — String unless stated otherwise Add Vimeo link. Example: https://vimeo.com/##########. Available when video_type is vimeo.
video_thumbnail_image — String unless stated otherwise Add a thumbnail while video is loading. Available conditionally according to video_bg.
video_thumbnail_loading lazy lazy, high Choose whether the video thumbnail should lazy load or be fetched with high priority. Lazy loading requires enabling Advanced > Lazy Load in the theme settings. Available conditionally according to video_bg.
video_start_after_interaction — yes Delays player creation until the first pointer movement or action, touch, key press, wheel movement, or scroll. Off-screen videos continue to wait until they approach the viewport. Available conditionally according to video_bg.
video_mp4_url — HTTPS MP4 URL or Pomatio Video Hosting logical URL Add a self-hosted MP4 link or paste the logical URL copied from Media → Videos. A Pomatio Video Hosting logical URL uses the standard progressive output generated for every new video; Scroll is not required. Jarallax consumes the temporary signed MP4 without loading Video.js or storing a permanent CloudFront address. Available when video_type is self-hosted.
video_webm_url — String unless stated otherwise Add video link. Example: https://your-domain.com/##########.webm. Available when video_type is self-hosted.
video_ogv_url — String unless stated otherwise Add video link. Example: https://your-domain.com/##########.ogv. Available when video_type is self-hosted.
bg_slider — yes If checked you will be able to show a background image slider.
bg_slider_images — String unless stated otherwise Select the images to be displayed as background slideshow. Available when bg_slider is yes.
slider_pause_time 1000 Number Specifies the time the slider will be stopped (in milliseconds). Available when bg_slider is yes.
transition_type — slide_transition, fade_transition Choose whether to slide or fade between slides. Available when bg_slider is yes.
slider_animation_speed 0.1 Number Specifies the speed at which the slide will move. A lower value means lower speed. Available when bg_slider is yes.
slider_cells_loop — yes If checked, infinite loop will be allowed. Available when bg_slider is yes.
overlay — none, one_color_overlay, gradient_overlay Add an overlay.
one_color_overlay — String unless stated otherwise Choose overlay color. Available when overlay is one_color_overlay.
gradient_color_1 — String unless stated otherwise Choose first color for gradient. Available when overlay is gradient_overlay.
gradient_color_2 — String unless stated otherwise Choose second color for gradient. Available when overlay is gradient_overlay.
gradient_orientation — bottom_top, bottom_right, left_right, top_right, top_bottom, right_bottom, right_left, bottom_left Select gradient orientation. Available when overlay is gradient_overlay.
change_opacity — Number Select the opacity level (The higher the percentage, the lower the visibility of the background). Available when overlay is one_color_overlay or gradient_overlay.
sticky_row — yes Make current row sticky.
viewport_class — yes Toggle class depending on whether it is in the viewport or not.
padding_width — String unless stated otherwise Controls the padding_width.
device_visibility — String unless stated otherwise Applies the selected responsive visibility rule.
role_visibility — String unless stated otherwise Controls the role based visibility.
purchased_visibility — String unless stated otherwise Controls the visibility based on purchased products.
z_index — 0, 1, 2, 3, 4, 5, 999 Force the z-index value for this element (z-index defines the order of overlapping HTML elements).
el_id — Valid unique HTML ID Enter section ID (Note: make sure it is unique and valid according to w3c specification).
el_class — String unless stated otherwise If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Horizontal scroll behavior

[vc_row horizontal_scroll="yes" horizontal_scroll_behavior="scroll"]
[vc_column width="1/2"]First panel[/vc_column]
[vc_column width="1/2"]Second panel[/vc_column]
[vc_column width="1/2"]Third panel[/vc_column]
[/vc_row]

All modes preserve the native flex-nowrap of-x-scroll row. The scroll and hover modes also expose data-pom-horizontal-scroll on that row and request the shared horizontal-row script. Missing or unsupported behavior values keep native scrolling; behavior has no effect when horizontal scrolling is disabled or Only content removes the row.

See Choose horizontal row scrolling for exact editor choices, keyboard behavior, responsive limits and verification.

Enclosed content

Content between the opening and closing tags is processed as WordPress shortcode content. Keep the parent/child structure shown by the visual builder so nested components receive the context they expect.

Verification

Inspect vc_row at every layout breakpoint and confirm its child content keeps a logical source and visual order. When horizontal scrolling is enabled, confirm the rendered .row contains flex-nowrap of-x-scroll and can scroll to every column without changing source order. Pay particular attention to row_title and full_width.

`vc_raw_html` Shortcode
Anterior
`vc_row_inner` Shortcode
Siguiente