Solved

Brooklyn theme slideshow button position

vashlow
Tourist
5 0 2

Hi Good day!

Any expert can advise how to get around below is highly appreciated.

For Brooklyn theme, can the slideshow's button (just button only, not the text content) be re-positioned to the bottom? Can this be done on just a particular Section (slideshow), or have to modify the Assets (theme or timber)?

Note: Slideshow Slide Height setting is 'Full screen', not 'Adapt to first image'.

example as shown below: 'SHOP NOW' button at center position now to be relocated towards bottom, but above the slides indicators. 

vashlow_0-1625308931566.png

Thank you : )

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@vashlow 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
margin-bottom: 35%;
}
}

@media screen and (max-width: 768px){
.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
margin-top: 340px; 
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

dmwwebartisan
Shopify Partner
12280 2546 3694

@vashlow 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
vashlow
Tourist
5 0 2

Hi,

https://www.ecogard.com.my/pages/our-products-collection

pw: ecogardworld

i'm having separate images for desktop & mobile view respectively.

 

desktop view,

vashlow_0-1625332323934.png

 

mobile view,

vashlow_1-1625332389400.png

 

Thank you.

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@vashlow 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
margin-bottom: 35%;
}
}

@media screen and (max-width: 768px){
.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
margin-top: 340px; 
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
vashlow
Tourist
5 0 2

@dmwwebartisan 

Your recommendation works, really helpful, thank you so much! I did further fine tuning on the margin values as below, made the cta button float then adjust position from margin-right, kindly comment if any fault or better way to code this. 


@media screen and (min-width: 769px){
.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
margin-bottom: -40%; float: right; margin-right: 362px
}
}

Desktop view

Capture1.JPG

 

@media screen and (max-width: 768px){
.hero--adapt a.hero__cta, .hero__slide a.hero__cta{
margin-top: 600px;
}
}

Mobile view

Capture2.jpeg

 

I'm facing another challenge now...is the possible to make adjustment just for a specific page slide? As in can i add the similar code to the page's slide section? Would like to hear your advise.

 

Thank you!

vashlow
Tourist
5 0 2

below is my individual section slide schema...

 

{%- if section.settings.home_hero_height == 'adapt' -%}
{% comment %}
'min_aspect_ratio' is the minimum aspect ratio of images shown without
whitespace when 'home_hero_height' is set to 'adapt'.
The aspect ratio values for the first image in the slideshow will be used
unless it is blank, in that case a ratio of 2:1 will be used.
{% endcomment %}

{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}

{% comment %}
Change the hero slideshow's dots color based on the slides' text color.
{% endcomment %}
{%- style -%}
.hero-{{ section.id }} {
height: {{- wrapper_height -}}vw !important;
overflow: hidden;
}
.hero-{{ section.id }} .slick-track,
.hero-{{ section.id }} .slideshow__overlay:before {
height: {{- wrapper_height -}}vw;
}
{%- endstyle -%}
{%- endif -%}

<div id="HeroWrapper-{{ section.id }}"{% if section.settings.home_hero_height == 'adapt' %} class="hero--adapt"{% endif %} data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{%- if section.blocks.size > 0 -%}
<div class="hero-{{ section.id }} hero"
id="Hero-{{ section.id }}"
aria-label="slideshow"
aria-describedby="a11y-slideshow-info"
tabindex="-1"
role="region"
data-autoplay="{{ section.settings.hero_home_auto }}"
data-autoplayspeed="{{ section.settings.home_hero_auto_speed | times: 1000 }}"
data-adapt="{% if section.settings.home_hero_height == 'adapt' %}true{% else %}false{% endif %}"
data-slide-nav-a11y="{{ 'home_page.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
data-slide-nav-active-a11y="{{ 'home_page.slideshow.active_slide' | t: slide_number: '[slide_number]' }}"
data-slide-index="0">
{%- for block in section.blocks -%}
{%- style -%}
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause,
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause .icon:before,
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-prev .icon:before,
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-next .icon:before,
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slide--{{ block.id }} {
color: {{ block.settings.slide_text_color }};
}
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-dots li a:before {
background: transparent;
border-color: {{ block.settings.slide_text_color }};
}
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} li.slick-active a:before {
background: {{ block.settings.slide_text_color }};
border-color: transparent;
}
#HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause .icon {
fill: {{ block.settings.slide_text_color }};
}
#HeroWrapper-{{ section.id }} .slide--{{ block.id }} .hero__text-wrap {
text-align: {{ block.settings.text_alignment }}
}
{%- endstyle -%}
{%- comment -%}
Apply a color overlay on a per-slide basis. The overlay is defined by
a linear gradient with 4 points along it. The last 3 points cause the
bottom of the overlay to be more opaque, in order to increase contrast
with the controls for a11y purposes. Remove the 'background-image'
style below and change to the following to remove the gradient:

background-color: {{ block.settings.image_overlay }};
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.00 }};

{%- endcomment -%}
{%- if block.settings.image_overlay -%}
{%- style -%}
.slide--{{ block.id }} .slideshow__overlay:before {
{%- assign opacity_alpha = block.settings.image_overlay_opacity | divided_by: 100.00 -%}
{%- assign opacity_alpha_3 = opacity_alpha | plus: 0.25 | at_most: 1.0 -%}
{%- assign opacity_alpha_2 = opacity_alpha_3 | minus: opacity_alpha | divided_by: 2.0 | plus: opacity_alpha -%}
background-image: linear-gradient(to bottom,
{{ '#000' | color_modify: 'alpha', opacity_alpha }},
{{ '#000' | color_modify: 'alpha', opacity_alpha }} calc(100% - 150px),
{{ '#000' | color_modify: 'alpha', opacity_alpha_2 }} calc(100% - 60px),
{{ '#000' | color_modify: 'alpha', opacity_alpha_3 }});
}
{%- endstyle -%}
{%- endif -%}
<div class="hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}"
data-hero-slide
{{ block.shopify_attributes }}>
{%- if block.settings.image == blank -%}
<div class="placeholder-background">
{%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- else -%}
<noscript>
{%- if forloop.first == true -%}
<div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
{%- endif -%}
</noscript>
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign img_url_mobile = block.settings.image_mobile | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="image_desktop hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
{%- if forloop.first == true -%}
src="{{ block.settings.image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
<img class="image_mobile hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
{%- if forloop.first == true -%}
src="{{ block.settings.image_mobile | img_url: '300x' }}"
{%- endif -%}
data-src="{{ img_url_mobile }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- endif -%}

<div class="hero__text-wrap{% if block.settings.image_overlay %} slideshow__overlay{% endif %}">
<div class="hero__text-align wrapper">
<div class="hero__text-content" data-hero-text-content>
{%- unless block.settings.slide_subheading == blank -%}
<p class="hero__subtitle">
{{ block.settings.slide_subheading | escape }}
</p>
{%- endunless -%}
{%- unless block.settings.slide_heading == blank -%}
<h2 class="hero__title h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
<a href="{{ block.settings.button_link }}" style="color: {{ block.settings.slide_button_label_color }}; background-color: {{ block.settings.slide_button_background_color }}" class="btn hero__cta">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endfor -%}

{%- if section.blocks.size > 1 -%}
<div class="hero__controls wrapper">
{%- if section.settings.hero_home_auto -%}
<button class="hero__pause" aria-live="polite" aria-label="{{ 'home_page.slideshow.pause' | t }}" data-label-pause="{{ 'home_page.slideshow.pause' | t }}" data-label-play="{{ 'home_page.slideshow.play' | t }}" data-pause>
<span class="icon icon-pause" aria-hidden="true"></span>
<span class="icon icon-play" aria-hidden="true"></span>
</button>
{%- endif -%}
<ul>
<li>
<button class="slick-prev" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slide-previous>
<span class="icon icon-slide-prev" aria-hidden="true"></span>
</button>
</li>
<li>
<button class="slick-next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slide-next>
<span class="icon icon-slide-next" aria-hidden="true"></span>
</button>
</li>
</ul>
<div class="hero__dots-wrapper" data-hero-dots-wrapper></div>
</div>
{%- endif -%}
</div>
{%- if section.settings.home_hero_height == 'adapt' -%}
<div class="hero__adapt-text-wrap wrapper" data-hero-adapt-text-wrap>
{%- for block in section.blocks -%}
<div class="hero__text-content hero__text-content--adapt text-center" data-index="{{ forloop.index0 }}" data-hero-text-content>
{%- unless block.settings.slide_subheading == blank -%}
<p class="hero__subtitle">
{{ block.settings.slide_subheading | escape }}
</p>
{%- endunless -%}
{%- unless block.settings.slide_heading == blank -%}
<h2 class="hero__title h1">
{{ block.settings.slide_heading | escape }}
</h2>
{%- endunless -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
<a href="{{ block.settings.button_link }}" class="hero__cta btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- endif -%}
</div>
<style>
.image_mobile{
display: none!important;
}
@media(max-width:767px) {
.image_desktop {
display: none!important;
}
.image_mobile {
display: block!important;
}
}
</style>
{% schema %}
{
"name": {
"cs": "Prezentace",
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pl": "Pokaz slajdów",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"tr": "Slayt gösterisi",
"vi": "Bản trình chiếu",
"zh-CN": "幻灯片",
"zh-TW": "素材輪播"
},
"class": "index-section index-slideshow-section shopify-section--full-width",
"max_blocks": 6,
"settings": [
{
"type": "select",
"id": "home_hero_height",
"label": {
"cs": "Výška snímku",
"da": "Diashøjde",
"de": "Diahöhe",
"en": "Slide height",
"es": "Altura de diapositiva",
"fi": "Dian korkeus",
"fr": "Hauteur de la diapositive",
"it": "Altezza slide",
"ja": "スライドの高さ",
"ko": "슬라이드 높이",
"nb": "Lysbildehøyde",
"nl": "Diahoogte",
"pl": "Wysokość slajdu",
"pt-BR": "Altura do slide",
"pt-PT": "Altura do diapositivo",
"sv": "Bildhöjd",
"th": "ความสูงของสไลด์",
"tr": "Slayt yüksekliği",
"vi": "Chiều cao trang chiếu",
"zh-CN": "幻灯片高度",
"zh-TW": "投影片高度"
},
"default": "full",
"info": {
"cs": "Prostudujte si [nápovědu k prezentaci](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...).",
"da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"de": "Erfahre mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"es": "Más información sobre [directrices de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"fi": "Lisätietoja [diaesitysohjeista](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...",
"ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"pl": "Dowiedz się więcej o [wytycznych dotyczących pokazu slajdów](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"tr": "[Slayt gösterisi yönergeleri](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...) hakkında daha fazla bilgi edinin",
"vi": "Tìm hiểu thêm về [hướng dẫn trình chiếu](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"zh-CN": "详细了解[幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)",
"zh-TW": "深入瞭解 [素材輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#sl...)"
},
"options": [
{
"value": "full",
"label": {
"cs": "Celá obrazovka",
"da": "Fuld skærm",
"de": "Vollbild",
"en": "Full screen",
"es": "Pantalla completa",
"fi": "Kokonäyttö",
"fr": "Plein écran",
"it": "A schermo intero",
"ja": "全画面表示",
"ko": "전체 화면",
"nb": "Fullskjerm",
"nl": "Volledig scherm",
"pl": "Tryb pełnoekranowy",
"pt-BR": "Tela cheia",
"pt-PT": "Ecrã inteiro",
"sv": "Helskärm",
"th": "โหมดเต็มหน้าจอ",
"tr": "Tam ekran",
"vi": "Toàn màn hình",
"zh-CN": "全屏",
"zh-TW": "全螢幕"
}
},
{
"value": "adapt",
"label": {
"cs": "Přizpůsobení prvnímu obrázku",
"da": "Tilpas til første side",
"de": "An erstes Bild anpassen",
"en": "Adapt to first image",
"es": "Adaptar a la primera imagen",
"fi": "Mukauta ensimmäisen kuvan mukaan",
"fr": "Adapter à la première image",
"it": "Adatta alla prima immagine",
"ja": "最初の画像に対応",
"ko": "첫 번째 이미지에 맞춤",
"nb": "Tilpass etter første bilde",
"nl": "Aanpassen aan eerste afbeelding",
"pl": "Dostosuj do pierwszego obrazu",
"pt-BR": "Adaptar à primeira imagem",
"pt-PT": "Adaptar à primeira imagem",
"sv": "Anpassa efter första bilden",
"th": "ปรับให้เข้ากับรูปภาพแรก",
"tr": "İlk görsele uyarla",
"vi": "Điều chỉnh theo hình ảnh đầu tiên",
"zh-CN": "适应第一张图片",
"zh-TW": "配合第一張圖片"
}
}
]
},
{
"type": "checkbox",
"id": "hero_home_auto",
"label": {
"cs": "Automaticky otočit snímky",
"da": "Roter automatisk slides",
"de": "Auto-rotieren der Slides",
"en": "Auto-rotate slides",
"es": "Rotar las diapositivas automáticamente",
"fi": "Käännä diat automaattisesti",
"fr": "Rotation automatique des diapositives",
"it": "Ruota slide automaticamente",
"ja": "スライドの自動切り替え",
"ko": "슬라이드 자동 회전",
"nb": "Autoroter lysbildene",
"nl": "Dia's automatisch draaien",
"pl": "Automatycznie obracaj slajdy",
"pt-BR": "Rodar os slides automaticamente",
"pt-PT": "Reprodução automática de diapositivos",
"sv": "Auto-rotera bilder",
"th": "หมุนสไลด์อัตโนมัติ",
"tr": "Slaytları otomatik olarak döndür",
"vi": "Tự động xoay vòng trang chiếu",
"zh-CN": "自动旋转幻灯片",
"zh-TW": "自動旋轉投影片"
},
"default": false
},
{
"type": "range",
"id": "home_hero_auto_speed",
"label": {
"cs": "Změnit snímek co",
"da": "Skift slide hver",
"de": "Slides überall ändern",
"en": "Change slides every",
"es": "Cambiar diapositivas cada",
"fi": "Vaihda diat joka",
"fr": "Changer de diapositive toutes les",
"it": "Cambia slide ogni",
"ja": "スライドを変更する間隔",
"ko": "슬라이드를 매번 변경",
"nb": "Endre lysbilde hvert",
"nl": "Wijzig dia's elke",
"pl": "Zmieniaj slajdy co",
"pt-BR": "Mudar os slides a cada",
"pt-PT": "Mudar diapositivos a cada",
"sv": "Byt bilder varje",
"th": "เปลี่ยนสไลด์ทุก",
"tr": "Slaytları şu zaman aralığında değiştir:",
"vi": "Đổi trang chiếu sau mỗi",
"zh-CN": "幻灯片更改时间间隔",
"zh-TW": "每過以下時間即變更投影片"
},
"max": 9,
"min": 3,
"step": 2,
"unit": {
"cs": " s",
"da": " s",
"de": " s",
"en": " s",
"es": " s",
"fi": " s",
"fr": " s",
"it": " s",
"ja": " s",
"ko": " s",
"nb": " s",
"nl": " s",
"pl": " s",
"pt-BR": " s",
"pt-PT": " s",
"sv": " s",
"th": " s",
"tr": " sn",
"vi": " gi",
"zh-CN": " s",
"zh-TW": " s"
},
"default": 5
}
],
"presets": [
{
"name": {
"cs": "Prezentace",
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pl": "Pokaz slajdów",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"tr": "Slayt gösterisi",
"vi": "Bản trình chiếu",
"zh-CN": "幻灯片",
"zh-TW": "素材輪播"
},
"category": {
"cs": "Obrázek",
"da": "Billede",
"de": "Bild",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"settings": {
"hero_home_auto": false,
"home_hero_auto_speed": 5
},
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
],
"blocks": [
{
"type": "slide",
"name": {
"cs": "Snímek",
"da": "Slide",
"de": "Folie",
"en": "Slide",
"es": "Diapositiva",
"fi": "Dia",
"fr": "Diapositive",
"it": "Scorrimento",
"ja": "スライド",
"ko": "슬라이드",
"nb": "Lysbilde",
"nl": "Dia",
"pl": "Slajd",
"pt-BR": "Slide",
"pt-PT": "Diapositivo",
"sv": "Bild",
"th": "สไลด์",
"tr": "Slayt",
"vi": "Trang chiếu",
"zh-CN": "幻灯片",
"zh-TW": "投影片"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Bild",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "image_picker",
"id": "image_mobile",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Bild",
"en": "Image Mobile",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "image_position",
"label": {
"cs": "Pozice obrázku",
"da": "Placering af billede",
"de": "Bildposition",
"en": "Image position",
"es": "Posición de la imagen",
"fi": "Kuvan sijainti",
"fr": "Position de l'image",
"it": "Posizione Immagine",
"ja": "画像の位置",
"ko": "이미지 위치",
"nb": "Bildeposisjon",
"nl": "Afbeeldingspositie",
"pl": "Położenie obrazu",
"pt-BR": "Posição da imagem",
"pt-PT": "Posição da imagem",
"sv": "Bildposition",
"th": "ตำแหน่งรูปภาพ",
"tr": "Görsel konumu",
"vi": "Vị trí hình ảnh",
"zh-CN": "图片位置",
"zh-TW": "圖片位置"
},
"default": "center center",
"options": [
{
"label": {
"cs": "Nahoře vlevo",
"da": "Øverst til venstre",
"de": "Oben links",
"en": "Top left",
"es": "Arriba a la izquierda",
"fi": "Ylhäällä vasemmalla",
"fr": "En haut à gauche",
"it": "In alto a sinistra",
"ja": "左上",
"ko": "왼쪽 상단",
"nb": "Øverst til venstre",
"nl": "Linksboven",
"pl": "Na górze po lewej",
"pt-BR": "Superior esquerdo",
"pt-PT": "Canto superior esquerdo",
"sv": "Överst till vänster",
"th": "ซ้ายบน",
"tr": "Üst sol",
"vi": "Trên cùng bên trái",
"zh-CN": "左上方",
"zh-TW": "左上角"
},
"value": "left top"
},
{
"label": {
"cs": "Nahoře ve středu",
"da": "Øverst i midten",
"de": "Oben zentriert",
"en": "Top center",
"es": "Centrar arriba",
"fi": "Keskellä ylhäällä",
"fr": "En haut au centre",
"it": "In alto al centro",
"ja": "中央上",
"ko": "맨 위 중간",
"nb": "Toppsentrert",
"nl": "Midden boven",
"pl": "Na górze na środku",
"pt-BR": "Superior centro",
"pt-PT": "Superior centro",
"sv": "Längst upp i mitten",
"th": "กลางบน",
"tr": "Üst orta",
"vi": "Trên cùng ở giữa",
"zh-CN": "顶部居中",
"zh-TW": "中央上方"
},
"value": "center top"
},
{
"label": {
"cs": "Nahoře vpravo",
"da": "Øverst til højre",
"de": "Oben rechts",
"en": "Top right",
"es": "Arriba a la derecha",
"fi": "Ylhäällä oikealla",
"fr": "En haut à droite",
"it": "In alto a destra",
"ja": "右上",
"ko": "오른쪽 상단",
"nb": "Øverst til høyre",
"nl": "Rechtsboven",
"pl": "Na górze po prawej",
"pt-BR": "Superior direito",
"pt-PT": "Canto superior direito",
"sv": "Överst till höger",
"th": "ขวาบน",
"tr": "Üst sağ",
"vi": "Trên cùng bên phải",
"zh-CN": "右上方",
"zh-TW": "右上角"
},
"value": "right top"
},
{
"label": {
"cs": "Uprostřed vlevo",
"da": "Midt på til venstre",
"de": "Mittig links",
"en": "Middle left",
"es": "Centro a la izquierda",
"fi": "Keskellä vasemmalla",
"fr": "Au milieu à gauche",
"it": "Centrale a sinistra",
"ja": "中央部左側",
"ko": "왼쪽 중간",
"nb": "Midt til venstre",
"nl": "Midden links",
"pl": "Na środku po lewej",
"pt-BR": "Meio esquerdo",
"pt-PT": "Intermédio à esquerda",
"sv": "Mitten till vänster",
"th": "ซ้ายกลาง",
"tr": "Orta sol",
"vi": "Ở giữa bên trái",
"zh-CN": "中间居左",
"zh-TW": "中央左方"
},
"value": "left center"
},
{
"label": {
"cs": "Uprostřed ve středu",
"da": "Midt på centreret",
"de": "Mittig zentriert",
"en": "Middle center",
"es": "Centro",
"fi": "Keskellä keskellä",
"fr": "Centré au milieu",
"it": "Al centro",
"ja": "中心",
"ko": "가운데 중간",
"nb": "Midt i senter",
"nl": "Midden centrum",
"pl": "Na środku",
"pt-BR": "Meio centro",
"pt-PT": "Intermédio ao centro",
"sv": "Mitten centrerat",
"th": "กึ่งกลาง",
"tr": "Orta kısmın ortası",
"vi": "Chính giữa",
"zh-CN": "中间居中",
"zh-TW": "正中央"
},
"value": "center center"
},
{
"label": {
"cs": "Uprostřed vpravo",
"da": "Midt på til højre",
"de": "Mittig rechts",
"en": "Middle right",
"es": "Centro a la derecha",
"fi": "Keskellä oikealla",
"fr": "Au milieu à droite",
"it": "Centrale a destra",
"ja": "中央部右側",
"ko": "오른쪽 중간",
"nb": "Midt til høyre",
"nl": "Midden rechts",
"pl": "Na środku po prawej",
"pt-BR": "Meio direito",
"pt-PT": "Intermédio à direita",
"sv": "Mitten till höger",
"th": "ขวากลาง",
"tr": "Orta sağ",
"vi": "Ở giữa bên phải",
"zh-CN": "中间居右",
"zh-TW": "中央右方"
},
"value": "right center"
},
{
"label": {
"cs": "Dole vlevo",
"da": "Nederst til venstre",
"de": "Unten links",
"en": "Bottom left",
"es": "Abajo a la izquierda",
"fi": "Alhaalla vasemmalla",
"fr": "En bas à gauche",
"it": "In basso a sinistra",
"ja": "左下",
"ko": "왼쪽 하단",
"nb": "Nederst til venstre",
"nl": "Linksonder",
"pl": "Na dole po lewej",
"pt-BR": "Inferior esquerdo",
"pt-PT": "Canto inferior esquerdo",
"sv": "Nere till vänster",
"th": "ซ้ายล่าง",
"tr": "Alt sol",
"vi": "Dưới cùng bên trái",
"zh-CN": "左下方",
"zh-TW": "左下角"
},
"value": "left bottom"
},
{
"label": {
"cs": "Dole ve středu",
"da": "Nederst i midten",
"de": "Unten zentriert",
"en": "Bottom center",
"es": "Centro abajo",
"fi": "Keskellä alhaalla",
"fr": "En bas au centre",
"it": "In basso al centro",
"ja": "中央下",
"ko": "맨아래 중간",
"nb": "Bunnsentrert",
"nl": "Midden onder",
"pl": "Na dole na środku",
"pt-BR": "Inferior centro",
"pt-PT": "Inferior centro",
"sv": "Längst ner i mitten",
"th": "กลางล่าง",
"tr": "Alt orta",
"vi": "Dưới cùng ở giữa",
"zh-CN": "底部居中",
"zh-TW": "中央下方"
},
"value": "center bottom"
},
{
"label": {
"cs": "Dole vpravo",
"da": "Nederst til højre",
"de": "Unten rechts",
"en": "Bottom right",
"es": "Abajo a la derecha",
"fi": "Alhaalla oikealla",
"fr": "En bas à droite",
"it": "In basso a destra",
"ja": "右下",
"ko": "오른쪽 아래",
"nb": "Nederst til høyre",
"nl": "Rechtsonder",
"pl": "Na dole po prawej",
"pt-BR": "Inferior direito",
"pt-PT": "Canto inferior direito",
"sv": "Nere till höger",
"th": "ขวาล่าง",
"tr": "Alt sağ",
"vi": "Dưới cùng bên phải",
"zh-CN": "右下方",
"zh-TW": "右下角"
},
"value": "right bottom"
}
]
},
{
"type": "checkbox",
"id": "image_overlay",
"label": {
"cs": "Zobrazit překryv",
"da": "Vis overlejring",
"de": "Überlagerung zeigen",
"en": "Show overlay",
"es": "Mostrar superposición",
"fi": "Näytä peittokuva",
"fr": "Afficher la superposition",
"it": "Mostra sovrapposizione",
"ja": "オーバーレイを表示する",
"ko": "오버레이 표시",
"nb": "Vis overlegg",
"nl": "Overlay weergeven",
"pl": "Pokaż nakładkę",
"pt-BR": "Exibir sobreposição",
"pt-PT": "Mostrar sobreposição",
"sv": "Visa överlagring",
"th": "แสดงการวางซ้อน",
"tr": "Yer paylaşımını göster",
"vi": "Hiển thị lớp phủ",
"zh-CN": "显示叠加",
"zh-TW": "顯示疊加層"
},
"default": true
},
{
"type": "range",
"id": "image_overlay_opacity",
"label": {
"cs": "Neprůhlednost překryvu",
"da": "Overlejringens uigennemsigtighed",
"de": "Überlagerungsdeckkraft",
"en": "Overlay opacity",
"es": "Opacidad superpuesta",
"fi": "Peittokuvan läpinäkyvyys",
"fr": "Opacité de la superposition",
"it": "Opacità della sovrapposizione",
"ja": "オーバーレイ不透明率",
"ko": "오버레이 불투명도",
"nb": "Overleggets gjennomsiktighet",
"nl": "Ondoorschijnendheid van overlay",
"pl": "Nieprzezroczystość nakładki",
"pt-BR": "Opacidade de sobreposição",
"pt-PT": "Opacidade de sobreposição",
"sv": "Överlagring av opacitet",
"th": "ความทึบของการวางซ้อน",
"tr": "Yer paylaşımı opaklığı",
"vi": "Độ chắn sáng của lớp phủ",
"zh-CN": "叠加不透明度",
"zh-TW": "疊加層不透明度"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"cs": "%",
"da": "%",
"de": "%",
"en": "%",
"es": "%",
"fi": "%",
"fr": "%",
"it": "%",
"ja": "%",
"ko": "%",
"nb": "%",
"nl": "%",
"pl": "%",
"pt-BR": "%",
"pt-PT": "%",
"sv": "%",
"th": "%",
"tr": "%",
"vi": "%",
"zh-CN": "%",
"zh-TW": "%"
},
"default": 25
},
{
"type": "header",
"content": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
}
},
{
"type": "select",
"id": "text_alignment",
"label": {
"cs": "Zarovnání textu",
"da": "Tekstjustering",
"de": "Textausrichtung",
"en": "Text alignment",
"es": "Alineación de texto",
"fi": "Tekstin tasaus",
"fr": "Alignement du texte",
"it": "Allineamento del testo",
"ja": "テキストアラインメント",
"ko": "텍스트 정렬",
"nb": "Tekstjustering",
"nl": "Tekstuitlijning",
"pl": "Wyrównanie tekstu",
"pt-BR": "Alinhamento de texto",
"pt-PT": "Alinhamento de texto",
"sv": "Textjustering",
"th": "การจัดตำแหน่งข้อความ",
"tr": "Metin hizalaması",
"vi": "Căn chỉnh văn bản",
"zh-CN": "文本对齐方式",
"zh-TW": "文字對齊"
},
"options": [
{
"value": "left",
"label": {
"cs": "Doleva",
"da": "Venstre",
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fi": "Vasen",
"fr": "Gauche",
"it": "Sinistra",
"ja": "左",
"ko": "왼쪽",
"nb": "Venstre",
"nl": "Links",
"pl": "Do lewej",
"pt-BR": "Esquerda",
"pt-PT": "Esquerda",
"sv": "Vänster",
"th": "ด้านซ้าย",
"tr": "Sol",
"vi": "Bên trái",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "center",
"label": {
"cs": "Na střed",
"da": "Centreret",
"de": "Mitte",
"en": "Center",
"es": "Centrar",
"fi": "Keskitetty",
"fr": "Centre",
"it": "Al centro",
"ja": "中央",
"ko": "센터",
"nb": "Sentrer",
"nl": "Midden",
"pl": "Do środka",
"pt-BR": "Centro",
"pt-PT": "Centro",
"sv": "Centrera",
"th": "ตรงกลาง",
"tr": "Orta",
"vi": "Ở giữa",
"zh-CN": "居中",
"zh-TW": "置中"
}
},
{
"value": "right",
"label": {
"cs": "Doprava",
"da": "Højre",
"de": "Rechts",
"en": "Right",
"es": "Derecha",
"fi": "Oikea",
"fr": "Droite",
"it": "Destra",
"ja": "右",
"ko": "오른쪽",
"nb": "Høyre",
"nl": "Rechts",
"pl": "Do prawej",
"pt-BR": "Direita",
"pt-PT": "Direita",
"sv": "Höger",
"th": "ด้านขวา",
"tr": "Sağ",
"vi": "Bên phải",
"zh-CN": "右侧",
"zh-TW": "右方"
}
}
],
"default": "center"
},
{
"type": "text",
"id": "slide_heading",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Überschrift",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Hlavní banner",
"da": "Forgrundsbanner",
"de": "Hero-Banner",
"en": "Hero Banner",
"es": "Banner destacado",
"fi": "Hero Banner",
"fr": "Bannière de premier plan",
"it": "Banner hero",
"ja": "ヒーローバナー",
"ko": "히어로 배너",
"nb": "Hero-banner",
"nl": "Hero banner",
"pl": "Baner główny",
"pt-BR": "Banner principal",
"pt-PT": "Faixa do Hero",
"sv": "Hero Banner",
"th": "แบนเนอร์หลัก",
"tr": "Ana Banner",
"vi": "mở đầu",
"zh-CN": "主横幅",
"zh-TW": "主頁橫幅"
}
},
{
"type": "text",
"id": "slide_subheading",
"label": {
"cs": "Podnadpis",
"da": "Underoverskrift",
"de": "Untertitel",
"en": "Subheading",
"es": "Subtítulo",
"fi": "Alaotsikko",
"fr": "Sous-titre",
"it": "Sottotitolo",
"ja": "小見出し",
"ko": "소제목",
"nb": "Underoverskrift",
"nl": "Subkop",
"pl": "Nagłówek podrzędny",
"pt-BR": "Subtítulo",
"pt-PT": "Subtítulo",
"sv": "Underrubrik",
"th": "หัวเรื่องย่อย",
"tr": "Alt başlık",
"vi": "Tiêu đề phụ",
"zh-CN": "副标题",
"zh-TW": "子標題"
},
"default": {
"cs": "Úvod",
"da": "Introduktion",
"de": "Für den Einstieg:",
"en": "An introductory",
"es": "Frase introductoria",
"fi": "Aloittaminen",
"fr": "Introduction",
"it": "Come introduzione",
"ja": "紹介",
"ko": "소개",
"nb": "En introduksjon",
"nl": "Een inleiding",
"pl": "Wprowadzenie",
"pt-BR": "Uma introdução",
"pt-PT": "Uma introdução",
"sv": "En introduktion",
"th": "การเกริ่นนำ",
"tr": "Giriş",
"vi": "Một Biểu ngữ chủ đạo",
"zh-CN": "介绍性的",
"zh-TW": "首次優惠"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"cs": "Text tlačítka",
"da": "Knaptekst",
"de": "Schaltflächenbezeichnung",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Tekstipainike",
"fr": "Texte du bouton",
"it": "Etichetta pulsante",
"ja": "ボタンのラベル",
"ko": "버튼 레이블",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pl": "Przycisk z etykietą",
"pt-BR": "Etiqueta de botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"tr": "Düğme etiketi",
"vi": "Nhãn nút",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
},
"default": {
"cs": "Koupit nyní",
"da": "Shop nu",
"de": "Jetzt shoppen",
"en": "Shop now",
"es": "Compra ya",
"fi": "Tee nyt ostoksia",
"fr": "Acheter maintenant",
"it": "Acquista ora",
"ja": "今すぐ購入",
"ko": "지금 쇼핑하기",
"nb": "Handle nå",
"nl": "Koop nu",
"pl": "Kup teraz",
"pt-BR": "Compre agora",
"pt-PT": "Comprar agora",
"sv": "Handla nu",
"th": "ช้อปเลย",
"tr": "Şimdi satın al",
"vi": "Mua sắm ngay",
"zh-CN": "立即购买",
"zh-TW": "立即購物"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"cs": "Tlačítkový odkaz",
"da": "Knaplink",
"de": "Schaltflächenlink",
"en": "Button link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pl": "Link przycisku",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"tr": "Düğme bağlantısı",
"vi": "Liên kết trên nút",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
},
{
"type": "color",
"id": "slide_text_color",
"label": {
"cs": "Text a ikony",
"da": "Tekst og ikoner",
"de": "Text und Symbole",
"en": "Text and icons",
"es": "Texto e iconos",
"fi": "Teksti ja kuvakkeet",
"fr": "Texte et icônes",
"it": "Testo e icone",
"ja": "テキストとアイコン",
"ko": "텍스트 및 아이콘",
"nb": "Tekst og ikoner",
"nl": "Tekst en pictogrammen",
"pl": "Tekst i ikony",
"pt-BR": "Texto e ícones",
"pt-PT": "Texto e ícones",
"sv": "Text och ikoner",
"th": "ข้อความและไอคอน",
"tr": "Metin ve simgeler",
"vi": "Văn bản và biểu tượng",
"zh-CN": "文本和图标",
"zh-TW": "文字和圖示"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "slide_button_label_color",
"label": {
"cs": "Text tlačítka",
"da": "Knaptekst",
"de": "Schaltflächenbezeichnung",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Tekstipainike",
"fr": "Texte du bouton",
"it": "Etichetta pulsante",
"ja": "ボタンのラベル",
"ko": "버튼 레이블",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pl": "Przycisk z etykietą",
"pt-BR": "Etiqueta de botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"tr": "Düğme etiketi",
"vi": "Nhãn nút",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "slide_button_background_color",
"label": {
"cs": "Tlačítko",
"da": "Knap",
"de": "Schaltfläche",
"en": "Button",
"es": "Botón",
"fi": "Painike",
"fr": "Bouton",
"it": "Pulsante",
"ja": "ボタン",
"ko": "버튼",
"nb": "Knapp",
"nl": "Knop",
"pl": "Przycisk",
"pt-BR": "Botão",
"pt-PT": "Botão",
"sv": "Knapp",
"th": "ปุ่ม",
"tr": "Düğme",
"vi": "Nút",
"zh-CN": "按钮",
"zh-TW": "按鈕"
},
"default": "#1f2021"
}
]
}
]
}
{% endschema %}

vendors
Excursionist
11 0 5

Hi,

Presently for home page banner I have buttons for sliding, Now I want to remove the dots and add arrows on both sides(left and right) of banner. I have attached screen shot and url of my page below.

vendors_0-1631874075085.png

URL : https://www.chitrika.in/

Regards,

Harsha.