Multicoluna personalizada com opção de vídeo

15 de fevereiro de 2023

Customized Multicolumn with Video Option

Compatibilidade: apenas todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11

Personalizamos a multicoluna que teria um pop-up para exibir mais imagens relacionadas. Você precisará criar uma página e enviar suas imagens.

Você pode verificar a loja de demonstração aqui . Senha: made4uo

Multicoluna personalizada com opção de vídeo

O que você está comprando :

Multicoluna modificada que possui um pop-up
O pop-up virá de um link de página
Capaz de adicionar um vídeo em vez de imagem
Reprodução automática e ocultação de controles disponíveis para vídeo
Opções para ter diferentes proporções de imagens em cada bloco

O que torna nosso código melhor:

Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
Não deixamos nem adicionamos códigos para anunciar em nosso site
Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Crie uma página. Na sua página de administração, vá para Loja online > Páginas > Adicionar uma página

2. O título da página será usado como link da página, mas não aparecerá nas múltiplas colunas personalizadas. Adicione as imagens na área de conteúdo clicando no ícone “inserir imagem” e certifique-se de clicar em SALVAR.

3. Precisamos editar o código do tema. Na sua página Admin, vá para Loja online > Temas > Ações > Editar código

4. Na pasta da seção, crie uma seção, você pode nomeá-la como quiser.

5. Substituído o código padrão pelo código abaixo. Depois clique em SALVAR

 { { 'seção-multicolumn.css' | URL_do_asset | folha_de_estilo } }
 { { 'componente-slider.css' | URL_do_asset | folha_de_estilo } }
 { %- estilo -% } 
visualização - modal {
 posição : fixa ;
 topo : 0 ;
 esquerda : 0 ;
 largura : 100 %;
 altura : 100 %;
 índice z : 10 ;
 Mostrar nenhum ;
 } 
. visualização -- ativa {
 exibição : bloquear ! importante ;
 }
 . visualização --contêiner {
 posição : relativa ;
 plano de fundo : rgba ( 0 , 0 , 0 , 0,7 ) ; 
largura : 100vw ;
 altura : 100vh ;
 exibição : flexível ;
 }
 . visualizar -- botão {
 posição : absoluta ;
 direita : braçadeira ( 20px , 5vw , 100px ) ;
 superior : 50px ;
 largura : 70 %; 
exibição : flexível ;
 margem : automática ;
 justificar - conteúdo : flex - end ;
 cursor : ponteiro ;
 }
 . visualização -- botão span {
 cursor : ponteiro ;
 plano de fundo : #fff;
 cor : #000;
 largura : 25px ; 
proporção de aspecto : 1 ;
 altura : automático ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 preenchimento : 5px ;
 transição : escala 0,5s de facilidade ;
 } 
. visualização -- botão span : hover {
 escala : 1,2 ;
 }
 . visualização -- wrapper {
 largura : 71 %;
 altura : 80 %;
 exibição : bloco ;
 margem : automática ;
 estouro : automático ; 
alinhar - self : centro ;
 fundo : branco ;
 preenchimento : 2rem ;
 }
 Tela @media somente e ( largura mínima : 1200px ) {
 . visualização -- wrapper ::- webkit - barra de rolagem {
 largura : 5px ;
 } 
. visualização -- wrapper ::- webkit - barra de rolagem - faixa {
 fundo : transparente ;
 }
 . visualização -- wrapper ::- webkit - barra de rolagem - polegar {
 fundo : #888;
 }
 } 
Tela @media somente e ( largura máxima : 481px ) {
 . visualização -- wrapper {
 largura : 95 %;
 }
 }
 . seção - { { seção. id } } - preenchimento { 
preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; 
preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ;
 }
 @media screen e ( largura mínima : 750px ) { 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . padding_top } } px ; 
preenchimento - inferior : { { seção. configurações . padding_bottom } } px ;
 }
 }
 { %- estilo final -% }
 { %- líquido
 atribuir colunas_mobile_int = seção. configurações . colunas_mobile | mais : 0 
atribuir show_mobile_slider = falso
 se seção. configurações . swipe_on_mobile e seção. blocos . tamanho > colunas_mobile_int
 atribuir show_mobile_slider = verdadeiro
 fim se
 -% } 
< div class = "multicolumn color- {% if section.settings.color_scheme %} {{ section.settings.color_scheme }} {% else %} {{ section.settings.color_scheme_old }} {% endif %} gradiente {% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background- {{ section.settings.background_style }} {% endunless %} {% if section.settings.title == blank %} sem título {% endif %} " > 
< div
 class = "seção de largura de página- {{ section.id }} -padding isolar {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in {% endif %} "
 { % se configurações. animações_reveal_on_scroll % }
 dados - cascata
 { % fim se % }
 > 
{ %- a menos que seção. configurações . título == em branco -% }
 < div class = "title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin" >
 < h2 class = "title inline-richtext {{ section.settings.heading_size }} " > 
{ { seção. configurações . título } }
 </ h2 >
 { % -se seção. configurações . button_label != em branco e show_mobile_slider -% } 
<a href = "{{section.settings.button_link }}" class = "link sublinhado-link grande-ocultar" > _ {{ section.settings.button_link }} _ _ _ _
 { { - seção. configurações . rótulo_botão | escapar - } }
 </a> _ 
{ %- fim se -% }
 </div> _ _
 { %- sem fim -% }
 < slider - classe de componente = "slider-mobile-gutter" >
 < ul 
class = "lista de múltiplas colunas contém grade de grade de contêiner de conteúdo-- {{ section.settings.columns_mobile }} -col-tablet-down grid-- {{ section.settings.columns_desktop }} -col-desktop {% if show_mobile_slider %} controle deslizante controle deslizante - grade móvel - espiar {% endif %} "
 id = "Slider- {{ section.id }} "
 função = "lista"
 >
 { %- líquido
 atribuir proporção_mais alta = 0 
para bloco na seção. blocos
 se bloquear. configurações . imagem . proporção_de_aspecto > proporção_mais alta
 atribuir proporção_mais alta = bloco. configurações . imagem . proporção da tela
 fim se
 fim para
 -% }
 { %- para bloco na seção. blocos -% } 
{ %- atribuir coluna_vazia = '' -% }
 { % -se bloco. configurações . imagem == em branco
 e bloquear. configurações . título == em branco
 e bloquear. configurações . texto == em branco
 e bloquear. configurações . link_label == em branco 
-% }
 { %- atribuir coluna_vazia = 'lista-de-colunas__item--vazia' -% }
 { %- fim se -% }

 < li
 id = "Slide- {{ section.id }} - {{ forloop.index }} " 
class = "multicolumn-list__item grid__item {% if section.settings.swipe_on_mobile %} slider__slide {% endif %} {% if section.settings.column_alignment == 'center' %} center {% endif %} {{ empty_column }} {% if settings.animations_reveal_on_scroll %} animação de gatilho de rolagem--slide-in {% endif %} "
 { { bloquear. shopify_atributos } } 
{ % se configurações. animações_reveal_on_scroll % }
 dados - cascata
 style = "--animation-order: {{ forloop.index }} ;"
 { % fim se % }
 > 
< div class = "content-container de cartão multicoluna" >
 { % -se bloco. configurações . imagem ! = em branco ou bloco. configurações . video_link != em branco -% } 
{ % se bloco. configurações . image_ratio == 'adaptar' ou bloquear. configurações . proporção_da_imagem == 'círculo' % }
 { % atribuir imagem_espaçada = true % } 
{ % fim se % }
 < div class = "multicolumn-card__image-wrapper multicolumn-card__image-wrapper-- {{ section.settings.image_width }} -width {% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing {% endif %} " >
 < div 
class = "media media--mídia transparente-- {{ block.settings.image_ratio }} "
 { % se bloco. configurações . image_ratio == 'adaptar' % }
 style = "padding-bottom: {% if highest_ratio %} {{ 1 | divided_by: highest_ratio | times: 100 }} {% else %} 133 {% endif %} %;" 
{ % fim se % }
 >
 { % se bloco. configurações . video_link != em branco % }
 < vídeo
 largura = "320"
 altura = "240" 
{ % a menos que bloco. configurações . ocultar_controles % }
 controles
 { % sem fim % }
 { % se bloco. configurações . vídeo_autoplay % }
 reprodução automática silenciada 
{ % fim se % }
 { % a menos que bloco. configurações . image_ratio == 'adaptar' % }
 style = "ajuste ao objeto: capa"
 { % sem fim % }
 > 
< fonte src = " {{ block.settings.video_link }} " type = "video/mp4" >
 < fonte src = " {{ block.settings.video_link }} " type = "video/ogg" >
 Seu navegador não suporta a tag de vídeo.
 </ vídeo > 
{ % outro % }
 { %- líquido
 atribuir número_de_colunas = seção. configurações . colunas_desktop
 atribuir number_of_columns_mobile = seção. configurações . colunas_mobile 
atribuir grid_space_desktop = number_of_columns | menos : 1 | vezes : configurações. espaçamento_grid_horizontal | mais : 100 | acrescentar : 'px' 
atribuir grid_space_tablet = number_of_columns_mobile | menos : 1 | vezes : configurações. espaçamento_grid_horizontal | mais : 100 | acrescentar : 'px' 
atribuir grid_space_mobile = number_of_columns_mobile | menos : 1 | vezes : configurações. espaçamento_grid_horizontal | dividido_por : 2 | mais : 30 | acrescentar : 'px' 
se seção. configurações . largura_da_imagem == 'metade'
 atribuir largura_da_imagem = 0,5
 seção Elif. configurações . image_width == 'terceiro'
 atribuir largura_da_imagem = 0,33
 outro
 atribuir largura_imagem = 1
 fim se 
-% }
 { % tamanhos de captura % } 
( largura mínima : { { configurações.largura_da_página } } px ) calc ( ( { { configurações.largura_da_página } } px - { { grid_space_desktop } } ) * { { largura_da_imagem } } / { { número_de_colunas } } ) , 
( largura mínima : 990px ) calc ( ( 100vw - { { grid_space_desktop } } ) * { { image_width } } / { { number_of_columns } } ) , 
( largura mínima : 750px ) calc ( ( 100vw - { { grid_space_tablet } } ) * { { image_width } } / { { number_of_columns_mobile } } ) , 
calc ( ( 100vw - { { grid_space_mobile } } ) * { { image_width } } / { { number_of_columns_mobile } } )
 { % captura final % } 
{ {
 bloquear. configurações . imagem
 | URL_da_imagem : largura : 3200
 | imagem_tag :
 carregando : 'preguiçoso' ,
 larguras : '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' , 
tamanhos : tamanhos ,
 classe : 'cartão multicolunas__imagem'
 } }
 { % fim se % }
 </div> _ _
 </div> _ _
 { %- fim se -% } 
< div class = "multicolumn-card__info" >
 { % -se bloco. configurações . título ! = em branco -% } 
< h3 class = "inline-richtext" > { { bloco. configurações . título } } </ h3 >
 { %- fim se -% } 
{ % -se bloco. configurações . texto ! = em branco -% }
 < div class = "rte" > { { bloco. configurações . texto } } </ div > 
{ %- fim se -% }
 { % -se bloco. configurações . link_label != em branco -% }
 { % se bloco. configurações . página ! = em branco % } 
< página - visualização >
 < botão class = "link animate-arrow" dados - página - id = " {{ block.id }} " >
 { { bloquear. configurações . link_label | escapar - } } 
< span class = "icon-wrap" >& nbsp ; { % renderizar 'ícone-seta' % } </ span >
 </ botão >
 </ página - visualização > 
{ % outro % }
 < um
 class = "link animado-seta"
 { % se bloco. configurações . link == em branco % } 
role = "link" aria - desativado = "true"
 { % outro % }
 href = " {{ block.settings.link }} "
 { % fim se % }
 > 
{ { - bloquear. configurações . link_label | escapar - } }
 < span class = "icon-wrap" >& nbsp ; { % render 'icon-arrow' % } </ span ></ a 
>
 { %- fim se -% }
 { %- fim se -% }
 </div> _ _
 </div> _ _
 </ li >
 { %- fim para -% } 
</ul> _
 { %- se show_mobile_slider -% }
 < div class = "botões deslizantes no-js-hidden middle-hide" >
 < botão
 tipo = "botão"
 class = "botão deslizante botão deslizante--anterior" 
nome = "anterior"
 aria - label = " {{ 'general.slider.previous_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão >
 < div class = "legenda do contador deslizante" > 
< span class = "slider-counter--current" > 1 </ span >
 < span aria - oculto = "true" > / </ span > 
< span class = "visualmente oculto" > { { 'general.slider.of' | t } } </ span > 
< span class = "slider-counter--total" > { { seção. blocos . tamanho } } </ span >
 </div> _ _
 < botão
 tipo = "botão" 
class = "botão deslizante botão deslizante--próximo"
 nome = "próximo"
 aria - label = " {{ 'general.slider.next_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão >
 </div> _ _ 
{ %- fim se -% }
 </ controle deslizante - componente >
 < div class = "center {% if show_mobile_slider %} pequeno-ocultar médio-ocultar {% endif %} " > 
{ % -se seção. configurações . rótulo_de_botão != em branco -% }
 < um
 class = "botão botão--primário"
 { % se seção. configurações . button_link == em branco % } 
role = "link" aria - desativado = "true"
 { % outro % }
 href = " {{ section.settings.button_link }} "
 { % fim se % }
 > 
{ { seção. configurações . rótulo_botão | escapar } }
 </a> _
 { %- fim se -% }
 </div> _ _
 </div> _ _ 
{ % para bloco na seção. blocos % }
 < visualização - classe modal = "ocultar-visualização" dados - bloco = " {{ block.id }} " >
 < div class = "preview--container" > 
< div class = "visualização--botão" >
 < intervalo >
 < svg
 xmlns = "http://www.w3.org/2000/svg"
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação" 
class = "ícone ícone-fechar"
 preencher = "nenhum"
 viewBox = "0 0 18 17"
 >
 < caminho d = "M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.4 16a. 5,5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill = "currentColor" >
 </svg> _ 
</span> _
 </div> _ _
 < div class = "preview--wrapper" >
 { { bloquear. configurações . página . contente } }
 </div> _ _ 
</div> _ _
 </ visualização - modal >
 { % fim para % }
 </div> _ _

 { % esquema % }
 {
 "name" : "Personalizar Multicolunas" , 
"classe" : "seção" ,
 "tag" : "seção" ,
 "desativado_on" : {
 "grupos" : [ "cabeçalho" , "rodapé" ]
 } ,
 "configurações" : [
 { 
"tipo" : "inline_richtext" ,
 "id" : "título" ,
 "default" : "Multicolunas" ,
 "label" : "t:sections.multicolumn.settings.title.label"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "heading_size" ,
 "opções" : [
 {
 "valor" : "h2" ,
 "label" : "t:sections.all.heading_size.options__1.label"
 } ,
 {
 "valor" : "h1" , 
"label" : "t:sections.all.heading_size.options__2.label"
 } ,
 {
 "valor" : "h0" ,
 "label" : "t:sections.all.heading_size.options__3.label"
 }
 ] ,
 "padrão" : "h1" , 
"label" : "t:sections.all.heading_size.label"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "largura_da_imagem" ,
 "opções" : [
 {
 "valor" : "terceiro" , 
"label" : "t:sections.multicolumn.settings.image_width.options__1.label"
 } ,
 {
 "valor" : "metade" ,
 "label" : "t:sections.multicolumn.settings.image_width.options__2.label"
 } ,
 {
 "valor" : "completo" , 
"label" : "t:sections.multicolumn.settings.image_width.options__3.label"
 }
 ] ,
 "padrão" : "completo" ,
 "label" : "t:sections.multicolumn.settings.image_width.label"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "image_ratio" ,
 "opções" : [
 {
 "valor" : "adaptar" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.options__1.label"
 } ,
 {
 "valor" : "retrato" , 
"label" : "t:sections.multicolumn.settings.image_ratio.options__2.label"
 } ,
 {
 "valor" : "quadrado" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.options__3.label"
 } ,
 {
 "valor" : "círculo" , 
"label" : "t:sections.multicolumn.settings.image_ratio.options__4.label"
 }
 ] ,
 "padrão" : "adaptar" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.label"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "colunas_desktop" ,
 "min" : 1 ,
 "máximo" : 6 ,
 " passo 1 ,
 "padrão" : 3 ,
 "label" : "t:sections.multicolumn.settings.columns_desktop.label" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "coluna_alignment" ,
 "opções" : [
 {
 "valor" : "esquerda" ,
 "label" : "t:sections.multicolumn.settings.column_alignment.options__1.label" 
} ,
 {
 "valor" : "centro" ,
 "label" : "t:sections.multicolumn.settings.column_alignment.options__2.label"
 }
 ] ,
 "padrão" : "esquerda" ,
 "label" : "t:sections.multicolumn.settings.column_alignment.label" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "estilo_de_fundo" ,
 "opções" : [
 {
 "valor" : "nenhum" ,
 "label" : "t:sections.multicolumn.settings.background_style.options__1.label" 
} ,
 {
 "valor" : "primário" ,
 "label" : "t:sections.multicolumn.settings.background_style.options__2.label"
 }
 ] ,
 "padrão" : "primário" ,
 "label" : "t:sections.multicolumn.settings.background_style.label" 
} ,
 {
 "tipo" : "texto" ,
 "id" : "button_label" ,
 "default" : "Etiqueta do botão" ,
 "label" : "t:sections.multicolumn.settings.button_label.label"
 } ,
 { 
"tipo" : "url" ,
 "id" : "botão_link" ,
 "label" : "t:sections.multicolumn.settings.button_link.label"
 } ,
 {
 "tipo" : "esquema_cor" ,
 "id" : "esquema_cor" , 
"label" : "t:sections.all.colors.label" ,
 "padrão" : "plano de fundo-1"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "color_scheme_old" ,
 "opções" : [
 { 
"valor" : "acento-1" ,
 "label" : "Acento 1"
 } ,
 {
 "valor" : "acento-2" ,
 "label" : "Acento 2"
 } ,
 { 
"valor" : "plano de fundo-1" ,
 "rótulo" : "Plano de fundo 1"
 } ,
 {
 "valor" : "plano de fundo-2" ,
 "rótulo" : "Fundo 2"
 } ,
 { 
"valor" : "inverso" ,
 "label" : "Inverso"
 }
 ] ,
 "padrão" : "plano de fundo-1" ,
 "label" : "Esquema de cores (SOMENTE para versões mais antigas)"
 } ,
 { 
"tipo" : "cabeçalho" ,
 "content" : "t:sections.multicolumn.settings.header_mobile.content"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "colunas_mobile" ,
 "opções" : [
 { 
"valor" : "1" ,
 "label" : "t:sections.multicolumn.settings.columns_mobile.options__1.label"
 } ,
 {
 "valor" : "2" ,
 "label" : "t:sections.multicolumn.settings.columns_mobile.options__2.label"
 }
 ] , 
"padrão" : "1" ,
 "label" : "t:sections.multicolumn.settings.columns_mobile.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "swipe_on_mobile" ,
 "padrão" : falso , 
"label" : "t:sections.multicolumn.settings.swipe_on_mobile.label"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "t:sections.all.padding.section_padding_heading"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" , 
"label" : "t:sections.all.padding.padding_top" ,
 "padrão" : 36
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 , 
"máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" ,
 "label" : "t:sections.all.padding.padding_bottom" ,
 "padrão" : 36
 }
 ] , 
"blocos" : [
 {
 "tipo" : "coluna" ,
 "nome" : "t:seções.multicolumn.blocks.column.name" ,
 "configurações" : [
 {
 "type" : "image_picker" , 
"id" : "imagem" ,
 "label" : "t:sections.multicolumn.blocks.column.settings.image.label"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "image_ratio" ,
 "opções" : [ 
{
 "valor" : "adaptar" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.options__1.label"
 } ,
 {
 "valor" : "retrato" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.options__2.label" 
} ,
 {
 "valor" : "quadrado" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.options__3.label"
 } ,
 {
 "valor" : "círculo" , 
"label" : "t:sections.multicolumn.settings.image_ratio.options__4.label"
 }
 ] ,
 "padrão" : "adaptar" ,
 "label" : "t:sections.multicolumn.settings.image_ratio.label"
 } ,
 {
 "tipo" : "cabeçalho" , 
"content" : "Configurações de vídeo"
 } ,
 {
 "tipo" : "url" ,
 "id" : "video_link" ,
 "label" : "Link do vídeo" ,
 "info" : "Deixe em branco para usar a imagem" 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "video_autoplay" ,
 "label" : "Reprodução automática de vídeo" ,
 "info" : "Se marcado, o vídeo será silenciado."
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "hide_controls" ,
 "label" : "Ocultar controles"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações da coluna" 
} ,
 {
 "tipo" : "inline_richtext" ,
 "id" : "título" ,
 "default" : "Coluna" ,
 "label" : "t:sections.multicolumn.blocks.column.settings.title.label"
 } ,
 { 
"type" : "richtext" ,
 "id" : "texto" ,
 "default" : "<p>Combine o texto com uma imagem para focar no produto, coleção ou postagem do blog escolhido. Adicione detalhes sobre disponibilidade, estilo ou até mesmo forneça uma avaliação.</p>" ,
 "label" : "t:seções.multicolumn.blocks.column.settings.text.label"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "link_label" ,
 "label" : "t:sections.multicolumn.blocks.column.settings.link_label.label"
 } ,
 {
 "tipo" : "url" ,
 "id" : "link" , 
"label" : "t:sections.multicolumn.blocks.column.settings.link.label"
 } ,
 {
 "id" : "página" ,
 "tipo" : "página" ,
 "rótulo" : "Página" ,
 "info" : "Deixe em branco para usar o link" 
}
 ]
 }
 ] ,
 "predefinições" : [
 {
 "nome" : "t:seções.multicolumn.presets.name" ,
 "blocos" : [
 {
 "tipo" : "coluna"
 } ,
 { 
"tipo" : "coluna"
 } ,
 {
 "tipo" : "coluna"
 }
 ]
 }
 ]
 }
 { % termina o esquema % }

6. Em seguida, vá para a pasta Asset e abra global.js. Em seguida, cole o código abaixo no final do arquivo. Certifique-se de SALVAR.

 classe PagePreview estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . botão = isto . querySelector ( "botão" ) ; 
esse . botão . addEventListener ( " clique " , isto.cliqueListener.bind ( este ) ) ; 
esse . previewBox = documento. querySelectorAll ( "preview-modal" ) ;
 }

 closeListener ( ) { 
esse . pré-visualizaçãoBox . forEach ( visualização => visualização.classList.remove ( " visualização --ativo" ) ) ;
 documento. corpo . estilo . overflow = "desativar" ;
 }

 clickListener ( e ) { 
const páginaDados = e. atualTarget . conjunto de dados . id da página ;
 documento. querySelector ( `preview - modal [ data - block = "${pageData}" ] ` ) . lista de classes . add ( 'visualização--ativa' ) ;
 
esse . fecharBtn = documento. querySelector ( ".preview--active span" ) ; 
esse . fecharBtn . addEventListener ( " clique " , isto.closeListener.bind ( isto ) ) ;
 }
 }
 elementos personalizados. define ( "pré-visualização da página" , PagePreview ) ;