Cómo crear una tableta de vista previa de texto desplazable con Divi

Publicado: 2017-08-08

En el tutorial de hoy, le mostraremos cómo crear una tableta de vista previa de texto desplazable en su sitio web. La vista previa del texto se representará en una tableta donde los visitantes pueden desplazarse dentro de la tableta para leer algunos de los capítulos que se están compartiendo.

Agregar una tableta de vista previa de texto a su sitio web es una excelente manera de burlarse de sus visitantes. Les estás dando la oportunidad de explorar una parte del contenido que has creado. Una vez que hayan leído el contenido y se hayan sentido intrigados por él, es más probable que también quieran leer el resto. El uso de una tableta de vista previa de texto puede ser interesante en los siguientes casos, por ejemplo:

  • Al vender un libro
  • Al compartir un libro electrónico gratuito con sus visitantes y querer animarlos a descargar la versión completa (suscribiéndose)
  • Al compartir estudios de casos o testimonios

Para mostrarte lo que queremos decir exactamente, hemos creado un ejemplo que te mostraremos cómo recrear paso a paso:

Puede agregar todo el contenido que desee a la tableta. La barra de desplazamiento permitirá a sus visitantes desplazarse por el contenido fácilmente.

Cómo crear una tableta de vista previa de texto desplazable con Divi

Suscríbete a nuestro canal de Youtube

Crear y modificar la sección

Lo primero que necesitaremos para recrear el ejemplo que hicimos es una sección. Para que sea más fácil, agregaremos esta sección a una nueva página y cambiaremos al Visual Builder para explicar todos los pasos que se están utilizando para crear el resultado.

Agregar una nueva página

Para agregar una nueva página, vaya a su Tablero de WordPress> Páginas> Agregar nueva . Una vez que haya agregado la nueva página, active Divi Builder y cambie a Visual Builder de inmediato.

Agregar una sección con fila de dos columnas

Para el ejemplo que estamos recreando, solo necesitaremos una sección. Agregue una sección estándar y dentro de esa sección, cree una fila de dos columnas. Necesitaremos la columna de la izquierda para colocar la tableta de vista previa del texto y la segunda columna para brindar información y hacer un llamado a la acción.

Agregar el fondo degradado

El siguiente paso que explicaremos es el fondo degradado. Optamos por algo realmente sencillo pero que aporta un buen valor añadido a la sección. Para recrear el degradado de fondo, vaya a la configuración de su sección. Luego, use los siguientes dos colores para su fondo degradado en la subcategoría de fondo:

  • # e02b20
  • # f2f2f2

Las configuraciones que hemos usado para el fondo degradado son las siguientes:

  • Tipo de degradado: lineal
  • Dirección del gradiente: 143 grados
  • Posición inicial: 28%
  • Posición final: 28%

Primera columna: agregue el módulo de código y la tableta de vista previa de texto

Para la primera columna, agregaremos el módulo de código con la tableta de vista previa de texto. Para completar la tableta de vista previa de texto, necesitaremos hacer tres cosas; agregue el módulo de código, agregue las líneas de código HTML dentro del Módulo de código y agregue las líneas de código CSS necesarias a la página. También puede agregar las líneas de código CSS a Opciones de tema o Personalizador de tema. Pero como no es necesario en este caso, solo lo agregaremos a la página que hemos creado.

Agregar el módulo de código

Comience agregando un módulo de código a la primera columna de la fila que ha creado.

Agregar el código HTML

A continuación, abra ese módulo de código y agregue las siguientes líneas dentro del cuadro de contenido: 

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

<h1 class="title">Chapter 2</h1>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

Notará que hay tres partes en nuestra vista previa del texto; el título, los párrafos y el pie de página. Puede hacer que la vista previa del texto sea tan larga como desee. Para este ejemplo, hemos agregado dos capítulos que están representados por un título y un párrafo cada uno. Por supuesto, puede agregar varios párrafos y títulos donde quiera en la tableta.

Agregue el código CSS necesario

Una vez que haya ajustado el código HTML a sus necesidades, puede agregar el código CSS que hace que su tableta se vea como usted desea. Dado que solo necesitaremos esta tableta en la página que estamos creando; vamos a agregar el código a la página directamente. Dentro del Visual Builder de su página, haga clic en el icono de configuración:

A continuación, vaya a la pestaña CSS y pegue las siguientes líneas de código CSS en el campo CSS personalizado: 

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

Puede cambiar todas las cosas según sus necesidades dentro de estas líneas de código CSS. Como puede observar en las líneas de código, hay cinco partes principales en las que puede cambiar la apariencia de su tableta de vista previa de texto.

  • El aspecto exterior de la tableta
  • El aspecto interior de la tableta
  • El título
  • Los párrafos
  • El pie de página

Puede hacer que la tableta se ajuste a cualquier tipo de página en la que esté integrando la tableta de vista previa de texto.

Segunda columna: agregue dos módulos de texto y un CTA

Lo último que vamos a hacer es agregar los módulos a la columna de la derecha. Es importante informar a las personas lo que van a leer en la tableta de vista previa de texto. También es la oportunidad ideal para hacer uso de un CTA. Cuanto más cerca esté el CTA de la tableta de vista previa de texto real, y cuanto más perceptible sea, es más probable que las personas tomen medidas después de leer la vista previa del texto.

Primer módulo de texto

Comience agregando el primer módulo de texto a la segunda fila. Abra la configuración y escriba un título en el cuadro de contenido dentro de la subcategoría de texto del contenido. Además, vaya a la pestaña Diseño y realice los siguientes cambios en la subcategoría Texto:

  • Fuente de texto: Guión de baile
  • Estilo de fuente de texto: negrita y cursiva
  • Tamaño de fuente de texto: 40 (escritorio), 35 (tableta), 30 (teléfono)
  • Color del texto: # 1c1c1c
  • Altura de la línea de texto: 1.7em

Desplácese hacia abajo en la misma pestaña y agregue '40% 'al margen superior.

Segundo módulo de texto

Además, agregue el segundo módulo de texto. Comience agregando el texto en el cuadro Contenido dentro de la pestaña Contenido y continúe con la pestaña Diseño. Dentro de la pestaña Diseño, realice también los siguientes ajustes en la subcategoría Texto:

  • Fuente de texto: Arimo
  • Tamaño de fuente de texto: 14
  • Altura de la línea de texto: 1.7em

Módulo de botones

Por último, también necesitaremos agregar un módulo de botones a la segunda columna. Hemos hecho coincidir los colores de la CTA con el fondo degradado. En primer lugar, agregue el Módulo de botones y abra la Configuración. Luego, agregue la CTA y la URL dentro de la pestaña Contenido. Continúe pasando a la pestaña Diseño y realizando los siguientes ajustes en la subcategoría Botón:

  • Usar estilos personalizados para el botón: Sí
  • Texto del tamaño del botón: 14 (escritorio y tableta), 12 (teléfono)
  • Color del texto del botón: # f9f9f9
  • Color de fondo del botón: # e02b20
  • Ancho del borde del botón: 0
  • Radio del borde del botón: 3
  • Fuente del botón: Arimo

Sugerencia: si está promocionando su libro electrónico a través de la vista previa de texto, también puede vincular un formulario de suscripción de Activador en Click Bloom como se explica en la siguiente publicación.

El resultado

Si ha seguido todos los pasos de esta publicación, debería haber obtenido el siguiente resultado para la vista previa de su libro:

Terminando

Con el módulo de código, puede ser tan creativo como desee. Esta publicación fue un ejemplo de lo diverso que puede hacer que su sitio web Divi se vea si integra algunos elementos de su preferencia personal. Si ha seguido esta publicación paso a paso, debería haber podido recrear la vista previa del libro y usarla en su sitio web. No solo puede usar la vista previa del libro para sitios web de autores, sino que también puede usarla para obtener una vista previa de un libro electrónico que ha creado y desde el cual desea construir su lista de correo electrónico. Si tiene alguna pregunta o sugerencia; ¡No dude en dejarnos un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!