Thrive Content Builder Parte 2: mega tutorial en español más completo

Escrito por: MCD

Tiempo de lectura minutos

0

Facilidad, estilo y profesionalidad al alcance de tu mano con Thrive Content Builder tutorial parte 2.

More...

Thrive Content Builder Tutorial Parte 2 seguimos con la segunda parte de esta guía para crear de forma rápida y fácil páginas, post, landing pages con estilos únicos y profesionales en WordPress de la mano de este increíble plugin de la empresa Thrive Themes.

Está es la segunda parte de la super mega guía de Thrive Content Builder donde voy a desarrollar los Multi-Style Elements (elementos de estilos múltiples) que son 11 en total y luego seguiré con la tercera parte donde desglosaré los elementos llamados Advanced Elements (elementos avanzados). Si no has visto la primera parte de esta Guía te recomiendo que empieces por el principio, aquí te dejo todos los enlaces y no te pierdas el Mega Tutorial en Español de Thrive Architect la evolución más esperada de Thrive Content Builder:

NOTA: El precio del plugin Thrive Content Builder puede variar desde el momento que se creó este artículo. Puedes ver el precio actualizado en el siguiente enlace: Precio actual de Thrive Suite.

Multi Style Elements - Elementos de estilos múltiples

Content Templates - Plantillas de contenido

thrive content builder 2

Este elemento está dentro de la lista de mis favoritos y es realmente útil a la hora de mejorar nuestra productividad. Utilizando esta funcionalidad que se encuentra en todos los elementos disponibles podrás re-utilizar cajas con contenidos complejos que te haya llevado mucho tiempo crearlos, manteniendo todas sus propiedades y configuraciones. ¡Es una maravilla!

¿Cómo funciona? Como muestra la imagen del ejemplo todas las cajas flotantes de los elementos disponen de un icono con un triángulo apuntando hacia abajo, haciendo clic sobre él se abrirá una ventana para que guardes ese contenido como una plantilla de usuario. Solamente debes introducir un nombre relacionado con el contenido para que te sea fácil localizarla para su posterior uso y listo.

Cuando crees una nueva página post o landing seguirás teniendo disponible la plantilla de usuario que guardaste anteriormente con el nombre de "Aprovecha hoy" para re-utilizarla donde quieras.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja contenedora con todo lo que tenga dentro.

Plantillas de contenido

Column Layout - Diseño de columnas

thrive content builder 2

Si algo sé con certeza y creo que tu también lo sabes, es que crear columnas es una odisea y que queden bien otro tanto, pues no te preocupes más, Thrive Content Builder te ayuda a crear columnas de un modo súper fácil solamente arrastrando y soltando fiel a la filosofía Drag and Drop.

¿Cómo funciona? Primero debes hacer clic en el elemento Column Layout (Diseño de columnas) en ese mismo instante se desplegará un menú con diferentes diseños de columnas que puedes utilizar, ahora selecciona 1/3 - 2/3 como en la imagen de ejemplo este Layout o Diseño tiene una columna a la izquierda más pequeña y a la derecha más grande.

Luego, una vez seleccionada, tienes que arrastrarla hasta la posición deseada; al depositarla se marcará una caja de puntos con dos divisiones en su interior y dos cajas más pequeñas punteadas denominadas Column 1 y Column 2, dentro de cada caja puedes poner texto, imágenes, iconos, vídeos o lo que se te ocurra dentro del catálogo de elementos disponibles que posée Thrive Content Builder.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja contenedora con todo lo que tenga dentro.

Diseño de columnas

Content Box - Cajas de contenido

thrive content builder 2

Content Box (Cajas de contenido) es un elemento muy práctico para presentar textos, imágenes, vídeos etc. en cajas de diferentes diseños y colores como puedes ver, los textos e imágenes de los elementos explicados hasta ahora están dentro de un Content Box con encabezado. ¿A que mola?

¿Cómo funciona? Es realmente simple debes hacer clic en el elemento Content Box en ese momento se desplegará un menú con diferentes diseños separados por categorías que son Con encabezado y Sin encabezado. Puedes ver las diferencias en la imagen de arriba, está claro que las cajas se pueden personalizar en un 100% deja volar tu imaginación.

Habrás visto un nuevo botón en el panel de configuración de la caja Content Box que se llama Event Manager (administrador de eventos), con esta opción puedes crear animaciones a las cajas, más adelante en este tutorial hablaré del Event Manager en detalle pero para mostrar un botón.  

Si haces un Clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Content Box con todo lo que tenga dentro incluso las animaciones que hayas configurado.

Cajas de contenido

Symbol Box - Cajas con símbolos

thrive content builder 2

Symbol Box (cajas con símbolos) es un elemento muy similar a Content Box, la diferencia radica en que puede mostrar iconos o números en sus cajas en dos posiciones Top (arriba) y Bottom (abajo). Además puedes mostrar textos, imágenes, vídeos etc. en cajas de diferentes diseños y colores.

¿Cómo funciona? Es muy simple debes hacer clic en el elemento Symbol Box en ese momento se desplegará un menú con 2 plantillas pre-diseñadas totalmente configurables y fusionables con otros elementos, dispones de dos opciones Caja con iconos (Icon Box) o Caja con números (Number Box) una vez elegida la opción debes arrastrar y soltar en la posición deseada, además como muestra la imagen puedes cambia el icono, borde y color.

Por último, si haces clic en la línea punteada de la caja se abrirá otro panel flotante con más opciones, por ejemplo, poner el icono arriba o abajo. 

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Symbol Box con todo lo que tenga dentro y las configuraciones.

Cajas con símbolos

Tener una web profesional con estilo único sin saber programación nunca fue tan fácil. ¡No te pierdas este mega tutorial en español!

Tweetealo a tus amigos

Social Share Buttons - Botones para compartir en redes sociales

thrive content builder 2

Social Share Buttons (botones para compartir en redes sociales) este es un elemento imprescindible; hoy por hoy las redes sociales ya forman parte de nuestras vidas y es una vía muy poderosa para promocionarte y compartir tus contenidos, es por eso que Thrive Content Builder te proporciona unos botones estéticamente muy cuidados y con acabado profesional para que puedas incluirlos en tus artículos y páginas. ¿A que están buenísimos?

¿Cómo funciona? Como todos los elementos anteriores denominados (Multi-Style Elementos) disponen siempre de un menú de opciones en este caso tenemos dos Custom Design y Default Design. Primero debes hacer clic en el elemento Social Share Buttons y se desplegará un menú elegimos la primera Custom Design, arrastras y sueltas en la posición deseada. Haciendo clic en la línea de puntos que contornea la caja se abrirá un menú flotante como muestra la imagen con opciones de configuración.

Lo primero que deberías hacer es hacer clic en el botón Social Options (opciones sociales) y elegir las redes que quieras utilizar, una vez hecho esto debes elegir el tipo de botón, en este caso dispones de tres tipos 1- Icon Only (solo iconos) 2- Icon Text (iconos con texto) y 3- Counter (iconos con contador).

Bien, ahora te queda elegir el estilo de los botones haciendo clic en el botón Style1 (desplegará un menú con los cinco estilos disponibles) en este caso dispones de 5 diferentes para cada tipo de botón como muestra la imagen de arriba.

También puedes modificar el orden en que se muestran los botones con el botón Modify Orders of Buttons (modificar el orden de los botones).

Con el botón Total Share Count (mostrar el total de compartidos) puedes mostrar la suma total de todos los botones de compartir.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Social Share Buttons con todas las configuraciones.

thrive content builder 2

Cómo configurar y usar una conexión API con Facebook

Crear una conexión API entre tu perfil de Facebook y tu página puede ser importante en ciertos escenarios.

Por ejemplo, podrías utilizar esta conexión si quieres ofrecer a los visitantes de tu sitio web la posibilidad de cargar su imagen de Facebook en el formulario de captura de testimonios de Thrive Ovation.

Otro escenario posible para usar la API de Facebook sería con Thrive Comments para permitir que las personas inicien sesión con su perfil de Facebook cuando dejan un comentario en tu sitio web.

Si configuras esta conexión, los visitantes podrán iniciar sesión en su perfil de Facebook y cargar su imagen en el testimonio que dejan en tu sitio web.

Desde que se creó este artículo hubo cambios en la forma de crear APP con la API de Facebook, los cambios fueron para mejor, porque se simplificó todo el proceso. Debajo te dejo el enlace de todo el proceso actualizado. 

En el siguiente tutorial puedes encontrar todo el proceso actualizado para utilizar la API de Facebook con Thrive Suite.

¿Cómo conseguir el AppID de Facebook? Primero que nada debes tener una cuenta de Facebook, si no la tienes puedes crearla de forma gratuita aquí www.facebook.com

Ahora que ya tienes tu cuenta de Facebook, para obtener el AppID debes iniciar sesión en esta URL developers.facebook.com/apps/ y seguir los pasos que muestra la imagen siguiente.

thrive content builder 2

¿Esto te parece difícil? No te alarmes porque no lo es, solo tienes que seguir los pasos descritos en la imagen superior por orden numérico y si te salió mal puedes eliminar la aplicación y crear otra nuevamente, no pasa nada. Por último, solo te queda copiar y pegar el App ID haciendo clic en el botón Social Options del panel flotante para poder entrar a la configuración de Facebook y pegarlo en el campo correspondiente que se llama App ID y listo. Si lo hiciste bien a la primera eres un genio ¡Enhorabuena!

thrive content builder 2

Le toca el turno a Google+, pero a diferencia de Facebook este tiene menos opciones de configuración.

  1. 1
    Primero, debes hacer clic en el botón Social Options del panel flotante, en ese momento se desplegará una ventana como muestra la imagen superior.
  2. 2
    Segundo, deberás hacer clic en la pestaña Google Share para mostrar los campos disponibles para su configuración.
  3. 3
    Tercero, aquí puedes cambiar el nombre del botón que por defecto dice Share +1 por otro, por ejemplo: Compartir +1.
  4. 4
    Cuarto, una vez que hayas completado todos los campos queda solo darle clic al botón Save (Guardar) y listo. ¿Esperabas algo más complicado?

Cómo configurar y usar una conexión API con Google

Con la API de Google puedes crear una conexión entre tu cuenta de Google y tu Thrive Dashboard (Panel de control de Thrive Suite). De esta manera, podrás importar contenido directamente desde esta red social a tu sitio web, o puedes permitir que los usuarios se conecten con su cuenta de Google cuando dejen un comentario en tu blog.

Además con la API de Google también puedes, agregar un tipo de campo personalizado para "Carga de archivos" en un formulario de contacto creado con Thrive Architect " y conectarlo a tu cuenta de Google Drive para que los archivos se almacenen en una carpeta de Google Drive. Las posibilidades son infinitas ¡Usa tu imaginación!

En el siguiente tutorial puedes encontrar todo el proceso actualizado para utilizar la API de Google paso a paso creado por los chicos de Thrive Themes.

Configuración del botón de Twitter

thrive content builder 2

Por último, vamos a Twitter que dispone de algunas configuraciones extras muy útiles para compartir tus contenidos.

  1. 1
    Primero, debes hacer clic en el botón Social Options del panel flotante, en ese momento se desplegará una ventana como muestra la imagen superior.
  2. 2
    Segundo, deberás hacer clic en la pestaña Twitter Tweet para mostrar los campos disponibles para su configuración.
  3. 3
    Tercero, en el área de texto que muestra la imagen debes escribir tu mensaje y para que no te pases del límite de 140 caracteres de Twitter un contador te irá mostrando los caracteres restantes. Esto es muy útil ya que si te pasas, al querer guardar te dará un error y no te dejará hasta que acortes el texto.
  4. 4
    Cuarto, este campo es opcional y te permite poner tu cuenta de usuario de Twitter como autor del mismo.
  5. 5
    Quinto, aquí puedes cambiar al nombre del botón por defecto, que es Tweet, por otro, por ejemplo: Tweetealo.
  6. 6
    Sexto, una vez que hayas completado todos los campos queda solo darle clic al botón Save (Guardar) y listo. ¿A qué fue fácil? 

Botones de redes sociales

Cómo configurar y usar una conexión API con Twitter

La API de Twitter permite crear una conexión entre tu cuenta de Twitter y tu Thrive Dashboard (Panel de control de Thrive Suite). De esta manera, podrás importar contenido directamente desde esta red social a tu sitio web.

Posibles usos de la API de Twitter con los productos de Thrive Suite, serían crear botones para compartir artículos, importar un testimonio desde la red social para utilizarlo con Thrive Ovation, etc.

En el siguiente tutorial puedes encontrar todo el proceso actualizado para utilizar la API de Twitter paso a paso creado por los chicos de Thrive Themes.

thrive content builder 2

Quote Share (compartir citas o frases) este elemento está genial porque puedes insertar en cualquier parte de tu contenido citas o frases relacionadas con el artículo en cuestión de segundos. Esto es útil para promocionar tus contenidos o algún producto en la red social de Twitter, las posibilidades son infinitas. Pon a trabajar tu imaginación y verás que encontrarás nuevas funcionalidades de este excelente medio para compartir dentro de tus post.

¿Cómo funciona? Es muy simple, debes hacer clic en el elemento Quote Share, en ese momento se desplegará un menú con una plantilla pre-diseñada totalmente configurable, Twitter Share 1, una vez elegida la opción debes arrastrarla y soltarla en la posición como muestra la imagen superior.

Puedes cambiar el texto por defecto del botón Click to Tweet haciendo DOBLE CLIC en este, en ese momento se abrirá un editor flotante y podrás cambiar el texto, por ejemplo: Tweetealo a tus amigos.

Por último, para insertar una frase o cita debes hacer clic en el texto de ejemplo dentro de la caja: insert your tweeteable quote/phrase here (escribe tu cita o frase tweeteable aquí) y se abrirá un editor flotante para que puedas poner el texto que creas conveniente. ¿Está muy bien, verdad?

Si haces un Clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Quote Share con todo lo que tenga dentro y sus configuraciones.

Compartir citas

Styled List - Listas con estilo

Styled List (Listas con estilo) este elemento te da la posibilidad de crear listas con estilo muy visual y atractivo poniendo un icono delante del texto, ejemplos puedes verlos en este mismo post. Es una manera de presentar una lista de ítems, productos o resaltar contenidos importantes de forma rápida y sencilla sin la necesidad de estar liándote con códigos html o shortcodes. Además tienes un abanico de seis iconos diferentes para utilizar pudiendo cambiar los colores a tu antojo. Queda muy bien, ¿no te parece?

¿Cómo funciona? Debes hacer clic en el elemento Styled List, en ese momento se desplegará un menú con 6 plantillas diferentes como muestra la imagen superior, una vez elegida la opción debes arrastrarla y soltarla en la posición deseada.

Debes hacer clic en el texto de ejemplo, en ese momento se abrirá un editor flotante para que puedas escribir el nuevo, así de simple.

Para generar una nueva línea con icono debes posicionarte encima de la última con el editor abierto y presionar la tecla Enter de tu teclado. En ese instante habrá otra línea debajo con icono para escribir sobre ella.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Styled List con todo lo que tenga dentro y sus configuraciones.

Listas con estilo

Facilidad, estilo y profesionalidad al alcance de tu mano con Thrive Content Builder. ¡Mega tutorial en español!

Tweetealo a tus amigos

Divider - Líneas divisorias

Divider (líneas divisorias) este elemento no tiene demasiada complejidad en su configuración, pero es muy útil para hacer separaciones entre textos, imágenes, vídeos, formularios, etc. 

¿Cómo funciona? Debes hacer clic en el elemento Divider, en ese momento se desplegará un menú con 4 tipos de líneas diferente que puedes utilizar como muestra la imagen superior, una ves elegido el estilo deseado debes arrastrarla y soltarla en la posición deseada.

La configuración es muy simple al tratarse de líneas solo podrás modificar los márgenes y espaciados haciendo clic en el botón Margins & Paddings aunque con los valores por defecto casi siempre va bien.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Divider con sus configuraciones.

Líneas divisorias

Testimonial - Testimonios

Testimonial (Testimonios) este elemento viene para colocar testimonios donde nos apetezca y tiene 2 modalidades; insertar el testimonio con una imagen, como muestra la imagen superior, o sin imagen.

¿Cómo funciona? Debes hacer clic en el elemento Testimonial, en ese momento se desplegará un menú con 10 plantillas diferentes dividido en dos categorías, la primera Templates With Picture con 5 estilos y la segunda Templates Without Picture con 5 estilos también. En la imagen superior puedes ver las plantillas con imagen y no puse las que no llevan imagen por que son iguales excepto porque no lleva una fotografía.

Para cambiar la imagen del testimonio debes seleccionar un estilo, arrastrarlo y soltarlo en la posición deseada. Luego hacer clic en la zona punteada de la caja, en ese momento se abrirá un panel de opciones para que puedas cambiar de imagen.

Para insertar el texto del testimonio debes hacer clic en el interior de la caja donde se encuentra el texto de ejemplo en ese instante se abrirá el editor flotante para que puedas escribir y darle formato al testimonio.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Testimonial con sus configuraciones y contenido.

Testimonios

Call to Action - Llamada a la acción

Call to Action (Llamada a la acción) este elemento te permitirá realizar llamadas a la acción. Son cajas con un encabezado y texto breve finalizando con un botón que contiene un enlace definido por ti que llevará al visitante de tu web a un formulario de suscripción, landing page o cualquier página que quieras.

¿Cómo funciona? Debes hacer Clic en el elemento Call to Action, en ese momento se desplegará un menú con 4 plantillas diferentes como muestra la imagen superior, deberás elegir una arrastrarla y soltarla en la posición deseada como se hace con la mayoría de los elementos.

Para cambiar el título y el texto que hay debajo del ejemplo, debes hacer Clic sobre ellos y se desplegará el clásico editor flotante para que puedas escribir y darle formato al texto.

Por último, queda configurar el botón que llevará al visitante a una página específica definida por ti. Para ello debes hacer Clic en el botón, en ese momento se abrirá un panel de configuración como muestra la imagen superior donde podrás insertar una URL también puedes hacer que ese enlace se abra en una página nueva y haciendo clic en el botón Event Manager, agregarle una animación. 

Si haces un Clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Call to Action con sus configuraciones y contenido.

Llamada a la acción

Guaranted Box - Caja de garantía

Guaranted Box (Caja de garantía) este elemento viene bien cuando vendemos un info-producto, por ejemplo, un curso Webminar, un libro, lo que creas que puede llevar una garantía de reembolso del dinero si el cliente no se encuentra satisfecho.

¿Como funciona? Debes hacer clic en el elemento Guaranted Box, en ese momento se desplegará un menú con 4 plantillas diferentes como muestra la imagen superior, deberás elegir una arrastrarla y soltarla en la posición deseada como se hace con la mayoría de los elementos.

Para cambiar el título y el texto que hay en el ejemplo debes hacer clic sobre ellos y se desplegará el clásico editor flotante para que puedas escribir y darle formato si quieres al texto.

Este elemento no tiene muchas configuraciones, pero si haces clic en el borde exterior de la caja punteada se abrirá un panel donde podrás cambiar los márgenes de dicho contenedor.

Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de la caja Guaranted Box con sus configuraciones y contenido.

Caja de garantía

¿Qué Theme o Plantilla debo utilizar?

El hecho de utilizar el plugin de Thrive Content Builder no quiere decir que no tengas que utilizar alguna plantilla o theme, de hecho yo utilizo en algunas webs Genesis y GeneratePress, ahora mismo en esta web estoy Theme Builder que está incluido en Thrive Suite.

Te habrás dado cuenta que si utilizas Thrive Suite que tiene incluido Theme Builder (creador de temas), podrás construir la plantilla de tus sueños super personalizada como siempre has querido y no solo una sino todas las que quieras sin repetir diseño. ¡A que mola!

Te presento a Performag Theme Premium para WordPress que está dando mucho de qué hablar si ya viste la demo, seguro que te encantó, pero hay mucho más del lado de atrás y te lo cuento todo en esta Mega Guía.

  • Ver precio y demo del Theme: Performag 
  • Ver precio y demo del Theme: Voice
  • Ver precio y demo del Theme: Squared
  • Ver precio y demo del Theme: Minus
  • Ver precio y demo del Theme: Ignition
  • Ver precio y demo del Theme: Luxe
  • Ver precio y demo del Theme: FocusBlog
  • Ver precio y demo del Theme: Rise

IMPORTANTE: Thrive Themes creo un constructor de plantillas Thrive Theme Builder, que reemplaza todas las plantillas antiguas inclusive a Performag, puedes ver más información aquí. Es por eso que no estarán más a la venta los temas viejos porque fueron reemplazados por el nuevo plugin Thrive Theme Builder (Constructor Visual de Temas) que es impresionante y es parte de Thrive Suite.

Pero si ya tenías de antes todas las plantillas antiguas, un total de 10, o solo una de ellas, podrás seguir utilizando, pero ya no tendrán más soporte por parte de Thrive Themes.

Hazte miembro ahora y podrás disfrutar de todos los plugin por un precio único, en el siguiente enlace te cuento en detalle todo lo que necesitas saber: Membresías Thrive Suite ¡Un todo en uno!

Videoteca 80 vídeos tutoriales de TCB

Final de los Multi-Style Elements

¿Qué te ha parecido hasta ahora? es una herramienta impresionante que te dará muchas satisfacciones te lo garantizo.

Este es el final de la segunda parte pero todavía falta desarrollar los Advanced Elements (Elementos avanzados) y eso lo haré en la tercera parte de esta Mega Guía que más que una guía se está convirtiendo en un manual.

Espero que esta segunda parte haya sido de tu agrado, traté de hacerlo los más ameno posible y al detalle para usuarios principiantes y no tantos, siempre se aprende algo nuevo y como el saber no ocupa lugar se viene la tercera parte que ya está lista y puedes verla en este enlace: Thrive Content Builder Parte 3: La Súper Mega Guía más completa que hayas visto

Ahora mismo, puedes descargarte el curso completo de Thrive Architect "Gratis" totalmente en español, con infografías y vídeos tutoriales muy didácticos para que exprimas a fondo esta magnífica herramienta que es Thrive Content Builder que ahora se llama Thrive Architect y que te cambiará la vida como blogger ¡Te lo aseguro!

También te invito a que eches un vistazo a la web oficial de Thrive Content Builder si te interesa comprar este impresionante plugin para WordPress.org

Thrive Architect Mega Tutorial en Español

¿Te ha sido útil este artículo?

¿Te gustaría ayudar a otras personas? Entonces lo tienes fácil, compártelo en la redes sociales.

¿Necesitas más ayuda? Visita el foro hay una comunidad siempre lista para ayudar.

He dedicado toda mi vida a la informática y soy un apasionado de las nuevas tecnologías además quiero compartir contigo todo lo que aprendí con WordPress.org - Thrive Architect y Thrive Suite

¡Esto también te puede interesar!

Échales un vistazo...

Elije una categoría
  • Todos
  • Hosting
  • Plugins WordPress
  • SEO Optimización
  • Themes WordPress
  • Thrive Apprentice
  • Thrive Architect
  • Thrive Automator
  • Thrive Comments
  • Thrive Content Builder
  • Thrive Leads
  • Thrive Quiz Builder
  • Thrive Theme Builder
¡Deja un comentario, tu aportación será muy apreciada!
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>
Success message!
Warning message!
Error message!