Shortcode vc_row

El shortcode vc_row renderiza el componente de fila.

Los atributos que se indican a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Utiliza la sintaxis en crudo solo para contenido revisado que no pueda mantenerse mediante los controles visuales.

Uso

[vc_row]
Content
[/vc_row]

Atributos

Atributo Predeterminado Valores aceptados Propósito
row_title — Cadena salvo que se indique lo contrario Este título solo es visible en el área de administración y ayuda a los editores del sitio a diferenciar las filas.
full_width — container, full_width, only_content Elige el comportamiento del ancho para la fila y su contenido. Only content elimina el contenedor de la fila, por lo que el resto de ajustes de la fila y los contenedores de columna no se aplican. Esto resulta útil para bloques reutilizables cuidadosamente diseñados.
full_height — yes Si está marcada, la fila se ajustará a la altura completa.
vertical_align — Cadena salvo que se indique lo contrario Controla la alineación vertical y la altura de la columna.
horizontal_scroll — yes Mantiene las columnas en una sola línea añadiendo flex-nowrap y habilita el desplazamiento horizontal con of-x-scroll en el .row renderizado.
horizontal_scroll_behavior native native, scroll, hover Selecciona el desplazamiento nativo, el movimiento horizontal con el desplazamiento vertical de la página o el movimiento al pasar el puntero. Requiere horizontal_scroll="yes".
parallax — content-moving Añade un fondo de tipo 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.
next_section_arrow — yes Añade una flecha para ir a la siguiente sección.
scroll_to_next_section_border_color — Cadena salvo que se indique lo contrario Color del borde de la siguiente sección. Disponible cuando next_section_arrow es yes.
scroll_to_next_section_icon — Cadena salvo que se indique lo contrario Elige el icono para desplazarse a la siguiente sección. Disponible cuando next_section_arrow es yes.
scroll_to_next_section_icon_color — Cadena salvo que se indique lo contrario Color del icono de la siguiente sección. Disponible cuando next_section_arrow es yes.
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 que se utiliza para la imagen de fondo principal.
bg_img_loading lazy lazy, eager Controla las imágenes de fondo tanto de escritorio como de móvil. La carga diferida (lazy loading) requiere habilitar Advanced > Lazy Load en los ajustes del tema.
bg_img_url_mobile — Cadena salvo que se indique lo contrario Elige la imagen de fondo para móvil de la biblioteca de medios.
bg_img — Cadena salvo que se indique lo contrario Controla la bg_img.
bg_split — left, right Limita la imagen de fondo, el vídeo de fondo y la superposición a la mitad izquierda o derecha del ancho del elemento superior, manteniendo el contenido dentro de su contenedor. El color de fondo no se divide.
bg_split_mobile — above, below Controla la posición del fondo en móvil.
animated_bg_loop — yes Si está marcada, la imagen de fondo se animará.
animated_bg_loop_direction — left, right, top, down Elige la dirección del bucle. Disponible cuando animated_bg_loop es yes.
animated_bg_loop_speed 50 Número Controla la velocidad del bucle. Disponible cuando animated_bg_loop es yes.
video_bg — yes Si está marcada, se utilizará un vídeo como fondo de la fila.
video_type — vimeo, self-hosted Elige el origen del vídeo. Disponible de forma condicional según video_bg.
video_youtube_url — Cadena salvo que se indique lo contrario Añade una URL de YouTube. Ejemplo: https://www.youtube.com/watch?v=##########. Disponible de forma condicional según video_type.
video_vimeo_url — Cadena salvo que se indique lo contrario Añade una URL 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 de forma condicional según video_bg.
video_thumbnail_loading lazy lazy, high Elige si la miniatura del vídeo debe cargarse de forma diferida (lazy load) u obtenerse con alta prioridad. La carga diferida requiere habilitar Advanced > Lazy Load en los ajustes del tema. Disponible de forma condicional 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 la rueda o desplazamiento. Los vídeos fuera de pantalla siguen esperando hasta acercarse al área de visualización. Disponible de forma condicional según video_bg.
video_mp4_url — URL MP4 HTTPS o URL lógica de Pomatio Video Hosting Añade una URL de un MP4 autoalojado o pega la URL lógica copiada de Media → Videos. Una URL lógica de Pomatio Video Hosting utiliza la salida progresiva estándar generada para cada vídeo nuevo; no se requiere Scroll. Jarallax consume el MP4 temporal firmado 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 la URL del 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 la URL del vídeo. Ejemplo: https://your-domain.com/##########.ogv. Disponible cuando video_type es self-hosted.
bg_slider — yes Si está marcada, podrás mostrar un slider de imágenes de fondo.
bg_slider_images — Cadena salvo que se indique lo contrario Selecciona las imágenes que se mostrarán como presentación de fondos. Disponible cuando bg_slider es yes.
slider_pause_time 1000 Número Especifica el tiempo que el slider permanecerá detenido (en milisegundos). Disponible cuando bg_slider es yes.
transition_type — slide_transition, fade_transition Elige si las diapositivas se deslizan o se funden entre sí. Disponible cuando bg_slider es yes.
slider_animation_speed 0.1 Número Especifica la velocidad a la que se moverá la diapositiva. Un valor menor significa menor velocidad. Disponible cuando bg_slider es yes.
slider_cells_loop — yes Si está marcada, se permitirá el bucle infinito. Disponible cuando bg_slider es yes.
overlay — none, one_color_overlay, gradient_overlay Añade una superposición (overlay).
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.
sticky_row — yes Hace que la fila actual sea fija (sticky).
viewport_class — yes Alterna una clase en función de si se encuentra dentro del área de visualización o no.
padding_width — Cadena salvo que se indique lo contrario Controla la padding_width.
device_visibility — Cadena salvo que se indique lo contrario Aplica la regla de visibilidad responsive seleccionada.
role_visibility — Cadena salvo que se indique lo contrario Controla la visibilidad en función del rol.
purchased_visibility — Cadena salvo que se indique lo contrario Controla la visibilidad en función de los productos comprados.
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 válido y único Introduce el ID de la sección (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 Si deseas aplicar un estilo diferente a un elemento de contenido concreto, utiliza este campo para añadir un nombre de clase y luego haz referencia a él en tu archivo css.

Comportamiento del desplazamiento horizontal

[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]

Todos los modos conservan la fila nativa flex-nowrap of-x-scroll. Los modos scroll y hover también exponen data-pom-horizontal-scroll en esa fila y solicitan el script de fila horizontal compartido. Los valores de comportamiento que falten o no sean compatibles mantienen el desplazamiento nativo; el comportamiento no tiene efecto cuando el desplazamiento horizontal está desactivado o Only content elimina la fila.

Consulta Elegir el desplazamiento horizontal de filas para conocer las opciones exactas del editor, el comportamiento del teclado, los límites responsive y la verificación.

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 que muestra el constructor visual para que los componentes anidados reciban el contexto que esperan.

Verificación

Inspecciona vc_row en cada punto de ruptura del diseño y confirma que su contenido hijo mantiene un orden lógico de origen y visual. Cuando el desplazamiento horizontal esté habilitado, confirma que el .row renderizado contiene flex-nowrap of-x-scroll y puede desplazarse a cada columna sin cambiar el orden de origen. Presta especial atención a row_title y full_width.

Filas superiores fijas

Con sticky_row="yes", una fila superior permanece en el borde fijo por encima de las filas hermanas ordinarias. Las filas superiores fijas consecutivas se superponen en la misma posición superior, incluidas las filas que usan full_height="yes", y cada fila fija posterior aparece por encima de las anteriores. Este orden de capas gestionado tiene prioridad sobre los valores z_index individuales de fila fija. Utiliza un fondo opaco para cubrir el contenido anterior. Las filas ordinarias pasan por debajo; el pie de página del sitio empuja a las filas superiores fijas hacia arriba a medida que las alcanza. Si el pie de página está desactivado, el final del contenido principal proporciona el límite. Un panel fijo a altura completa puede ocultar el contenido ordinario que pasa por debajo de él.

Esto difiere del sticky_row_mode="stack" de una fila interna, que coloca las filas internas sucesivas una debajo de otra dentro de su columna. Consulta Verificar filas superiores superpuestas para la configuración y las comprobaciones en el navegador.

`vc_raw_html` Shortcode
Anterior
Shortcode `vc_row_inner`
Siguiente