for Elementor<\\\/span>',\\n\\t\\t\\t\\t\\t'h1',\\n\\t\\t\\t\\t\\t'clamp(52px, 8.6vw, 150px)',\\n\\t\\t\\t\\t\\tahs_anim( 1 )\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\tahs_row(\\n\\t\\t\\t\\t\\tarray(\\n\\t\\t\\t\\t\\t\\t'flex_direction' => 'row',\\n\\t\\t\\t\\t\\t\\t'flex_justify_content' => 'space-between',\\n\\t\\t\\t\\t\\t\\t'flex_align_items' => 'flex-end',\\n\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\tarray(\\n\\t\\t\\t\\t\\t\\tahs_body_text(\\n\\t\\t\\t\\t\\t\\t\\t\\\"Pin a section and the page's own scroll moves it sideways. You're inside it right now.\\\",\\n\\t\\t\\t\\t\\t\\t\\tarray_merge(\\n\\t\\t\\t\\t\\t\\t\\t\\tahs_anim( 2 ),\\n\\t\\t\\t\\t\\t\\t\\t\\tAHS_SUBTITLE_CAP,\\n\\t\\t\\t\\t\\t\\t\\t\\tarray(\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t'typography_font_size' => array(\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t'size' => 17,\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t\\t\\t)\\n\\t\\t\\t\\t\\t\\t\\t)\\n\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\tahs_mono_label( 'Scroll \\u2192', array_merge( ahs_anim( 3 ), array( '_element_width' => 'auto' ) ) ),\\n\\t\\t\\t\\t\\t)\\n\\t\\t\\t\\t),\\n\\t\\t\\t)\\n\\t\\t),\\n\\t)\\n);\\n\\n$panel_containers = ahs_panel(\\n\\tahs_panel_settings(\\n\\t\\t'01 \\u2014 Containers',\\n\\t\\t85,\\n\\t\\t'#0E0E10',\\n\\t\\tarray( '_element_id' => 'features' )\\n\\t),\\n\\tarray(\\n\\t\\tahs_meta_row( '01', 'Any content' ),\\n\\t\\tahs_ghost( '01' ),\\n\\t\\tahs_row(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'flex_direction' => 'column',\\n\\t\\t\\t\\t'flex_align_items' => 'flex-start',\\n\\t\\t\\t\\t'flex_gap' => ahs_gap( 14 ),\\n\\t\\t\\t),\\n\\t\\t\\tarray(\\n\\t\\t\\t\\tahs_pill_button( 'A real button', '#', ahs_anim( 1 ) ),\\n\\t\\t\\t\\tahs_body_text( '\\u2713 Headings, buttons, forms, images', array_merge( ahs_anim( 2 ), array( 'typography_font_size' => array( 'unit' => 'px', 'size' => 15, 'sizes' => array() ) ) ) ),\\n\\t\\t\\t\\tahs_body_text( '\\u2713 Nested layouts work', array_merge( ahs_anim( 3 ), array( 'typography_font_size' => array( 'unit' => 'px', 'size' => 15, 'sizes' => array() ) ) ) ),\\n\\t\\t\\t\\tahs_body_text( '\\u2713 Styled with the usual controls', array_merge( ahs_anim( 4 ), array( 'typography_font_size' => array( 'unit' => 'px', 'size' => 15, 'sizes' => array() ) ) ) ),\\n\\t\\t\\t)\\n\\t\\t),\\n\\t\\tahs_body_group(\\n\\t\\t\\t'Real Containers',\\n\\t\\t\\t'Every panel is a normal Elementor Container. Drop in whatever widgets you use, nest layouts if you want. Nothing new to learn.'\\n\\t\\t),\\n\\t)\\n);\\n\\n$grid_cells = array();\\nfor ( $i = 1; $i <= 6; $i++ ) {\\n\\t$grid_cells[] = array(\\n\\t\\t'id' => ahs_seed_id(),\\n\\t\\t'elType' => 'container',\\n\\t\\t'settings' => array(\\n\\t\\t\\t'content_width' => 'full',\\n\\t\\t\\t'animation' => 'fadeIn',\\n\\t\\t\\t'animation_delay' => 80 + ( $i - 1 ) * 100,\\n\\t\\t\\t'min_height' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'size' => 96,\\n\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t),\\n\\t\\t\\t'flex_direction' => 'row',\\n\\t\\t\\t'flex_justify_content' => 'center',\\n\\t\\t\\t'flex_align_items' => 'center',\\n\\t\\t\\t'flex_gap' => ahs_zero_gap(),\\n\\t\\t\\t'padding' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'top' => '0',\\n\\t\\t\\t\\t'right' => '0',\\n\\t\\t\\t\\t'bottom' => '0',\\n\\t\\t\\t\\t'left' => '0',\\n\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t),\\n\\t\\t\\t'background_background' => 'classic',\\n\\t\\t\\t'background_color' => 'rgba(255,255,255,0.02)',\\n\\t\\t\\t'border_border' => 'solid',\\n\\t\\t\\t'border_width' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'top' => '1',\\n\\t\\t\\t\\t'right' => '1',\\n\\t\\t\\t\\t'bottom' => '1',\\n\\t\\t\\t\\t'left' => '1',\\n\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t),\\n\\t\\t\\t'border_color' => 'rgba(255,255,255,0.1)',\\n\\t\\t),\\n\\t\\t'elements' => array(\\n\\t\\t\\tahs_mono_label( (string) $i, array( '_element_width' => 'auto' ) ),\\n\\t\\t),\\n\\t);\\n}\\n\\n$panel_grid = ahs_panel(\\n\\tahs_panel_settings( '02 \\u2014 Grid', 65, '#101013' ),\\n\\tarray(\\n\\t\\tahs_meta_row( '02', 'Grid' ),\\n\\t\\tahs_ghost( '02' ),\\n\\t\\tarray(\\n\\t\\t\\t'id' => ahs_seed_id(),\\n\\t\\t\\t'elType' => 'container',\\n\\t\\t\\t'settings' => array(\\n\\t\\t\\t\\t'container_type' => 'grid',\\n\\t\\t\\t\\t'content_width' => 'full',\\n\\t\\t\\t\\t'width' => array(\\n\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t'size' => 560,\\n\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\t'width_mobile' => array(\\n\\t\\t\\t\\t\\t'unit' => '%',\\n\\t\\t\\t\\t\\t'size' => 100,\\n\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\t'grid_columns_grid' => array(\\n\\t\\t\\t\\t\\t'unit' => 'fr',\\n\\t\\t\\t\\t\\t'size' => 3,\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\t'grid_columns_grid_mobile' => array(\\n\\t\\t\\t\\t\\t'unit' => 'fr',\\n\\t\\t\\t\\t\\t'size' => 2,\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\t'grid_rows_grid' => array(\\n\\t\\t\\t\\t\\t'unit' => 'fr',\\n\\t\\t\\t\\t\\t'size' => 2,\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\t'grid_gaps' => array(\\n\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t'column' => '12',\\n\\t\\t\\t\\t\\t'row' => '12',\\n\\t\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\t'padding' => array(\\n\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t'top' => '0',\\n\\t\\t\\t\\t\\t'right' => '0',\\n\\t\\t\\t\\t\\t'bottom' => '0',\\n\\t\\t\\t\\t\\t'left' => '0',\\n\\t\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t\\t),\\n\\t\\t\\t),\\n\\t\\t\\t'elements' => $grid_cells,\\n\\t\\t),\\n\\t\\tahs_body_group(\\n\\t\\t\\t'Grids work in here',\\n\\t\\t\\t\\\"This is Elementor's Grid container, living inside a panel. Flex or Grid, containers behave the same in the track as anywhere else.\\\"\\n\\t\\t),\\n\\t)\\n);\\n\\n$panel_widths = ahs_panel(\\n\\tahs_panel_settings( '03 \\u2014 Widths', 50, '#0E0E10' ),\\n\\tarray(\\n\\t\\tahs_meta_row( '03', 'Layout' ),\\n\\t\\tahs_ghost( '03' ),\\n\\t\\tahs_body_group(\\n\\t\\t\\t'This panel is 50vw',\\n\\t\\t\\t'The grid before was 65. A panel is whatever width you give it, and the track adds them up.'\\n\\t\\t),\\n\\t)\\n);\\n\\nfunction ahs_pro_layer( string $width, string $height, string $left, string $top, string $bg, int $speed, int $slot ): array {\\n\\treturn array(\\n\\t\\t'id' => ahs_seed_id(),\\n\\t\\t'elType' => 'container',\\n\\t\\t'settings' => array(\\n\\t\\t\\t'content_width' => 'full',\\n\\t\\t\\t'position' => 'absolute',\\n\\t\\t\\t'_offset_orientation_h' => 'start',\\n\\t\\t\\t'_offset_x' => array(\\n\\t\\t\\t\\t'unit' => 'custom',\\n\\t\\t\\t\\t'size' => $left,\\n\\t\\t\\t),\\n\\t\\t\\t'_offset_orientation_v' => 'start',\\n\\t\\t\\t'_offset_y' => array(\\n\\t\\t\\t\\t'unit' => 'custom',\\n\\t\\t\\t\\t'size' => $top,\\n\\t\\t\\t),\\n\\t\\t\\t'width' => array(\\n\\t\\t\\t\\t'unit' => 'custom',\\n\\t\\t\\t\\t'size' => $width,\\n\\t\\t\\t),\\n\\t\\t\\t'min_height' => array(\\n\\t\\t\\t\\t'unit' => 'custom',\\n\\t\\t\\t\\t'size' => $height,\\n\\t\\t\\t),\\n\\t\\t\\t'animation' => 'fadeIn',\\n\\t\\t\\t'animation_delay' => 80 + ( $slot - 1 ) * 100,\\n\\t\\t\\t'background_background' => 'classic',\\n\\t\\t\\t'background_color' => $bg,\\n\\t\\t\\t'border_border' => 'solid',\\n\\t\\t\\t'border_width' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'top' => '1',\\n\\t\\t\\t\\t'right' => '1',\\n\\t\\t\\t\\t'bottom' => '1',\\n\\t\\t\\t\\t'left' => '1',\\n\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t),\\n\\t\\t\\t'border_color' => 'rgba(255,255,255,0.1)',\\n\\t\\t\\t\\\/\\\/ Elementor Pro Motion FX \\u2014 inert without Pro.\\n\\t\\t\\t'motion_fx_motion_fx_scrolling' => 'yes',\\n\\t\\t\\t'motion_fx_translateX_effect' => 'yes',\\n\\t\\t\\t'motion_fx_translateX_speed' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'size' => $speed,\\n\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t),\\n\\t\\t\\t'motion_fx_translateX_affectedRange' => array(\\n\\t\\t\\t\\t'unit' => '%',\\n\\t\\t\\t\\t'size' => '',\\n\\t\\t\\t\\t'sizes' => array(\\n\\t\\t\\t\\t\\t'start' => 0,\\n\\t\\t\\t\\t\\t'end' => 100,\\n\\t\\t\\t\\t),\\n\\t\\t\\t),\\n\\t\\t),\\n\\t\\t'elements' => array(),\\n\\t);\\n}\\n\\n$panel_pro = ahs_panel(\\n\\tahs_panel_settings( '04 \\u2014 With Elementor Pro', 75, '#101013' ),\\n\\tarray(\\n\\t\\tahs_meta_row( '04', 'With Elementor Pro' ),\\n\\t\\tahs_ghost( '04' ),\\n\\t\\tahs_row(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'min_height' => array(\\n\\t\\t\\t\\t\\t'unit' => 'vh',\\n\\t\\t\\t\\t\\t'size' => 30,\\n\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t),\\n\\t\\t\\t),\\n\\t\\t\\tarray(\\n\\t\\t\\t\\tahs_pro_layer( '44%', '72%', '0%', '14%', 'rgba(255,255,255,0.03)', 2, 1 ),\\n\\t\\t\\t\\tahs_pro_layer( '34%', '52%', '30%', '0%', 'rgba(255,255,255,0.05)', 4, 2 ),\\n\\t\\t\\t\\tahs_pro_layer( '28%', '44%', '58%', '36%', 'rgba(255,255,255,0.08)', 6, 3 ),\\n\\t\\t\\t\\tahs_mono_label(\\n\\t\\t\\t\\t\\t'Motion FX \\u00b7 parallax layers',\\n\\t\\t\\t\\t\\tarray_merge(\\n\\t\\t\\t\\t\\t\\tahs_anim( 4 ),\\n\\t\\t\\t\\t\\t\\tarray(\\n\\t\\t\\t\\t\\t\\t\\t'_position' => 'absolute',\\n\\t\\t\\t\\t\\t\\t\\t'_offset_orientation_h' => 'end',\\n\\t\\t\\t\\t\\t\\t\\t'_offset_x_end' => array(\\n\\t\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t\\t'size' => 0,\\n\\t\\t\\t\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t\\t'_offset_orientation_v' => 'end',\\n\\t\\t\\t\\t\\t\\t\\t'_offset_y_end' => array(\\n\\t\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t\\t'size' => 0,\\n\\t\\t\\t\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t)\\n\\t\\t\\t\\t\\t)\\n\\t\\t\\t\\t),\\n\\t\\t\\t)\\n\\t\\t),\\n\\t\\tahs_body_group(\\n\\t\\t\\t'Motion FX keeps moving',\\n\\t\\t\\t'Have Elementor Pro? Scrolling Effects keep working in here. Element and background parallax follow the sideways motion instead of freezing.'\\n\\t\\t),\\n\\t)\\n);\\n\\n$phone_bars = array();\\nfor ( $i = 0; $i < 3; $i++ ) {\\n\\t$phone_bars[] = array(\\n\\t\\t'id' => ahs_seed_id(),\\n\\t\\t'elType' => 'container',\\n\\t\\t'settings' => array(\\n\\t\\t\\t'content_width' => 'full',\\n\\t\\t\\t'min_height' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'size' => 80,\\n\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t),\\n\\t\\t\\t'padding' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'top' => '0',\\n\\t\\t\\t\\t'right' => '0',\\n\\t\\t\\t\\t'bottom' => '0',\\n\\t\\t\\t\\t'left' => '0',\\n\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t),\\n\\t\\t\\t'background_background' => 'classic',\\n\\t\\t\\t'background_color' => 'rgba(255,255,255,0.03)',\\n\\t\\t\\t'border_border' => 'solid',\\n\\t\\t\\t'border_width' => array(\\n\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t'top' => '1',\\n\\t\\t\\t\\t'right' => '1',\\n\\t\\t\\t\\t'bottom' => '1',\\n\\t\\t\\t\\t'left' => '1',\\n\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t),\\n\\t\\t\\t'border_color' => AHS_HAIRLINE,\\n\\t\\t),\\n\\t\\t'elements' => array(),\\n\\t);\\n}\\n\\n$panel_touch = ahs_panel(\\n\\tahs_panel_settings( '05 \\u2014 Touch screens', 60, '#0E0E10' ),\\n\\tarray(\\n\\t\\tahs_meta_row( '05', 'Touch screens' ),\\n\\t\\tahs_ghost( '05' ),\\n\\t\\tahs_row(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'flex_direction' => 'row',\\n\\t\\t\\t\\t'flex_align_items' => 'flex-end',\\n\\t\\t\\t\\t'flex_gap' => ahs_gap( 20 ),\\n\\t\\t\\t),\\n\\t\\t\\tarray(\\n\\t\\t\\t\\tarray(\\n\\t\\t\\t\\t\\t'id' => ahs_seed_id(),\\n\\t\\t\\t\\t\\t'elType' => 'container',\\n\\t\\t\\t\\t\\t'settings' => array(\\n\\t\\t\\t\\t\\t\\t'content_width' => 'full',\\n\\t\\t\\t\\t\\t\\t'width' => array(\\n\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t'size' => 150,\\n\\t\\t\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t'animation' => 'fadeIn',\\n\\t\\t\\t\\t\\t\\t'animation_delay' => 80,\\n\\t\\t\\t\\t\\t\\t'min_height' => array(\\n\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t'size' => 280,\\n\\t\\t\\t\\t\\t\\t\\t'sizes' => array(),\\n\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t'flex_direction' => 'column',\\n\\t\\t\\t\\t\\t\\t'flex_gap' => ahs_gap( 8 ),\\n\\t\\t\\t\\t\\t\\t'padding' => array(\\n\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t'top' => '10',\\n\\t\\t\\t\\t\\t\\t\\t'right' => '10',\\n\\t\\t\\t\\t\\t\\t\\t'bottom' => '10',\\n\\t\\t\\t\\t\\t\\t\\t'left' => '10',\\n\\t\\t\\t\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t'border_border' => 'solid',\\n\\t\\t\\t\\t\\t\\t'border_width' => array(\\n\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t'top' => '1',\\n\\t\\t\\t\\t\\t\\t\\t'right' => '1',\\n\\t\\t\\t\\t\\t\\t\\t'bottom' => '1',\\n\\t\\t\\t\\t\\t\\t\\t'left' => '1',\\n\\t\\t\\t\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t\\t'border_color' => 'rgba(255,255,255,0.15)',\\n\\t\\t\\t\\t\\t\\t'border_radius' => array(\\n\\t\\t\\t\\t\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t\\t\\t\\t\\t'top' => '18',\\n\\t\\t\\t\\t\\t\\t\\t'right' => '18',\\n\\t\\t\\t\\t\\t\\t\\t'bottom' => '18',\\n\\t\\t\\t\\t\\t\\t\\t'left' => '18',\\n\\t\\t\\t\\t\\t\\t\\t'isLinked' => true,\\n\\t\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t),\\n\\t\\t\\t\\t\\t'elements' => $phone_bars,\\n\\t\\t\\t\\t),\\n\\t\\t\\t\\tahs_mono_label( 'Stack on touch \\u00b7 on by default', array_merge( ahs_anim( 2 ), array( '_element_width' => 'auto' ) ) ),\\n\\t\\t\\t)\\n\\t\\t),\\n\\t\\tahs_body_group(\\n\\t\\t\\t'Phones get a column',\\n\\t\\t\\t\\\"Open this page on a phone: the panels stack into a normal vertical page, because fingers scroll down. It's a default, not a rule. One switch keeps the section horizontal on touch screens too, if your design needs that.\\\"\\n\\t\\t),\\n\\t)\\n);\\n\\n$endcap = ahs_panel(\\n\\tarray_merge(\\n\\t\\tahs_panel_settings(\\n\\t\\t\\t'06 \\u2014 Install',\\n\\t\\t\\t40,\\n\\t\\t\\t'#15151A',\\n\\t\\t\\tarray( '_element_id' => 'install' )\\n\\t\\t),\\n\\t\\tarray(\\n\\t\\t\\t'flex_justify_content' => 'center',\\n\\t\\t\\t'flex_align_items' => 'flex-start',\\n\\t\\t\\t'flex_gap' => ahs_gap( 20 ),\\n\\t\\t)\\n\\t),\\n\\tarray(\\n\\t\\tahs_display_heading( 'Add it to your WordPress web site', 'h2', 'clamp(28px, 3vw, 48px)', array_merge( ahs_anim( 2 ), AHS_TITLE_CAP ) ),\\n\\t\\tahs_pill_button(\\n\\t\\t\\t'Install Plugin',\\n\\t\\t\\t'https:\\\/\\\/wordpress.org\\\/plugins\\\/horizontal-scroll-for-elementor\\\/',\\n\\t\\t\\tarray_merge( ahs_anim( 3 ), array( '_element_width' => 'auto' ) )\\n\\t\\t),\\n\\t)\\n);\\n\\n$panel_children = array( $hero, $panel_containers, $panel_grid, $panel_widths, $panel_pro, $panel_touch, $endcap );\\n\\n$widget = array(\\n\\t'id' => ahs_seed_id(),\\n\\t'elType' => 'widget',\\n\\t'widgetType' => 'arts-horizontal-scroll',\\n\\t'settings' => array(\\n\\t\\t\\\/\\\/ Row count MUST equal child-container count \\u2014 linkage is positional.\\n\\t\\t'panels' => array_map(\\n\\t\\t\\tstatic function ( array $panel ): array {\\n\\t\\t\\t\\treturn array(\\n\\t\\t\\t\\t\\t'_id' => ahs_seed_id(),\\n\\t\\t\\t\\t\\t'panel_title' => $panel['settings']['_title'],\\n\\t\\t\\t\\t);\\n\\t\\t\\t},\\n\\t\\t\\t$panel_children\\n\\t\\t),\\n\\t\\t'layout' => 'horizontal',\\n\\t\\t'layout_mobile' => 'vertical',\\n\\t\\t'touch_vertical' => 'yes',\\n\\t\\t'panels_gap' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'size' => 0,\\n\\t\\t\\t'sizes' => array(),\\n\\t\\t),\\n\\t\\t'viewport_height' => array(\\n\\t\\t\\t'unit' => 'vh',\\n\\t\\t\\t'size' => 100,\\n\\t\\t\\t'sizes' => array(),\\n\\t\\t),\\n\\t\\t'pin_offset' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'size' => 56,\\n\\t\\t\\t'sizes' => array(),\\n\\t\\t),\\n\\t\\t'pin_offset_mobile' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'size' => 48,\\n\\t\\t\\t'sizes' => array(),\\n\\t\\t),\\n\\t\\t'scroll_direction' => 'ltr',\\n\\t\\t'scroll_factor' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'size' => 1.2,\\n\\t\\t\\t'sizes' => array(),\\n\\t\\t),\\n\\t),\\n\\t'elements' => $panel_children,\\n);\\n\\n$widget_wrap = array(\\n\\t'id' => ahs_seed_id(),\\n\\t'elType' => 'container',\\n\\t'isInner' => false,\\n\\t'settings' => array(\\n\\t\\t'_title' => 'Demo Lane',\\n\\t\\t'content_width' => 'full',\\n\\t\\t'padding' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'top' => '56',\\n\\t\\t\\t'right' => '0',\\n\\t\\t\\t'bottom' => '0',\\n\\t\\t\\t'left' => '0',\\n\\t\\t\\t'isLinked' => false,\\n\\t\\t),\\n\\t\\t'padding_mobile' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'top' => '48',\\n\\t\\t\\t'right' => '0',\\n\\t\\t\\t'bottom' => '0',\\n\\t\\t\\t'left' => '0',\\n\\t\\t\\t'isLinked' => false,\\n\\t\\t),\\n\\t\\t'flex_gap' => ahs_zero_gap(),\\n\\t),\\n\\t'elements' => array( $widget ),\\n);\\n\\n\\\/\\\/ --- Outro --------------------------------------------------------------------\\n\\n$outro = array(\\n\\t'id' => ahs_seed_id(),\\n\\t'elType' => 'container',\\n\\t'isInner' => false,\\n\\t'settings' => array(\\n\\t\\t'_title' => 'Outro',\\n\\t\\t'content_width' => 'full',\\n\\t\\t'min_height' => array(\\n\\t\\t\\t'unit' => 'vh',\\n\\t\\t\\t'size' => 64,\\n\\t\\t\\t'sizes' => array(),\\n\\t\\t),\\n\\t\\t'flex_direction' => 'column',\\n\\t\\t'flex_justify_content' => 'space-between',\\n\\t\\t'flex_gap' => ahs_gap( 48 ),\\n\\t\\t'padding' => AHS_PADDING,\\n\\t\\t'padding_mobile' => AHS_PADDING_MOBILE,\\n\\t\\t'border_border' => 'solid',\\n\\t\\t'border_width' => array(\\n\\t\\t\\t'unit' => 'px',\\n\\t\\t\\t'top' => '1',\\n\\t\\t\\t'right' => '0',\\n\\t\\t\\t'bottom' => '0',\\n\\t\\t\\t'left' => '0',\\n\\t\\t\\t'isLinked' => false,\\n\\t\\t),\\n\\t\\t'border_color' => AHS_HAIRLINE,\\n\\t),\\n\\t'elements' => array(\\n\\t\\tahs_row(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'flex_direction' => 'column',\\n\\t\\t\\t\\t'flex_gap' => ahs_gap( 20 ),\\n\\t\\t\\t),\\n\\t\\t\\tarray(\\n\\t\\t\\t\\tahs_mono_label( \\\"That's the whole tour\\\", ahs_anim( 1 ) ),\\n\\t\\t\\t\\tahs_display_heading( 'Now build yours', 'h2', 'clamp(28px, 4.6vw, 88px)', array_merge( ahs_anim( 2 ), AHS_TITLE_CAP ) ),\\n\\t\\t\\t)\\n\\t\\t),\\n\\t\\tahs_row(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'flex_direction' => 'row',\\n\\t\\t\\t\\t'flex_justify_content' => 'space-between',\\n\\t\\t\\t\\t'flex_align_items' => 'center',\\n\\t\\t\\t),\\n\\t\\t\\tarray(\\n\\t\\t\\t\\tahs_mono_label( '\\u00a9 2026 Artem Semkin', array( '_element_width' => 'auto' ) ),\\n\\t\\t\\t)\\n\\t\\t),\\n\\t),\\n);\\n\\n\\\/\\\/ --- Persist ------------------------------------------------------------------\\n\\n$slug = 'ahs-demo';\\n$existing = get_page_by_path( $slug );\\n\\n$post_id = $existing ? $existing->ID : wp_insert_post(\\n\\tarray(\\n\\t\\t'import_id' => AHS_DEMO_PAGE_ID,\\n\\t\\t'post_type' => 'page',\\n\\t\\t'post_status' => 'publish',\\n\\t\\t'post_title' => 'Arts Horizontal Scroll \\u2014 Demo',\\n\\t\\t'post_name' => $slug,\\n\\t),\\n\\ttrue\\n);\\n\\nif ( is_wp_error( $post_id ) ) {\\n\\tif ( defined( 'WP_CLI' ) && WP_CLI ) {\\n\\t\\tWP_CLI::error( $post_id->get_error_message() );\\n\\t}\\n\\treturn;\\n}\\n\\n$elements = array( $header, $widget_wrap, $outro );\\n\\n$page_settings = array(\\n\\t'template' => 'elementor_canvas',\\n\\t'hide_title' => 'yes',\\n\\t'background_background' => 'classic',\\n\\t'background_color' => '#0A0A0B',\\n);\\n\\n\\\/\\\/ Mirrors Document::save()'s sequence (elementor\\\/core\\\/base\\\/document.php).\\nupdate_post_meta( $post_id, '_elementor_page_settings', wp_slash( $page_settings ) );\\nupdate_post_meta( $post_id, '_elementor_data', wp_slash( wp_json_encode( $elements, JSON_UNESCAPED_UNICODE ) ) );\\nupdate_post_meta( $post_id, '_elementor_edit_mode', 'builder' );\\nupdate_post_meta( $post_id, '_elementor_template_type', 'wp-page' );\\nupdate_post_meta( $post_id, '_wp_page_template', 'elementor_canvas' );\\nupdate_post_meta( $post_id, '_elementor_version', ELEMENTOR_VERSION );\\n\\n\\\/\\\/ Post CSS never diffs (is_update_required() is hard-coded false) \\u2014 delete to regen.\\n\\\\Elementor\\\\Core\\\\Files\\\\CSS\\\\Post::create( $post_id )->delete();\\ndelete_post_meta( $post_id, '_elementor_element_cache' );\\n\\n\\\/\\\/ The editor prefers newer autosave revisions over raw meta \\u2014 remove them all.\\nforeach ( wp_get_post_revisions( $post_id, array( 'fields' => 'ids' ) ) as $revision_id ) {\\n\\twp_delete_post_revision( $revision_id );\\n}\\n\\n\\\/\\\/ Retire the superseded portfolio draft (design pivot 2026-07-18).\\n$obsolete = get_page_by_path( 'atelier-mono' );\\nif ( $obsolete && 'trash' !== $obsolete->post_status ) {\\n\\twp_trash_post( $obsolete->ID );\\n\\tif ( defined( 'WP_CLI' ) && WP_CLI ) {\\n\\t\\tWP_CLI::log( sprintf( 'Trashed superseded page %d (atelier-mono).', $obsolete->ID ) );\\n\\t}\\n}\\n\\nif ( defined( 'WP_CLI' ) && WP_CLI ) {\\n\\tWP_CLI::success( sprintf( 'Demo page seeded: post_id=%d %s', $post_id, get_permalink( $post_id ) ) );\\n}\\n\"},{\"step\":\"runPHP\",\"code\":\"\nOne widget that adds a pinned horizontal scroll section to Elementor: the section holds still while its panels travel sideways as the page scrolls. Panels are free-form content \u2013 real Elementor Containers, on the same nested-elements foundation as Elementor's own Mega Menu \u2013 so you design them right in the canvas, like any other layout. And there's no Pro version: this is the whole thing.<\/p>\n\n
Free-form panels<\/h4>\n\n
Most ways to get horizontal scrolling in Elementor make you author the content somewhere else: a saved template picked from a dropdown, a section elsewhere on the page wired up by CSS ID, or a repeater with fixed image-and-text fields. Here a panel is a real Container. Drop widgets into it, nest layouts inside it, style it directly in the editor, next to the rest of your page. The pin runs live in the canvas too: scroll the editor and the section scrubs exactly like the frontend.<\/p>\n\n
How it behaves on phones and tablets<\/h4>\n\n
On phones and tablets the section becomes a vertical stack by default: panels flow as normal full-width blocks, nothing to swipe against. You can keep horizontal scrolling on touch if you want it, and the responsive Layout control switches any breakpoint to the vertical stack \u2013 using your site's own Elementor breakpoints, not a hardcoded list. If a visitor's browser can't run the effect at all, it shows the same designed vertical layout \u2013 content is never trapped.<\/p>\n\n
Part of the page, not the whole page<\/h4>\n\n
The widget is a normal section in your page's vertical flow, not a whole-page takeover. Open the page with one, drop another between regular sections, use several on the same page \u2013 each pins and scrubs independently, and the page scrolls vertically as usual before, between, and after. You choose how much page scroll each section consumes, and the reveal can run right-to-left. Mixed vertical and horizontal scrolling, wherever it fits your layout.<\/p>\n\n
Works with Elementor Pro's effects and one-page menus<\/h4>\n\n
Elementor Pro's Scrolling Effects keep working inside the section \u2013 element and background effects follow each panel's ride across the stage instead of freezing while the section is pinned. One-page navigation works too: anchor links and shared URLs scroll to the exact panel, and with Elementor Pro's menu widget the highlighted menu item follows the panel on stage. Entrance animations, lazy-loaded media, and visibility-triggered widgets fire as their panel comes into view, and Pro's page Scroll Snap keeps working around the section.<\/p>\n\n
RTL and multilingual sites<\/h4>\n\n
On a right-to-left page the section mirrors itself \u2013 panels lay out right-to-left and the ride runs the other way, with the first panel still shown first. Nothing to configure, and either direction can be forced per section. WPML, Polylang, TranslatePress, and Weglot need no setup either: panels translate like the rest of the page, and every language keeps its own scroll direction.<\/p>\n\n\n
\n- Install and activate the plugin. The free Elementor plugin is the only requirement.<\/li>\n
- IMPORTANT: Activate \"Nested Elements\" under Elementor \u2192 Settings \u2192 Features.<\/li>\n
- Edit a page with Elementor.<\/li>\n
- Find the \"Horizontal Scroll\" widget under Layout in the widget panel and drop it on the page.<\/li>\n<\/ol>\n\n\n
\nIs it really free?<\/h3><\/dt>\nYes. There is no Pro version and nothing in the widget is locked \u2013 what you install is the whole product. If it earns its keep, there's a donate link.<\/p><\/dd>\n
Does it require Elementor Pro?<\/h3><\/dt>\nNo. The free Elementor plugin is the only requirement, and the horizontal scroll behaves identically with or without Pro \u2013 nothing about the effect is gated behind it.<\/p>\n\n
Pro is supported alongside it rather than required by it. Its Scrolling Effects and one-page menu highlighting keep working inside the section; page Scroll Snap keeps working around it, since the section takes itself out of the snap sequence instead of fighting the pin. The questions further down cover exactly how.<\/p><\/dd>\n
How is this different from Elementor Pro's Horizontal Scroll effect?<\/h3><\/dt>\nPro's Horizontal Scroll is a motion effect, not a section. It slides one element sideways as the page scrolls past it, and the total distance it can travel is the Speed value times 100 pixels \u2013 so even at the maximum Speed of 10, the element moves 1000px in all. A four-panel full-width track needs several times that. The effect also never pins anything: the page keeps scrolling normally while the element slides, and the motion eases toward its target on a one-second transition rather than tracking the scroll position exactly.<\/p>\n\n
Which is why the tutorials for building a real horizontal section don't use it. They give each panel 100vw, make the container holding them sticky inside an over-tall wrapper, and paste in a JavaScript snippet that measures the track and maps scroll onto it \u2013 and you re-tune that whenever the content changes. This widget is the same arrangement as a real element: panels are Containers you add and remove, the travel is measured from the actual track width so it stays correct as the content changes, and Pro's own effects keep working on elements inside the panels.<\/p><\/dd>\n
Will it slow down my site?<\/h3><\/dt>\nNo. The browser itself moves the panels \u2013 the plugin doesn't run animation code on every scroll step and doesn't load a heavy animation library. Its whole frontend footprint is a few kilobytes of CSS and JavaScript. Browsers that don't support the underlying CSS feature yet \u2013 Firefox today, older Safari \u2013 load a small polyfill on demand; everywhere else the motion is pure CSS.<\/p><\/dd>\n
What happens on phones and tablets?<\/h3><\/dt>\nBy default the section switches to a vertical stack on touch devices \u2013 panels become normal full-width blocks in the page flow. You can turn that off to keep the horizontal scroll, or force the vertical layout below any breakpoint with the responsive Layout control.<\/p><\/dd>\n
Can I put any widget inside a panel?<\/h3><\/dt>\nYes \u2013 panels are real Elementor Containers, Flexbox or Grid alike. Anything you can build in a Container works, including nested layouts.<\/p><\/dd>\n
The scroll feels too fast \u2013 what do I change?<\/h3><\/dt>\nScroll Length. It sets how much page scroll the section consumes, so raising it stretches the same journey over more scrolling. Height is a different thing: it's the pinned viewport the panels fill, not the distance they travel. Adding panels doesn't speed anything up either \u2013 the section simply gets taller, and each panel still takes the same amount of scroll to cross.<\/p><\/dd>\n