Compatibilidade: Todo o tema Shopify. Os estilos podem variar
No mundo em constante evolução do web design, é crucial manter seu site envolvente e visualmente atraente. Uma forma de conseguir isso é incorporar elementos dinâmicos que chamem a atenção do visitante. Nesta postagem do blog, exploraremos como criar uma seção de anúncio Marquee Infinite para o seu site – um recurso versátil que fornece uma exibição de conteúdo com rolagem, adicionando movimento e interesse sem a necessidade de scripts complexos ou vários arquivos HTML.
Você pode verificar a loja de demonstração aqui . Senha: made4uo
O que você está comprando:
- Uma seção que pode ser colocada em qualquer lugar do seu site. O tema deve ser Shopify 2.0.
- Personalize a cor de fundo, a cor do texto, o link e a duração da animação
- Selecione entre uma imagem ou texto para colocar em um bloco
- Adicione uma fonte diferente apenas para esta seção
- Opção para alterar a cor de fundo e a cor do texto ao passar o mouse
- Alterar a altura da seção
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. Acesse Loja Admin Shopify > Temas > Ações > Editar código.
2. Abra a pasta Seção e crie uma nova seção, nomeie-a como "marquee-component".
3. Substitua o código padrão pelo código abaixo. Certifique-se de SALVAR.
<estilo> _ { { seção. configurações . fonte | font_face : font_display : 'trocar' } } div #shopify-section-marquee-component { altura : conteúdo máximo ; exibição : flexível ; } . letreiro - contêiner { altura : var ( -marquise - altura ) ; exibição : bloco ; plano de fundo : var ( -marquee - background ) ; } . letreiro - contêiner a { cor : var ( -marquee - color ) ; } { % se seção. configurações . enable_hover % } . letreiro - contêiner : hover { plano de fundo : var ( -marquee - hover - bg ) ; } . marquee - container : passe o mouse sobre { cor : var ( -marquee - hover - color ) ; } { % fim se % } . letreiro - caixa { altura : var ( -marquise - altura ) ; largura : 100vw ; estouro : oculto ; posição : relativa ; exibição : flexível ; alinhar - itens : centro ; } . marquise - caixa . letreiro - invólucro { exibição : flexível ; largura : calc ( 100 % * 6 ) ; altura : 100 %; posição : absoluta ; estouro : oculto ; exibição : grade ; grid - template - colunas : repita ( 6 , 1fr ) ; } . marquise - caixa . letreiro -- item { fonte - família : { { seção. configurações . Fonte . família | acrescentar : "," | anexar : seção. configurações . Fonte . fallback_families } } ; estilo da fonte : { { seção. configurações . Fonte . estilo } } ; fonte - peso : { { seção. configurações . Fonte . peso } } ; transição : tudo facilita 0,5s ; animação : marquee calc ( var ( -marquee - animation - duration ) * 1s ) linear infinito ; } . marquise - caixa . letreiro - wrapper a { largura mínima : conteúdo máximo ; largura : 100 %; altura : 100 %; tamanho da fonte : { { seção. configurações . tamanho_da_fonte | acrescentar : 'px' } } ; altura da linha : 1,5 ; exibição : flexível ; justificar - conteúdo : centro ; alinhar - itens : centro ; quebra de texto : nowrap ; decoração de texto : nenhuma ; } . letreiro - caixa div { flutuar : esquerda ; largura : 100 %; altura : var ( -marquise - altura ) ; exibição : flexível ; lacuna : var ( -marquee - gap ) ; } . letreiro - wrapper img { largura : 100 %; altura : automático ; ajuste ao objeto : capa ; } @keyframes letreiro { 0 % { transform : translate ( 0 ) ; } 100 % { transformação : tradução ( -100 % ) ; } } . letreiro -- celular { Mostrar nenhum ; } . letreiro -- tablet { Mostrar nenhum ; } Tela @media somente e ( largura máxima : 1400px ) { . marquise - caixa . letreiro - invólucro { largura : calc ( 100 % * 4 ) ; grid - template - colunas : repita ( 4 , 1fr ) ; } } Tela @media somente e ( largura máxima : 750px ) { . marquise - caixa . letreiro - invólucro { largura : calc ( 100 % * 2 ) ; grid - template - colunas : repita ( 2 , 1fr ) ; } } </ estilo > < div class = "marquise-container" estilo = " --marquee-height: {{ section.settings.height | append: 'px' }} ; --marquee-gap: {{ section.settings.gap | append: 'rem' }} ; --marquee-background: {{ section.settings.background }} ; --marquee-color: {{ section.settings.font_color }} ; --marquee-animation-duration: {{ section.settings.duration }} ; --marquee-hover-bg: {{ section.settings.background_hover }} ; --marquee-hover-color: {{ section.settings.font_color_hover }} ; " > < div class = "marquee-box" > < div class = "invólucro de letreiro" > < div class = "marquee--item" > { % para bloco na seção. blocos % } <a href = "{{block.settings.link }}" > _ {{ block.settings.link }} _ { % se bloco. configurações . imagem % } { { bloquear. configurações . imagem | URL_da_imagem : largura : 3840 | imagem_tag : largura : seção. configurações . imagem . largura , altura : seção. configurações . imagem . altura , classe : 'imagem de letreiro' } } { % outro % } { { bloquear. configurações . texto | escapar } } { % fim se % } </a> _ { % fim para % } </div> _ _ < div class = "marquee--item" > { % para bloco na seção. blocos % } <a href = "{{block.settings.link }}" > _ {{ block.settings.link }} _ { % se bloco. configurações . imagem % } { { bloquear. configurações . imagem | URL_da_imagem : largura : 3840 | imagem_tag : largura : seção. configurações . imagem . largura , altura : seção. configurações . imagem . altura , classe : 'imagem de letreiro' } } { % outro % } { { bloquear. configurações . texto | escapar } } { % fim se % } </a> _ { % fim para % } </div> _ _ </div> _ _ </div> _ _ </div> _ _ { % esquema % } { "name" : "Componente letreiro" , "configurações" : [ { "tipo" : "parágrafo" , "content" : "O número de blocos afeta o espaço entre os itens" } , { "tipo" : "cabeçalho" , "content" : "Configurações de cores" } , { "tipo" : "cor" , "id" : "plano de fundo" , "label" : "Cor de fundo" , "padrão" : "#EC008c" } , { "tipo" : "cor" , "id" : "cor_da_fonte" , "label" : "Cor do texto" , "default" : "#ffffff" } , { "tipo" : "caixa de seleção" , "id" : "enable_hover" , "label" : "Ativar foco" , "info" : "Por favor, forneça as cores abaixo se estiver ativado" } , { "tipo" : "cor" , "id" : "background_hover" , "label" : "Cor de fundo ao passar o mouse" , "default" : "#ffffff" } , { "tipo" : "cor" , "id" : "font_color_hover" , "label" : "Cor de foco do texto" , "padrão" : "#EC008c" } , { "tipo" : "font_picker" , "id" : "fonte" , "label" : "Fonte de letreiro" , "padrão" : "helvetica_n4" } , { "tipo" : "intervalo" , "id" : "tamanho_da_fonte" , "min" : 12 , "máximo" : 100 , " passo 1 , "unidade" : "px" , "rótulo" : "Tamanho da fonte" , "padrão" : 15 , "info" : "Isso também se aplica a dispositivos móveis" } , { "tipo" : "intervalo" , "id" : "duração" , "min" : 6 , "máximo" : 100 , " passo 1 , " unidades " , "label" : "Duração da animação em segundos" , "padrão" : 38 } , { "tipo" : "intervalo" , "id" : "altura" , "min" : 5 , "máximo" : 100 , " passo 1 , "unidade" : "px" , "label" : "Altura da seção" , "padrão" : 40 } , { "tipo" : "intervalo" , "id" : "gap" , "min" : 0 , "máximo" : 100 , " passo 1 , "unidade" : "rem" , "label" : "Lacuna real" , "padrão" : 2 , "info" : "Só funciona se você tiver vários blocos" } ] , "blocos" : [ { "nome" : "Marquee" , "type" : "marca" , "configurações" : [ { "tipo" : "texto" , "rótulo" : "Texto" , "id" : "texto" , "default" : "Black Friday | Compre e economize até 60% em toda a loja" } , { "type" : "image_picker" , "id" : "imagem" , "rótulo" : "Imagem" , "info" : "Deixe em branco para que o texto apareça" } , { "tipo" : "parágrafo" , "content" : "As imagens podem mudar de tamanho e preencher a lacuna" } , { "tipo" : "url" , "id" : "link" , "rótulo" : "Link" } ] } ] , "predefinições" : [ { "name" : "Componente letreiro" , "blocos" : [ { "type" : "marca" } , { "type" : "marca" } , { "type" : "marca" } ] } ] } { % termina o esquema % } |
4. Adicione o referido componente ao seu site Shopify, usando o editor de temas. Encontre o "componente Marquee".
É isso (",)
0 comentários