diff --git a/assets/component-video-with-text.css b/assets/component-video-with-text.css new file mode 100644 index 00000000000..3aae03e66c4 --- /dev/null +++ b/assets/component-video-with-text.css @@ -0,0 +1,374 @@ +.video-with-text .grid { + margin-bottom: 0; +} + +.video-with-text .grid__item { + position: relative; +} + +@media screen and (min-width: 750px) { + .video-with-text__grid--reverse { + flex-direction: row-reverse; + } +} + +.video-with-text__media { + min-height: 100%; + overflow: visible; +} + +.video-with-text__media--small { + height: 19.4rem; +} + +.video-with-text__media--medium { + height: 29.6rem; +} + +.video-with-text__media--large { + height: 43.5rem; +} + +@media screen and (min-width: 750px) { + .video-with-text__media--small { + height: 31.4rem; + } + + .video-with-text__media--medium { + height: 46rem; + } + + .video-with-text__media--large { + height: 69.5rem; + } +} + +.video-with-text__media--placeholder { + position: relative; + overflow: hidden; +} + +.video-with-text__media--placeholder:after { + content: ''; + position: absolute; + background: rgba(var(--color-foreground), 0.04); +} + +.video-with-text__media--placeholder.video-with-text__media--adapt { + height: 20rem; +} + +@media screen and (min-width: 750px) { + .video-with-text__media--placeholder.video-with-text__media--adapt { + height: 30rem; + } +} + +.video-with-text__media--placeholder>svg { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + fill: currentColor; +} + +.video-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in)>.svg-wrapper { + top: 0; + left: 0; + transform: translate(0); +} + +.video-with-text__content { + align-items: flex-start; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + align-self: center; + padding: 4rem calc(4rem / var(--font-body-scale)) 5rem; + position: relative; + z-index: 1; +} + +.video-with-text .grid__item::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.video-with-text:not(.video-with-text--overlap) .video-with-text__media-item:after { + border-radius: var(--media-radius); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); +} + +.video-with-text:not(.video-with-text--overlap) .video-with-text__text-item:after { + border-radius: var(--text-boxes-radius); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); +} + +.video-with-text .video-with-text__media-item>* { + border-radius: var(--media-radius); + overflow: hidden; + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); +} + +.video-with-text .global-media-settings { + overflow: hidden !important; + border: none; +} + +.video-with-text .video-with-text__text-item>* { + border-radius: var(--text-boxes-radius); + overflow: hidden; + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); +} + +.video-with-text:not(.video-with-text--overlap) .video-with-text__media-item>*, +.video-with-text:not(.video-with-text--overlap) .video-with-text__text-item>* { + box-shadow: none; +} + +@media screen and (max-width: 749px) { + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__media-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid__item .video-with-text__media, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__media img, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__media .placeholder-svg { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__text-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid__item .video-with-text__content { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .video-with-text.collapse-borders:not(.video-with-text--overlap) .video-with-text__content { + border-top: 0; + } +} + +.video-with-text__content--mobile-right>* { + align-self: flex-end; + text-align: right; +} + +.video-with-text__content--mobile-center>* { + align-self: center; + text-align: center; +} + +.video-with-text--overlap .video-with-text__content { + width: 90%; + margin: -3rem auto 0; +} + +@media screen and (min-width: 750px) { + .video-with-text__grid--reverse .video-with-text__content { + margin-left: auto; + } + + .video-with-text__content--bottom { + justify-content: flex-end; + align-self: flex-end; + } + + .video-with-text__content--top { + justify-content: flex-start; + align-self: flex-start; + } + + .video-with-text__content--desktop-right>* { + align-self: flex-end; + text-align: right; + } + + .video-with-text__content--desktop-left>* { + align-self: flex-start; + text-align: left; + } + + .video-with-text__content--desktop-center>* { + align-self: center; + text-align: center; + } + + .video-with-text--overlap .video-with-text__text-item { + display: flex; + padding: 3rem 0; + } + + .video-with-text--overlap .video-with-text__content { + height: auto; + width: calc(100% + 4rem); + min-width: calc(100% + 4rem); + margin-top: 0; + margin-left: -4rem; + } + + .video-with-text--overlap .video-with-text__grid--reverse .video-with-text__content { + margin-left: 0; + margin-right: -4rem; + } + + .video-with-text--overlap .video-with-text__grid--reverse .video-with-text__text-item { + justify-content: flex-end; + } + + .video-with-text--overlap .video-with-text__media-item--top { + align-self: flex-start; + } + + .video-with-text--overlap .video-with-text__media-item--middle { + align-self: center; + } + + .video-with-text--overlap .video-with-text__media-item--bottom { + align-self: flex-end; + } + + .video-with-text__media-item--small, + .video-with-text__media-item--large+.video-with-text__text-item { + flex-grow: 0; + } + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media img, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__media .placeholder-svg, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__text-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__content, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__content:after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__text-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__content, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__content:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media-item:after, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media img, + .video-with-text.collapse-corners:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__media .placeholder-svg { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .video-with-text.collapse-borders:not(.video-with-text--overlap) .grid:not(.video-with-text__grid--reverse) .video-with-text__content { + border-left: 0; + } + + .video-with-text.collapse-borders:not(.video-with-text--overlap) .video-with-text__grid--reverse .video-with-text__content { + border-right: 0; + } +} + +.video-with-text:not(.collapse-corners, .video-with-text--overlap) .video-with-text__media-item { + z-index: 2; +} + +/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */ +.video-with-text.video-with-text--overlap .backround-transparent, +.video-with-text:not(.video-with-text--overlap) .background-transparent { + background: transparent; +} + +/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */ +.video-with-text .gradient { + transform: perspective(0); +} + +.video-with-text__content { + border-radius: var(--text-boxes-radius); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + word-break: break-word; +} + +@media screen and (min-width: 990px) { + .video-with-text__content { + padding: 6rem 7rem 7rem; + } +} + +.video-with-text__content>*+* { + margin-top: 2rem; +} + +.video-with-text__content>.video-with-text__text:empty~a { + margin-top: 2rem; +} + +.video-with-text__content> :first-child:is(.video-with-text__heading), +.video-with-text__text--caption+.video-with-text__heading, +.video-with-text__text--caption:first-child { + margin-top: 0; +} + +.video-with-text__content :last-child:is(.video-with-text__heading), +.video-with-text__text--caption { + margin-bottom: 0; +} + +.video-with-text__content .button+.video-with-text__text { + margin-top: 2rem; +} + +.video-with-text__content .video-with-text__text+.button { + margin-top: 3rem; +} + +.video-with-text__heading { + margin-bottom: 0; +} + +.video-with-text__text p { + margin-top: 0; + margin-bottom: 1rem; +} + +@media screen and (max-width: 749px) { + .collapse-padding .video-with-text__grid .video-with-text__content { + padding-left: 0; + padding-right: 0; + } +} + +@media screen and (min-width: 750px) { + .collapse-padding .video-with-text__grid:not(.video-with-text__grid--reverse) .video-with-text__content:not(.video-with-text__content--desktop-center) { + padding-right: 0; + } + + .collapse-padding .video-with-text__grid--reverse .video-with-text__content:not(.video-with-text__content--desktop-center) { + padding-left: 0; + } +} + +/* check for flexbox gap in older Safari versions */ +@supports not (inset: 10px) { + .video-with-text .grid { + margin-left: 0; + } +} + +/* + Multirow + note: consider removing from this stylesheet if multirow-specific styles increase signficantly +*/ +.multirow__inner { + display: flex; + flex-direction: column; + row-gap: var(--grid-mobile-vertical-spacing); +} + +@media screen and (min-width: 750px) { + .multirow__inner { + row-gap: var(--grid-desktop-vertical-spacing); + } +} \ No newline at end of file diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index c85c09836e7..4622bfe5077 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -1513,6 +1513,180 @@ "name": "Image with text" } }, + "video-with-text": { + "name": "Video with text", + "settings": { + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Play video on loop" + }, + "description": { + "label": "Video alt text", + "info": "Describe the video for customers using screen readers. [Learn more](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video)" + }, + "cover_image": { + "label": "Cover image" + }, + "video_url": { + "label": "URL", + "info": "Use a YouTube or Vimeo URL" + }, + "height": { + "options__1": { + "label": "Adapt to video" + }, + "options__2": { + "label": "Small" + }, + "options__3": { + "label": "Medium" + }, + "options__4": { + "label": "Large" + }, + "label": "Video height" + }, + "desktop_video_width": { + "options__1": { + "label": "Small" + }, + "options__2": { + "label": "Medium" + }, + "options__3": { + "label": "Large" + }, + "label": "Desktop video width", + "info": "Video is automatically optimized for mobile." + }, + "layout": { + "options__1": { + "label": "Video first" + }, + "options__2": { + "label": "Video second" + }, + "label": "Desktop video placement", + "info": "Video first is the default mobile layout." + }, + "desktop_content_alignment": { + "options__1": { + "label": "Left" + }, + "options__2": { + "label": "Center" + }, + "options__3": { + "label": "Right" + }, + "label": "Desktop content alignment" + }, + "desktop_content_position": { + "options__1": { + "label": "Top" + }, + "options__2": { + "label": "Middle" + }, + "options__3": { + "label": "Bottom" + }, + "label": "Desktop content position" + }, + "mobile_content_alignment": { + "options__1": { + "label": "Left" + }, + "options__2": { + "label": "Center" + }, + "options__3": { + "label": "Right" + }, + "label": "Mobile content alignment" + } + }, + "blocks": { + "heading": { + "name": "Heading", + "settings": { + "heading": { + "label": "Heading", + "default": "Video with text" + } + } + }, + "caption": { + "name": "Caption", + "settings": { + "text": { + "label": "Text", + "default": "Add a tagline" + }, + "text_style": { + "label": "Text style", + "options__1": { + "label": "Subtitle" + }, + "options__2": { + "label": "Uppercase" + } + }, + "caption_size": { + "label": "Text size", + "options__1": { + "label": "Small" + }, + "options__2": { + "label": "Medium" + }, + "options__3": { + "label": "Large" + } + } + } + }, + "text": { + "name": "Text", + "settings": { + "text": { + "label": "Content", + "default": "

Pair text with an video to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

" + }, + "text_style": { + "label": "Text style", + "options__1": { + "label": "Body" + }, + "options__2": { + "label": "Subtitle" + } + } + } + }, + "button": { + "name": "Button", + "settings": { + "button_label": { + "label": "Button label", + "info": "Leave the label blank to hide the button.", + "default": "Button label" + }, + "button_link": { + "label": "Button link" + }, + "outline_button": { + "label": "Use outline button style" + } + } + } + }, + "presets": { + "name": "Video with text" + } + }, "multirow": { "name": "Multirow", "settings": { diff --git a/sections/product-slider.liquid b/sections/product-slider.liquid new file mode 100644 index 00000000000..fbcac90681f --- /dev/null +++ b/sections/product-slider.liquid @@ -0,0 +1,223 @@ +{%- style -%} + .product-slider__ctr { + position: relative; + z-index: 12; + display: flex; + justify-content: end; + } + + .product-slider__arrow { + background: #fff; + border: none; + display: inline-flex; + width: 50px; + height: 50px; + justify-content: center; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 50%; + top: 50%; + z-index: 12; + cursor: pointer; + outline: none !important; + } + .product-slider__arrow .icon-font { + display: inline-flex; + } + .product-slider__arrow.product-slider-prev { + transform: translateY(-50%); + margin-right: 15px; + } + .product-slider__arrow.product-slider-next { + transform: translateY(-50%); + } + .swiper { + width: 100%; + height: 100%; + padding-block: 2.5rem; + } + .swiper-slide { + font-size: 18px; + display: flex; + flex-direction: column; + border-radius: 8px; + border: 1px solid; + text-decoration: none; + } + .swiper-slide .product__title { + padding: 10px; + } + .swiper-slide p { + margin: 0; + padding: 0 10px 10px; + } + .swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px 8px 0 0; + } + .swiper-slide:hover { + box-shadow: 0 3px 10px rgba(0,0,0,0.3); + } + .swiper-pagination { + position: relative; + top: 0; + bottom: 0; + margin-top: 50px; + } + .swiper-pagination .swiper-pagination-bullet { + width: 13px; + height: 10px; + display: inline-block; + opacity: 0.2; + margin: 0 5px; + border-radius: 20px; + transition: opacity 0.5s, background-color 0.5s, width 0.5s; + transition-delay: 0.5s, 0.5s, 0s; + } + .swiper-pagination .swiper-pagination-bullet-active { + opacity: 1; + width: 100px; + transition-delay: 0s; + } + @media screen and (max-width: 576px) { + .swiper-pagination .swiper-pagination-bullet-active { + width: 70px; + } + } +{%- endstyle -%} + +
+ +
+ + +
+
+ {% if section.blocks.size > 4 %} +
+ + +
+ {% endif %} +
+ +
+ {% for block in section.blocks %} + +
+ {{ block.settings.alt_text }} +
+
{{ block.settings.heading }}
+

{{ block.settings.description }}

+
+ {% endfor %} +
+ +
+
+
+
+ + + +{%- javascript -%} + const swiper = new Swiper(".mySwiper", { + slidesPerView: 4, + spaceBetween: 20, + autoplay: false, + loop: true, + pagination: { + el: ".swiper-pagination", + clickable: true, + }, + simulateTouch: true, + navigation: { + nextEl: '.product-slider-next', + prevEl: '.product-slider-prev', + }, + }); +{%- endjavascript -%} + +{% schema %} +{ + "name": "Product Slider", + "settings": [ + + ], + "blocks": [ + { + "type": "slide", + "name": "Slide", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Slide Image" + }, + { + "type": "text", + "id": "alt_text", + "label": "Image Alt Text", + "default": "Slide image" + }, + { + "type": "text", + "id": "heading", + "label": "Slide Heading", + "default": "This is a heading" + }, + { + "type": "textarea", + "id": "description", + "label": "Slide Description", + "default": "Add your slide description here." + }, + { + "type": "text", + "id": "button_text", + "label": "Button Text", + "default": "Learn More" + }, + { + "type": "link_list", + "id": "button_link", + "label": "Button Link" + } + ] + } + ], + "presets": [ + { + "name": "Default", + "category": "Sliders" + } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/video-with-text.liquid b/sections/video-with-text.liquid new file mode 100644 index 00000000000..612009cf390 --- /dev/null +++ b/sections/video-with-text.liquid @@ -0,0 +1,533 @@ +{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }} + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } +{%- endstyle -%} + +{%- liquid + assign fetch_priority = 'auto' + + assign video_id = section.settings.video-with-text.id | default: section.settings.video_url.id + assign video_alt = section.settings.video-with-text.alt | default: section.settings.description + assign alt = 'sections.video-with-text.load_video' | t: description: video_alt | escape + assign poster = section.settings.video-with-text.preview_image | default: section.settings.cover_image + + if section.index == 1 + assign fetch_priority = 'high' + endif + if section.settings.color_scheme == section.settings.section_color_scheme and section.settings.content_layout == 'no-overlap' + + endif + + if section.settings.video != null + assign ratio_diff = section.settings.video-with-text.aspect_ratio | minus: poster.aspect_ratio | abs + if ratio_diff < 0.01 and ratio_diff > 0 + assign fix_ratio = true + endif + endif +-%} + +
+
+
+
+
+
+ {%- if section.settings.video != blank -%} + {{ + section.settings.video + | video_url: width: 1500 + | video_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority + }} + {%- else -%} + + + + + {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {% case block.type %} + {%- when 'heading' -%} +

+ {{ block.settings.heading }} +

+ {%- when 'caption' -%} +

+ {{ block.settings.caption | escape }} +

+ {%- when 'text' -%} +
+ {{ block.settings.text }} +
+ {%- when 'button' -%} + {%- if block.settings.button_label != blank -%} + + {{ block.settings.button_label | escape }} + + {%- endif -%} + {%- endcase -%} + {%- endfor -%} +
+
+
+
+
+
+ +{% schema %} +{ + "name": "t:sections.video-with-text.name", + "class": "section", + "disabled_on": { + "groups": ["header", "footer"] + }, + "settings": [ + { + "type": "checkbox", + "id": "enable_video_looping", + "label": "t:sections.video-with-text.settings.enable_video_looping.label", + "default": false + }, + { + "type": "video", + "id": "video", + "label": "t:sections.video-with-text.settings.video.label" + }, + { + "type": "video_url", + "id": "video_url", + "accept": ["youtube", "vimeo"], + "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc", + "label": "t:sections.video-with-text.settings.video_url.label", + "info": "t:sections.video-with-text.settings.video_url.info" + }, + { + "type": "image_picker", + "id": "cover_image", + "label": "t:sections.video-with-text.settings.cover_image.label" + }, + { + "type": "text", + "id": "description", + "label": "t:sections.video-with-text.settings.description.label", + "info": "t:sections.video-with-text.settings.description.info" + }, + { + "type": "select", + "id": "height", + "options": [ + { + "value": "adapt", + "label": "t:sections.video-with-text.settings.height.options__1.label" + }, + { + "value": "small", + "label": "t:sections.video-with-text.settings.height.options__2.label" + }, + { + "value": "medium", + "label": "t:sections.video-with-text.settings.height.options__3.label" + }, + { + "value": "large", + "label": "t:sections.video-with-text.settings.height.options__4.label" + } + ], + "default": "adapt", + "label": "t:sections.video-with-text.settings.height.label" + }, + { + "type": "select", + "id": "desktop_video_width", + "options": [ + { + "value": "small", + "label": "t:sections.video-with-text.settings.desktop_video_width.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.video-with-text.settings.desktop_video_width.options__2.label" + }, + { + "value": "large", + "label": "t:sections.video-with-text.settings.desktop_video_width.options__3.label" + } + ], + "default": "medium", + "label": "t:sections.video-with-text.settings.desktop_video_width.label", + "info": "t:sections.video-with-text.settings.desktop_video_width.info" + }, + { + "type": "select", + "id": "layout", + "options": [ + { + "value": "video_first", + "label": "t:sections.video-with-text.settings.layout.options__1.label" + }, + { + "value": "text_first", + "label": "t:sections.video-with-text.settings.layout.options__2.label" + } + ], + "default": "video_first", + "label": "t:sections.video-with-text.settings.layout.label", + "info": "t:sections.video-with-text.settings.layout.info" + }, + { + "type": "select", + "id": "desktop_content_position", + "options": [ + { + "value": "top", + "label": "t:sections.video-with-text.settings.desktop_content_position.options__1.label" + }, + { + "value": "middle", + "label": "t:sections.video-with-text.settings.desktop_content_position.options__2.label" + }, + { + "value": "bottom", + "label": "t:sections.video-with-text.settings.desktop_content_position.options__3.label" + } + ], + "default": "top", + "label": "t:sections.video-with-text.settings.desktop_content_position.label" + }, + { + "type": "select", + "id": "desktop_content_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.video-with-text.settings.desktop_content_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.video-with-text.settings.desktop_content_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.video-with-text.settings.desktop_content_alignment.options__3.label" + } + ], + "default": "left", + "label": "t:sections.video-with-text.settings.desktop_content_alignment.label" + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "t:sections.multirow.settings.container_color_scheme.label", + "default": "scheme-1" + }, + { + "type": "header", + "content": "Mobile layout" + }, + { + "type": "select", + "id": "mobile_content_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.video-with-text.settings.mobile_content_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.video-with-text.settings.mobile_content_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.video-with-text.settings.mobile_content_alignment.options__3.label" + } + ], + "default": "left", + "label": "t:sections.video-with-text.settings.mobile_content_alignment.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ], + "blocks": [ + { + "type": "heading", + "name": "t:sections.video-with-text.blocks.heading.name", + "limit": 1, + "settings": [ + { + "type": "inline_richtext", + "id": "heading", + "default": "t:sections.video-with-text.blocks.heading.settings.heading.default", + "label": "t:sections.video-with-text.blocks.heading.settings.heading.label" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + }, + { + "value": "hxl", + "label": "t:sections.all.heading_size.options__4.label" + }, + { + "value": "hxxl", + "label": "t:sections.all.heading_size.options__5.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + } + ] + }, + { + "type": "caption", + "name": "t:sections.video-with-text.blocks.caption.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "caption", + "default": "t:sections.video-with-text.blocks.caption.settings.text.default", + "label": "t:sections.video-with-text.blocks.caption.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "subtitle", + "label": "t:sections.video-with-text.blocks.caption.settings.text_style.options__1.label" + }, + { + "value": "caption-with-letter-spacing", + "label": "t:sections.video-with-text.blocks.caption.settings.text_style.options__2.label" + } + ], + "default": "caption-with-letter-spacing", + "label": "t:sections.video-with-text.blocks.caption.settings.text_style.label" + }, + { + "type": "select", + "id": "text_size", + "options": [ + { + "value": "small", + "label": "t:sections.video-with-text.blocks.caption.settings.caption_size.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.video-with-text.blocks.caption.settings.caption_size.options__2.label" + }, + { + "value": "large", + "label": "t:sections.video-with-text.blocks.caption.settings.caption_size.options__3.label" + } + ], + "default": "medium", + "label": "t:sections.video-with-text.blocks.caption.settings.caption_size.label" + } + ] + }, + { + "type": "text", + "name": "t:sections.video-with-text.blocks.text.name", + "limit": 1, + "settings": [ + { + "type": "richtext", + "id": "text", + "default": "t:sections.video-with-text.blocks.text.settings.text.default", + "label": "t:sections.video-with-text.blocks.text.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "body", + "label": "t:sections.video-with-text.blocks.text.settings.text_style.options__1.label" + }, + { + "value": "subtitle", + "label": "t:sections.video-with-text.blocks.text.settings.text_style.options__2.label" + } + ], + "default": "body", + "label": "t:sections.video-with-text.blocks.text.settings.text_style.label" + } + ] + }, + { + "type": "button", + "name": "t:sections.video-with-text.blocks.button.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "button_label", + "default": "t:sections.video-with-text.blocks.button.settings.button_label.default", + "label": "t:sections.video-with-text.blocks.button.settings.button_label.label", + "info": "t:sections.video-with-text.blocks.button.settings.button_label.info" + }, + { + "type": "url", + "id": "button_link", + "label": "t:sections.video-with-text.blocks.button.settings.button_link.label" + }, + { + "type": "checkbox", + "id": "button_style_secondary", + "default": false, + "label": "t:sections.video-with-text.blocks.button.settings.outline_button.label" + } + ] + } + ], + "presets": [ + { + "name": "t:sections.video-with-text.presets.name", + "blocks": [ + { + "type": "heading" + }, + { + "type": "text" + }, + { + "type": "button" + } + ] + } + ] +} +{% endschema %}