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
Built for small screens<\/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
Plays well with the rest of Elementor<\/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\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
- Drop the Horizontal Scroll widget on a page and design its three starter panels \u2013 each is a real Container.<\/li>\n
- Tune the section in the Layout controls: Height, Scroll Length, Direction, and Pin Top Offset for sticky headers.<\/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.<\/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