vc_column Shortcode

El shortcode vc_column renderiza el componente de columna.

Los atributos siguientes coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis sin procesar únicamente para contenido revisado que no pueda mantenerse mediante los controles visuales.

Uso

[vc_column]
Content
[/vc_column]

Atributos

Atributo Valor predeterminado Valores aceptados Propósito
parallax — content-moving Añade un fondo con parallax a la fila.
border_width — Cadena salvo que se indique lo contrario Controla el ancho del borde.
border_color — Cadena salvo que se indique lo contrario Controla el color del borde.
border_style — solid, dotted, dashed, double, groove, ridge, inset, outset Controla el estilo del borde.
respect_background_padding — yes Controla el respeto del padding para el fondo.
bg_color — Cadena salvo que se indique lo contrario Elige el color de fondo.
bg_img_url — Cadena salvo que se indique lo contrario Elige una imagen de la biblioteca de medios.
bg_img_url_size full-original-ratio Cualquier slug de tamaño de imagen de WordPress registrado Selecciona el tamaño generado usado para la imagen de fondo principal.
bg_img_loading lazy lazy, eager Controla las imágenes de fondo tanto de escritorio como móviles. La carga diferida requiere activar Advanced > Lazy Load en los ajustes del tema.
bg_img_url_mobile — Cadena salvo que se indique lo contrario Elige una imagen de fondo móvil de la biblioteca de medios.
bg_img — Cadena salvo que se indique lo contrario Controla el bg_img.
video_bg — yes Si se marca, se usará el vídeo como fondo de la fila.
video_type — vimeo, self-hosted Elige el origen del vídeo. Disponible condicionalmente según video_bg.
video_youtube_url — Cadena salvo que se indique lo contrario Añade un enlace de YouTube. Ejemplo: https://www.youtube.com/watch?v=##########. Disponible condicionalmente según video_type.
video_vimeo_url — Cadena salvo que se indique lo contrario Añade un enlace de Vimeo. Ejemplo: https://vimeo.com/##########. Disponible cuando video_type es vimeo.
video_thumbnail_image — Cadena salvo que se indique lo contrario Añade una miniatura mientras se carga el vídeo. Disponible condicionalmente según video_bg.
video_thumbnail_loading lazy lazy, high Elige si la miniatura del vídeo debe cargarse de forma diferida u obtenerse con prioridad alta. La carga diferida requiere activar Advanced > Lazy Load en los ajustes del tema. Disponible condicionalmente según video_bg.
video_start_after_interaction — yes Retrasa la creación del reproductor hasta el primer movimiento o acción del puntero, toque, pulsación de tecla, movimiento de rueda o desplazamiento. Los vídeos fuera de pantalla siguen esperando hasta acercarse al área de visualización. Disponible condicionalmente según video_bg.
video_mp4_url — URL MP4 HTTPS o URL lógica de Pomatio Video Hosting Añade un enlace MP4 autoalojado o pega la URL lógica copiada de Media → Videos. Una URL lógica de Pomatio Video Hosting usa la salida progresiva estándar generada para cada vídeo nuevo; no se requiere Scroll. Jarallax consume el MP4 firmado temporal sin cargar Video.js ni almacenar una dirección permanente de CloudFront. Disponible cuando video_type es self-hosted.
video_webm_url — Cadena salvo que se indique lo contrario Añade un enlace de vídeo. Ejemplo: https://your-domain.com/##########.webm. Disponible cuando video_type es self-hosted.
video_ogv_url — Cadena salvo que se indique lo contrario Añade un enlace de vídeo. Ejemplo: https://your-domain.com/##########.ogv. Disponible cuando video_type es self-hosted.
video_bg_on_hover — yes Si se marca, el vídeo se reproducirá al pasar el cursor por encima. Disponible condicionalmente según video_bg.
overlay — none, one_color_overlay, gradient_overlay Añade una superposición.
one_color_overlay — Cadena salvo que se indique lo contrario Elige el color de la superposición. Disponible cuando overlay es one_color_overlay.
gradient_color_1 — Cadena salvo que se indique lo contrario Elige el primer color del degradado. Disponible cuando overlay es gradient_overlay.
gradient_color_2 — Cadena salvo que se indique lo contrario Elige el segundo color del degradado. Disponible cuando overlay es gradient_overlay.
gradient_orientation — bottom_top, bottom_right, left_right, top_right, top_bottom, right_bottom, right_left, bottom_left Selecciona la orientación del degradado. Disponible cuando overlay es gradient_overlay.
change_opacity — Número Selecciona el nivel de opacidad (cuanto mayor es el porcentaje, menor es la visibilidad del fondo). Disponible cuando overlay es one_color_overlay o gradient_overlay.
padding_width — Cadena salvo que se indique lo contrario Controla el padding_width.
viewport_class — yes Alterna una clase dependiendo de si está o no dentro del área de visualización.
column_sticky — yes Hace que esta columna se quede fija al hacer scroll. ADVERTENCIA: Si la columna o la fila principal tienen una imagen de fondo, esta funcionalidad podría fallar.
content_alignment — Cadena salvo que se indique lo contrario Controla la alineación del contenido dentro de esta columna.
column_scrollme — yes Añade animaciones al hacer scroll.
disable_animations_mobile — yes Controla la desactivación de las animaciones en móvil. Disponible cuando column_scrollme es yes.
scrollme_when — enter, exit Elige cuándo se ejecuta la animación. Disponible cuando column_scrollme es yes.
reverse_animation — yes Ejecuta la animación de final a principio. Disponible cuando column_scrollme es yes.
scrollme_opacity — Número Especifica la opacidad del elemento animado cuando el scroll llega a la posición «to» (valores entre 0 y 1). Disponible cuando column_scrollme es yes.
scrollme_scale — Número Especifica la escala del elemento animado cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_scale_x — Número Especifica la escala X del elemento animado cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_scale_y — Número Especifica la escala Y del elemento animado cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_scale_z — Número Especifica la escala Z del elemento animado cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_rotate_x 0 Número Especifica el ángulo de rotación del elemento animado a lo largo del eje X cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_rotate_y 0 Número Especifica el ángulo de rotación del elemento animado a lo largo del eje Y cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_rotate_z 0 Número Especifica el ángulo de rotación del elemento animado a lo largo del eje Z cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_translate_x — Número Especifica la distancia para trasladar el elemento animado a lo largo del eje X cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_translate_y — Número Especifica la distancia para trasladar el elemento animado a lo largo del eje Y cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es yes.
scrollme_translate_z — Número Especifica la distancia para trasladar el elemento animado a lo largo del eje Z cuando el scroll llega a la posición «to». Disponible cuando column_scrollme es 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 Selecciona el ancho de la columna.
offset — Cadena salvo que se indique lo contrario Ajusta la columna para distintos tamaños de pantalla. Controla los ajustes de ancho, desplazamiento y visibilidad.
device_visibility — Cadena salvo que se indique lo contrario Aplica la regla de visibilidad responsiva seleccionada.
z_index — 0, 1, 2, 3, 4, 5, 999 Fuerza el valor de z-index para este elemento (el z-index define el orden de los elementos HTML superpuestos).
el_id — ID HTML único válido Introduce el ID del elemento (Nota: asegúrate de que sea único y válido según la especificación w3c).
el_class — Cadena salvo que se indique lo contrario Aplica un estilo distinto a un elemento de contenido concreto: añade un nombre de clase y haz referencia a él en el CSS personalizado.

Contenido encerrado

El contenido entre las etiquetas de apertura y cierre se procesa como contenido de shortcode de WordPress. Mantén la estructura padre/hijo mostrada por el constructor visual para que los componentes anidados reciban el contexto que esperan.

Verificación

Inspecciona vc_column en cada punto de ruptura del diseño y confirma que su contenido hijo mantenga un orden lógico de origen y visual. Presta especial atención a parallax y border_width.

Referencia de elementos y shortcodes
Anterior
Shortcode `vc_column_inner`
Siguiente