Seção personalizada de imagem e texto

15 de março de 2022

Compatibilidade: Todos os temas do Shopify (o design pode variar).

Personalize seu site com uma seção personalizada de imagem e texto.

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

O que você está comprando:

Seção personalizada de imagem e texto

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. Temos que adicionar uma seção, então vamos ao nosso editor de código. Na loja de administração do Shopify, abra os temas, clique em "Ações" e depois em "Editar código".

2. Abra a pasta Seções e adicione um novo arquivo. Dê o nome que quiser. Em seguida, cole o código abaixo.

 < div
 class = "customImageText {{section.settings.section_layout}} "
 estilo = "
 cor de fundo: {{section.settings.background_color}} ;
 preenchimento superior: {{section.settings.padding_top | append: 'px' }} ;
 preenchimento inferior: {{section.settings.padding_bottom | append: 'px' }}
 "
 > 
< div class = "customImage" >
 { % -se seção. configurações . imagem ! = em branco -% }
 < imagem
 srcset = "
 {%- if section.settings.image.width >= 165 -%} {{ section.settings.image | img_url: '165x' }} 165w, {%- endif -%} 
{%- if section.settings.image.width >= 360 -%} {{ section.settings.image | img_url: '360x' }} 360w, {%- endif -%}
 {%- if section.settings.image.width >= 535 -%} {{ section.settings.image | img_url: '535x' }} 535w, {%- endif -%}
 {%- if section.settings.image.width >= 750 -%} {{ section.settings.image | img_url: '750x' }} 750w, {%- endif -%}
 {%- if section.settings.image.width >= 1070 -%} {{ section.settings.image | img_url: '1070x' }} 1070w, {%- endif -%} 
{%- if section.settings.image.width >= 1500 -%} {{ section.settings.image | img_url: '1500x' }} 1500w, {%- endif -%}
 {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }} w
 "
 src = " {{ section.settings.image | img_url: '1500x' }} "
 tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 100 | divided_by: 2 }} px, (largura mínima: 750px) calc((100vw - 130px) / 2 ), calc((100vw - 50px) / 2)" 
alt = " {{ section.settings.image.alt | escape }} "
 carregando = "preguiçoso"
 largura = " {{ section.settings.image.width }} "
 altura = " {{ section.settings.image.height }} "
 >
 { %- outro -% } 
{ { 'imagem' | placeholder_svg_tag : 'placeholder-svg' } }
 { %- fim se -% }
 </div> _ _
 < div
 class = "textocustom"
 estilo = " 
alinhar itens: {{section.settings.desktop_content_alignment}} ;
 justificar conteúdo: {{section.settings.desktop_content_position}}
 "
 >
 { %- para bloco na seção. blocos -% }
 { % bloco de casos . tipo % }
 { %- quando 'título' -% } 
< h2 class = " {{ block.settings.heading_size }} " { { bloco. shopify_attributes } } >
 { { bloquear. configurações . título | escapar } }
 </ h2 > 
{ %- quando 'legenda' -% }
 < p
 class = "customText--caption {{ block.settings.text_style }} {{ block.settings.text_style }} -- {{ block.settings.text_size }} {{ block.settings.text_style }} "
 { { bloquear. shopify_atributos } }
 > 
{ { bloquear. configurações . legenda | escapar } }
 </ p >
 { %- quando 'texto' -% }
 < div
 class = "customText--content {{ block.settings.text_style }} "
 estilo = " 
{% case section.settings.desktop_content_alignment %}
 {% when 'flex-start' %}
 alinhamento de texto: esquerda;
 {% when 'center' %}
 alinhamento de texto: centro;
 {% when 'flex-end' %}
 alinhamento de texto: certo;
 {% endcase %}
 "
 { { bloquear. shopify_atributos } }
 >
 { { bloquear. configurações . texto } } 
</div> _ _
 { %- quando 'botão' -% }
 { % -se bloco. configurações . rótulo_de_botão != em branco -% }
 < um 
{ % se bloco. configurações . button_link == em branco % }
 role = "link" aria - desativado = "true"
 { % outro % }
 href = " {{ block.settings.button_link }} " 
{ % fim se % }
 class = "botão {% if block.settings.button_style_secondary %} botão - secundário {% else %} botão - primário {% endif %} "
 { { bloquear. shopify_atributos } }
 > 
{ { bloquear. configurações . rótulo_botão | escapar } }
 </a> _
 { %- fim se -% }
 { %- fim -% }
 { %- fim para -% } 
</div> _ _
 </div> _ _
 <estilo> _
 . customImageText {
 largura : 100 %;
 altura : conteúdo máximo ;
 exibição : flexível ;
 }
 . imagem personalizada > img { 
largura : 100 %;
 altura : 100 %;
 ajuste ao objeto : capa ;
 posição do objeto : centro centro ;
 }
 . texto personalizado {
 exibição : flexível ;
 flex - direction : coluna ; 
preenchimento : 4rem calc ( 4rem / var ( -font - body - scale ) ) 5rem ;
 }
 . texto personalizado -- legenda {
 margem : 0 ;
 }
 Tela @media somente e ( largura mínima : 750px ) { 
. imagem personalizada {
 largura : 100 %;
 }
 . texto personalizado {
 largura : calc ( ( 100 % ) * 8/12 ) ;
 }
 . imagem - primeiro { 
flex - direction : linha ;
 }
 . texto - primeiro {
 flex - direction : linha - reversa ;
 }
 }
 Tela @media somente e ( largura máxima : 749px ) {
 . customImageText {
 flex - direction : coluna ; 
}
 . imagem personalizada {
 largura : 100 %;
 }
 . texto personalizado {
 largura : 100 %;
 }
 }
 </ estilo >
 { % esquema % }
 { 
"name" : "Texto de imagem personalizado" ,
 "classe" : "seção" ,
 "configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem" ,
 "rótulo" : "Imagem" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "desktop_image_width" ,
 "opções" : [
 {
 "valor" : "pequeno" ,
 "rótulo" : "pequeno" 
} ,
 {
 "valor" : "médio" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "grande" ,
 "rótulo" : "grande"
 }
 ] , 
"padrão" : "médio" ,
 "label" : "Largura da imagem na área de trabalho"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "seção_layout" ,
 "opções" : [
 { 
"valor" : "imagem primeiro" ,
 "label" : "Imagem primeiro"
 } ,
 {
 "valor" : "texto primeiro" ,
 "label" : "Texto primeiro"
 }
 ] , 
"default" : "imagem primeiro" ,
 "label" : "Layout de imagem e texto"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Layout do texto da seção"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "desktop_content_position" ,
 "opções" : [
 {
 "valor" : "início flexível" ,
 "rótulo" : "topo"
 } ,
 { 
"valor" : "centro" ,
 "rótulo" : "centro"
 } ,
 {
 "valor" : "flex-end" ,
 "rótulo" : "inferior"
 }
 ] , 
"default" : "flex-start" ,
 "label" : "Posição do conteúdo" ,
 "info" : "A posição é baseada no espaço disponível"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "desktop_content_alignment" , 
"opções" : [
 {
 "valor" : "início flexível" ,
 "rótulo" : "esquerda"
 } ,
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 } , 
{
 "valor" : "flex-end" ,
 "rótulo" : "certo"
 }
 ] ,
 "default" : "flex-start" ,
 "label" : "Alinhamento de conteúdo"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "cor_de_fundo" ,
 "default" : "#eee" ,
 "label" : "Cor de fundo"
 } ,
 {
 "tipo" : "cabeçalho" , 
"content" : "Preenchimento de seção"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 , 
" Passo 4 ,
 "unidade" : "px" ,
 "label" : "Preenchimento superior" ,
 "padrão" : 36
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" ,
 "label" : "Preenchimento inferior" , 
"padrão" : 36
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "título" ,
 "nome" : "título" ,
 "limite" : 1 , 
"configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "default" : "Imagem com texto" ,
 "label" : "Título da seção"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "heading_size" ,
 "opções" : [
 {
 "valor" : "h2" ,
 "rótulo" : "pequeno"
 } ,
 { 
"valor" : "h1" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "h0" ,
 "rótulo" : "grande"
 }
 ] , 
"padrão" : "h1" ,
 "label" : "Tamanho da fonte do título"
 }
 ]
 } ,
 {
 "tipo" : "legenda" ,
 "nome" : "legenda" , 
"limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "legenda" ,
 "default" : "Adicionar um slogan" ,
 "label" : "Legenda" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "estilo_texto" ,
 "opções" : [
 {
 "valor" : "legenda" ,
 "rótulo" : "legenda" 
} ,
 {
 "valor" : "legenda com espaçamento entre letras" ,
 "label" : "legenda com espaçamento entre letras"
 }
 ] ,
 "default" : "legenda com espaçamento entre letras" ,
 "label" : "Estilo de texto da legenda" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "tamanho_do_texto" ,
 "opções" : [
 {
 "valor" : "pequeno" ,
 "rótulo" : "pequeno" 
} ,
 {
 "valor" : "médio" ,
 "rótulo" : "médio"
 } ,
 {
 "valor" : "grande" ,
 "rótulo" : "grande"
 } 
] ,
 "padrão" : "médio" ,
 "label" : "Tamanho da fonte da legenda"
 }
 ]
 } ,
 {
 "tipo" : "texto" ,
 "nome" : "conteúdo" , 
"limite" : 1 ,
 "configurações" : [
 {
 "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" : "Conteúdo da seção"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "estilo_texto" ,
 "opções" : [
 {
 "valor" : "corpo" , 
"rótulo" : "corpo"
 } ,
 {
 "valor" : "legenda" ,
 "rótulo" : "legenda"
 }
 ] ,
 "padrão" : "corpo" , 
"label" : "Estilo do texto"
 }
 ]
 } ,
 {
 "tipo" : "botão" ,
 "nome" : "botão de seção" ,
 "limite" : 1 ,
 "configurações" : [ 
{
 "tipo" : "texto" ,
 "id" : "button_label" ,
 "default" : "Etiqueta do botão" ,
 "label" : "Etiqueta do botão"
 } ,
 { 
"tipo" : "url" ,
 "id" : "botão_link" ,
 "label" : "Link do botão"
 }
 ]
 }
 ] ,
 "predefinições" : [
 { 
"name" : "Texto de imagem personalizado" ,
 "blocos" : [
 {
 "tipo" : "título"
 } ,
 {
 "tipo" : "texto"
 } ,
 { 
"tipo" : "botão"
 }
 ]
 }
 ]
 }
 { % termina o esquema % }