Inicio/Guías/Diseño/Personalizar tu diseño

¿Cómo agregar un Call to Action?

diciembre 16, 2022

Un “Call to Action” (Llamado a la acción📞🎬) es un elemento de diseño que se utiliza en nuestra tienda para motivar a los visitantes a realizar una acción específica, como comprar un producto.🛍️

El Call to Action suele ser un botón o enlace con una frase de llamado a la acción, como “Comprar ahora”, “Obtener descuentos”, “Ver producto”.

El objetivo de un Call to Action es guiar a los visitantes a través del proceso de compra y darles una dirección clara sobre qué deben hacer.

Al tener un Call to Action claro y efectivo en nuestra tienda online, podemos aumentar las ventas y los ingresos de nuestro negocio.😁📈

Tabla de contenido🤓

  • Paso a paso👣 para agregar un “Call to Action”
  • ⚙️Configuración
    • Botones
    • Diseño
      • Textos / Contenido
      • Diseño / Disposición
  • 🖥️Disposición
    • Margen
    • Relleno
    • Contenedor
    • Visibilidad
  • 🖌️Estilos
    • Fondo de sección
    • Título y Texto
    • Contenedor
    • Botón
  • Guardar los cambios o publicar el Call to Action

Paso a paso👣 para agregar un “Call to Action”

En Batitienda los Call to Action se encuentran en el Diseñador de nuestra tienda!

1. Lo primero que tenemos que hacer es ingresar al Diseñador, si es la primera vez que vamos a utilizar el Call to Action o si estamos realizando alguna prueba es recomendable utilizar una plantilla de pruebas para poder realizar todas las ediciones y pruebas que queramos sin afectar el diseño principal de nuestra tienda, y cuando estemos seguros de las nuevas implementaciones las podamos publicar en el portal publico con total tranquilidad. Para ingresar al diseñador de Batitienda tenemos que encontrarnos en el panel de administración y dirigirnos a 👉Tienda online > Borradores > (Elegir un borrador) > Diseño.

2. Dentro del diseñador lo siguiente es hacer clic🖱️ en el icono celeste +, para agregar una nueva sección en nuestro diseño.

3. Ahora se abrirá una ventana con todas las secciones que podemos agregar en el diseño, nosotros vamos a elegir “Call to Action 1”

Esta es la plantilla por defecto del Call to Action👇

Plantilla por defecto en la versión Mobile👇

4. Para editar el Call to Action tenemos que pasar el cursor por encima de la sección y hacer clic🖱️ en

Luego se abrirá una ventana con las ediciones que le podemos hacer a nuestro Call to Action, vamos a hacer un pequeño repaso de cada una de ellas😁👇

⚙️Configuración

Dentro de Configuración tendremos la pestaña de Botones, acá podemos seleccionar la cantidad de botones que va a tener el Call to Action con las siguientes opciones:

  • Sin botones
  • 1 botón
  • 2 botones

Y configurar el enlace de los botones en “Link de botón #(1 o 2)”

Por ejemplo👇

Para cambiar los textos del contenido simplemente tenemos seleccionarlos y cambiarlos como un editor de textos normal!

En la pestaña de Diseño vamos a poder elegir el contenido que queremos mostrar y seleccionar la disposición que van a tener los mismos.

En Textos / Contenido podemos seleccionar:

Mostrar título y texto👇

Mostrar solo título👇

En Diseño / Disposición podemos seleccionar:

Contenedor + botones de lado👇

En la vista Mobile👇

Contenedor + botones debajo👇

Contenedor diagonal + botones de lado👇

Sin contenedor + botones de lado👇

Sin contenedor + botones debajo

💻Disposición

🚨Las siguientes configuraciones las podemos hacer tanto para la vista de Desktop como para la vista Mobile independientemente.

Dentro del apartado de Disposición vamos a poder editar el Margen y el Relleno de nuestro elemento!

El Margen es la distancia entre el borde de una sección y la siguiente sección.

Ejemplo👇

En la vista Mobile👇

El Relleno es la distancia entre el borde de una sección y su contenido.

Ejemplo👇

En la vista Mobile👇

Dentro de Disposición tenemos el Contenedor, que define si el contenido se mostrara con un ancho completo o con un ancho reducido.

Ejemplo: Si seleccionamos “No limitar el ancho de sección” (Ancho completo)

En la vista Mobile👇

Y por último tenemos la Visibilidad, esta función define en que tipos de pantalla se va a mostrar nuestra sección. Podemos seleccionar:

  • Mostrar en Desktop (Computadoras) y Mobile (Celulares)
  • Mostrar solo en Desktop
  • Mostrar solo en Mobile

🖌️Estilos

Podemos darle estilo a cada uno de los elementos de nuestro Call to Action

Fondo de sección

Vamos a poder elegir un fondo personalizado para nuestra sección! Lo podemos hacer a través de colores, imágenes y texturas precargadas y combinables con los colores!

Ejemplo👇

Título y Texto

Tanto en Título como en Texto nos vamos a tener el mismo panel de edición.

En la pestaña de Estilos vamos a poder elegir el color, el estilo, el peso, la decoración y sombra.

En la pestaña de Formato vamos a poder elegir el tamaño de nuestra tipografía como también el espaciado de las letras, el alto de el renglón y la alineación del mismo.

En la pestaña Layout vamos a poder elegir los Márgenes de nuestro elemento.

Ejemplos👇

Contenedor

Vamos a poder elegir el color del fondo de nuestro contenedor.

Ejemplo👇

Botón

Y el panel para editar el Botón es muy parecido al de títulos y texto, este tiene el agregado que también vamos a poder editar el Fondo y el Borde del botón.

Ejemplo👇

Estas son todas las ediciones y configuraciones que podemos hacer con el Call to Action!

💡Cuando termines de realizar las ediciones recordá que podes salir del diseñador sin publicar los cambios o lo podes publicar inmediatamente en el portal público!

Fin del post! Buen trabajo👏

¿Te fue útil?

Sí  No
Artículos relacionados
  • ¿Cómo personalizar el Pie de página de mi tienda?
  • ¿Qué es un favicon y cómo agregarlo a mi tienda?
  • ¿Qué es un logotipo y cómo agregarlo a mi tienda?
  • ¿Cómo agregar la sección Imagen 2?
  • ¿Cómo agregar la sección Imagen 1?
  • ¿Cómo personalizar el encabezado de mi tienda?
Personalizar tu diseño
  • ¿Cómo agregar un Call to Action?
  • ¿Cómo personalizar el Pie de página de mi tienda?
  • ¿Qué es un favicon y cómo agregarlo a mi tienda?
  • ¿Qué es un logotipo y cómo agregarlo a mi tienda?
  • ¿Cómo agregar la sección Imagen 2?
  • ¿Cómo agregar la sección Imagen 1?
View All 27  
Artículos populares
  • Medidas recomendadas para un slider 
  • ¿Cómo agregar el botón de continuar con Google en mi Tienda?
  • ¿Cómo verificar mi catálogo para Instagram Shopping?
  • ¿Cómo activar la tienda de Facebook y crear mi catálogo de productos? Versión clásica
  • ¿Cómo editar la información de facturación de un pedido?
Categorías
  • Mobile
    • Mobile Configuración
  • Video tutoriales
  • Integraciones
    • Mercado Libre
  • Primeros pasos
    • Configuraciones Iniciales
    • Preparación
  • Catálogo | Productos
    • Descuentos
    • Combos de productos
    • Variables
    • Acciones masivas
    • Agregar un nuevo producto
  • Diseño
    • Secciones
    • Personalizar tu diseño
  • Configuraciones
    • Medios de pago
    • Fidelización
  • Marketing
    • Herramientas externas
  • Información general
    • Conocé lo que podés hacer con Batitienda
  • Envíos
    • Todo sobre envíos
  • Canales de ventas
    • Mercado Libre / Instagram Shop / Facebook
  • Pedidos
    • Mis Ventas

© 2025 Tiendastic - Todos los derechos reservados.