Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Banners de categorías en la página de inicio

Este tutorial te enseñará a  incluir hasta tres banners con imagen de fondo y texto en la página de inicio de la tienda. Es posible editarlos desde la sección ‘Diseño > Personalizar tu diseño’, del panel de administración.

1. Agregar el siguiente código en settings.txt:

Inicio | Banners de categorías
    meta
        icon = tags
        advanced = true
    description
        description = Los banners se mostrarán de izquierda a derecha en computadoras y de arriba hacia abajo en celulares
    title
        title = CATEGORÍA 1
    checkbox
        name = banner_01_show
        description = Mostrar banner
    title
        title = Imagen de fondo
    image
        original = banner_01.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 600
    i18n_input
        name = banner_01_title
        description = Título
    i18n_input
        name = banner_01_description
        description = Descripción
    i18n_input
        name = banner_01_button
        description = Texto del botón
    i18n_input
        name = banner_01_url
        description = Link
    dropdown
        name = banner_01_align
        description = Alineación del texto
        values
            left = Izquierda
            center = Centrado
            right = Derecha
    dropdown
        name = banner_01_color
        description = Color del texto
        values
            light = Blanco
            dark = Negro
    title
        title = CATEGORÍA 2
    checkbox
        name = banner_02_show
        description = Mostrar banner
    title
        title = Imagen de fondo
    image
        original = banner_02.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 600
    i18n_input
        name = banner_02_title
        description = Título
    i18n_input
        name = banner_02_description
        description = Descripción
    i18n_input
        name = banner_02_button
        description = Texto del botón
    i18n_input
        name = banner_02_url
        description = Link
    dropdown
        name = banner_02_align
        description = Alineación del texto
        values
            left = Izquierda
            center = Centrado
            right = Derecha
    dropdown
        name = banner_02_color
        description = Color del texto
        values
            light = Blanco
            dark = Negro
    title
        title = CATEGORÍA 3
    checkbox
        name = banner_03_show
        description = Mostrar banner
    title
        title = Imagen de fondo
    image
        original = banner_03.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 600
    i18n_input
        name = banner_03_title
        description = Título
    i18n_input
        name = banner_03_description
        description = Descripción
    i18n_input
        name = banner_03_button
        description = Texto del botón
    i18n_input
        name = banner_03_url
        description = Link
    dropdown
        name = banner_03_align
        description = Alineación del texto
        values
            left = Izquierda
            center = Centrado
            right = Derecha
    dropdown
        name = banner_03_color
        description = Color del texto
        values
            light = Blanco
            dark = Negro

2. Agregar los valores predeterminados en defaults.txt:

banner_01_align = center
banner_01_color = light
banner_02_align = center
banner_02_color = light
banner_03_align = center
banner_03_color = light

3. Dentro de la carpeta snipplets, crear el archivo home-banners.tpl con el siguiente código (dependiendo de la plantilla o diseño a medida que se esté utilizando). Para el caso que se use BS3, se debe agregar lo siguiente:

<div class="container banner-wrapper">
    <div class="row">
        {% set num_banners = 0 %}
        {% for banner in ['banner_01', 'banner_02', 'banner_03'] %}
            {% set banner_show = attribute(settings,"#{banner}_show") %}
            {% set banner_title = attribute(settings,"#{banner}_title") %}
            {% set banner_button_text = attribute(settings,"#{banner}_button") %}
            {% set has_banner =  banner_show and (banner_title or banner_description or "#{banner}.jpg" | has_custom_image) %}
            {% if has_banner %}
                {% set num_banners = num_banners + 1 %}
            {% endif %}
        {% endfor %}


        {% for banner in ['banner_01', 'banner_02', 'banner_03'] %}
            {% set banner_show = attribute(settings,"#{banner}_show") %}
            {% set banner_title = attribute(settings,"#{banner}_title") %}
            {% set banner_description = attribute(settings,"#{banner}_description") %}
            {% set banner_button_text = attribute(settings,"#{banner}_button") %}
            {% set banner_url = attribute(settings,"#{banner}_url") %}
            {% set banner_align = attribute(settings,"#{banner}_align") %}
            {% set banner_color = attribute(settings,"#{banner}_color") %}
            {% set has_banner =  banner_show and (banner_title or banner_description or "#{banner}.jpg" | has_custom_image) %}
            {% set has_banner_text =  banner_title or banner_description or banner_button_text %}
            {% if has_banner %}
                <div class="col-sm-{% if num_banners == 1 %}6 col-sm-offset-3{% elseif num_banners == 2 %}6{% elseif num_banners == 3 %}4{% endif %}">
                    <div class="banner-with-text {% if banner_align == 'center' %} text-center{% elseif banner_align == 'right' %} text-right{% else %}{% endif %}">
                        {% if banner_url %}
                            <a class="banner-with-text-link" href="{{ banner_url }}"{% if banner_title %} alt="{{ banner_title }}" title="{{ banner_title }}"{% endif %}>
                        {% endif %}
                        <div class="image-container{% if has_banner_text %} overlay{% endif %}{% if banner_color == 'dark' %} light{% endif %}"{% if "#{banner}.jpg" | has_custom_image %} style="background-image:url({{ "#{banner}.jpg" | static_url }});"{% endif %}>
                        </div>
                        <div class="text-container{% if banner_color == 'dark' %} dark{% endif %}">
                            {% if banner_title %}
                                <div class="banner-with-text-title">{{ banner_title }}</div>
                            {% endif %}
                            {% if banner_description %}
                                <div class="banner-with-text-paragraph m-bottom p-bottom p-none-xs">{{ banner_description }}</div>
                            {% endif %}
                            {% if banner_url and banner_button_text %}
                                <div class="btn btn-primary btn-small">{{ banner_button_text }}</div>
                            {% endif %}
                        </div>
                        {% if banner_url %}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

4. Incluir el snipplet creado en home.tpl

{#  **** Categories banners ****  #}
{% include 'snipplets/home-banners.tpl' %}

5. Agregar los estilos CSS (dependiendo de la plantilla o diseño a medida que se esté utilizando). Se debe agregar lo siguiente:

Dentro de styles.scss.tpl:

{# /* Banners */ #}


.banner-with-text {
    position: relative;
    margin: 20px 0;
    padding-top: 100%;
    overflow: hidden;
    .banner-with-text-link {
        display: block;
        width: 100%;
        height: 100%;
    }
    .image-container {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-transition: all 0.8s ease;
      -ms-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
    }
    &:hover .image-container,
    &:focus .image-container {
      -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
      -moz-transform: scale(1.03);
      -o-transform: scale(1.03);
      transform: scale(1.03);
    }
    .text-container {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9;
      width: 100%;
      padding: 30px 20px; 
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      .banner-with-text-title {
        margin-bottom: 15px;
        font-size: 34px;
        font-weight: 700;
        line-height: 36px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      }
      .banner-with-text-paragraph {
        display: -webkit-box;
        margin-bottom: 15px;
        overflow: hidden;
        text-shadow: 1px 1px 3px rgba(0,0,0,.4);
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .image-container.overlay:after {
      position: absolute;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.3;
      content: '';
      -webkit-transition: all 0.8s ease;
      -ms-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
    }
    &:hover .image-container:after {
      opacity: 0.5;
    }
}

Dentro de custom.scss.tpl (las variables SASS pueden variar de acuerdo a la plantilla):

{# /* Banners */ #}


.banner-with-text {
    .text-container {
        color: white;
        .banner-with-text-title {
            font-family: $heading-font;
        }
    }
    .text-container.dark {
        color: black;
        .banner-with-text-title {
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
        }
        .banner-with-text-paragraph {
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4);
        }
    }
    .image-container.light:after {
        background: white;
    }
}

6. Añadir las traducciones a translations.txt:

es "Inicio | Banners de categorías"
pt "Início | Banners de categorias"
en "Home | Categories banners"


es "Los banners se mostrarán de izquierda a derecha en computadoras y de arriba hacia abajo en celulares"
pt "Os banners serão exibidos da esquerda para a direita em computadores, e de cima para baixo em celulares."
en "Banners will be displayed from left to right on desktop and from top to bottom on mobile"


es "CATEGORÍA 1"
pt "CATEGORIA 1"
en "CATEGORY 1"


es "CATEGORÍA 2"
pt "CATEGORIA 2"
en "CATEGORY 2"


es "CATEGORÍA 3"
pt "CATEGORIA 3"
en "CATEGORY 3"


es "Mostrar banner"
pt "Mostrar banner"
en "Show banner"


es "Imagen de fondo"
pt "Imagem de fundo"
en "Background image"


es "Cargar imagen (JPG, GIF, PNG)"
pt "Carregar imagem (JPG, GIF, PNG)"
en "Upload image (JPG, GIF, PNG)"


es "Título"
pt "Título"
en "Title"


es "Descripción"
pt "Descrição"
en "Description"


es "Texto del botón"
pt "Texto do botão"
en "Button text"


es "Link"
pt "Link"
en "Link"


es "Alineación del texto"
pt "Alinhamento do texto"
en "Text align"


es "Izquierda"
pt "Esquerda"
en "Left"


es "Centrado"
pt "Centralizado"
en "Center"


es "Derecha"
pt "Direita"
en "Right"


es "Color del texto"
pt "Cor do texto"
en "Text color"


es "Blanco"
pt "Branco"
en "White"


es "Negro"
pt "Preto"
en "Black"

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.