Inicio
Aumenta tus ventas
3. Agregar una sección de Ebooks o Planes destacados en el Widget

Agregar una sección de Ebooks o Planes destacados en el Widget

En este artículo te mostraremos cómo puedes destacar un Ebook o un Plan en la sección de Widgets de la tienda.

Escrito por Lara Macarena Sastre

Última actualización Hace 4 meses

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:

<button
type="button"
class="btn btn-success btn-lg btn-block font-weight-bold canBeRead"

Leer ahora

<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"

Adquirilo ahora

<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeRegister"

Registrarse y adquirir

**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.**

Leer ahora

<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeSubscribe"

Adquirilo ahora

<button
type="button"
class="btn btn-warning btn-lg btn-block font-weight-bold canBeRegister"

Registrarse y adquirir

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 code:

<style>
.custom-landing.custom-landing {
font-family: 'Montserrat', Raleway, sans-serif;
}

.Header.navbar > div:first-of-type,
.Library.Library-container,
.Footer > div:first-of-type {
max-width: 1400px;
margin: auto;
}

.Widget {
background: url("https://i.ibb.co/bm34ZXt/img.jpg") no-repeat top center;
background-size: cover;
padding: 2rem 0;
color: white;
font-size: 1.25rem;
background-attachment: fixed;
margin-top: -5px;
position: relative;
}
.Widget .container {
max-width: 1400px;
}
.Widget:after {
content: '';
position: absolute;
opacity: .5;
background-color: rgb(0, 0, 0); width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
.Widget > div:first-of-type {
position: relative;
z-index: 200;
}

.Widget ul,
.Widget li {
list-style: none;
font-size: 1.1875rem;
}

.Widget h4 {
color: #50b033;
font-size: 1.5rem;
}

.Widget h1 {
font-size: 3rem;
}
@media screen and (max-width: 578px) {
.Widget h1 {
font-size: calc(1.875rem / 0.6);
}
}

.Widget .cover {
max-width: 390px;
}

.Widget img {
border-radius: 3px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.Widget article.Issue {
width: 100%;
max-width: 412px;
}

.User-ID-null .Widget .Issue-button .canBeRead,
.User-ID-null .Widget .Issue-button .canBeSubscribe {
display: none;
}

.library:not(.User-ID-null) .Widget .Issue-button .canBeRead,
.library:not(.User-ID-null) .Widget .Issue-button .canBeRegister {
display: none;
visibility: hidden;
}
.library:not(.User-ID-null) .Widget .Issue-button .canBeSubscribe {
visibility: hidden;
}

.library:not(.User-ID-null) .Widget .Issue-button.Issue--canBeRead .canBeRegister,
.library:not(.User-ID-null) .Widget .Issue-button.Issue--canBeRead .canBeSubscribe {
display: none;
}
.library:not(.User-ID-null) .Widget .Issue-button.Issue--canBeRead .canBeRead {
display: block;
visibility: visible;
}

.library:not(.User-ID-null) .Widget .Issue-button.Issue--visible .canBeRead,
.library:not(.User-ID-null) .Widget .Issue-button.Issue--visible .canBeSubscribe {
visibility: visible;
}


.Slider-cell article[data-id="36106"].Issue {
display: none;
}

.Template-books .Issue-status-bottom {
display: inline-block;
}
.Template-books .Issue-status-bottom .Issue-status-text {
position: relative;
}
</style>

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 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 support@publica.la

Actualizado el: 18/12/2025