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

MCD Diseño Web

Por: MCD

Tiempo de lectura minutos

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

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 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. S 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?

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

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

Membresías Thrive Suite ¡Un todo en uno!