<div class="contenedor-iconos">
{% style %}
.contenedor-iconos{
background-color: {{ section.settings.color_fondo }};
}
{% endstyle %}
<div class="row-iconos">
{% for block in section.blocks %}
{% case block.type %}
{% when 'icon' %}
<div class="col-icono">
{% if block.settings.icon_img != blank %}
<img src="{{ block.settings.icon_img | image_url }}" alt="">
{% else %}
<img src="https://cdn.shopify.com/s/files/1/0629/8370/0680/files/fast-delivery.svg?v=1706303861" alt="">
{% endif %}
<style>
.col-icono img {
width: {{ section.settings.ancho_icono }}px;
}
@media(min-width:991px){
.col-icono img{
position: relative;
right: 5px;
}
}
</style>
<div class="txt-icono">
{% if block.settings.titulo_icon != blank %}
<h3>{{ block.settings.titulo_icon }}</h3>
{% else %}
<h3>Titulo para el icono</h3>
{% endif %}
<style>
.col-icono h3{
color: {{ section.settings.color_titulo_icono }};
font-size: {{ section.settings.size_titulo_icono }}px;
}
@media(min-width:991px){
.col-icono h3{
font-size: {{ section.settings.size_titulo_icono_desktop }}px;
}
}
</style>
{% if block.settings.texto_icono != blank %}
<p>{{ block.settings.texto_icono }}</p>
{% else %}
<p>Esta es la descripcion para el icono</p>
{% endif %}
<style>
.col-icono p{
color: {{ section.settings.color_descripcion }};
font-size: {{ section.settings.size_desc_movil }}px;
}
@media(min-width:991px){
.col-icono p{
font-size: {{ section.settings.size_desc_desktop }}px;
}
}
</style>
</div>
</div>
{% else %}
{% endcase %}
{% endfor %}
</div>
</div>
<style>
.contenedor-iconos{
height: auto;
width: 100%;
padding: 50px 0px;
display: flex;
justify-content: center;
align-items: center;
}
@media(min-width:991px){
.contenedor-iconos{
min-height: 300px;
}
}
.row-iconos{
width: 90%;
margin: 0px auto;
height: auto;
max-width: 1140px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
min-height: inherit;
}
@media(min-width:991px){
.row-iconos{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.col-icono{
width: 90%;
margin: 0px auto;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 0px;
min-height: 150px;
}
@media(min-width:991px){
.col-icono{
width: 24%;
height: auto;
flex-direction: row;
}
}
.txt-icono{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 70%;
}
@media(min-width:991px){
.txt-icono{
align-items: flex-start;
}
}
.txt-icono h3,.txt-icono p {
text-align: {{ section.settings.texto_icono_alineacion }};
margin: 0;
padding: 0;
}
@media(min-width:991px){
.txt-icono h3,.txt-icono p{
text-align: {{ section.settings.texto_icono_alineacion_desktop }};
}
}
</style>
{% schema %}
{
"name": "Iconos",
"settings": [
{
"type":"text",
"id":"titulo_iconos",
"label":"ingresa el titulo para los iconos"
},
{
"type": "color",
"id":"color_fondo",
"label":"ingresa el color de fondo",
"default": "#ffffff"
},
{
"type":"color",
"id":"color_titulo_icono",
"label":"ingresa el color para el titulo del icono",
"default": "#ffffff"
},
{
"type":"range",
"id": "size_titulo_icono",
"label": "Ingresa el tamaño para el titulo",
"min":8,
"max": 30,
"unit": "px",
"default": 18
},
{
"type":"range",
"id": "size_titulo_icono_desktop",
"label": "Ingresa el tamaño para el titulo en Computadora",
"min":8,
"max": 30,
"unit": "px",
"default": 18
},
{
"type": "range",
"id":"ancho_icono",
"label": "Ingresa el ancho del icono",
"min": 18,
"max": 100,
"unit": "px",
"default": 32
},
{
"type": "range",
"id": "ancho_txt",
"label": "Ingresa el ancho del contenedor del texto",
"min":50,
"max":70,
"unit":"%",
"default": 50
},
{
"type": "range",
"id": "size_desc_movil",
"label": "Ingresa el tamaño para la descripcion en movil",
"min":10,
"max":40,
"unit":"px",
"default": 10
},
{
"type": "range",
"id": "size_desc_desktop",
"label": "Ingresa el tamaño para la descripcion en computadora",
"min":10,
"max":40,
"unit":"px",
"default": 10
},
{
"type": "color",
"id":"color_descripcion",
"default": "#ffffff",
"label": "Ingresa el color para le descripcion"
},
{
"type": "select",
"id": "texto_icono_alineacion",
"label": "Alineacion textos",
"options": [
{
"value": "left",
"label": "left"
},
{
"value": "center",
"label": "center"
},
{
"value": "right",
"label": "right"
}
],
"default": "center"
},
{
"type": "select",
"id": "texto_icono_alineacion_desktop",
"label": "Alineacion textos desktop",
"options": [
{
"value": "left",
"label": "left"
},
{
"value": "center",
"label": "center"
},
{
"value": "right",
"label": "right"
}
],
"default": "left"
}
],
"blocks": [
{
"name":"Icon",
"type": "icon",
"settings":[
{
"type":"image_picker",
"id": "icon_img",
"label": "Ingresa el icono"
},
{
"type":"text",
"id":"titulo_icon",
"label":"Ingresa el titulo del icono"
},
{
"type": "text",
"id": "texto_icono",
"label": "Ingresa el texto para el icono"
}
]
}
],
"presets": [
{
"name": "Icons"
}
]
}
{% endschema %}
Hola este codigo recibe 4 iconos donde puedes modificar el color de fondo, color del titulo , color del texto , alineacion de los textos y tamaño de los iconos, espero te funcione 🙂
