Si necesitas destacar un ebook o un plan, promocionar un lanzamiento o la preventa de un libro, puedes colocar un anuncio en la sección de Widgets junto a un texto informativo, una imágen y un botón de compra o suscripción. Esto te ayudará a captar la atención de tus usuarios y te permitirá concretar ventas en pocos clics.

Vamos a enseñarte a agregar un anuncio en la sección de Widgets de la tienda como este:

⚠️ Ten en cuenta que si ya tienes componentes en la sección de Widgets, podrás establecer el orden de estos teniendo en consideración que el código que coloques al inicio del recuadro será lo que se muestre primero.

1. Copia el siguiente código:

<div class="container mt-5 mb-4 pb-5">
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap"
rel="stylesheet"
/>
<div class="row custom-landing">
<div class="col-12">
<div class="row">
<div class="col-12 p-0 p-md-3 col-sm">
<div>
<h1 class="text-uppercase font-weight-bold">COMO GANAR AMIGOS</h1>
<h2 class="mb-4 text-uppercase font-weight-bold">
​E INFLUIR EN LAS PERSONAS
</h2>
<h4 class="my-3 text-uppercase font-weight-light">
​DALE CARNEGIE
</h4>
</div>
​
<div class="my-5">
<p>Dale Carnegie escribió este libro con el propósito de ser un suplemento a su curso sobre oratoria y relaciones humanas y nunca se imaginó que se convertiría en un éxito de ventas y que la gente lo leería, lo criticaría y viviría según sus reglas. Carnegie entrevistó a muchas personas de renombre para tomar ejemplos de sus vidas. Entre ellas están Edison, Franklin D. Rooselvelt y James Farley.
</p>
</div>
<div class="d-none d-md-block">
<article
data-id="264286"
class="Issue Issue-button mt-5 mb-3"
>
<button
type="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"
>
Leer ahora
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
>
Adquirilo ahora
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeRegister"
>
Registrarse y adquirir
</button>
</article>
</div>
</div>
<div class="col-12 col-sm ml-auto mr-auto text-center">
<div class="cover m-auto">
<img
class="img-fluid truncate"
src="https://storage-aws-production.publica.la/demo-es/issues/2021/03/2F8IqY6zuH3r2C6D/1615388569_cover.png"
/>
</div>
</div>
</div>
<div class="my-5">
<p>Dale Carnegie escribió este libro con el propósito de ser un suplemento a su curso sobre oratoria y relaciones humanas y nunca se imaginó que se convertiría en un éxito de ventas y que la gente lo leería, lo criticaría y viviría según sus reglas. Carnegie entrevistó a muchas personas de renombre para tomar ejemplos de sus vidas. Entre ellas están Edison, Franklin D. Rooselvelt y James Farley.
</p>
</div>
<div class="d-md-none text-center m-auto">
<article data-id="264286" class="Issue Issue-button my-4">
<button
type="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"
>
Leer ahora
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"
>
Adquirilo ahora
</button>
<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeRegister"
>
Registrarse y adquirir
</button>
</article>
</div>
</div>
</div>
</div>
​
<script>
document.addEventListener('DOMContentLoaded', function() {
var classesList = document.querySelector(
'article[data-id="264286"]:not(.Issue-button)'
);
var IssueCustomButton = document.querySelectorAll(
'article[data-id="264286"].Issue-button'
);
​
IssueCustomButton.forEach(function(button) {
button.classList.add('Issue--visible');
});
​
if (classesList && classesList.classList.contains('Issue--canBeRead')) {
IssueCustomButton.forEach(function(button) {
button.classList.add('Issue--canBeRead');
});
}
});
</script>

Ten en cuenta que debes modificar lo que está en negritas, colocando:

- Título del Ebook o Plan
- Autor o subtítulo
- Descripción
- [data-id] *

(*) En [data-id="..."] deberás colocar el data-id de la publicación o plan que elijas destacar.

Para conocer este dato debes buscar el ebook o el plan desde la sección principal de la tienda y dar clic derecho sobre él para abrir las herramientas del desarrollador.
Elige la opción Inspeccionar o Inspect.

Sobre la línea de la etiqueta article, encontrarás el atributo data-id que deberás colocar en el código que te compartimos más arriba:

2. Una vez hayas agregado los datos en el código, pega el mismo en Panel de control > Ajustes > Widgets y haz clic en Guardar.

3. Ahora vamos a agregar los estilos. Ingresa a Panel de control > Ajustes > Avanzados y pega el código que te compartimos a continuación en Custom before </body> code:

Puedes modificar el color del texto y el color de fondo agregando el código HTML de cada color en background-color (color de fondo) y en color (color del texto). También puedes colocar una imágen de fondo como en el ejemplo, cambiando la URL en negritas.

👉Si tienes el campo CSS Personalizado, puedes colocar el código allí quitando las etiquetas <style></style> del inicio y el final del código.

Haz clic en Guardar.

¡Listo! ya tienes tu anuncio disponible en la tienda.

Si quieres modificar aún más la personalización debes contar con conocimiento en HTML, CSS y JavaScript o bien, puedes consultar con un especialista.

Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected]