Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Módulos de imagen y texto en la página de inicio

Este tutorial te enseñará cómo incluir hasta dos módulos con imagen y texto en la página de inicio de la tienda. Cada módulo mostrará una imagen y texto al costado de la misma en computadoras y debajo de ellas en celulares. Es posible gestionar esto desde la sección ‘Diseño > Personalizar tu diseño’, dentro del panel de administración.

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

Inicio | Módulos de imagen y texto
    meta
        icon = columns
        advanced = true
    description
        description = Cada módulo mostrará una imagen y un texto al lado de la misma en computadoras y debajo de ella en celulares
    title
        title = MÓDULO 1
    checkbox
        name = module_01_show
        description = Mostrar módulo
    title
        title = Imagen
    image
        original = module_01.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 400
    dropdown
        name = module_01_align
        description = Alineación de la imagen
        values
            left = Izquierda
            right = Derecha
    i18n_input
        name = module_01_title
        description = Título
    textarea
        name = module_01_text
        description = Descripción
    i18n_input
        name = module_01_button
        description = Texto del botón
    i18n_input
        name = module_01_url
        description = Link
    title
        title = MÓDULO 2
    checkbox
        name = module_02_show
        description = Mostrar módulo
    title
        title = Imagen
    image
        original = module_02.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 400
    dropdown
        name = module_02_align
        description = Alineación de la imagen
        values
            left = Izquierda
            right = Derecha
    i18n_input
        name = module_02_title
        description = Título
    textarea
        name = module_02_text
        description = Descripción
    i18n_input
        name = module_02_button
        description = Texto del botón
    i18n_input
        name = module_02_url
        description = Link

2. Colocar los valores predeterminados en defaults.txt:

module_01_align = left
module_02_align = right

3. Dentro de la carpeta snipplets, crear el archivo home-modules.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 BS2, se debe añadir lo siguiente:

{% set num_modules = 0 %}
{% for module in ['module_01', 'module_02'] %}
    {% set module_show = attribute(settings,"#{module}_show") %}
    {% set module_image = "#{module}.jpg" | has_custom_image %}
    {% set module_title = attribute(settings,"#{module}_title") %}
    {% set module_text = attribute(settings,"#{module}_text") %}
    {% set module_button_text = attribute(settings,"#{module}_button") %}
    {% set has_module =  module_show and (module_title or module_text or module_image) %}
    {% if has_module %}
        {% set num_modules = num_modules + 1 %}
    {% endif %}
{% endfor %}


{% for module in ['module_01', 'module_02'] %}
    {% set module_show = attribute(settings,"#{module}_show") %}
    {% set module_image = "#{module}.jpg" | has_custom_image %}
    {% set module_title = attribute(settings,"#{module}_title") %}
    {% set module_text = attribute(settings,"#{module}_text") %}
    {% set module_button_text = attribute(settings,"#{module}_button") %}
    {% set module_url = attribute(settings,"#{module}_url") %}
    {% set module_align = attribute(settings,"#{module}_align") %}
    {% set has_module =  module_show and (module_title or module_text or module_image) %}
    {% set has_module_text =  module_title or (module_url and module_button_text) %}
    {% if has_module %}
    <div class="row-fluid module-wrapper m-section p-relative">
        <div class="span6{% if module_align == 'right' %} pull-right{% endif %}">
            <div class="module-image">
                {% if module_url %}
                    <a href="{{ module_url }}"{% if module_title %} alt="{{ module_title }}" title="{{ module_title }}"{% endif %}>
                {% endif %}
                {% if module_image %}
                    <img src="{{ "#{module}.jpg" | static_url }}" />
                {% else %}
                    <div class="placeholder">
                        <i class="fas fa-4x fa-image module-icon"></i>
                    </div>
                {% endif %}
                {% if module_url %}
                    </a>
                {% endif %}
            </div>
        </div>
        <div class="span6{% if module_align == 'right' %} m-left-none{% endif %}">
            <div class="module-text">
                <div class="text-container">
                    {% if module_title %}
                        <div class="module-text-title m-bottom">{{ module_title }}</div>
                    {% endif %}
                    {% if module_text %}
                        <div class="module-text-paragraph m-bottom p-bottom">{{ module_text }}</div>
                    {% endif %}
                    {% if module_url and module_button_text %}
                        <a href="{{ module_url }}"{% if module_title %} alt="{{ module_title }}" title="{{ module_title }}"{% endif %}>
                            <div class="btn btn-primary btn-small">{{ module_button_text }}</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endfor %}

4. Incluir el snipplet creado en home.tpl

{#  **** Modules with images and text ****  #}
{% include 'snipplets/home-modules.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:

{# /* Modules with image and text */ #}


.module-wrapper {
  min-height: 300px;
}


.module-image {
  img {
    display: block;
    margin: 0 auto;
    max-height: 450px;
  }
  .placeholder{
    position: relative;
    padding-top: 70%;
    text-align: center;
    background: #eee;
    .module-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -28px;
      margin-top: -28px;
      opacity: 0.2;
    }
  }
}


.module-text {
  position: absolute;
  width: 50%;
  height: 100%;
  .text-container {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 9;
    padding: 30px 0;
    transform: translate(-0%, -50%);
    .module-text-title {
      margin-bottom: 10px;
      display: -webkit-box;
      font-size: 30px;
      font-weight: 700;
      line-height: 32px;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .module-text-paragraph {
      margin-bottom: 20px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
  }
}


@media (max-width: 769px) {


  .module-text {
    position: relative;
    float: left;
    width: 100%;
    .text-container {
      position: relative;
      padding: 20px 15px 40px 15px;
      transform: none;
      .module-text-paragraph {
        -webkit-line-clamp: 6;
      }
    }
  }  




}

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

{# /* Modules with image and text */ #}


.module-text-title {
    font-family: $font-headings;
}

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

es "Inicio | Módulos de imagen y texto"
pt "Início | Módulos de imagem e texto"
en "Home | Modules with image and text"


es "Cada módulo mostrará una imagen y un texto al lado de la misma en computadoras y debajo de ella en celulares"
pt "Cada módulo exibirá uma imagem e texto ao lado quando visto em computadores e abaixo quando visto em celulares"
en "Each module will display an image and text next to it on computers and below it on cell phones"


es "MÓDULO 1"
pt "MÓDULO 1"
en "MODULE 1"


es "MÓDULO 2"
pt "MÓDULO 2"
en "MODULE 2"


es "Mostrar módulo"
pt "Exibir módulo"
en "Show module"


es "Imagen"
pt "Imagem"
en "Image"


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


es "Alineación de la imagen"
pt "Alinhamento da imagem"
en "Image alignment"


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


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


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"

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