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

vc_column Shortcode

The vc_column shortcode renders the column 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_column]
Content
[/vc_column]

Attributes

Attribute Default Accepted values Purpose
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.
respect_background_padding — yes Controls the respect padding for background.
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.
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.
video_bg_on_hover — yes If checked, video will play when being hovered. Available conditionally according to video_bg.
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.
padding_width — String unless stated otherwise Controls the padding_width.
viewport_class — yes Toggle class depending on whether it is in the viewport or not.
column_sticky — yes Make this column fixed while scrolling. WARNING: If either the column or the parent row have a background image, this functionality might crash.
content_alignment — String unless stated otherwise Controls the content alignment within this column.
column_scrollme — yes Add animations when scrolling.
disable_animations_mobile — yes Controls the disable animations on mobile?. Available when column_scrollme is yes.
scrollme_when — enter, exit Choose when the animation is executed. Available when column_scrollme is yes.
reverse_animation — yes Run the animation from end to start. Available when column_scrollme is yes.
scrollme_opacity — Number Specifies the opacity of the animated element when scrolling arrives at the to position (Values between 0 and 1). Available when column_scrollme is yes.
scrollme_scale — Number Specifies the scale of the animated element when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_scale_x — Number Specifies the scale X of the animated element when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_scale_y — Number Specifies the scale Y of the animated element when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_scale_z — Number Specifies the scale Z of the animated element when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_rotate_x 0 Number Specifies the angle of rotation of the animated element along the X axis when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_rotate_y 0 Number Specifies the angle of rotation of the animated element along the Y axis when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_rotate_z 0 Number Specifies the angle of rotation of the animated element along the Z axis when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_translate_x — Number Specifies the distance to translate the animated element along the X axis when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_translate_y — Number Specifies the distance to translate the animated element along the Y axis when scrolling arrives at the the to position. Available when column_scrollme is yes.
scrollme_translate_z — Number Specifies the distance to translate the animated element along the Z axis when scrolling arrives at the the to position. Available when column_scrollme is yes.
width 1/1 1/12, 1/6, 1/4, 1/3, 5/12, 1/2, 7/12, 2/3, 3/4, 5/6, 11/12, 1/1, 1/5 Select column width.
offset — String unless stated otherwise Adjust column for different screen sizes. Control width, offset and visibility settings.
device_visibility — String unless stated otherwise Applies the selected responsive visibility rule.
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 element ID (Note: make sure it is unique and valid according to w3c specification).
el_class — String unless stated otherwise Style particular content element differently - add a class name and refer to it in custom CSS.

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_column at every layout breakpoint and confirm its child content keeps a logical source and visual order. Pay particular attention to parallax and border_width.

`pom_wc_advanced_filters` Shortcode
Anterior
`vc_column_inner` Shortcode
Siguiente