Thrive Architect - Curso Completo
Thrive Architect - Curso Completo
Thrive Architect - Curso Completo
La Guía Definitiva Actualizada de Thrive Content Builder en Español que ahora se llama Thrive Architect por
Miguel Carreras Dutra está bajo una licencia Creative Commons Reconocimiento-SinObraDerivada 4.0 Internacional
License. Creado a partir de la obra en thrivethemes.com/architect
Copyright © 2019 Miguel Ángel Carreras Dutra. Todos los derechos reservados.
Prohibida la reproducción total o parcial de este eBook, por cualquier medio, sin el permiso previo y por escrito del
autor.
Todas las marcas registradas que aparecen en este documento son propiedad de sus respectivos propietarios.
Prólogo
Quiero darte las gracias por haber descargado este eBook, el cual realicé con mucho cariño y
pasión porque realmente disfruto lo que hago.
Tu voto de confianza me animará a seguir escribiendo más guías gratuitas en mi web, como así
también nuevos cursos completos, en formato eBook.
En esta Guía Definitiva Actualizada te enseñaré la manera más rápida y fácil de crear páginas,
posts y landing pages con WordPress.org y Thrive Content Builder ahora llamado Thrive Architect
de manera profesional. Si eres entusiasta y te motiva hacer las cosas tú misma/o y a tu aire,
entonces este plugin está pensado para ti, para que dejes volar tu imaginación y saques toda esa
creatividad que llevas dentro.
Si de algo no me arrepiento es de trabajar con este plugin de la empresa Thrive Themes, llamado
Thrive Content Builder que ahora se llama Thrive Architect. Ya verás que te entusiasmará tanto
como a mí por el potencial que tiene.
Si tienes una idea y te gustaría plasmarla en un proyecto web, pero por la crisis no puedes
permitirte contratar a un especialista de trayectoria en diseño web… O si alguna vez te hicieron
una web y no quedaste contento porque ese diseñador no supo comprender bien tus
expectativas… Este eBook es para ti. Tu oportunidad de crear un blog con libertad, a tu modo y a
tu gusto. Aunque empieces con un poco de temor a lo desconocido, verás cómo siguiendo en
detalle mis pasos podrás ir ganando confianza e iras experimentando con las herramientas que te
propongo hasta conseguir que tu blog sea tu propia obra de arte.
En resumen, es por eso que creé este curso completo, el que yo veo como una Guía Definitiva
Actualizada, absolutamente detallada para que puedas diseñar la web de tus sueños en minutos,
sin necesidad de saber programación.
Creo que este manual te gustará tanto como a mí porque está pensado para que cualquiera sin
conocimientos previos pueda emprender la creación de su propio espacio virtual con gran
flexibilidad y calidad. Además cuentas en mi web con variedad de recursos gratuitos que puedes
descargar suscribiéndote (sin coste alguno).
Una parte de este material verás que está contenido en las mini-guías de mi blog, pero ya sabes
que no todo está allí: esta publicación tiene más de 200 páginas de contenido adicional
exclusivo, y además compendia toda la formación de la web en este tema, sumando más de 440
páginas de pura información con infografías detalladas paso a paso y más de 129 videos
explicativos que sólo estarán disponibles para ti por haber descargado este eBook, y que te
ayudarán a reforzar lo aprendido aquí.
Esta guía me ha llevado más tiempo del que pensaba, por las capturas de pantalla, videos y
demás. Sin embargo, creo que valió la pena el esfuerzo (varios meses de arduo trabajo) sabiendo
que a ti, que recién empiezas, te será muy útil y lo sabrás valorar. Porque está redactado en un
lenguaje ameno y comprensible por todos sin demasiados tecnicismos.
Como te explicaba anteriormente, este texto está acompañado con más de 359 infografías, más
de 57 mil palabras, 129 vídeos y así, lo que empezó siendo una guía, terminó dándole forma a
un manual completo.
Si tras leer este curso aún te quedan dudas, estaré esperándote en mi web, o en mi espacio en
redes sociales. Asimismo, me encantará que publiques allí tu experiencia y comentarios, incluso
la dirección web de tu blog para disfrutarla entre todos. La comunidad del blog crece día a día, y
ya sabes, juntos aprenderemos mejor.
Tengo una grata noticia que darte y es que Thrive Content Builder se ha renovado por completo
y ahora se llama Thrive Architect. Si ya tenias de antes TCB, te habrás enterado por la
actualización, pero si todavía no te haz decidido a comprar esta excelente herramienta, tendrás
la suerte de adquirir desde cero la nueva versión de TCB que se llama ahora Thrive Architect.
No solo fue un cambio de nombre si no que se cambió toda la estructura de menúes para hacerlo
más ágil y productivo con mayor compatibilidad para dispositivos móviles. Se acabó el problema
de no poder visualizar correctamente en un móvil o tablet, ahora podrás configurar y corregir
hasta el mínimo detalle de forma separada sin perjudicar la vista de escritorio. Esto último es algo
que mucho de nosotros esperábamos ¡Enhorabuena!
Este eBook que estas a punto de leer no está obsoleto, es más te recomiendo que lo leas de
punta a punta, porque te ayudará a entender la mecánica de este editor, de todo lo que aprendas
en este curso completo de “La Guía Definitiva Actualizada de TCB y Thrive Architect en
Español” en la nueva versión llamada Thrive Architect estará súper simplificado, verás como
los procesos que antes hacías en Thrive Content Builder eran fáciles, pero a veces un poco
limitados en algunas cosas. Ahora se ha convertido en una dulce canción donde el cielo es el
límite.
Además he agregado un apéndice desde la página 329 en adelante con las nuevas
caracteristícas de Thrive Architect, más una videoteca de 49 vídeos extras en la página 407
+ los 80 vídeos anteriores que suman en total 129 vídeos tutoriales de acceso gratuito para
que no te queden dudas de nada.
En fin, no te entretengo más. ¡Adelante! Prepárate para crear la web que siempre has soñado y
siente la satisfacción de haberlo hecho tu mism@.
miguelcarrerasdutra.com
Sígueme por aquí:
Facebook | Twitter | Linkedin | Pinterest | YouTube | Instagram | Vimeo
Tabla de contenido
Prólogo..............................................................................................................................................3
¿Qué es Thrive Content Builder?.................................................................................................18
Vídeo demostración: modificando una Landing page...............................................................26
Ejemplos de artículos, páginas y landing page creadas con Thrive Content Builder............27
¿Por qué debería tenerlo?.............................................................................................................27
¿Cuál es su precio?.......................................................................................................................28
¡Membresías Thrive! Un todo en uno...........................................................................................30
Instalación del plugin.....................................................................................................................34
¿Qué elementos podemos insertar en nuestros contenidos?..................................................39
Simple Content Elements (Elementos de contenido simple)....................................................40
Paragraph/Text Element (Párrafo/Elemento de Texto)................................................................40
WordPress Content (Contenido de WordPress)...........................................................................41
Image (Imagen).............................................................................................................................42
Button (Botón)...............................................................................................................................43
Icon (Iconos)..................................................................................................................................45
Instalación del paquete de iconos (icomoom.zip).........................................................................47
Credit Card Icons (Iconos de tarjetas de crédito).........................................................................55
Custom HTML (Html personalizado).............................................................................................56
Custom CSS (CSS personalizado)...............................................................................................58
Content Container (Contenedor de contenidos)...........................................................................60
Content Container (Contenedor de contenidos)...........................................................................62
Star Rating (Estrellas de valoración)............................................................................................64
Multi-Style Elements (Elementos de estilos múltiples)..............................................................65
Content Templates (Plantillas de contenido)................................................................................65
Column Layout (Diseño de columnas)..........................................................................................67
Diseño de columnas - crearlas – redimensionárselas y alinearlas de forma rápida y sencilla....69
Content Box (Cajas de contenido)................................................................................................71
Symbol Box (Cajas con símbolos)................................................................................................72
Social Share Buttons (Botones para compartir en redes sociales)..............................................75
Configuración del botón de Facebook.......................................................................................77
Configuración del botón de Google+.........................................................................................82
Configuración del botón de Twitter............................................................................................84
Thrive Architect nueva interface de usuario para que puedas mejorar tu productividad con
nuevas funciones.........................................................................................................................399
¿Cuáles fueron los cambios?......................................................................................................399
Elementos...................................................................................................................................400
Configuraciones solo para entradas...........................................................................................401
Configuraciones solo para landing page.....................................................................................402
No hay elementos seleccionados...............................................................................................403
Previsualización..........................................................................................................................404
Vistas adaptables........................................................................................................................404
Botón de guardado......................................................................................................................405
Deshacer y rehacer.....................................................................................................................405
Administrador de revisiones........................................................................................................406
.................................................................................................................................................406
Nuevas funciones globales.........................................................................................................407
Global Colors (Colores globales)................................................................................................407
Global Buttons (Botones globales).............................................................................................409
Templates & Symbols (Plantillas y Símbolos)............................................................................411
Recursos.......................................................................................................................................414
Tutoriales y guías en la web.......................................................................................................414
Videoteca Thrive Content Builder (Recursos)...........................................................................416
Simple Content Elements (Elementos de contenido simple)......................................................419
Paragraph Text Element (Párrafo Elemento de Texto)...........................................................419
WordPress Content (Contenidos de WordPress)....................................................................419
Image (Imagen)........................................................................................................................419
Button (Botón)..........................................................................................................................419
Icon (Icono)..............................................................................................................................419
Credit Card Icons (Iconos de tarjetas de crédito)....................................................................419
Custom HTML (Html personalizado).......................................................................................419
Custom CSS (CSS personalizado)..........................................................................................419
Content Container (Contenedor de contenidos)......................................................................419
Content Reveal (Revelador de contenidos).............................................................................419
Star Rating (Estrellas de valoración).......................................................................................419
Multi-Style Elements (Elementos de estilos múltiples)...............................................................419
Content Templates (Plantillas de contenido)...........................................................................419
¿Si compro Thrive Content Builder tendré un sistema de Tickets de ayuda o foro especializado
para resolver dudas que me puedan surgir?..............................................................................430
¿Puedo editar además de las páginas y post los encabezados, widget de la barra lateral etc. en
mi web con Thrive Content Builder?...........................................................................................430
¿Puedo utilizar Shortcodes (códigos cortos) que tenía de otro plugin con Thrive Content
Builder?.......................................................................................................................................430
¿Si utilizo Thrive Content Builder mi web cargará más lenta?...................................................431
¿Se puede utilizar Thrive Content Builder en WordPress.com?................................................431
¿Puedo editar mis viejos artículos de WordPress.org con el editor de Thrive Content Builder?
.....................................................................................................................................................431
¿Puedo crear artículos o post con Thrive Content Builder?.......................................................432
¿Thrive Content Builder puede utilizarse en instalaciones de WordPress que no estén en
inglés?.........................................................................................................................................432
¿Se puede traducir Thrive Content Builder a un idioma específico?.........................................432
¿Si no me gusta el plugin Thrive Content Builder después de comprarlo, lo puedo rechazar y
que me reembolsen el dinero?....................................................................................................433
¿Thrive Content Builder incluye la funcionalidad de crear Landing Page?................................433
¿Las licencias Single Site y Unlimited Site se pagan por única vez?........................................433
La licencia Agency se debe pagar todos los años......................................................................433
¿Thrive Content Builder se adapta a dispositivos móviles?.......................................................434
Preguntas Frecuentes sobre Thrive Architect..........................................................................435
¿Los que ya tenían TCB obtendrán la nueva actualización a Thrive Architect de forma gratuita?
.....................................................................................................................................................435
¿Qué pasará con las páginas creadas con Thrive Content Builder?.........................................435
¿Qué pasará con los demás plugins de thrivethemes?..............................................................436
¿Qué pasa si decido desinstalar Thrive Architect?....................................................................436
¿Las licencias (15 Licence Pack, 5 Licence Pack y Single Licence) se pagan por única vez?.437
¿Puedo crear artículos o post con Thrive Architect?..................................................................437
¿Thrive Architect puede utilizarse en instalaciones de WordPress que no estén en inglés?....437
¿Se puede traducir Thrive Architect a un idioma específico?....................................................438
¿Si no me gusta el plugin Thrive Architect después de comprarlo, lo puedo rechazar y que me
reembolsen el dinero?.................................................................................................................438
¿Las licencias 15 Licence Pack, 5 Licence Pack y Single Licence se pagan por única vez?...438
¿La licencia Thrive Membership se debe pagar todos los años?..............................................438
¿La licencia Agency Membership se debe pagar todos los años?............................................439
¿Se puede utilizar Thrive Content Builder en WordPress.com?................................................439
Pero afortunadamente, para eso se han creado herramientas que nos facilitan la vida a la hora
crear contenidos de forma rápida y fácil sin necesidad de saber programar en lo más mínimo. Una
de estas herramientas, es un Plugin de pago para WordPress, llamado Thrive Content Builder.
Ahora bien, me dirás, otro editor de los tantos que hay; pues no, la diferencia está en que podrás
crear y editar tus artículos, páginas y Landing page en tiempo real, ¿cómo es esto? Te lo muestro
en la siguiente imagen. Podrás editar la página como si la estuviera viendo cualquier usuario que
visita tu web, esto quiere decir que todo lo que vayas añadiendo a tu artículo lo estás viendo
como lo verían las personas que ingresan a tu sitio. ¿A qué mola?
Tal como se ve en la captura superior es como lo vería un visitante, todo en tiempo real.
Solo tienes que arrastrar y soltar los elementos de la barra lateral dentro de la página.
En resumen, lo que ves tú mientras editas es lo que ven los que visitan tu web.
Otro punto a destacar es que no hace falta guardar los cambios para ver cómo va quedando
nuestra página ya que lo que vemos cuando editamos es lo que verán nuestros visitantes así sin
más.
Tendrás siempre visible un editor flotante a la derecha de la pantalla como muestra la captura con
infinidad de elementos que puedes agregar solamente arrastrando y soltando en la posición
deseada como si de un gran puzzle se tratara.
Además de poder crear una página desde cero, dispones de plantillas pre-diseñadas en
diferentes categorías y estilos que podrás modificar a tu antojo, moviendo de aquí para allá,
cambiando colores agregando efectos de transición y muchas cosas; más el cielo es el límite. En
la siguiente captura puedes ver las diferentes plantillas de Landing page pre-diseñadas 100%
configurables hasta el mínimo detalle.
Aspecto del catálogo de plantillas disponibles para Landing Page Thrive Content Builder
También dispones de un campo, como puedes ver en la captura anterior, en el que puedes
guardar tus propias creaciones como plantillas, a efectos de utilizarlas cuando quieras en otras
páginas.
El funcionamiento de Thrive Content Builder es muy sencillo, al crear una entrada tendrás un
nuevo botón que antes no estaba que tiene un icono que dice Editar con Thrive Content Builder y
si lo miramos desde todas las entradas verás el mismo botón, pero una imagen vale más que mil
palabras.
Vista del editor de WordPress con el nuevo botón de Thrive Content Builder
Cuando vemos todas las entradas que tenemos, encontrarás el mismo botón para poder editar
cualquier artículo creado anteriormente así de simple ¿A qué mola, verdad?
Vista de todas las entradas con el nuevo botón de Thrive Content Builder
En las páginas sucede lo mismo, se agrega el nuevo botón de Edit with Thrive Content Builder, de
esta forma podrás crear Landing page o editar las que tengas hechas con anterioridad.
Vista de todas las páginas con el nuevo botón de Thrive Content Builder
Después de hacer clic en el botón, verás la entrada tal como la verían los visitantes de tu web,
con la diferencia de que dispondrás del editor de Thrive Content Builder a la derecha (como si
se tratara de un sidebar con todos los elementos disponibles para arrástralos y soltarlos dentro de
tu página).
Como ves, hasta ahora todo viene siendo sencillo. Si sigues prestando atención podrás crear tu
página, post o Landing page tan intuitivo como un juego de niños. Más adelante iré desglosando
individualmente cada elemento de este editor para ver sus funcionalidades y configuración. Pero
sigamos desde donde lo dejamos.
Entraremos a una de tus páginas, y tal como podrás apreciar en la imagen de la página siguiente,
se ve claramente el diseño y el texto de la misma. A la derecha de la pantalla, tendrás la
ubicación del editor.
Si utilizas una netbook, es posible que el editor te ocupe mucho lugar en la pantalla. Fíjate abajo
del todo, debajo de todas las opciones del editor a tu derecha, el que te señalo con la flecha azul.
Verás el logo de Content Builder y justo encima tienes la opción de “colapsar” o retraer el editor
para que se vea solo el diseño de la web. Siempre tienes la alternativa de volverlo a aparecer con
solo tocar el icono nuevamente.
Después de hacer clic en el botón verás la entrada como la verían los visitantes de tu web con la
diferencia de que tendrás el editor de Thrive Content Builder a la derecha como si se tratara de un
sidebar con todos los elementos disponibles para arrástralos y soltarlos en la página. De esta
forma crear tu página, post o Landing page será un juego de niños. Más adelante dentro de esta
guía te iré desglosando cada elemento que tiene el editor para ver sus funcionalidades y
configuración.
Ya puedes ir por un café. Hora del break, nos vemos en unos minutos.
Debes hacer clic en la imagen superior para poder ver el vídeo en Vimeo. Si tienes problema
para verlo, copia en la barra de tu navegador los siguientes enlaces:
https://vimeo.com/188880132
https://www.youtube.com/watch?v=8hjCkvgzG_E
La primera sorpresa grata que tuve es que pude eliminar más de 20 Plugins que utilizaba en mi
sitio para diferentes funcionalidades, ya que Thrive Content Builder trae de serie la mayoría de las
funciones que utilizamos a diario con otros Plugins y esto es muy bueno. No solo por reducir la
cantidad de Plugins instalados sino porque nuestro servidor compartido trabajará mucho más
ligero y evitarás que te suspendan la web por consumir demasiados recursos del servidor.
Otra ventaja es que gané en velocidad en la creación de post, páginas y landing page de forma
simple y rápida solo arrastrando y soltando. Te gustó, ¿verdad? El editor de serie que trae
WordPress suele ser un poco pesado y se demora en cargar, pero el de Thrive Content Builder es
muy rápido a la hora de crear, grabar y hacer previos ganando en productividad.
Crear columnas, tablas, botones, testimonios, mapas, grillas, llamadas a la acción etc. nunca fue
tan fácil. Ya sabes que hacer columnas o tablas con el editor de WordPress es bastante lioso y ni
hablar de crear formularios, pero con Thrive Content Builder esto es cantar y coser.
¿Cuál es su precio?
5 License Pack (Paquete de 5 licencias). Podrás instalar el plugin hasta un máximo de 5 web que
quieras de tu propiedad con actualizaciones ilimitadas y 1 año de soporte ilimitados en sus foros para
clientes; por unos $97que serían unos €81,75 aproximadamente (dependiendo de la cotización al
momento de la compra), pago único. Para mi, esta opción es la recomendada porque tengo varios
sitios, pero puedes ver los precios aquí. Al final de la página está la tabla de precios para comprarlo
como muestra la captura de arriba.
1 License (1 sola licencia). Si solo tienes una web y no te planteas tener otra el día de mañana
puedes optar esta opción. Tiene las mismas características, actualizaciones ilimitadas y 1 año de
soporte ilimitados en sus foros para clientes y es más económica que la anterior; $67 unos €56,47
15 License Pack (Paquete de 15 licencias). Esta es la última opción por $147 unos €123,89
aproximadamente (dependiendo de la cotización al momento de la compra), se paga una sola vez y
puedes instalar el plugin hasta en 15 sitios web diferentes siempre que sean de tu propiedad.
Creo que es un producto de excelente calidad para que cualquiera pueda diseñar web profesionales
sin conocimientos de programación, aunque si quisieras hacer personalizaciones más profundas
dentro de las plantillas puedes hacerlo.
Creo que es un producto de excelente calidad para que cualquiera pueda diseñar web profesionales
sin conocimientos de programación, aunque si quisieras hacer personalizaciones más profundas
dentro de las plantillas puedes hacerlo.
¿Sabías que puedes obtener todos los plugins de Thrive Themes y los que salgan en un futuro
haciéndote miembro? Pues sí que puedes y existen dos modalidades; una para uso personal Thrive
Membership y otra que se llama Agency Membership para diseñadores web, más abajo te explico
las diferencias.
Thrive Architect
Thrive Leads
Thrive SmartLinks Feature
Thrive Quiz Builder
Thrive Ultimatum
Thrive Ovation
Clever Widgets
Headline Optimizer
Thrive Comments
Thrive Apprentice
Thrive Optimize
Thrive University
A continuación puedes ver la tabla de precios que está dividida en dos formatos diferentes para cada
necesidad y bolsillo.
Precios por 1 año
Thrive Membership (Pago anual) Si compras esta membresía tendrás derecho a utilizar todos
los productos de Thrive Themes que estén disponibles y sigan saliendo en un futuro en 25 sitios
web de tu propiedad. El coste de esta modalidad son $19 mensuales x 12 meses y darían un
total de $228 sin IVA por un año de membresía.
Agency Membership (Pago anual) Si compras esta membresía tendrás derecho a utilizar todos
los productos de Thrive Themes que estén disponibles y sigan saliendo en un futuro en 50 sitios
web de tu propiedad y de tus clientes. El coste de esta modalidad son $49 mensuales x 12
meses darían un total de $588 sin IVA por un año de membresía.
Thrive Membership (Pago trimestral) Si compras esta membresía tendrás derecho a utilizar
todos los productos de Thrive Themes que estén disponibles y sigan saliendo en un futuro en 25
sitios web de tu propiedad. El coste de esta modalidad son $30 mensuales x 3 meses y darían
un total de $90 sin IVA por 3 meses de membresía.
Agency Membership (Pago trimestral) Si compras esta membresía tendrás derecho a utilizar
todos los productos de Thrive Themes que estén disponibles y sigan saliendo en un futuro en 50
sitios web de tu propiedad y de tus clientes. El coste de esta modalidad son $69 mensuales x 3
meses darían un total de $207 sin IVA por un año de membresía.
¡Piensa en esto!
Si compras todos los themes y plugins de forma individual tendrías que desembolsar $1.057 aprox.
por una sola licencia esto quiere decir que puedes utilizarlos en una sola web.
Pero si compras la membresía anual puedes descargar todos los themes y plugins por la módica suma
de $228 y utilizarlos en 25 sitios web. ¡Es una pasada!, ¿te lo vas a perder?
Tanto sea en el pago anual o trimestral podrás descargarte a tu ordenador todos los plugins de
Thrive Themes y podrás instalarlos en 25 sitios web de tu propiedad o en el caso de la
Membresia Agency, en 50 de tu propiedad y clientes.
Esta es una imagen de ejemplo del correo que recibirás cuando hagas la compra. Contiene los datos
de acceso para que ingreses al área de clientes para que puedas descargar el plugin que te permitirá
instalar y activar todos los productos comprados.
Ahora ya estás en la puerta del área de clientes de Thrivethemes, solo debes ingresar
tu correo y contraseña que es la misma que utilizaste cuando hiciste la compra.
Una vez iniciada la sesión lo primero que verás será tu zona de miembro como lo muestra claramente
la siguiente imagen, desde este sitio tendrás acceso al foro de soporte a la base de conocimientos y
todos los contenidos solo para clientes.
Punto 1: Clic en el enlace Donwload and install the Thrive Product manager plugin (Descargar el
plugin del Administrador de Productos Thrive) debes guardar el archivo en tu ordenador para su posterior
instalación.
Punto 2: Una vez instalado el plugin thrive-product-manager.zip debes activarlo.
Punto 3: Eso es todo, ahora podrás instalar todos los productos y activarlos desde tu misma web, pero
antes debes dirigirte al nuevo menú creado que se llama Product manage para iniciar sesión y validar los
plugins que hayas comprado en Thrivethemes.
Como te habrás dado cuenta, se simplifico mucho el método de instalación y activación de los
productos de Thrive Themes, no obstante, si te quedaron dudas tienes un vídeo paso a paso del
procedimiento que te acabo de explicar en tu zona de cliente como se muestra en la imagen superior.
Ahora puedes ver el nuevo menú creado >> Product Manager (Administrador de productos) si haces clic en
el podrás apreciar la siguiente imagen.
Ya lo tienes, solo debes ingresar tu correo y contraseña que es la misma que utilizaste cuando
compraste el plugin y podrás descargar e instalar todos los productos que hayas comprado.
Ahora bien, si tienes la membresía completa como yo, tendrás todos los plugins disponibles para instalarlos
uno por uno solamente haciendo clic en cada uno de ellos. ¡Enhorabuena! Ya hemos terminado.
Puedes obtener todos los plugins de la familia Thrive Themes a un precio increíble, visita la web oficial para
más información o en este mismo eBook aquí
En la captura de arriba puse los menúes uno al lado del otro por una cuestión de espacio, pero
cuando editemos el menú se mostrará vertical uno debajo del otro. Vamos a ir por orden desde
arriba hacia abajo, voy a describir su función, configuración y aplicación. ¡Manos a la obra!
Este elemento te permitirá insertar bloques o párrafos de texto arrastrando y soltando el icono en
la posición deseada. Una vez depositado en el lugar elegido, haciendo doble clic en la línea de
puntos, se abrirá una caja flotante como muestra la imagen superior con las opciones de
configuración de este elemento. En este caso puedes editar los colores, tamaño de letra,
márgenes e insertar enlaces a los textos muy simple e intuitivo.
Si haces un clic sobre el icono superior izquierda de la caja punteada duplicarás la misma
esto es muy útil a la hora de repetir contenidos con el mismo formato.
Este elemento es muy interesante porque podrás incluir contenidos que habitualmente insertabas
con el editor clásico de WordPress, como por ejemplo, Shortcodes (códigos cortos) de otros
plugins que tengas instalados.
Image (Imagen)
Insertar imágenes es muy fácil con este elemento solo debes arrastrar el menú Image a la
posición deseada y hacer clic en el botón Add Media, en ese momento se abrirá el gestor de
medios clásico de WordPress y podrás seleccionar cualquier imagen para insertarla en el
contenido.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
la imagen manteniendo todos los ajustes que hayas hecho a la misma.
Button (Botón)
Botones muy útiles cuando queremos enlazar otros contenidos o para llamadas a la acción.
Dispones de seis estilos diferentes que se pueden configurar al 100% en el tamaño, colores,
fonts, márgenes, sombras, iconos... es realmente una maravilla.
Paso 3: Debes hacer clic sobre el botón de ejemplo para que se abra el editor flotante.
Paso 4: En el botón de dice Link Settings (esta resaltado en amarillo) puedes cambiar el
texto y agregar un enlace o vinculo a tu nuevo botón.
Paso 5: Aquí puedes ver a modo de ejemplo los seis diferentes estilos disponibles.
Ten en cuenta que colocar estos botones sin Thrive Content Builder sería muy complicado y
para hacerlo de forma manual tendrías que recurrir a la instalación de otro plugin del repositorio
de WordPress.org. Los hay muchos, pero estaríamos sobrecargando más nuestro servidor
consumiendo demasiados recursos y ralentizando nuestra web, la ventaja de Thrive Content
Builder es que los trae ya integrados todo en un solo paquete...
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
los botones todas las veces que quieras manteniendo su configuración, es ideal para no tener que
personalizarlos nuevamente.
Icon (Iconos)
botón que dice Add Icon (Añadir icono), debes hacer clic en él.
Paso 4: Una vez elegido el icono debes hacer clic en el botón Save (Guardar).
Paso 5: Luego puedes hacer algunos ajustes al icono como por ejemplo aumentar o
Los iconos son una herramienta visual muy potente para diseñar una web. Son livianos, casi no
pesan, esto mejora la carga de nuestra web y eso a Google le gusta mucho. Thrive Content
Builder te ofrece un paquete de 490 iconos en diferentes categorías para que puedas insertarlos
en tus contenidos y fusionarlos con botones, cajas en grillas, etc. El cielo es el límite...
Lo que más me gusta es lo fácil que es utilizarlos dentro de nuestros contenidos; solamente
arrastrar, soltar y elegir el icono que nos guste. Olvídate de tener que poner códigos por todos
lados para ver un icono en tus artículos, Thrive Content Builder te lo pone muy fácil...
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
los iconos todas las veces que quieras manteniendo su personalización.
Para que funcionen los iconos de Thrive Content Builder hay que descargarlo e instalarlo en el
Manage Icons. Primero debes entrar al menú de Thrive Dashboard como muestra la captura
inferior.
Paso 1: Debes hacer clic en el menú Thrive Dashboard como muestra la captura
superior.
Paso 2: Luego tienes que hacer clic en el botón Manage Icons (Administrador de iconos).
Una vez dentro debes hacer clic en el enlace que dice Click here (Clic aquí) como te muestro en
la captura inferior. Este enlace te llevará a la página de descarga de los iconos.
Paso 1: Click here (Clic aquí) este enlace te llevará directamente a la web de descarga.
Por último, se abrirá otra página con el botón Download. Debes guardar el archivo icomoon.zip
en tu ordenador como muestra la captura de abajo.
Paso 1: Clic en el icono de tres líneas horizontales para que te muestre el menú
desplegable.
Paso 2: Ahora debes hacer clic en la opción Select All / Deselect para seleccionar todos
los iconos.
Paso 3: Por último, debes hacer clic en Generate Font, que te llevará al siguiente paso.
Bien, ahora ya tienes guardado en el ordenador el archivo de iconos. Deberás volver nuevamente
al Manage Icons. Primero debes entrar al menú de Thrive Dashboard y luego clic en Manage
Icons como muestra la captura de más arriba y haces clic en el botón +Upload para cargar el
archivo icomoon.zip que descargaste anteriormente como muestra la imagen inferior.
Una vez que lo encuentres, lo seleccionas y haces clic en el botón Abrir como muestra la captura
de abajo.
Espera que termine de subir selecciona el archivo icomoon.zip y finaliza haciendo clic en el
botón inferior que dice Use file como muestra la captura inferior...
Paso 1: Debes hacer clic en el archivo icomoon.zip para que quede seleccionado.
Paso 2: Luego debes hacer clic en el botón Use file (Usar archivo).
¡Enhorabuena! Un pasito más y hemos terminado, tiene que aparecer el nombre del archivo
descargado icomoon.zip atenuado como muestra la imagen de abajo. Si está todo en orden
debes hacer clic en el botón que se llama Save and Generate Icons. Una vez guardado y
generado se mostraran debajo los 490 iconos gratuitos para que los utilices en tus contenidos
desde el editor de Thrive Content Builder con el elemento Icon como expliqué anteriormente...
Paso 1: Aquí tiene que aparecer escrito y atenuado el nombre del archivo icomoon.zip.
Paso 2: Para finalizar debes hacer clic en el botón Save Generate Icons y verás debajo
los 490 iconos disponibles, como puedes ver en la siguiente captura.
El elemento Credit Card Icons (iconos de tarjetas de crédito) es muy útil si vendes algún
producto en tu web, los iconos tienen un acabado perfecto y se muestran de forma lineal uno al
lado del otro como se puede apreciar en la imagen superior.
Dispones de cinco métodos de pago y puedes seleccionar las que quieras marcando las casillas
correspondiente. Este elemento es muy fácil de usar y configurar.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
las tarjetas todas las veces que quieras manteniendo sus propiedades.
Uno de mis Elementos favoritos es </> Custom HTML. Te preguntarás para qué sirve, pues bien,
en alguna oportunidad te verás en la necesidad de insertar tu propio código HTML como, por
ejemplo, insertar un footer personalizado como tengo en mi web y como se muestra en la imagen.
También te sería útil para embeber un vídeo, un banner, etc. Las posibilidades son infinitas y de
esta manera tu margen de acción se verá ampliado porque podrás insertar códigos donde
quieras.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido del
código que hallas escrito las veces que quieras.
¿Qué es el código o reglas CSS? Son las siglas de Cascading Style Sheets o llamadas también
Hojas de estilo en cascada. A grandes rasgos es la encargada de mostrar lo que vemos en la
web de forma ordenada y con diseño.
Las hojas de estilo o CSS tienen elementos que presentan en la pantalla los colores, fondos,
tipografía, márgenes, bordes, sombras etc. Permitiendo obtener resultados visuales muy
llamativos y profesionales, pudiendo siempre ser modificados por el desarrollador o diseñador
web.
Paso 1: En este caso no tienes que arrastrar el elemento solo debes hacer clic sobre el
para que se abra una ventana y puedas poner código CSS.
Paso 2: En el espacio en blanco de la ventana puedes escribir todo el código CSS que
necesites.
Paso 3: Por último, debes hacer clic en el botón Save (Guardar) para que se apliquen los
nuevos cambios.
Paso 4: Puedes aplicar las nuevas Class o Clases creadas donde quieras, en un texto por
ejemplo. Siempre tendrás un campo habilitado en el editor flotante para poner el nombre
de la nueva clase creada como muestra la imagen superior.
En la mayoría de los elementos habrá un campo en blanco para que puedas aplicar un Custom
class (Clase personalizada) como muestra la imagen.
Primero debes poner las nuevas reglas de CSS en la ventana de texto, en este ejemplo, la nueva
clase se llama .sin_sombra (con el punto adelante). Lo que hace es quitar la sombra a un texto
determinado text-shadow: none !important; y quitar la sombra a una caja determinada box-
shadow: none !important; por último, la tipografía más gruesa font-weight: 400 !important;
Luego te quedaría aplicar la clase en cualquier elemento que tenga un campo en blanco que diga
Custom class como se ve en la captura de arriba, pero ahora iría así sin_sombra (sin el punto
adelante). Si eres muy friki y detallista esto es para ti.
La ventaja que tiene Thrive Content Builder es que te permite hacer modificaciones del CSS de
forma rápida, sencilla y en tiempo real ya que al aplicar las nuevas reglas CSS veremos los
cambios de forma inmediata. ¡Es una maravilla!
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 las veces que quieras.
Este elemento es realmente interesante porque te permitirá, como su nombre lo indica, revelar
contenidos cuando el navegante de tu sitio llegue a la página donde está incrustado el contenido
oculto.
¿Cómo funciona? Pues bien, su configuración es realmente muy simple y te permitirá mostrar un
texto oculto, una imagen o lo que quieras además de la posibilidad de re-direccionar a una URL
especifica de forma automática dentro de tu web como muestra la imagen superior.
Puedes asignar un tiempo, por ejemplo, como muestra la imagen de 5 segundos. Esto quiere
decir que pasado ese tiempo el navegante verá el texto oculto al llegar al área donde está
incrustado el mismo.
Este elemento es muy útil para llevar al usuario a una página determinada o para suscribirse y
descargar un obsequio como en el ejemplo de la imagen. También podrías mostrar una frase
célebre en determinada parte del artículo o desplegar un vídeo o lo que se te ocurra, las
posibilidades de combinar con otros elementos son infinitas. ¡Deja volar tu imaginación!
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 las veces que quieras.
Hemos llegado al último elemento, Star Rating (Estrellas de valoración) de los llamados Simple
Content Elements (Elementos de contenido simple) y en esta ocasión se trata de colocar
estrellas de valoración en los contenidos de páginas, posts o landing pages.
¿Cómo funciona? Es realmente sencillo, solo basta con arrastrar el elemento Star Ratings a la
posición deseada y configurar la cantidad de estrellas a mostrar y la valoración de la misma.
¿Para qué sirve? Bueno los usos que puedes darles son muy variados. Puedes valorar una
receta de cocina, cuantas más estrellas, más compleja será la comida, también podrías poner un
listado de artículos más leídos y darle una valoración con las estrellas, etc. Como veis en la
imagen, no tiene grandes dificultades a la hora de configurarlo.
Seguimos con esta guía creando 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 ThriveThemes.
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.
Paso 1: Todas las cajas flotantes de configuración tienen un icono que permite guardar
una plantilla de usuario de cualquier contenido creado con los elementos del editor.
Paso 1-2: Cuando haces clic en un icono con forma de triángulo apuntando hacia
abajo, podrás guardar esa caja de contenidos con todo lo que tenga adentro y sus
configuraciones.
Paso 2: Cuando hagas clic en el icono, te saldrá una ventana como se ve en la imagen
superior, donde podrás poner un nombre a tu nueva plantilla de usuario. En el caso del Ej.
se llamará Aprovecha hoy, por último, debes hacer clic en el botón Save (Guardar).
Paso 4: Aquí puedes ver la plantilla de usuario “Aprovecha hoy” armada con todo su
contenido y la puedes reutilizar las veces que quieras en otras páginas y post.
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.
Si algo se con certeza y creo que tú 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
marcara 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
posee Thrive Content Builder.
Paso 1: Debes hacer clic en el elemento Column Layout (Diseño de columnas) para
desplegar el menú de opciones.
Paso 2: En la imagen superior puedes ver el menú con todos los formatos de columnas
disponibles.
Paso 3: Ahora selecciona el diseño de columna, en este caso elije una columna pequeña
1/3 y otra más grande 2/3.
Paso 5: Debes hacer clic en el borde de puntos de la caja, en ese momento se abrirá el
editor flotante para poner los textos en cada columna.
Paso 6: También puedes colocar una imagen de un lado y texto del otro o cualquier otro
elemento disponible, el ¡Cielo es el límite!
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.
Como la gente de Thrivethemes no se duerme siempre están mejorando todos sus productos y en
el caso puntual de Thrive Content Builder, se ha añadido una mejora sustancial en la creación de
columnas, para que la creación de las mismas sea aún más fácil y rápido.
Cabe aclarar que el método anterior como este que te muestro ahora es perfectamente válidos,
puedes optar por usar uno u otro para crear columnas.
Punto 1: Como puedes apreciar en la imagen superior, esta columna se creó arrastrando y
soltando párrafos uno encima de otro de esta forma se crean más rápido.
Punto 2: Aquí puedes observar como alinear contenidos de las columnas y es súper fácil. En el
caso del ejemplo las imágenes están alineadas en el medio, pero también puedes alinearlas en la
parte superior e inferior con un solo clic.
Punto 3: Este método el redimensionado de columnas es más preciso que nunca, porque puedes
arrastrar las barras verticales hacia la derecha o izquierda para cambiar el tamaño de las mismas.
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 qué
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.
Paso 2: Dispones de diseños With Headline (Con encabezado) en total tres estilos
diferentes.
Paso 3: También dispones de diseños Without Headline (Sin encabezado) en total tres
estilos diferentes.
Paso 5: Si haces clic en la caja azul del ejemplo se abrirá en panel de configuración con
opciones extras.
Pasó 5-1: Dispones de Event Manager (administrador de eventos) donde podrás agregar
animaciones a las cajas.
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.
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.
Paso 1: Debes hacer clic en el elemento Symbol Box (caja con símbolo) para ver las
opciones disponibles.
Paso 2: Puedes elegir Icon Box (caja con icono) o también Number Box (caja con
número).
Paso 3: Para cambiar de icono debes hacer clic en el botón Change Icon (cambiar icono).
Paso 5: En la imagen superior puedes ver la caja pero esta vez con número.
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.
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.
Paso 1: Debes hacer clic en el botón Social Share Buttons para que se despliegue el
menú de opciones.
Paso 2: Elige Custom Design (Diseño personalizado) ya que Default Design (Diseño por
defecto) son los tradicionales de siempre.
Paso 3: Puedes elegir las redes sociales que más te interesen haciendo clic en las casillas
correspondientes.
Paso 4: Aquí debes elegir el tipo de botón en la imagen superior puedes ver los diferentes
estilos disponibles.
Paso 5: Elige el estilo: Icon Only (Solo icono), Icon + Text (Icono y Texto), Counter
(Icono y contador).
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.
Paso 1: Debes hacer clic en el botón Social Options (Opciones sociales) para configurar
las redes.
Paso 2: Clic en Facebook Share.
Paso 3: Para el campo AppID debes tener una cuenta de Facebook y luego ingresar a
esta URL https://developers.facebook.com/apps/ más abajo te muestro como conseguir
el AppID.
Paso 4: Aquí puedes cambiar el nombre del botón por defecto es Share podrías poner
Compartir.
Paso 5: Aquí puedes elegir la forma de mostrar tus post, elige Feed Dialog o Share
Dialog, te recomiendo Feed Dialog.
Paso 6: Esta área de texto sirve para que puedas poner una descripción personalizada.
Paso 7: Puedes poner una imagen personalizada para que se muestre junto a tu post.
Paso 8: Debes hacer clic en Save (Guardar) eso es todo.
¿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 https://developers.facebook.com/apps/ y seguir los pasos que muestra la imagen siguiente.
¿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!
Le toca el turno a Google+, pero a diferencia de Facebook este tiene menos opciones de
configuración.
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- Segundo, deberás hacer clic en la pestaña Google Share para mostrar los campos
disponibles para su configuración.
3- Tercero, aquí puedes cambiar el nombre del botón que por defecto dice Share +1 por
otro, por ejemplo: Compartir +1.
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?
Por último, vamos a Twitter que dispone de algunas configuraciones extras muy útiles para
compartir tus contenidos.
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- Segundo, deberás hacer clic en la pestaña Twitter Tweet para mostrar los campos
disponibles para su configuración.
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.
5- Quinto, aquí puedes cambiar al nombre del botón por defecto, que es Tweet, por otro,
por ejemplo: Tweetealo.
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?
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?
Paso 1: Debes hacer clic en el elemento Quote Share (compartir citas) en ese momento
se desplegará un menú hacia abajo.
Paso 2: Arrastra y suelta la opción Twitter Share 1 en la posición deseada.
Paso 3: Si haces clic en el borde punteado de la caja se abrirá un panel de configuración
para poner el nombre de usuario de tu Twitter.
Paso 4: Si haces doble clic sobre el texto Click to Tweet se abrirá el editor flotante para
que puedas personalizar el texto por defecto.
Paso 5: Ahora para cambiar el texto del interior del interior de la caja debes hacer clic
sobre el texto de ejemplo, en ese momento se abrirá un editor flotante para que pongas la
cita o frase que quieras mostrar.
Paso 6: Aquí puedes ver el resultado final con los textos editados.
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.
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.
Paso 1: Debes hacer clic en el elemento Styled List (listas con estilo) en ese momento se
desplegará un menú con diferentes plantillas predefinidas.
Paso 2: Elige el estilo con el icono que más te guste, arrástralo y suéltalo en la posición
deseada.
Paso 3: En ese instante aparecerá una caja de puntos con dos líneas con textos de
ejemplo.
Paso 4: Puedes observar en la imagen superior los diferentes estilos disponibles.
Paso 5: Para cambiar el texto del ejemplo solo debes hacer clic en el texto que está
escrito, en ese instante se abrirá el editor flotante para que puedas darle formato a lo que
escribas.
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.
¿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
vez 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.
Paso 1: Haz clic en el elemento Divider (líneas divisorias) en ese momento se desplegará
un menú con diferentes plantillas predefinidas.
Paso 2: Arrastra y suelta en la posición deseada cualquiera de los diferentes estilos
predefinidos.
Paso 3: En la imagen superior puedes apreciar los diferentes estilos de las líneas.
Paso 4: Si haces clic sobre la caja punteada que contiene la línea se abrirá un panel
flotante de configuración.
Paso 5: Al hacer clic el botón Margins & Paddings puedes cambiar todos los márgenes y
espaciados si fuera necesario.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
la caja Divider con sus configuraciones.
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 porque
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.
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...
Paso 1: Debes hacer clic en el elemento Call to Action (llamada a la acción) en ese
momento se desplegará un menú con diferentes plantillas prediseñadas.
Paso 2: Dispones de cuatro estilos diferentes de llamadas a la acción, solo debes
arrastrarla y soltarla en la posición deseada.
Paso 3: Para cambiar el título y el texto interior debes hacer clic sobre el texto del ejemplo
inmediatamente se abrirá el editor flotante.
Paso 4: Luego debes hacer clic en el botón para configurar el enlace que llevará al
visitante donde se encuentra un formulario de suscripción, una página específica o una
landing page las posibilidades son infinitas.
Paso 5: Al final de la imagen superior puedes observar los diferentes estilos disponibles.
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.
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.
¿Cómo 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.
Paso 1: Debes hacer clic en el elemento Guaranted Box (caja de garantía) en ese
momento se abrirá un menú con diferentes platillas prediseñadas.
Paso 2: Para modificar el título y el texto del interior, debes hacer clic sobre ellos y en ese
instante se abrirá el editor flotante, eso es todo.
Paso 3: Al final de imagen superior puedes ver ejemplos de los diferentes estilos
disponibles.
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.
Punto 1: Para agregar una sección de página solo debes arrastrar el elemento Page Section
(sección de página) en la posición deseada dentro de la página.
Punto 2: Como puedes observar en la imagen superior una sección de página puede contener un
color de fondo independiente del color principal de la página.
Punto 3: Puedes añadir una sección de página rellenándola con texturas.
Punto 4: También puedes rellenar la nueva sección con una imagen de la biblioteca de medios
de WordPress.
Punto 5: Con el botón que tiene un icono con forma de paleta de colores como se ve en la
imagen puedes cambiar el color de fondo de tu nueva sección de página.
Punto 6: Con el botón Background Pattern (fondos de texturas) puedes añadir diferentes
texturas del amplio catálogo que ofrece Thrive Content Builder a tu nueva sección de página.
Punto 7: Si haces Clic en el botón Background image (imagen de fondo) se abrirá la biblioteca
de medios de WordPress para que puedas seleccionar una imagen para aplicarla como relleno de
la nueva sección.
Punto 8: Haciendo Clic en el botón Clear Background (borrar color de fondo) el color que
tengas aplicado desaparecerá y quedara el color por defecto.
Punto 9: Así mismo si haces Clic en el botón Clear Background Pattern (borrar textura de
fondo) se eliminará cualquier textura que tuvieras aplicada.
Punto 10: Por último, si haces Clic en el botón Clear Background Image (borrar imagen de
fondo) la imagen aplicada desaparecerá y en su lugar quedará el color de fondo predeterminado.
Te habrás dado cuenta que el theme o plantilla Performag que tengo en mi sitio web es
diferente a la demo, esto es así porque yo la personalice añadiendo código CSS a la misma y así
adaptarla a mis necesidades. Además dispone de varios estilos totalmente diferentes y
predefinidos que se pueden aplicar con un solo clic, de esta forma puedes tener la misma
plantilla para diferentes sitios cambiando los estilos y si quieres personalizar más, lo puedes
hacer modificando el CSS. Esta genial. ¿No te parece?
Lo bueno de las plantilla de Thrive Themes es que son muy fáciles de configurar y personalizar a
gusto, es por eso que si no quieres liarte demasiado te las recomiendo. Son fabulosas, con
acabados profesionales, responsives (adaptables a dispositivos móviles) y con tutoriales en su
área de miembros, aunque están en inglés. Pero no te aflijas, en mi blog dispones de un tutorial
de cómo configurar la plantilla Performag en español con imágenes paso a paso, aquí te dejo el
enlace: Performag Theme Premium Parte 1: Te cuento todos sus secretos paso a paso.
Puedes utilizar cualquier plantilla o theme y también la que tienes en estos momentos si es que
no quieres gastar, pero si tienes comprar una plantilla porque no tienes ninguna o quieres darle
un aspecto más profesional a tu web, la manera más sencilla y rápida es comprar una plantilla a
la empresa Thrive Themes (creadora de Thrive Content Builder) que ya viene optimizada para
poder usar todos sus productos y no tendrás problemas de compatibilidad alguna.
Aquí te dejo los enlaces para que veas los themes con sus demos. Diseños únicos, realizados
por profesionales y adaptadas a dispositivos móviles (responsive) y compatible con todos los
productos que tiene ThriveThemes. Mi recomendación es que si vas a comprar Thrive Content
Builder y no tienes un theme o plantilla y tenías pensado comprar una, lo mejor es que sea de la
misma empresa creadora de Thrive Content Builder. Te garantizas 100% de compatibilidad con
todos sus plugins.
Te preguntarás porqué yo en mi web estuve utilizando un Child Theme de Genesis y ahora estoy
utilizando un Theme de ThriveThemes, pues la respuesta es sencilla. Antes de comprar Thrive
Content Builder y el Theme Performag había comprado el Framework de Genesis + un Child
Theme con licencia para todos mis sitios de por vida y sigo con Genesis en otras web porque me
permite agregar funciones y programarlas al detalle para proyectos muy específicos.
Es cierto que tienes que tener un poco más de conocimiento de programación para hacer cosas
que no vienen de serie, pero además es una empresa seria con excelentes productos y os
recomiendo para los que les guste jugar con el código de Genesis aprovechando al máximo todo
su potencial y es compatible 100% con Thrive Content Builder.
Pero desde que conocí a Thrive Themes todos sus productos me dejaron con la boca abierta. En
el caso de los themes o plantillas de esta firma me gustaron mucho estéticamente y quise probar
una para poder contarles a vosotros mi impresión y son todas positivas. Te las recomiendo con
los ojos cerrados.
Además, no puedo recomendarte un producto sin antes probarlo en mi propia web. Así pude
testarlo a fondo para poder brindarte un panorama más completo y hablar con fundamento de sus
pros y contras si los tuviera.
Si eres principiante o un usuario avanzado y lo que buscas es facilidad de uso, sin saber
programar y no tienes plantilla, pero quieres tener una web con un diseño único, profesional y
poder ganar dinero con ella (Google Adsense), puedes comprar Performag, te facilitará la vida.
Además el objetivo de esta guía es que cualquier persona pueda tener una web profesional sin
necesidad de conocimientos previos de html, CSS, PHP y a un coste súper bajo.
Importante: Para utilizar el theme o plantilla Performag como cualquier otra plantilla de
thrivethemes.com no es necesario tener el plugin Thrive Content Builder, cada uno puede
funcionar sin necesidad del otro. ¡Pero juntos son dinamita!
¿Cuánto cuestan? Si te digo la verdad, son muy económicos por la calidad y diseños de los
mismos. Tienes tres opciones, yo te recomendaría cualquiera de las dos primeras.
Single Site Licence para un solo sitio son $49 unos €41 aprox. con actualizaciones
ilimitadas y 1 año de soporte gratuito en sus foros de clientes y el pago es por única vez.
Unlimited Personal Licence quiere decir que puedes re-utilizar el Theme en todas las
web que quieras siempre y cuando sean de tu propiedad (no se puede utilizar en web de
tus clientes) por unos $67 alrededor de €55 aprox. con actualizaciones ilimitadas y 1 año
de soporte gratuito en sus foros de clientes y el pago es por única vez es la que yo utilizo
y te recomendaría si tienes muchas web de tu propiedad.
Thrive Themes Membership esta es la última opción y te permite utilizar todos los
Themes disponibles además de Thrive Content Builder, Thrive Landing Pages y todos los
plugins de esta empresa, pero su pago es anual y tienes que pagarlo todos los años con
las opciones anteriores el pago es por única vez. Puedes ver los precios en el siguiente
enlace: Precios Thrive MemberShip
Seguimos con esta Guía Definitiva Actualizada 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 Thrivethemes.com
¿Eres de las personas que les gusta sentir la satisfacción de hacer las cosas por uno
mismo? Entonces este plugin está pensado para ti, para que dejes volar tu imaginación y saques
al creativ@ que llevas dentro.
Paso 2: Ahora tienes que arrastrar y soltar +Custom Menu a la posición deseada.
Paso 4: Si haces clic en el icono que está en el ángulo superior izquierdo de la caja de
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja contenedora Widgets con todo lo que tenga dentro respetando todas las
configuraciones que hayas hecho.
El elemento Pricing Table (tabla de precios) te será muy útil si en tu proyecto web quieres vender
algún producto o servicio como yo hago en mi web. Puedes verlo en acción en los siguientes
enlaces.
Diseño web
Consultoría
Soporte WordPress
¿Cómo funciona? Al hacer clic en el elemento Pricing Table (tabla de precios) se desplegará un
menú con 5 plantillas predefinidas partiendo desde 1 columna hasta 5 columnas. Debes elegir
una acorde a tus necesidades arrastrarla y soltarla en la posición elegida.
Una vez que seleccionaste la cantidad de columnas a mostrar puedes hacer clic sobre la caja de
puntos que contiene las columnas para que se abra el panel de configuración lo que te
permitirá mover las columnas de un lado a otro según lo necesites. Además, podrás mostrar la
que más te interese como destacada con otro color.
Para incluir los textos puedes editar los que viene de ejemplo haciendo clic sobre ellos y si
necesitas más, solo bastará con duplicar el contenido de cada caja de texto y cambiar lo que está
escrito.
Paso 1: Debes hacer clic en el elemento Pricing Table (tabla de precios) en ese momento
se desplegará hacia abajo un menú con cinco plantillas prediseñadas.
Paso 2: Arrastra y suelta la plantilla elegida en la posición deseada.
Paso 3: Si haces clic en donde dice Remove highlighted column, podrás remover o
agregar una columna destacada.
Paso 4: También puedes mover la columna destacada hacia la izquierda o hacia la
derecha.
Paso 5: Puedes editar todos los textos haciendo clic sobre ellos, en ese momento se
abrirá el editor flotante para hacer las modificaciones.
Paso 6: Si haces clic en el botón ADD TO CART puedes añadir un enlace por ejemplo
hacia tu carro de compras o directamente hacia PayPal como pasarela de pago.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja contenedora con todas las columnas que tengas dentro respetando las configuraciones
realizadas. También podrías guardarla como una plantilla propia para su posterior uso. Solo haz
clic en el icono superior derecho con forma de cuadrado con un triángulo apuntando hacia
abajo del panel de configuración.
Luego podrías cargar esa plantilla personalizada con el elemento Content Templates explicado
en esta misma guía. Si no te acuerdas puedes verlo más arriba, haciendo clic en el siguiente
enlace: Subir hasta Content Templates
Tabbed Content (pestañas con contenido) Este elemento viene bien para mostrar diferentes tipo
de contenido agrupados en un mismo espacio, desplazándonos sobre ellos por pestañas. Puedes
mostrar los artículos más recientes en una pestaña para los más comentados y en otra para los
más leídos. Interesante, ¿verdad?
¿Cómo funciona? Este elemento tiene una configuración relativamente sencilla con opciones
interesantes, pero primero debes hacer clic en el elemento Tabbed Content (pestañas con
contenido) y elegir cómo quieres mostrarlos: en vertical u horizontal. Una vez decidido arrastras y
sueltas en la posición deseada.
Por defecto, te mostrará 3 pestañas con textos de ejemplo, pero puedes añadir todas las que
quieras. Si haces clic en la caja de puntos que contiene las pestañas, se abrirá el panel de
configuración con un botón llamado Add New Tab (añadir nueva pestaña) como muestra la
imagen superior.
Luego tienes un botón con los nombres de las pestañas creadas, si haces clic en cada uno de
ellos podrás rellenar cada una de las mismas con textos, imágenes, vídeos u otros elementos.
¡Deja volar tu imaginación!
Paso 1: Debes hacer clic en el elemento Tabbed Content (pestañas con contenido) en
ese momento se abrirá un menú vertical con dos plantillas prediseñadas.
Paso 2: Arrastra y suelta en la posición deseada, tienes dos opciones Horizontal Tabs
(pestañas horizontales) y Vertical Tabs (pestañas verticales).
Paso 3: Si haces clic en la línea punteada de la caja se abrirá el panel de configuración.
Paso 4: Si haces clic sobre los nombres de las pestañas como se ve en la imagen
superior puedes ir poniendo contenido a cada una de ellas.
Paso 5: Si quieres añadir más pestañas solo tienes que hacer clic en el botón Add New
Tab (añadir nueva pestaña).
Paso 6: Puedes editar los textos de ejemplo haciendo clic sobre ellos.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Tabbed Content con todo lo que tenga dentro incluido las configuraciones.
Featured Grid (cuadrícula de contenidos destacados) este elemento está dentro de mi lista de
favoritos, es ideal para mostrar aquellos contenidos que quieres que estén fijos y destacados con
una imagen o un icono que los acompañe. Puedes ver un ejemplo en acción en la portada de
esta misma web al final de la misma o en la imagen de arriba.
En la cuadrícula que se muestra como ejemplo dispones de un botón Add Median(para agregar
imágenes) y si eliges con iconos tendrás un botón Add Icon (para agregar iconos) desde la
galería disponibles dentro de Thrive Content Builder. Si no tienes instalada la galería de iconos
te muestro como hacerlo en la primera parte de esta guía: Instalar galería de iconos
También dispones dentro del panel de configuración tanto para imágenes como para iconos del
botón Event Manager (administrador de eventos) donde puedes agregar animaciones a los
mismos.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Featured Grid (cuadrícula de contenidos destacados) con todo lo que tenga dentro y
sus configuraciones.
Content Toggle (contenido oculto y desplegable) este es un elemento muy práctico, por ejemplo,
cuando quieres poner un lista de preguntas frecuentes o mostrar una lista de cosas y sus
propiedades de forma ordenada y fácil de navegar. Aquí debajo te dejo un ejemplo de cómo se
vería. ¿Te ha gustado verdad?
Se puede ver claramente que tiene dos partes a configurar una es el título y la otra el contenido
que estará oculto.
1 - Para cambiar el título Content Toggle Headline solo debes cliquear sobre el mismo y
se abrirá el editor flotante.
2 - Para cambiar el contenido que estará oculto Add your content here… debes hacer
clic en el icono con forma de Triángulo que está a la izquierda del título como se puede
apreciar en el ejemplo superior, en ese momento se desplegará hacía abajo el área oculta
para cambiar la frase del ejemplo Content Toggle Headline.
3 - Pero para que puedas editar esa frase debes hacer un clic fuera del rectángulo
punteado y luego si hacer clic nuevamente dentro de la frase Content Toggle Headline,
para que se abra el editor flotante y puedas editar su contenido, si no haces esta acción el
contenido oculto estará bloqueado y no lo podrás personalizar.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Content Toggle con todo su contenido y configuraciones.
Table (Tablas)
Table (tablas) si te encuentras en la necesidad de insertar una tabla para mostrar una lista de
cosas este elemento te lo pone fácil.
¿Cómo funciona? Debes hacer clic en el elemento Tables (tablas) en ese momento se
desplegará un menú con una plantilla pre-diseñada con el nombre de + Plain (tabla plana) tienes
que arrastrar y soltar en la posición deseada, en ese instante te mostrará una caja de puntos
con un botón en el medio con el nombre de Add Table (añadir tabla) si haces clic sobre él se
abrirá una ventana para que configures la cantidad de columnas y filas que quieres mostrar
como se ve en la imagen superior.
Como resultado verás una caja de puntos y en su interior una tabla pre-diseñada con textos de
ejemplo que tú puedes editar haciendo clic en los mismos.
Para editar la tabla después de crearla, debes hacer clic en el borde exterior de la caja de la
plantilla pre-diseñada entonces se abrirá otro panel de configuración diferente donde podrás
agregar, quitar, unir y dividir columnas y filas.
Puedes cambiar los colores de los encabezados de la tabla haciendo clic en los mismos
utilizando el editor flotante.
Paso 1: Debes hacer clic en el elemento Table (tabla) y en ese momento mostrará un
menú con la opción +Plain.
Paso 2: Arrastra y suelta la plantilla +Plain (plano).
Paso 3: Si haces clic en el botón Add Table (agregar tabla) se abrirá una ventana con
opciones para crear las filas y las columnas.
Paso 4: Como puedes observar en la imagen superior hay un campo disponible para poner
el número de filas hasta un máximo de 15.
Paso 5: Aquí dispones de otro campo para poner el número de columnas hasta un máximo
de 15.
Paso 6: Una vez que hayas definido las filas y columnas debes hacer clic en el botón
Save (guardar) para que se muestre la tabla.
Paso 7: Puedes observar en la imagen superior el aspecto de la tabla con textos de
ejemplo, todos son editables haciendo clic sobre ellos.
Paso 8: Si haces clic en la línea de puntos externa se abrirá otro panel de botones para
añadir o quitar filas y columnas.
Paso 9: También puedes editar los colores haciendo clic en los encabezados, entonces se
abrirá un panel de opciones varias.
Paso 10: Como puedes ver en la imagen superior en el punto 10 se encuentra un botón
con un icono, si haces clic podrás editar todos los colores.
Paso 11: Si haces clic en el icono superior izquierdo podrás duplicar la tabla terminada
con todas sus configuraciones.
Paso 12: En el punto 12 puedes ver la tabla terminada.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la Tabla con todo lo que tenga dentro y sus configuraciones.
Data Elements (elementos de información) otro elemento que forma parte de mis favoritos.
¿Para qué sirve? Bueno las aplicaciones de este elemento pueden ser muy diversas, por
ejemplo, tienes un curso en línea y cada lección tiene una barra de progreso y a medida que
avanza de lección la barra de progreso va en aumento hasta llegar al 100%
Otro uso podría ser mostrar el progreso de un nuevo libro que estemos escribiendo, incluir en
porcentajes los pasos restantes para terminar de rellenar un formulario de registro de usuarios o
de suscripciones, también para comparar productos y como digo siempre deja volar tu
imaginación, el cielo es el límite.
Aquí debajo te dejo algunos ejemplos solo verás la animación de las barras de progreso una vez
al cargar la página, para ver las barras animadas nuevamente debes presionar F5 para que
recargue nuevamente la página.
¿Cómo funciona? Debes hacer clic en el elemento Data Elements (elementos de información)
en ese momento se desplegará un menú con 3 plantillas diferentes como muestra la imagen
superior, Progress Bar (barra de progreso), Fill Counter (rellenar contador), Number Counter
(contador de números) una vez elegida la opción debes arrastrarla y soltarla en la posición
deseada.
Una vez seleccionada la plantilla pre-diseñada se verá como la vería el visitante de tu web, cabe
destacar que la animación de la barra solo se verá cuando hagas un previo de la página.
Puedes modificar todos los valores y textos a tu antojo como se muestra en la imagen superior.
Data Elements (elementos de información) en acción en el siguiente enlace: Ver demostración en
la web
Paso 3: Si haces clic en la barra de ejemplo +Progress Bar (barra de progreso) se abrirá
el panel de configuración.
Paso 4: En el punto 4 puede observar que tienes campos disponibles para poner los
porcentajes de relleno y las etiquetas.
Paso 5: Si haces clic en el círculo de ejemplo Fill Counter (rellenar contador) se abrirá el
panel de configuración.
Paso 6: En el punto 6 puedes ver que tienes disponibles una serie de campos para
completar los porcentajes, etiquetas y otros ajustes estéticos.
Paso 7: Si haces clic en la línea de puntos de la caja del ejemplo Number Counter
(contador de números) se abrirá el panel de configuración.
Paso 8: Como puedes ver en el punto 8 también dispones de campos para agregar los
valores del contador y otros ajustes estéticos.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Data Elements con todo lo que tenga dentro y sus configuraciones.
Google Map Embed (insertar mapas de Google) con este elemento es sumamente sencillo
insertar mapas de Google en tus artículos.
¿Cómo funciona? Debes arrastrar y soltar el elemento Google Map Embed en la posición
deseada en ese momento verás una caja de puntos con un botón en el centro que dice Embed
Google Map (embeber o integrar un mapa de Google).
Cuando hagas clic en el botón se abrirá una ventana para que puedas insertar el código que te
ofrece Google Maps para que puedas mostrar los mapas en tus post o páginas.
Para conseguir el código de inserción primero tienes que ingresar a la siguiente URL
http://maps.google.es/ donde podrás elegir la porción del mapa que quieres insertar en tu web.
Una vez que elegiste la zona del mapa que quieres mostrar tienes que hacer clic en el botón
compartir, te aparecerá una ventana con dos pestañas una que dice Compartir enlace y otra
que dice Insertar mapa debes hacer clic en esta última, copiar el código que se muestra
seleccionado y pegarlo en la ventana anterior como muestra la imagen superior.
Paso 1: Arrastra y suelta el elemento Google Maps Embed (insertar mapa de Google) en
la posición deseada.
Paso 2: Se mostrará una caja punteada con un botón en el centro que dice Embed
Google Maps (insertar Mapa de Google) tienes que hacer clic sobre él, en ese instante se
abrirá una ventana para insertar el código que te ofrece Google Maps para mostrar mapas
en tus post o páginas.
Paso 3: Para conseguir el código de inserción primero debes ingresar a esta url:
http://maps.google.es/ elegir la zona del mapa que quieres mostrar y hacer clic en el botón
compartir en ese momento aparecerá una ventana como se ve en la imagen, con una
pestaña que dice Insertar Mapa, debes copiar el código que se muestra seleccionándolo y
pegándolo en la ventana en blanco como se muestra en la imagen superior.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Google Map Embed con todo lo que tenga dentro y sus configuraciones.
Countdown Timer (temporizador de cuenta atrás) este elemento es realmente fantástico y las
utilidades son infinitas por ejemplo podrías utilizarlo para poner una cuenta regresiva en la venta
de un producto con un precio promocional más económico y cuando el contador llegue a cero
pagaría el precio normal. ¡Deja volar tu imaginación!
¿Cómo funciona? Debes hacer clic en el elemento Countdown Timer (temporizador de cuenta
atrás) y se desplegará un menú con dos plantillas + Countdown y + Countdown Evergreen que
ahora mismo te paso detallar el mecanismo de cada una.
+ Countdown (cuenta regresiva) el tiempo definido, por ejemplo: 2 horas es igual para
todos los usuarios que visitan la web y se descontará para todos por igual. Para que se
entienda mejor, el tiempo se descontará de forma global para todos los usuarios que
visitan la web.
Si esto fuera poco dispones de tres estilos diferentes para utilizar, Style 1, Style 2 y Style 3 lo
puedes ver en detalle en la imagen superior.
Paso 8: En Countdown Timer Evergreen la diferencia radica en que puedes poner por
ejemplo: 2 horas para cada visitante que entra en la página y se descontará el tiempo de
forma independiente a cada usuario.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Countdown Timer con todas sus configuraciones.
Responsive Video (vídeo responsivo - adaptativo) este elemento es otro de mi lista de favoritos
que te permitirá nada más y nada menos insertar vídeos en tus páginas y post de forma fácil con
acabados realmente profesionales.
Dispones de las plataformas de vídeo más conocidas como ser You Tube, Vimeo, Wistia y Self
Hosted este último te daría la posibilidad de cargar un vídeo desde tu propio Hosting cosa que no
recomiendo.
Además tienes 15 estilos o marcos diferentes para aplicarlos directamente a tus vídeos dándole
un aspecto más profesional
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Responsive Video con sus configuraciones y contenido.
¿Cómo funciona? Arrastra y suelta el elemento Table of Content a la posición deseada, en ese
momento verás una caja de puntos con un encabezado en el lado izquierdo que dice Quick
Navigation (navegación rápida) si haces clic en cualquier punto dentro de la caja de puntos se
abrirá el panel de configuración.
En el panel de configuración puedes elegir qué tipo de encabezados mostrar desde H1 hasta H6
como muestra la imagen superior, además puedes elegir si quieres mostrar los títulos en 1, 2 o 3
columnas.
Tienes que tener en cuenta que no puedes mostrar más de 3 encabezados a la vez por ejemplo
puedes mostrar H1, H2 y H3 o también H2, H3 y H4.
Una vez que hayas seleccionado los encabezados debes hacer clic en el botón Update
(actualizar) para que se muestren los títulos.
Si quieres cambiar el texto Quick Navigation (navegación rápida) por otro en tu idioma solo
debes hacer clic sobre el texto de ejemplo y en ese momento se abrirá un editor flotante para que
puedas editarlo como muestra la imagen superior.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Table of Content con sus configuraciones y contenido.
Puedes ver el elemento Table of Content (tabla de contenidos) en acción en el siguiente enlace:
Ver demostración en la web
Lead Generation (formularios para la captación de suscriptores) si tienes una web seguramente
querrás tener suscriptores para contactar con ellos y poder ofrecerles tus servicios o productos en
un futuro, además poder tener un contacto más fluido con ellos y mantenerlos actualizados de lo
que ocurre en tu blog.
Para estos menesteres dispones de este elemento que te ayudara a crear un formulario simple
para que el usuario que visita tu web pueda suscribirse solamente ingresando su nombre (sin
apellido) y su correo electrónico.
¿Cómo funciona? Debes arrastrar y soltar el elemento Lead Generation en la posición deseada
como se hace con la mayoría de los elementos.
Paso 4: Tienes que hacer clic en el botón Connect with Service (conectar con un
servicio) para enlazar con tu plataforma de envío de correos.
Paso 5: Se abrirá una ventana y debes hacer clic en el botón Create a new Connection
(crear una nueva conexión).
Paso 6: Tienes dos posibilidades de hacer una conexión por una API o por un formulario
con código html, pero como tengo instalado el Plugin Mailpoet para el envío de newsletter
voy a elegir API, porque Thrive Content Builder ya viene con la integración de Mailpoet
que te facilitará la tarea enormemente.
Paso 7: Cuando elijas API si tienes instalado el Plugin de Mailpoet te lo mostrará como
en la imagen y podrás elegir la lista de Mailing que tengas creada y asociarla a este
formulario. Puedes descargar el Plugin de Mailpoet para WordPress es esta url: (Es
gratuito) https://es.wordpress.org/plugins/wysija-newsletters/ Luego debes hacer clic en el
botón Save (guardar) para pasar a la otra ventana.
Paso 8: Ahora ya estás conectado con Mailpoet y puedes cambiar los textos en tu idioma.
Paso 9: Selecciona las casillas para que los campos sean obligatorios.
Paso 11: Aquí podrías elegir una página de confirmación o agradecimiento para enviar al
usuario una vez se haya registrado.
Paso 12: Para terminar debes hacer clic en el botón Save (guardar).
Paso 13: Para cambiar el texto del botón enviar debes hacer clic en el botón Edit
Components (editar componentes) y luego en Submit Button (botón de envío).
Lo único que necesitas es enlazar el formulario con la plataforma de envíos que vas a utilizar,
puedes ver los pasos de forma detallada en la imagen superior para el caso de utilizar Mailpoet
pero si utilizas Mailrelay (recomendado) puedes ver el proceso en el siguiente enlace: Como
Insertar el código del formulario de Mailrelay en (Lead Generation) llegado este punto quiero
profundizar un poco más sobre las formas de envíos que puedes utilizar.
¿Qué sistema debo utilizar? Mailpoet plugin interno en WordPress o Mailrelay plataforma
externa.
Mailpoet el mejor plugin gratuito para el envío de newsletter lo puedes descargar desde
esta url: Descargar plugin Mailpoet y lo instalas como cualquier otro plugin, lo activas y
configuras a gusto, en su versión gratuita puedes enviar boletines hasta 2000
suscriptores (nada mal para empezar) y en su versión Pro tiene un pago anual. Esta es
una forma simple de integrar formularios con Thrive Content Builder sin usar plataformas
externas.
Pero antes de tomar una decisión lee esto: ¿Mailpoet es una solución para mi web?
La otra opción es mi favorita puedes utilizar una plataforma de envíos externa como
Mailrelay es la que yo utilizo en mi web, esta opción te la recomiendo si manejas grandes
como pequeños volúmenes de suscriptores, no se integra de forma automática como con
Mailpoet, debes agregar el código html del formulario de forma manual pero no es
complicado en el siguiente enlace te lo cuento: Mailrelay plataforma externa para el envío
de newsletter
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
la caja Lead Generation con sus configuraciones y contenido.
También puedes guardar el formulario como plantilla para utilizarlo en cualquier otra página o post
haciendo clic en icono superior derecho del panel flotante con forma de triángulo apuntando
hacia abajo. De esta forma lo guardas con toda la configuración ya hecha para utilizar el
formulario cuando quieras y donde quieras.
Para poder enviar newsletter o boletines necesitas una herramienta que pueda crear formularios,
que administre los suscriptores, estadísticas y que pueda enviar de forma masiva grandes
volúmenes de correos a todas tus listas.
Si quieres crear tus formularios dentro de WordPress y mantener y administrar tus listas de
suscriptores dentro de tu web Mailpoet es la solución es uno de los mejores plugins de los
llamados Freemium en su versión gratuita te permite hasta 2000 suscriptores nada mal para
empezar yo lo he usado por mucho tiempo.
Ahora bien si tu lista crece a más de 2000 suscriptores tendrás que pagar por la versión pro que
tiene un pago anual aquí puedes ver los precios de su página oficial
http://www.mailpoet.com/pricing/ pero aunque tengas la versión pro y tengas más de 2000
suscriptores ¡Enhorabuena! hay otro factor que tienes que tener en cuenta a la hora de enviar
muchos correos desde tu hosting compartido.
Los hosting compartidos que usamos la mayoría de los mortales tienen ciertas limitaciones con
respecto al envío de correos, pueden variar de un hosting a otro pero lo que sí es la regla que
todos permiten una cantidad muy baja de envíos con intervalos de tiempo.
Por ejemplo, en Webempresa (es el que yo utilizo y no lo cambiaría por nada), dependiendo del
plan que contrates puedes enviar más o menos correos por hora, puedes verlo mejor en la
siguiente lista:
Suponiendo que contratas el hosting de Webempresa con el plan de 1giga puedes enviar 150
correos por hora, pero si envías 150 correos de una sola vez corres el riesgo de recargar el
servidor y que tu dirección IP caiga en las listas negras de Hotmail, Yahoo, Google etc. por envíos
masivos y la mayoría de ellos no lleguen nunca a destino. Y esto pasa en todos los hosting sean
de donde sean.
Para esto hay una solución y tienes que hacer los envíos de forma escalonada por ejemplo: 30
correos cada 15 minutos esto daría un total de 140 correos a la hora y Mailpoet está preparado
para esto porque dispone de un apartado para que puedas configurar los envíos a intervalos de
tiempo si utilizas tu propio hosting como plataforma de envío.
Ahora bien tu web es súper exitosa y tienes que hacer envíos a más de 3000 usuarios, con este
panorama la cosa se complica, pero Mailpoet también contempla esta dificultad y dispone de un
apartado para hacer envíos por terceros, esto quiere decir que tendrías que contratar una
plataforma externa para el envío por SMTP (Simple Mail Transfers Protocol / Protocolo para
transferencia simple de correo) de todos tus correos. Por ejemplo, Mandril podría ser una, antes
era gratuita ahora es de pago, pero hay muchas más de esta manera ya no usarías los recursos
de tu hosting para el envío y lo harías a través de Mandrill que es una plataforma externa para el
envío masivos de emails por SMTP.
Mailpoet dispone de un sistema muy sencillo para crear formularios y colocarlos en la web
mediante widget.
Otro dato importante es que tendrías por un lado el pago anual de Mailpoet por su versión Pro y
por otro lado el pago de una plataforma de envío por SMTP.
Conclusión: Si tienes una lista pequeña de suscriptores y quieres manejar todo desde
WordPress y te alcanza enviar 35 correos cada 15 minutos esta es tu solución (totalmente
gratis).
Una de las ventajas que dispones a la hora de trabajar con Mailrelay es que dispone de
servidores en la Unión Europea y Safe Harbor 100% (puerto seguro) ya que los datos de tus
listas quedan almacenados aquí en Europa cumpliendo la legislación actual española, cosa que
no pasa si utilizaras Mailchimp los datos de tus listas quedarían alojados en servidores de
Estados Unidos incumpliendo la legislación actual del Safe Harbor (puerto seguro), además
Mailrelay dispone de auto-respondedores y estadísticas gratis.
Mailrelay sí es "Gratis" otra ventaja importante es que está totalmente en español con mucha
documentación disponible desde su blog. Te puedes registrar gratuitamente y dispondrás de
75.000 envíos a 15.000 suscriptores, siempre y cuando lo sigas, en Twitter, Facebook y Google
+ ¡A que es una pasada! Puedes desde este enlace crear una cuenta gratis en Mailrelay.
Conclusión: Si vas con tu proyecto enserio te recomiendo a Mailrelay con los ojos cerrados es
Gratis toda su plataforma está en español cumple con la legislación española tiene un soporte
técnico de maravilla y lo digo con conocimiento de causa, además es el único que conozco que
brinda una cuenta gratis que nunca caduca con 75.000 envíos cada mes hasta 15.000
suscriptores con auto-respondedores incluidos + Estadísticas. Hace tiempo que lo utilizo y
realmente estoy muy conforme por el servicio gratuito que brindan.
Voy a suponer que ya tienes creada tu cuenta en Mailrelay, entonces te voy a mostrar con
capturas dentro de la plataforma el proceso correcto para obtener el código html del formulario
paso a paso y una vez obtenido lo copies y pegues en el elemento Lead Generation (formulario
para la captación de suscriptores) ¡Manos a la obra que esto se pone bueno!
Antes que nada es bueno tener al menos un grupo creado dentro de Mailrelay, en este
caso del ejemplo se llamara blog, puedes crear todos los grupos que quieras más adelante
y así poder segmentar los envíos, habrá artículos que pueden ser interesantes para un
cierto grupo y para otro no, esta es una buena manera de clasificar los envíos de acuerdo
a las preferencias de los distintos suscriptores.
Paso 1: Debes hacer clic en el menú lateral izquierdo donde dice Grupo de
suscriptores en ese instante verás una pantalla como muestra la imagen superior con un
botón que dice Crear, tienes que cliquear en él.
Paso 1: Ahora para crear tu grupo debes asignarle un nombre en este caso será Blog.
Paso 2: Aquí puedes escribir una descripción para saber de qué se trata este nuevo grupo.
Paso 3: Luego tienes que marcar la casilla Activar y Visible esto es para que el grupo
este dado de alta y sea accesible dentro de Mailrelay.
Paso 4: Por último, para terminar de crear el grupo debes hacer clic en el botón Salvar.
Paso 1: Ahora si vamos a crear un formulario y debes hacer clic en el menú lateral
izquierdo donde dice Formulario de suscripción >> Formularios personalizados.
Paso 2: Debes cliquear en el botón Crear en ese momento se abrirá una nueva sección
como muestra la siguiente captura.
Paso1: En este apartado deberás introducir un nombre al formulario que en este caso será
Formulario Suscripción MCD.
Paso 2: En Tipo de campo de grupo debes seleccionar Oculto para que no se vea en el
formulario.
Paso 4: Al principio los campos que están ahora a la derecha estarán en la columna de la
izquierda, deberás arrastrar y soltar el campo Nombre, Email, Grupos a la columna de la
derecha tiene que quedar como muestra imagen superior.
Paso 5: Como este es un formulario personalizado y para que no se muestren las páginas
por defecto de Mailrelay que son muy sosas tu puedes crear tus propias páginas de éxito,
error y confirmación. Puedes crearlas como están en la captura así las tengo yo en mi
web y luego pegar en cada campo la URL completa correspondiente.
Paso 6: Por último, debes hacer clic en el botón Salvar para crear el formulario.
Para que te quede más claro te dejo una captura de las páginas creadas en mi web para
que te sirvan de guía y puedas confeccionar las tuyas a tu manera.
Paso3: Debes hacer clic en el botón Ver código y verás la siguiente pantalla.
¡Enhorabuena! Ya tienes el código html a la vista, ahora debes copiar lo que esta resaltado
desde la etiqueta <form hasta donde termina </form> y luego ir al elemento Lead Generation
y debes elegir HTML Form Code (formulario en código html) y pegarlo allí.
También puedes utilizar cualquier Widget o Plugin para crear formularios de suscripción y
pegarlo donde corresponda.
En este enlace puedes ver el procedimiento, paso a paso como insertar el código html del
formulario recién creado en el elemento Lead Generation de Thrive Content Builder: Pegar
código en Lead Generation
Si eres el feliz poseedor del Theme o plantilla Performag, también puedes pegar el código en
la herramienta Thrive Opt-in en el siguiente enlace de mi web, te muestro paso a paso como
hacerlo: Pegar código en Thrive Opt-in
Para aprender más sobre E-mail Marketing visita el: Blog de Mailrelay
Si ya creaste una cuenta nueva te recomiendo que empieces con esta súper guía desde este
enlace: La guía del email marketing con Mailrelay
Paso 1: Tienes que hacer clic en el botón Connect with Service (conectar con un
servicio).
Paso 2: Se abrirá una ventana y debes hacer clic en el botón Create a new Connection
(crear una nueva conexión).
Paso 3: Ahora elige HTML Form Code (formulario de código HTML) y luego clic en el
botón Go to next step (continuar con el siguiente paso).
Paso 4: Debes pegar el código que copiaste de Mailrelay y pegarlo aquí como se ve en la
imagen superior.
Paso 5: Luego clic en Generate Fields (crear campos del formulario).
Paso 6: Aquí puedes cambiar las etiquetas: Name por Tu nombre y Email por Tu correo
por ejemplo.
Paso 7: Debes marcar los dos campos como obligatorio como se ve en la imagen superior.
Paso 8: Por último, clic en Save (guardar).
Paso 9: Ahora si haces clic nuevamente en el botón Connect with Service (conectar con
un servicio). Se mostrará una ventana de conexión establecida que puedes editar o
eliminarla eso es todo. No fue tan difícil ¿Verdad?
Hay otra forma de insertar tus formularios de Mailrelay con el elemento Lead Generation y es
utilizando las API Connections (conexiones API).
A grandes rasgos esta API de Mailrelay que está disponible en Thrive Content Builder y Thrive
Leads te hará ganar tiempo en productividad, porque no tendrás la necesidad de copiar y pegar
códigos de formularios como en el ejemplo anterior.
Esta API con una simple configuración dentro de la sección de Manage Connections
(administrador de conexiones) de Thrive Content Builder y Thrive Leads hará que se comunique
directamente con la plataforma de Mailrelay poniendo a tu disposición los grupos y formularios
que tengas creados con un solo clic. ¡Esto es fabuloso!
Cabe aclarar que los dos sistemas son viables y confiables, tanto copiar y pegar los códigos de
los formularios, como así también utilizar la API de Mailrelay.
Ahora me voy a centrar en mostrarte como como crear la Conexión API de Mailrelay en el
administrador de conexiones de Thrive Content Builder. ¡Manos a la obra!
Punto 1: Debes ingresar al escritorio de Thrive (Thrive Dashboard) haciendo Clic primero en el
menú Thrive Dashboard y luego en el sub-menú Thrive Dashboard.
Punto 3: Una vez dentro de la sección de conexiones podrás ver las que están activas, en el
caso del ejemplo esta es una captura de mi web y en ella tengo 5 conexiones disponibles y
configuradas.
Pero en tu caso seguramente si es la primera vez no tendrás ninguna, pues bien ahora para crear
una nueva conexión debes hacer clic en el botón o texto que dice Add new connection (agregar
nueva conexión), como se ve en la imagen superior. En ese instante se abrirá otro panel para
configurar como puedes observarlo en la siguiente imagen.
Punto 4: Ahora debes seleccionar la aplicación que en este caso es MailRelay, haciendo clic en
el texto – Select an app – (seleccionar una aplicación).
Punto 5: Una vez desplegado el menú con el listado de aplicaciones disponibles, debes buscar la
que se llama Mailrelay, debes seleccionarla haciendo clic sobre ella, en ese momento pasarás a
la otra etapa de configuración.
Punto 6: Ya casi terminamos, en esta ventana de configuración debes poner la API URL que es
nada más y nada menos que tu inicio de sesión en Mailrelay, este dato lo tienes que tener si ya
creaste una cuenta y si no deberás crearla primero para tener tus datos de acceso. El formato de
la API URL sería este: https://tu-nombre-de-acceso.ip-zone.com (debes reemplazar tu-
nombre-de-acceso por tus datos de inicio de sesión).
Punto 7: En la parte que dice API KEY (clave de la API) debes poner una serie de números y
letras en este formato: hyexxxyiej8xxxxxu90rirxxhjohild, este dato se encuentra en la
plataforma de Mailrelay y en la siguiente imagen te mostrare como encontrarlo.
Punto 8: Si ya tienes una cuenta con Mailrelay (te recuerdo que la puedes crear de forma
gratuita) aquí te dejo en enlace: Crear una cuenta gratuita con Mailrelay.
Debes iniciar sesión para entrar al menú de configuración como se ve en el punto 8, en ese
momento se desplegará un menú con diferentes opciones.
Punto 9: Ahora dentro del sub-menú tienes que bajar hasta donde dice Acceso de la API y
hacer clic sobre él, en ese instante entrarás al panel generador de claves API como puedes ver
en la imagen superior.
Punto 10: Una vez dentro del generador de claves API, puede que ya tengas creada una o no. Si
ya tienes una creada puedes actualizarla haciendo clic en el botón Generar nueva clave API y si
por el contrario no tienes ninguna también debes presionar el botón Generar nueva clave API.
NOTA: Debes copiar todos los números y letras a excepción del punto (.) final porque si lo haces
te dará error en Thrive Content Builder.
Punto 12: Si el proceso de creación como de actualización de la clave API (API KEY) fue exitoso
verás una ventana con el siguiente texto:
Clave API actualizada
Clave API Creada
Ahora pasaremos a Thrive Content Builder para copiar estos datos dentro del Manage
Connections (administrador de conexiones) como se ve en la siguiente imagen.
Punto 12: Esta es la parte final del proceso donde debes colocar la API URL y la API KEY que
copiaste de Mailrelay como se muestra en la imagen superior.
Punto 13: Por último, para poder conectar con la plataforma Mailrelay debes hacer clic en el
botón Connect (conectar).
Punto 14: Cuando hiciste clic en el botón Connect (conectar) en el paso anterior, deberías poder
ver una imagen como esta, diciendo que la Conexión está lista y que estás en condiciones de
enlazarlos con tus formularios opt-in.
Por el contrario, si la API URL y la API KEY están incorrectas verás una pantalla de error, si ese
fuera el caso repite el procedimiento nuevamente y fíjate de no copiar el punto (.) final de la API
KEY.
Punto 15: Si vuelves a la sección de conexiones podrás comprobar que la API de Mailrelay ya
está lista y operativa. Eso es todo la configuración ha terminado.
Punto 16: Con el icono de dos flechas apuntando hacia la derecha e izquierda, si haces clic
sobre él podrás hacer un Test a la conexión cuando quieras para tener la seguridad que todo
marcha bien.
Punto 17: Con el icono con forma de lápiz si haces clic en el puedes editar todos los parámetros
nuevamente, la API URL y la API KEY.
Punto 18: Si haces clic en el icono con forma de cubo de basura puedes eliminar completamente
la conexión, este proceso es irreversible por lo tanto si la eliminas deberás crearla nuevamente
siguiendo todos los pasos.
Post Grid (cuadrícula de artículos) otro elemento de mis favoritos que te permitirá mostrar en
forma de cuadricula por ejemplo los últimos artículos de tu web o también artículos específicos de
una o más categorías, por etiquetas, autor etc.
¿Cómo funciona? Debes arrastrar y soltar el elemento Post Grid en la posición deseada como
se hace con la mayoría de los elementos.
Luego verás un botón dentro de la caja de puntos como muestra la imagen superior que dice Add
Post Grid debes hacer clic sobre él y en ese instante se abrirá el panel de configuración
flotante donde podrás elegir el diseño de la grilla (Layout) que te permitirá elegir si quieres
mostrar una imagen, titulo, leer más o un resumen como lo muestra en detalla la captura superior.
La segunda pestaña Edit Query (editar consultas) te permitirá elegir como se harán las consultas
a la base de datos en la imagen superior lo puedes ver en detalle.
La tercera pestaña es Filter Settings (ajustes de filtros) donde podrás elegir los tipos de
contenidos que quieres incluir como ser: por categorías, etiquetas, autor, páginas o post
individuales como lo muestra la captura superior.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido
de la caja Post Grid con sus configuraciones y contenido.
Paso 9: La segunda pestaña es Edit Query (editar consulta) aquí podrás configurar al
detalle cómo se harán las consultas a la base de datos de tu WordPress.
Paso 10: Content to include (contenido que desea incluir). Puedes incluir: Post (artículo),
Page (página) y Attachment (adjunto).
Paso 11: Number of post (número de artículos), Start (empezar mostrando por el artículo
X), Order by (ordenar por fecha, título, autor, comentarios o aleatorio), Order (orden,
descendente o ascendente) y Show Items More Recent Than (mostrar artículos más
reciente, por ejemplo: desde los últimos 30 días).
Paso 12: Una vez configurado a tu gusto debes hacer clic en el botón Save (guardar).
Paso 13: La tercera pestaña es Filter Settings (ajustes de filtros) aquí podrás configurar al
detalle qué tipo de contenidos deseas incluir en la muestra.
Paso 14: Choose which content to include (elige el contenido que quieras incluir).
Puedes incluir por: Categories (categorías), Custom Taxonomies (taxonomías
personalizadas), Author (autor) e Individual Post/Page (artículos y páginas individuales
por ID).
Paso 15: Una vez configurado a tu gusto debes hacer clic en el botón Save (Guardar).
Paso 16: La cuarta pestaña es Display Settings (configuración de visualización). Aquí
podrás configurar la cantidad de columnas, Number of columns (número de columnas) si
es que elegiste el diseño horizontal y Order (orden) en cuadrícula o de serie si elegiste el
diseño horizontal.
Paso 17: Una vez configurado a tu gusto debes hacer clic en el botón Save (guardar).
Paso 18: En la imagen superior en el punto 18 puedes observar el resultado final del
Diseño en horizontal.
Paso 19: En la imagen superior en el punto 19 puedes ver el resultado del Diseño en
vertical.
Si haces un clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
la caja Post Grid con sus configuraciones y contenido.
Comments (Comentarios)
Debes tener en cuenta que si quieres utilizar este elemento debes darte de alta en Facebook o
Disqus.
Paso 11: En el primer campo que dice Disqus forum name debes poner el nombre corto de tu
foro de discusión: Por ejemplo, si tienes una dirección en este formato "xxxxxxxx.discus.com".
Las (x) sería el nombre del foro de discusión de tu cuenta de Disqus.
Con esta URL de Ej. Sería así: https://hairfreelife.discus.com el nombre corto del foro de
Disqus es "hairfreelife" debes poner esa parte.
Primero: debes crear una cuenta en Disqus aquí: Crear cuenta en Disqus
Segundo: debes registrar un nombre corto de tu foro de discusión aquí: Registrar nombre
corto
Tercero: Debes elegir la segunda opción I want to install Disqus on my site (quiero
instalar Disqus en mi sitio web) campos, como se ve en la siguiente imagen y rellenar los
campos del formulario.
Por último: debes rellenar el formulario para completar la instalación, esto es todo ya
podrás utilizar Disqus en tus post, páginas y landing pages.
El segundo campo del paso 11 lo puedes dejar en blanco o poner la URL completa Ej.
https://hairfreelife.discus.com en vez del nombre corto, hairfreelife.
Si haces un Clic sobre el icono superior izquierdo de la caja punteada duplicarás el contenido de
la caja Comments con sus configuraciones y contenido.
Una de las funciones más atractivas que trae de serie Thrive Content Builder es el Event
Manager (administrador de eventos) que es nada y nada menos el poder aplicar animaciones a
ciertos contenidos como pueden ser imágenes, textos y cajas contenedoras.
Como verás en la imagen superior, están descritos todos los pasos. Es realmente simple, este
mismo procedimiento es aplicable a textos y cajas contenedoras. Cuando aparezca el botón
Event Manager en el editor flotante quiere decir que se puede aplicar una animación a dicho
contenido y por el contrario, si no apareciera el botón, quiere decir que no se puede aplicar
animaciones al contenido actual.
Pero también puedes hacer que se muestre la animación cuando el usuario pase el puntero del
ratón por encima, para lograr esto tendrás que elegir la opción Mouseover en el Paso 7.
La otra opción que tienes disponible es Click la puedes ver en el Paso 7, esto quiere decir que la
animación se mostrara cuando el usuario cliquee sobre la imagen, texto u otro objeto donde
hallas aplicado la animación.
Una vez que tengas claro cuando mostraras la animación tienes que elegir el efecto animado que
le darás y para esto dispones de una abanico amplio de posibilidades como se muestra en el
Paso 9, de izquierda o derecha, arriba o abajo, desvanecimiento, zoom etc, al hacer clic en los
efectos puedes ver debajo un previo de cómo se vería. ¡Impresionante! ¿No te parece?
Para finalizar tienes que hacer clic en el botón Close como se muestra en el Paso 11.
Como digo siempre, una imagen vale más que mil palabras, más abajo te dejo el enlace para que
veas las animaciones funcionando desde mi web.
Puedes ver las animaciones en mi web, aquí te dejo el enlace: Ver ejemplos en acción
Si quieres ver los efectos nuevamente debes presionar F5 para recargar la página de tu
navegador
Como te habrás dado cuenta del Paso 1 al Paso 6 el procedimiento es el mismo la diferencia
está en el Paso 7 donde tendrás que elegir Clic (amplía la imagen cuando el usuario hace clic
sobre la misma) y luego en el Paso 8 debes elegir la opción Zoom Image (ampliación de
imagen).
Para finalizar haces Clic en Close (cerrar) como se muestra en el Paso 9.
El Paso 10 y Paso 11 puedes editar el evento o eliminarlo completamente ¡A que ha sido fácil!
Puedes ver las animaciones en mi web aquí te dejo el enlace: Ver ejemplos en acción
En el caso de Zoom image - Come into viewport debes presionar F5 para recargar la página de
tu navegador y poder verlo nuevamente.
Ahora vamos a configurar los Tooltip que son globos de texto que se muestran al pasar el ratón
por un objeto determinado, del Paso 1 al Paso 6 el procedimiento es el mismo la diferencia está
en el Paso 7 donde tendrás que elegir Mouseover (se muestra al pasar el ratón por encima del
objeto) y luego en el Paso 8 debes elegir la opción Tooltip (globo te texto).
Verás una ventana de configuración diferente a las anteriores pero no te agobies porque es súper
fácil, en el Paso 9 tienes un campo para rellenar con el texto que quieras mostrar, en el Paso 10
puedes elegir el color de fondo que tendrá el Tooltip Light (claro) o Dark (oscuro) y en el Paso
11 la dirección del Tooltip que puede ser Top (arriba) Bottom (abajo) Left (izquierda) Right
(derecha) etc.
En el Paso 12 puedes ver en tiempo real como se vería tu globo te texto solo tienes que pasar el
puntero del ratón por encima del texto Hover for preview.
Por último, te queda cerrar la ventana haciendo clic en el botón Close (cerrar) como indica el
Paso 14, pero también puedes editar el evento o eliminarlo completamente como se muestra en
el Paso 15 y Paso 16.
Abajo puedes ver los Tooltip (globos de texto) funcionando en diferentes direcciones y colores.
Puedes ver los Tooltip (globos de texto) funcionando en diferentes direcciones y colores en mí
web aquí te dejo el enlace: Ver ejemplos en acción
Puedes ver las animaciones en mi web aquí te dejo el enlace: Ver ejemplos en acción
Una de las funciones interesantes que tiene Thrive Content Builder es la posibilidad de generar
formularios de suscripción y poder desplegarlos en ventanas emergentes (Pop-Up), tanto en
páginas y post cuando lo necesites.
Para lograr esto tenemos a Thrive Lightboxes que te permitirá crear cajas de formularios para
utilizarlos donde quieras y cuando quieras.
En la imagen superior puedes ver los pasos a seguir para crear tu Lightbox. Como verás, es muy
sencillo y tiene un potencial tremendo para la captación de suscriptores de tu sitio web.
Tienes que tener en cuenta que debes tener previamente configurado el elemento Lead
Generation para que funcione el formulario. Si todavía no lo has hecho, no te preocupes, te
enseño a configurarlo en este enlace: Lead Generation (Formularios para la captación de
suscriptores)
Si además tienes la plantilla o Theme Performag, dispones de una herramienta llamada Thrive
Opt-In. En el siguiente enlace te muestro como funciona: Como crear un formulario para captar
suscriptores con Thrive Opt-In
Puedes ver el Thrive Lightbox en acción desde mi web aquí te dejo el enlace: Ver ejemplos en
acción
Prepárate un café que seguimos con más…
Pero si de algo estoy seguro, es que no te arrepentirás de haberla adquirido, tendrás un mundo
nuevo a tus pies que dará rienda suelta al creativo que llevas dentro y te dará la satisfacción de
crear algo por ti mism@ y eso no tiene precio.
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.
Paso 1: Para aplicar un enlace o link a un texto determinado primero debes seleccionar el texto
donde quieres aplicar el vínculo, debe quedar pintado como muestra la imagen superior.
Importante: Al seguir con el siguiente paso, puede que el texto no se muestre resaltado. No te
preocupes, aunque no se vea el color azul sobre el texto ya quedó seleccionado para seguir con
el proceso.
Paso 1: Ahora debes hacer Clic en el icono con forma de eslabón de cadena, en ese instante se
desplegará un menú con diferentes opciones de configuración.
Paso 2: Tienes tres formas de crear un Link o Enlace, puedes elegir cualquiera de los artículos o
páginas que tengas dentro de tu web o puedes poner la URL de forma manual copiando y
pegando en el campo que tiene el nombre de Search or Type URL (buscar o escribir una URL).
Paso 3: Otra opción interesante es que tienes la posibilidad de crear un enlace con un formulario
Pop-UP creado previamente con Thrive Lightboxes.
Paso 4: Además puedes decidir si al hacer Clic en el enlace, este último se abrirá en una
ventana nueva del navegador. Para lograr esto solo debes hacer Clic en la casilla como se
muestra en la imagen superior.
Paso 5: Otra opción que viene de maravillas es la posibilidad de evitar que este nuevo enlace que
creaste no sea indexado por los buscadores. Esto es útil si fuera un enlace de afiliado, porque
Google penaliza indexar enlaces de este tipo, solo debes activar la casilla eso es todo.
Paso 1: Ahora la URL manual o automática está en su sitio y le he indicado que el enlace se abra
en una ventana nueva del navegador y que no sea indexado por los motores de búsqueda.
Paso 2: Por último, queda hacer Clic en el botón Insert (insertar) para que el link quede activo.
En la siguiente imagen te muestro como quedaría.
Para que el nuevo enlace creado esté correcto deberás ver por unos segundos un cartel con el
siguiente texto LINK INSERTED (enlace insertado o creado), si esto es así quiere decir que lo
hiciste muy bien. ¡Enhorabuena!
En la imagen superior puedes ver claramente el nuevo enlace o link creado y activo. Eso es todo,
ha sido fácil. ¿Verdad?
Los enlaces o links creados previamente se pueden remover o eliminar de una forma muy simple
como se ve en la siguiente imagen.
Paso 1: Para remover el enlace o link creado previamente, debes hacer Clic sobre el texto donde
está aplicado el vínculo o seleccionarlo, para que se muestre el icono rojo con el eslabón roto.
Paso 2: Luego tienes que hacer Clic donde dice Remove (eliminar). Eso es todo.
Pero hay veces que dependiendo del theme o plantilla que utilices, este fragmento de texto no se
muestra debajo de los post en la sección blog como quisiéramos.
También puede darse el caso que la opción automática de mostrar un extracto no sea la de tu
agrado y quieras poner un texto personalizado y cortarlo donde quieras.
Si este fuera el caso, Thrive Content Builder posee en su editor flotante una opción para hacerlo
manualmente de forma sencilla, en la siguiente imagen puedes verlo claramente.
Cuando edites cualquier texto se abrirá el editor flotante que dispone de la posibilidad de agregar
un Leer más… como muestra la imagen superior la opción está simbolizada con tres puntos (…)
Primero debes hacer clic sobre el texto que quieres mostrar debajo del título del post en la vista
blog.
Tienes que tener en cuenta que hay una limitación en la cantidad de caracteres o palabras que
puedes mostrar como un fragmento, resumen o extracto y dependerá de la plantilla que utilices,
pero puedes ir probando para ver donde se trunca el texto y acortarlo si fuera necesario.
En la siguiente imagen puedes ver de forma más clara como se marca la división con una línea.
Como puedes ver el primer párrafo está por encima de la línea More… (Más…) esto quiere decir
que ese fragmento de texto será el que se mostrará como un extracto debajo del título del post,
en la vista blog.
Aquí en esta imagen puedes ver cómo quedaría. Para el ejemplo, puse la vista blog de mi web
donde yo aplico de forma personalizada los extractos a cada post.
Ahora te voy a hablar de los Margins & Paddings (márgenes y rellenos), esta opción de
configuración se encuentra en todos los elementos de Thrive Content Builder y es muy útil y
necesaria para mantener una estética coherente con el diseño de tu página web.
En la siguiente imagen puedes observar el editor flotante con la opción Margins & Paddings
desplegada.
Punto 1: Dispones de cuatro tipos de márgenes que puedes aplicar: Top (arriba), Botton (abajo),
Left (izquierda) y Right (derecha).
Por ejemplo, con el elemento Paragraph/Text Element (párrafos y elementos de texto) que es el
primero de la lista de los Simple Content Elements, al arrástralo y soltarlo en la posición
deseada, mostrará por defecto un margin botton (margen inferior) de 40px (pixel) y en la parte
superior Top: 0 y en la izquierda y derecha también 0 (cero) como puedes apreciar en la imagen.
Ahora bien, todos estos valores lo puedes modificar a tu antojo agregando solo el número en la
casilla correspondiente. Ten en cuenta que cuanto mayor sea el número, mayor será el margen.
10, 11, 12 etc. Solo tienes que poner el número sin el (px).
-10, -11, -12 etc. Estos valores corresponden a márgenes negativos que puedes aplicar en
todo momento.
Punto 2: Debajo de la columna de Margin (márgenes) dispones de un botón que dice Clear
Margin (borrar márgenes), si haces Clic sobre él, todos los valores se pondrán a cero (0), esto es
muy útil cuando de tanto probar diferentes valores, no te convence el resultado y quieres volver a
empezar.
Punto 3: Paddings (rellenos o espaciados). Como en los márgenes dispones de cuatro tipos de
Paddings que puedes aplicar Top (arriba), Botton (abajo), Left (izquierda) y Right (derecha).
¿Cuándo aplicar un Padding? Los paddings se suelen aplicar para mantener una separación de
un objeto con otro. Por ejemplo, como se ve en la imagen inferior, entre el texto y la imagen hay
una separación de 20 px y un margen entre el texto superior y el texto inferior de 40 px.
En la imagen superior puedes ver claramente a modo de ejemplo el Padding (relleno) y el Margin
(margen).
Punto 2: Si haces Clic en el nombre Paragraph (párrafo) se desplegará un menú hacia abajo,
como se ve en la imagen superior, con diez formatos diferentes que puedes aplicar.
Punto 3: Formato Address (dirección) este es el formato típico que se utiliza para en el servicio
postal en los sobres de las cartas, es útil para poner texto más comprimido con márgenes cero,
como lo puedes apreciar en la imagen inferior en el punto 2.
Punto 4: Dispones de seis tipos de Heading (títulos o encabezados) que puedes utilizar en
cualquier momento.
Punto 1: En el campo Font Size (tamaño de letra) podrás aumentar o disminuir el tamaño de la
misma, no solo en el formato párrafo, sino que también en los formatos Heading (títulos).
Punto 2: En el campo Line height (altura de línea) podrás aumentar o disminuir el espacio que
hay entre la línea superior y la inferior. Solo necesitas poner un número, por ejemplo: 30.60,
cuanto mayor sea el número, mayor será el espacio entre ambas líneas.
Punto 1: Para cambiar la tipografía tienes que hacer Clic en el botón Custom Font (personalizar
fuente) en ese momento se desplegará un menú hacia abajo con dos opciones.
En ese momento debes hacer Clic en la primera que dice Choose Web Standart Fonts (elegir
tipografías comunes para web).
Además de las tipografías incluidas puedes agregar más, pero eso lo veremos más adelante.
Punto 1: Para agregar nuevas tipografías debes hacer Clic en la segunda opción Add new
Custom Font (agregar nuevas fuentes personalizadas).
Al hacer esto se abrirá una nueva página de configuración, como muestra la siguiente imagen.
Punto 1: De forma predeterminada, Thrive Themes tiene integrado Google Fonts. Esto te
permite elegir entre más de 600 tipos de letra para el uso en tus contenidos.
Sin embargo, también puedes utilizar el botón azul IMPORT CUSTOM FONT MANAGER
(administrador de fuentes personalizadas importadas) para importar fonts a través de un servicio
llamado Font Squirrel
Punto 2: En el botón ADD CUSTOM FONT (agregar fuente personalizada) si haces Clic en el
podrás agregar las tipografías de Google Font como así también las importadas de Font Squirrel.
Punto 1: Cada vez que selecciones una fuente en la parte superior de la ventana se mostrará un
texto de ejemplo con la tipografía aplicada, de esta forma podrás ver un previo de las fuentes
antes de aplicarla.
Punto 2: Show all fonts (mostrar todas las fuentes) si seleccionas esta opción se mostrarán
todas las fuentes disponibles, incluso las recomendadas, seguras e importadas.
Punto 3: Recomended Fonts Only (mostrar solo las fuentes recomendadas) si seleccionas esta
opción solo se verán al desplegar el menú del Punto 6 las tipografías recomendadas, que suelen
ser las más utilizadas porque se visualizan mejor.
Punto 4: Web Safe fonts (mostrar solo las fuentes seguras) si seleccionas esta opción solo se
verán al desplegar el menú del Punto 6 las tipografías más seguras, se las llama seguras porque
son las que generalmente se encuentran por defecto en los sistemas operativos tanto en
Windows como en Macintosh (Mac) y que todo usuario puede tener en su ordenador, de esta
manera se garantiza la visualización de la web para que sea igual en todos los ordenadores sin
importar el tipo de sistema operativo que utilicen.
Punto 5: Imported Fonts (mostrar fuentes importadas) si seleccionas esta opción solo se
mostrarán las tipografías que hayas importado previamente de Font Squirrel.
Punto 6: Select Font (seleccionar fuente) según hayas seleccionado el tipo de fuentes a mostrar,
al hacer Clic en Select Font se desplegará un menú hacia abajo mostrando las tipografías
disponibles.
Punto 7: Class (clase) por defecto se mostrará un nombre de clase que en este caso como
muestra la imagen superior es ttfm1, ttfm2 y así sucesivamente, esto te será útil si quieres
aplicar cambios más específicos a estas tipografías dentro de tu Custom CSS, pero en principio
no lo vas a necesitar. Es bueno que sepas que existe y cuál es su función, en algún momento
querrás hacer ajustes más finos y te vendrá de maravillas.
Punto 8: Size (tamaño de la fuente) en esta sección puedes cambiar el tamaño de la fuente si así
lo quieres.
Punto 9: Line Height (altura de línea o interlineado) aquí puedes cambiar la separación que
habrá entre una línea de texto superior y la inferior, aunque en principio los valores por defecto no
te darán problemas.
Punto 10: Color (Color de la fuente) si el color por defecto no te gusta puedes cambiarlo por otro
haciendo Clic en el botón que dice (elige un color).
Punto 11: Custom CSS (CSS personalizado) si los valores por defecto no te bastan y eres muy
detallista, esta opción te vendrá de maravillas, porque en el área en blanco como muestra la
imagen superior podrás poner tus propias reglas CSS.
Punto 12: Save (Guardar) una vez que hiciste todos los ajustes debes guardar los cambios.
Punto 1: En la imagen superior puedes ver las dos fuentes instaladas (Comic Sans y
Calligraffitti).
Punto 2: Como puedes observar, por cada fuente que instales se genera un nombre CSS Class
Name (nombre de clase CSS) diferente de forma automática, no te preocupes por esto, porque
en principio no lo vas a utilizar, es solo para el manejo interno de las reglas de CSS.
Punto 3: Siempre podrás editar cualquier fuente añadida con el botón EDIT (editar) por si quieres
cambiar el color el tamaño o la fuente misma.
Punto 4: También puedes eliminar las fuentes que no utilizas con el botón DELETE (eliminar).
Punto 5: Puedes ganar en productividad duplicando las fuentes que ya tienes instaladas, porque
al duplicar se mantienen todos los ajustes aplicados anteriormente y tendrías que cambiar la
fuente actual por otra solamente.
Punto 6: Una de las opciones interesantes del administrador de fuentes es que puedes actualizar
todos tus post con la nueva tipografía haciendo clic en el botón UPDATE POST (actualizar
artículos).
Punto 1: En la imagen superior puedes ver las tipografías añadidas desde el administrador de
fuentes personalizadas (Custom Font Manager) y puedes aplicarla a los textos en cualquier
momento.
Punto 2: Para aplicar la nueva fuente a un texto solo debes seleccionarla del menú desplegable y
hacer Clic sobre ella, en ese instante se actualizará el primer párrafo disponible.
Punto 1: Para remover una fuente personalizada (Custom Font) solo debes hacer Clic en el
botón Clear custom font (limpiar fuente personalizada).
Nota: Remover un Custom Font no significa que se elimine del Administrador de Fuentes
personalizadas (Custom Font Manager) solamente se removerá del párrafo donde esté aplicada.
Si quieres eliminar completamente un Custom Font debes hacerlo desde el Custom Font
Manager.
Punto 1: En la imagen superior puedes ver claramente como quedo removida la fuente
Calligraffitti volviendo el texto a su fuente original por defecto.
Punto 2: También habrás notado que el botón cambió a su posición por defecto (Custom Font).
Punto 1: En el ejemplo de la imagen superior tenemos un Line height (altura de línea) de 50 px,
este valor deja mucho espacio entre la línea superior y la inferior. Puedes modificar el valor del
Line height por ejemplo 30px.
Punto 2: En este punto se puede ver de forma clara el Line height (altura de línea).
Punto 3: Pero si quieres volver a los valores por defecto lo más practico es utilizar el botón Clear
line height (limpiar altura de línea). Al hacer Clic en el mismo el párrafo volverá a sus valores
predeterminados como puedes ver en la siguiente imagen.
Punto 1: En la imagen superior tenemos un ejemplo con un tamaño de fuente de 25px, en este
campo podrías poner otro valor para cambiar su tamaño 15px y así ir probando diferentes
tamaños hasta llegar al adecuado.
Punto 2: Pero hay veces que de tanto probar ya ni sabemos cuál era el valor por defecto. Para
solventar este inconveniente puedes acudir al botón Clear Font size (limpiar tamaño de fuente).
Al hacer Clic en el mismo automáticamente volverá la valor anterior o al valor por defectos según
sea el caso.
Nota: Siempre puedes usar los valores preestablecidos en el menú Paragraph, pero si te vieras
en la necesidad de tener una tamaño especifico de fuente puedes hacerlo de forma manual
modificando el valor del campo Font size.
Punto 2: Como resultado al hacer Clic en el botón Clear Font size (limpiar tamaño de la fuente)
el texto vuelve a su tamaño anterior o a su valor por defecto.
Punto 1: Para cambiar el color de un texto debes hacer Clic en el icono que está en la parte
superior izquierda del editor con forma de paleta de colores.
En ese momento se abrirá un panel de colores predeterminados (Default Colors) y
personalizados (Custom Colors).
Si haces Clic en un color predeterminado (Default Colors) automáticamente el texto tomará el
color seleccionado.
Punto 2: En la imagen superior puedes ver el texto del ejemplo con un color predeterminado
(Default Colors) aplicado.
Punto 1: Como viste en la imagen anterior además de los colores predeterminados puedes
utilizar los Custom Colors (colores personalizados).
Para acceder a ellos solo debes hacer Clic en la sección Custom Color en el botón que dice
Text color (color del texto).
En ese momento se abrirá una nueva ventana con un selector para que puedas elegir el nuevo
color, lo puedes ver claramente en la siguiente imagen.
Paso 1: Para elegir un nuevo color solo debes mover el círculo con forma de anillo sobre el
degradado hasta la tonalidad elegida.
Punto 2: Mientras desplazas el círculo buscando el color, el valor RGB Hexadecimal se verá
reflejado en este campo.
Punto 3: Una vez seleccionado el color adecuado puedes guardarlo para su uso posterior,
haciendo Clic en el botón Save as Fouvorite Color (guardar como color favorito) y quedará
disponible en la parte superior de ese panel. En la siguiente imagen te lo muestro como quedan
los colores guardados.
Punto 4: Por último, para aplicar el color al texto debes hacer Clic en el botón Ok.
Punto 1: Si desplazas hacia abajo o hacia arriba la barra vertical que se muestra en el punto 1, el
espectro de colores que está a la izquierda se ampliará permitiéndote acceder a un abanico de
colores más amplio.
Punto 2: Como veíamos anteriormente al guardar el color seleccionado con el botón Save as
Favourite Color (guardar color favorito) para su uso posterior, quedan disponibles en la parte
superior del panel como se muestra en la imagen superior.
Punto 1: Para resaltar un texto o un título (Highlight) primero debes seleccionar la porción de
texto que quieres destacar como muestra la imagen superior.
Punto 1: Una vez seleccionado el texto debes hacer Clic en el icono con forma de pincel. En ese
momento se abrirá el panel de colores para que selecciones la tonalidad del resaltado.
Puedes utilizar los colores predeterminados (Default Colors) y los personalizados (Custom
Colors).
Punto 2: En la imagen superior puedes ver el resultado final del texto resaltado (Highlight) que
quedó pintado con el color seleccionado.
Punto 1: Para remover el resaltado (Highlight) del texto, primero debes seleccionar la parte
resaltada que quieres quitar como se ve claramente en la imagen superior.
Punto 2: Una vez seleccionado el texto, debes hacer Clic en el texto que tiene un icono con
forma de goma de borrar y que dice Clear Highlight (limpiar resaltado). Eso es todo.
El editor flotante de TCB dispone de varios estilos predefinidos que puedes utilizar en tus textos:
negrita, itálica, subrayado, tachado o línea en medio, lista desordenada y lista numerada.
Punto 1: El editor flotante de TCB dispone de un campo habilitado para que puedas poner el
nombre de un Custom class (clase personalizada).
Pero esta Custom class tiene que estar creada previamente en el elemento Custom CSS (CSS
personalizado). ¿Te acuerdas? Este elemento está desarrollado más arriba en este mismo
eBook. Aquí te dejo el enlace para que no pierdas tiempo buscando: Elemento Custom CSS
El siguiente es un ejemplo de una clase personalizada, esto tiene que estar en el elemento
Custom CSS:
.sombra {
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
Como te habrás dado cuenta, el nombre de la clase del ejemplo es .sombra (con el punto
adelante) y lo que hace esta Custom class es añadir una sombra al texto donde se aplique.
Ahora bien, en el campo Custom class debes poner solo el nombre de la clase. En el caso del
ejemplo sería sombra -sin el punto (.) delante- así debes ponerlo.
Resumiendo, la clase en el Custom CSS tiene que ir con el punto (.) adelante y en el editor
flotante tiene que ir sin el punto, solo el nombre. En este caso sombra.
En la siguiente imagen puedes ver la Custom class sombra en acción, los texto aparecen con
una sombra tenue aplicada.
Punto 1: El campo ID (identificación) como su nombre lo indica sirve para darle una identificación
única a una Custom class.
En el elemento Custom CSS, ¿te acuerdas? Es donde creamos las clases con sus reglas CSS o
valores para luego aplicarlas en el editor flotante utilizando solo el nombre de la clase sin el punto
adelante.
Bien, si quisieras aplicar un ID a la clase sombra dentro del elemento Custom CSS lo harías de
esta manera:
#1.sombra {
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
Como puedes observar el símbolo (#) numeral o almohadilla, seguido del número 1 es el nombre
del ID, pero puedes poner lo que quieras, para el ejemplo #1 está bien.
Nota: El ID siempre se tiene que representar con el símbolo # seguido de un nombre, en este
caso es 1 y quedaría así: #1 y pegado el nombre de la clase que se vería así: #1.sombra
En la siguiente imagen puedes ver cómo quedaría la nueva regla CSS con un ID dentro del
elemento Custom CSS.
Punto 1: En la imagen superior estás viendo el elemento Custom CSS donde se agregan las
clases personalizadas Custom class.
La primera clase .sombra no tiene ID (nombre de identificación)
La segunda clase si tiene un ID que es este #1.sombra
En la siguiente captura puedes apreciar cómo se debe poner el ID y la Custom class en el editor
flotante.
Punto 1: Este es el campo disponible donde debes poner el ID pero debes ponerlo sin el símbolo
# como se ve en la imagen superior.
Punto 2: El nombre del Custom Class como te mostré anteriormente debes ponerlo sin el punto
adelante (.) solo el nombre.
¿Alguna vez te has preguntado cómo se crean los textos animados? Me refiero a esos textos que
dan la impresión que alguien estuviera escribiendo en la web en tiempo real.
Bueno Thrive Content Builder trae de serie a TypeFocus una herramienta que te permitirá crear
textos que se escriban solos en cualquier parte de tu web.
Esta opción está disponible en el editor flotante de TCB, pero está visible solamente cuando
seleccionas una porción de texto. En las siguientes imágenes lo verás más claro.
En la imagen superior puedes observar que el botón FocusType no aparece y esto es así porque
no hay ningún texto seleccionado.
En la imagen superior puedes ver el botón TypeFocus al seleccionar una porción de texto.
Si haces Clic en el botón TypeFocus, se abrirá un nuevo panel de configuración como se ve en la
siguiente imagen.
Ahora debes hacer Clic en el botón Variations (variaciones). En ese instante se desplegará un
menú de opciones hacia abajo como se ve en la imagen inferior.
El siguiente paso es hacer Clic en el botón Add text variations (añadir variación de texto) como
se ve en el Punto 4.
Punto 1: Cuando haces Clic en el botón Add text Variations (añadir variación de texto) se
habilita un campo para agregar los textos alternativos.
Punto 2: La opción Display hight if set (mostrar el texto resaltado con un color) es un efecto
interesante, para que funcione debes elegir un color, haciendo Clic en el icono con forma de
paleta de colores que está en la parte superior izquierda del panel de opciones Punto 2.
Punto 3: Si activas la casilla Blink cursor effect (efecto de parpadeo del cursor) podrás ver un
cursor parpadeando mientras se escribe.
Punto 4: Si quieres eliminar el TypeFocus solo debes hacer Clic en el botón Clear TypeFocus
(limpiar TypeFocus).
Punto 5: También puedes aumentar o disminuir la velocidad con que se muestran los textos, para
eso debes aumentar o disminuir el número 1000 que está en el campo Slide delay (retardo de las
diapositivas).
Eso es todo, ahora solo tienes que cerrar el panel guardar los cambios y hacer un previo para ver
el texto animado.
Punto 1: Cuando edites una entrada (post) o una página, tendrás a disposición el panel lateral de
Thrive Content Builder con herramientas que te ayudarán a incrementar la productividad.
Punto 2: Hacia abajo del menú lateral están todos los elementos disponibles para insertar en tus
contenidos.
Punto 1: Cuando editas o creas una Landing Page, el panel lateral es igual al de crear o editar
un post (entrada) o página. Solo que se agrega un nuevo menú llamado Thrive Landing Page
con nuevas funciones y configuraciones que voy a desarrollar más adelante en este mismo
eBook.
Punto 2: Los elementos de inserción también son los mismos que se usan en la edición o
creación de post o páginas con la diferencia que se agrega un nuevo elemento llamado Thrive
Theme Section (sección de página), más adelante veremos con detenimiento este nuevo
elemento.
Punto 1: El primer icono de este panel se llama Undo last actions (deshacer la última acción),
si haces Clic sobre él podrás volver hacia atrás. Esto es muy útil cuando te equivocas en algo
porque siempre podrás volver a la última acción.
Punto 2: El segundo icono de este panel se llama Redo last action (rehacer la última acción), si
haces Clic sobre él podrás ir hacia adelante sobre las acciones realizadas anteriormente.
Punto 1: El tercero de los iconos del menú lateral se llama HTML y te permite mostrar el código
de la página que estás creando.
Si haces Clic sobre él se abrirá una ventana con el código HTML para copiarlo y pegarlo en otra
página o hacer modificaciones más detalladas.
En resumen, si te gusta el HTML y te llevas bien con el código, esto es para ti, porque podrás
hacer retoques más personalizados. ¡Libera el Friki que llevas dentro!
En la siguiente imagen puedes ver la ventana con el código HTML dentro.
Punto 1: Edit the TML of you Page (editar el código HTML de la página) esta es la ventana que
se abre cuando haces Clic en el tercero de los iconos del panel que se llama HTML.
Punto 2: When you click the “Save” button, your changes will be loaded into the page (al hacer
clic en el botón "Guardar", los cambios se cargarán en la página.).
Punto 3: Aquí puedes ver el código HTML de la página que utilizo de ejemplo, en este caso es
solo un párrafo entre las etiquetas <p> y </p> principio y final del párrafo.
Punto 4: Si hicieras algún cambio en el código debes hacer Clic en el botón Save (guardar) para
que se apliquen los cambios de forma inmediata.
Punto 1: El cuarto icono de esta serie de seis se llama Save page content as template (guardar
una página de contenidos como una plantilla).
Esta función sirve para que guardes una página en la que estés trabajando como si de una
plantilla se tratara.
Es decir, una vez que guardes la página quedará guardada como una plantilla que la podrás
utilizar las veces que quieras en otra sección de tu web o en otra web con la opción de
importación que veremos mañas adelante.
Si haces Clic sobre él se abrirá una nueva ventana donde podrás asignar un nombre, como se ve
en la siguiente imagen.
Punto 1: Guardar plantilla de usuario. Las plantillas de usuarios son muy útiles a la hora de
replicar los mismos contenidos en otra página u otra web, de esta forma tu tiempo de edición y
creación son más productivo.
Punto 2: Introduzca un nombre de a la plantilla de usuario, debes asignarle un nombre para luego
cuando quieras utilizar esta plantilla sea más fácil la ubicación ya sea por el método
Punto 3: Una vez que asignaste un nombre a tu nueva plantilla de usuario debes hacer Clic en el
botón Save (guardar).
Para reutilizar la plantilla de usuario que creamos en el ejemplo debes ir hasta el elemento
Content Templates (plantillas de contenido).
Al hacer Clic en el elemento se desplegará un menú hacia abajo con todas las plantillas de
usuario que tengas guardadas.
Para el caso del ejemplo encontrarás la plantilla con el nombre de Mi plantilla como muestra la
imagen siguiente.
Solo te queda arrastrar y soltar el elemento Mi plantilla a la posición deseada como si se tratara
de cualquier otro elemento.
Punto 1: Ahora le toca el turno al quinto icono simbolizado con un signo (+), si haces Clic en el
desplegará un menú con cuatro funciones especiales.
Punto 2: Page Event Manager (Administrador de eventos en una página) esta función te
permitirá añadir un Thrive Lightbox ¿Te acuerdas los formularios Pop-Up? Más arriba en este
mismo eBook puedes verlo para refrescar la memoria: Subir hasta Thrive Lightbox pero no te
preocupes porque voy a desarrollar las cuatro funciones en profundidad.
Switch Editor Side (Cambiar de lado el editor) podrás tener el editor del lado izquierdo o
derecho.
Change Editor Color (Cambiar el color del editor) básicamente puedes optar por un color claro u
oscuro.
Turn off Save Reminders (Desactivar los recordatorios de guardado) aquí puedes activar el
aviso emergente de guardado cada 10 minutos.
Punto 1: Debes hacer Clic en el icono (+) y luego en la opción Page Event Manager.
Punto 2: Como puedes observar en la imagen superior todavía no hay eventos configurados,
para agregar un nuevo evento debes hacer Clic en el botón Add Event (Agregar evento), en ese
momento se abrirá otra ventana de configuración como muestra la siguiente imagen.
Punto 3: Tienes dos posibles desencadenadores de eventos, en este caso debes elegir Timer
(duración después de cargar la página) esto quiere decir que puedes especificar por Ej. Que a los
30 segundos de cargar la página se dispare el evento, pero lo veremos en detalle más adelante.
También dispones de otro desencadenador que es Exit intent (user about to leave the page)
Intención de salida (el usuario está a punto de salir de la página)
Lo que hace es detectar cuando el visitante está por cambiar de página y en ese momento
dispara el evento Thrive Lightbox (Pop-Up).
¿Cómo lo hace? En realidad lo que hace es detectar cuando posas el puntero del ratón en otro
enlace de la misma página o de un menú, entonces dispara el Pop-UP.
Punto 4: Ahora debes elegir la acción del evento en este caso dispones de solo una y es Open
Thrive Lightbox (Abrir Pop-Up) debes hacer Clic sobre él. En ese instante pasarás a la etapa de
configuración para seleccionar un Thrive Lightbox que tengas creado previamente si todavía no
tienes uno creado es momento de hacerlo, si no te acuerdas lo puedes ver más arriba en este
mismo eBook : Crear un Thrive Lightbox
Esta imagen corresponde a la imagen anterior del punto 5, la tuve que poner en dos partes por
ser demasiado larga.
Which Thrive Lighbox should be displayed: En esta sección debes elegir el Thrive Lightbox,
que previamente tenías creado si no creaste ninguno no verás nada en el menú desplegable y
puedes crearlo haciendo Clic en + Create new Lightbox (Crear un nuevo Pop-Up).
Lightbox animation: Aquí puedes poner una animación al Pop-Up o no poner nada eso va a
gusto del consumidor.
Animation preview: En este rectángulo podrás ver una pre-visualización del efecto aplicado.
Save Event: Por último, debes hacer Clic en el botón Guardar evento en ese momento te
mostrará la siguiente imagen.
Punto 6: Esta ventana es más que nada informativa del evento creado, pero puedes volver a
editar el evento para hacer modificaciones o eliminarlo completamente, haciendo Clic el en enlace
Edit (Editar) o Remove (Remover) como se ve en la imagen superior.
Solo te queda hacer Clic en el botón Close (Cerrar) eso esto todo.
Punto 1: Si haces Clic en el la opción Switch Editor Side (cambiar de lado el editor lateral)
automáticamente el editor que está ahora a la derecha pasará al lado izquierdo como puedes
apreciarlo en la siguiente imagen.
Punto 2: El valor predeterminado del editor siempre es del lado derecho de la pantalla.
Punto 3: La opción Switch Editor Side te permite pasar de derecha a izquierda y viceversa el
panel lateral de Thrive Content Builder.
Punto 1: Este es el color predeterminado del editor lateral de TCB si haces Clic en la opción
Change Editor Color (cambiar color del editor) automáticamente pasará a oscuro.
Punto 2: Aquí se puede apreciar el cambio de tonalidad de claro a oscuro.
Punto 1: Thrive Content Builder tiene un sistema de recordatorios cada 10 minutos mostrando
una ventana que se desliza desde la izquierda de la pantalla avisándote que tienes que guardar tu
trabajo, esto es muy útil por lo menos para mí sí porque a veces estoy tan concentrado que me
olvido de guardar y la ventana emergente me lo recuerda.
Punto 2: Esta es la ventana de recordatorio que dice lo siguiente:
No has guardado tu trabajo por 10 minutos.
¡Te recomiendo realizar una parada para asegurarte que no pierdas el trabajo!
¡Dejar de recordar sólo para este trabajo!
Punto 1: Nos queda el último icono de esta barra que se llama Revision Manager (Administrador
de revisiones).
Si haces Clic sobre él se abrirá una ventana con las versiones previas de la página o post en el
que estés trabajando.
Esta herramienta es muy útil si quieres volver a otras versiones guardadas de tu trabajo, ya sea
porque de tanto hacer pruebas se te fue de las manos y quisieras volver a la versión de 2 días
atrás porque sabías que estaba todo en orden.
También podría suceder que al grabar tu trabajo se cortó internet y el guardado quedo corrupto,
entonces puedes volver a una versión de tu página de hace 2 horas por ejemplo.
En la siguiente imagen puedes ver con más claridad el tema de las revisiones disponibles.
Punto 1: Nos quedan dos botones que son muy importantes, el primero Save Changes (Guardar
cambios).
Aunque parezca una tontería debes guardar tu trabajo cada cierto tiempo más aún cuando los
post son muy largos, podría pasar que se cortara la luz y perdieras todo luego de haber estado 6
horas creándolo, o también un fallo en el ordenador que te bloquee todo el sistema y como
consecuencia de no haber guardado a tiempo, horas y horas de tu vida a la basura.
Pero ya sabes lo bueno de los recordatorios de guardado, cada 10 minutos te avisa una ventana
emergente que tienes que guardar tu trabajo por si las moscas. ¿Quieres un consejo? Mantenlo
siempre activado para no arrepentirte después.
Punto 2: El botón Preview (Previsualizar) te permite ver la página sin el editor lateral como la
vería un visitante, pero para usar esta función tienes que Guardar primero tu trabajo, para poder
previsualizarlo en modo visitante.
Por ejemplo hay elementos como los Thrive Lightbox, Data Elements, Countdown Timer, Lead
Generation, Call to Action, etc. no lo verás en acción hasta que guardes y previsualices.
Landing Page
¿Qué es una Landing Page?
Landing Page significa (página de aterrizaje) y se llama así porque es donde aterrizaría un
visitante al hacer Clic en un enlace que previamente hayas creado y al cliquear en él lo llevaría a
una página donde ofreces un producto, una suscripción o lo que sea las posibilidades son
infinitas.
¿Sabías que con Thrive Content Builder puedes crear Landing Page impresionantes? Esto es
posible porque trae incorporado un creador de Landing Page fuera de serie.
Además de poder crear desde cero, tiene un catálogo muy amplio creciendo día a día de plantillas
prediseñadas que puedes utilizar, ahorrándote mucho tiempo en la creación y si fuera poco todas
son 100% personalizables hasta el mínimo detalle.
Una vez creadas puedes guardarlas para su uso posterior o como un reguardo por si te pasa
algo, puedes exportarlas e impórtalas en otra web si quisieras, esto es fabuloso porque ganas
mucho tiempo en la creación de Landing Page en diferentes webs.
Las Landing Page no solo son para vender productos, si no que las puedes utilizar para crear la
Portada de tu web (Página de inicio), en el siguiente enlace puedes ver un ejemplo de la portada
de mi propia web:
Portada en miguelcarrerasdutra.com
Como te habrás dado cuenta ocupa todo el ancho del navegador y está divididas en secciones, lo
bueno es que se pueden añadir secciones cuando quieras.
Aquí tienes otro ejemplo de una Landing Page que utilizo para ofrecer a mis visitantes recursos
gratuitos:
Recursos Gratuitos en miguelcarrerasdutra.com
Esta es totalmente distinta a la anterior, no ocupa todo el ancho del navegador las combinaciones
son infinitas y además dispone de un formulario para que los visitantes se suscriban a la web,
esto quiere decir que puedes utilizar todos los elementos que trae TCB para insertarlos en tu
Landing Page como lo creas conveniente ¡Deja volar tu imaginación!
Punto 1: Cuando vas a crear o editar una página verás el editor lateral con un nuevo menú
añadido que se llama Thrive Landing Page con opciones especificar para que crees tu página de
aterrizaje.
Punto 1: Importar Landing Page te permite como su nombre lo indica importar una Landing Page
que previamente hallas exportado hacia tu ordenador. Más adelante lo veremos en detalle.
Punto 2: Elegir una Landing Page pre-diseñada del enorme catalogo que Thrive Content Builder
te ofrece para que tú la personalices a tu gusto. Ahora lo veremos en detalle.
Thrive Content Builder dispone de un catálogo muy amplio de plantillas pre-diseñadas para
utilizarlas como Landing Page, todas ellas son personalizables al 100% hasta el mínimo detalle,
incluso puedes crear tus propias plantillas desde una página en blanco y luego guardarla para su
uso posterior.
Punto 1: Como puedes observar en la imagen superior hay una columna con todas las categorías
disponibles para una búsqueda más exacta, por ejemplo si haces Clic en Homepage (página de
inicio o portada) solo te mostrará las plantillas más adecuadas para una portada o página de inicio
y si haces Clic en sales page (página de ventas) te mostrará las más adecuadas para vender
productos, no obstante puedes utilizar cualquiera de las 123 plantillas que hay predeterminadas y
también usar una página en blanco para crearla desde cero.
Punto 1: Ahora estamos en la segunda pestaña que se llama Custom Landing Page (Landing
Page Personalizadas) y sirve para guardar las plantillas prediseñadas que hayas modificado o
que hayas creado desde cero.
Te preguntarás como se guardan para que aparezcan en esta sección pues es muy simple una
vez que tengas cargada una plantilla y trabajes sobre ella, el menú Thrive Landing Page como te
mostré más arriba solo disponía de dos opciones pero al cargar cualquier plantilla este menú se
amplía con más funciones.
Solo debes hacer Clic en la opción Choose landing page… (Elegir landing page) verás
nuevamente el catálogo de plantillas pero con una diferencia en la parte superior izquierda por
encima de las categoría encontrarás un campo disponible para que pongas un nombre a tu
plantilla modificada y un botón Save Landing Page (guardar landing Page) como lo puedes
apreciar en las próximas imágenes.
Punto 1: Aquí puedes ver claramente la opción Choose landing page… (Elegir landing page)
junto con otras nuevas funciones que veremos más adelante.
Punto 2: Este es un aviso diciendo que si cargas otra plantilla del catálogo y no guardaste los
cambios de la anterior esos cambios se perderán. Pero en este caso es no importa por lo que vas
hacer es guardar la plantilla con un nombre para que quedes dentro de la sección Custom
Landing Pages (Landing Pages Personalizadas).
Punto 3: Donde dice Template Name (nombre de plantilla) debes poner por ejemplo Mi plantilla,
luego la encontrarás en la sección Custom Landing Page con ese nombre.
Punto 4: Por último, debes hacer Clic en el botón Save Landing Page (guardar Landing Page)
eso es todo.
En la siguiente imagen puedes ver la plantilla guardada en la sección Custom Landing Page.
Punto 1: En la imagen superior poder ver la plantilla personalizada guardada con el nombre de
Mi plantilla en la sección Custom Landing Pages.
Punto 2: Para cargar nuevamente la plantilla debes hacer Clic en la imagen y luego Clic en el
botón Load Landing Page (cargar landing Page) de esta manera podrás seguir haciendo
modificaciones y guardando de forma segura tu trabajo para luego retomarlo o también para
hacer un Backup (copia de seguridad) de la plantilla que tantas horas te llevo crear, como dice el
dicho: “más vale prevenir que curar”.
Punto 3: Desde aquí es posible eliminar la plantilla de forma permanente, haciendo Clic en el
botón Delete Template (eliminar plantilla).
Punto 4: Si quieres volver al tema original como estaba la primera vez que la cargaste debes
hacer Clic en el botón Revert to theme template (volver al tema original de la plantilla) esta
acción eliminará cualquier personalización que hayas hecho a la plantilla y cargará la plantilla
original si modificaciones.
Punto 5: Page template successfully saved (plantilla guardada correctamente) este texto
informativo aparecerá si la platilla de guardo correctamente.
Punto 1: Estamos ahora en la sección Thrive Template Cloud (Plantillas en la nube) aunque la
palabra Cloud o Nube este de moda, lo cierto es que estas Plantillas Cloud se encuentran en los
servidores de Thrivethemes.com.
La diferencia que hay con las predeterminadas de la pestaña Default Landing Pages es que
estas hay que descargarlas primero para luego poder utilizarlas.
Lo bueno de esta sección es que se va actualizando todo el tiempo agregando nuevas plantillas
para que puedas usar libremente, como verás tienes un abanico muy amplio de posibilidades
para crear una Landing Page perfecta.
Punto 2: Para descargar las plantillas Cloud a tu instalación de WordPress solo debes hacer Clic
en el botón Download (Descargar) automáticamente el botón de Download desaparece y en su
lugar aparece otro botón con el nombre de Open (Abrir) en la siguiente imagen lo puedes ver con
claridad.
Punto 3: Antes de descargar la plantilla puedes ver un Preview (Previsualizar) en tamaño
completo y luego decidir si la descargas o no.
Aquí ya puedes ver la plantilla Cloud del ejemplo anterior lista para ser modificada a tu antojo deja
¡Volar tu imaginación!
Te recomiendo solo descargar las plantillas que vas a utilizar y no las descargues todas a la vez
de esta forma ahorraras espacio en tu base de datos y en tu instalación de WordPress, además
las plantillas siempre van a estar en la nube y se irán agregando nuevas con el paso del tiempo.
Punto 1: Cada vez que cargues una Landing Page, en el menú Thrive Landing Page se
agregarán nuevas funcionalidades que las voy a describir una por una, ahora le toca el turno a la
opción Landing Page Settings (Configuración de Landing Page).
Cuando hagas Clic en esta función se abrirá otra ventana con más configuraciones como ser el
cambiar el color de fondo, las tipografías tanto el tamaño y el color, cargar scripts personalizados
etc. Puedes verlo mejor en la siguiente imagen.
Punto 1: Background (Color de fondo) para que puedas cambiar el color de fondo es necesario
que sigas loas pasos en orden numérico como se muestra en la imagen superior.
Punto 2: Aquí debes hacer Clic sobre cualquier punto del botón para que se abra el selector de
colores.
Punto 3: Una vez abierto el selector puedes seleccionar un color en el cuadro izquierdo y con la
barra vertical puedes cambiar las tonalidades desplazándola hacia o hacia abajo.
Punto 4: Una vez que seleccionaste el color puedes guardarlo para un uso posterior haciendo
Clic en el botón Save Favourite Color (Guardar color como favorito) o directamente hacer Clic
en el botón Ok para cambiar el color sin guardarlo.
Punto 1: Background image (imagen de fondo) con esta función puedes poner una imagen de
fondo a tu Landing Page, pero tienes que tener en cuenta que la imagen que vas a colocar sea lo
bastante grande como por ejemplo 1500px o 1900px para que cubra bien todo el ancho y tenga
buena definición.
Puedes utilizar imágenes gratuitas de pixabay, que dispone de un banco de imágenes
impresionante que crece día a día aquí te dejo el enlace: https://pixabay.com/.
Punto 2: Static image (Imagen estática) si mantienes esta casilla marcada la imagen de fondo
quedará fija mientras haces scroll hacia abajo o hacia arriba, quedando siempre fija la imagen de
fondo. Esto crea un efecto muy atractivo.
Si dejas la casilla Static image desmarcada tanto el texto y el fondo cuando hagas scroll hacia
arriba o hacia abajo te acompañará la imagen de fondo.
Ahora tienes que hacer Clic en el botón Background image para poder seleccionar una imagen
de la biblioteca de medios de WordPress como se ve en la captura superior.
Punto 1: Seleccionas la imagen o puedes subir una nueva haciendo Clic en la pestaña Subir
archivos.
Punto 2: Una vez seleccionada debes hacer Clic en el botón Insertar en la entrada.
En la siguiente imagen puedes ver aplicada la imagen de fondo en nuestra Landing Page de
ejemplo.
Punto 1: Debes hacer Clic en el botón Save Changes para aplicar los cambios.
Punto 2: Para ver el resultado final debes hacer Clic en Preview para pre-visualizar eso es todo.
Punto 1: Si aplicaste un color de fondo a la plantilla y no te gusta cómo queda puedes eliminarlo
haciendo Clic en el botón Clear background color y seguir probando con otros tonos.
Punto 1: Cuando quieras quitar la imagen de fondo que hayas aplicado a una plantilla, puedes
eliminarla fácilmente haciendo Clic en el botón Clear background image (limpiar imagen de
fondo). De esta manera podrás ir probando diferentes imágenes hasta llegar a la adecuada.
Nota: No te olvides de ir eliminando las imágenes que no utilizas desde la biblioteca de medios
de WordPress, así podrás tener tu base de datos optimizada y más espacio disponible en tu
servidor.
Punto 1: Si haces Clic en el botón Landing Page Fonts (tipografías de la página de aterrizaje)
podrás personalizar el tipo de letra para cada formato como se ve en el punto 2.
Punto 2: Aquí puedes ver claramente la grilla para que puedas personalizar los Encabezados del
1 al 3 también el tipo y tamaño de letra del párrafo y si fuera poco puedes definir el interlineado en
la siguiente imagen te muestro con más detalle cómo funciona este panel de configuración.
Punto 1: Esta función es muy interesante Setup custom scripts… (Configuración de scripts
personalizados) porque te permitirá insertar scripts para realizar ciertas funciones.
¿Qué es un script? Bueno a grandes rasgos son líneas de códigos para realizar funciones
específicas dentro de tu web, por ejemplo el código de Google Analytics es un scripts
personalizado, que lo obtienes cuando te registras en dicha plataforma y lo tienes que colocar en
las páginas de tu web, para que las estadísticas funcionen en tu sitio.
Aquí podrás poner el código de Google Analytics como cualquier otro que necesites. Como
puedes observar en la siguiente imagen, tienes 3 campos disponibles para tal efecto.
Punto 1: En el primer campo disponible puedes colocar tu código de Google Analytics por
ejemplo, más abajo en este mismo eBook te lo muestro en: Insertar el código de Google Analytics
en una Landing Page
Punto 2: Luego de colocar el código en el campo correspondiente, debes hacer Clic en el botón
de Save (Guardar) eso es todo. Fácil, ¿verdad?
Punto 3: El primer campo sirve para poner códigos que necesitan ser cargados antes que finalice
la etiqueta </head>
Punto 4: En el segundo campo puedes colocar los códigos que necesiten ser cargados después
que comience la etiqueta <Body>
Punto 5: El tercer campo corresponde al footer o pie de página y aquí se colocan los códigos
que necesitan ser cargados al final de la página antes de que termine la etiqueta </body>
NOTA: Este panel está disponible solo en la construcción de Landing Pages, por lo tanto para
agregar el código de Google Analytics en el resto de las páginas necesitaras un plugin para
dicha función, hay muchos en el repositorio de WordPress, aquí te dejo un enlace: Plugins para
Google Analytics.
También tienes otra alternativa puedes utilizar una plantilla Premium como Performag de los
creadores de Thrive Content Builder que ya viene preparada para poner todos los códigos que
necesites en todas las páginas de tu Web lo puedes ver aquí en este tutorial de Performag: te
dejo el enlace para que le eches un vistazo: Performag añadiendo códigos de Google Analytics
Además te dejo unos tutoriales que realicé del Theme Premium Performag para que veas todo su
potencial:
Performag Theme Premium Parte 1: Te cuento todos sus secretos paso a paso
Performag Theme Premium Parte 2: Te cuento todos sus secretos paso a paso
Punto 1: Usualmente Thrive Content Builder carga los CSS personalizados en el Head de la
página. Si activas está casilla todos los CSS personalizados que se cargaban en el head de la
página no se cargarán, esta función quedará desactivada.
Esta acción podría provocar efectos no deseados en los colores de fondo, imágenes de fondo etc.
Te recomiendo no activar esta casilla.
Hoy por las estadísticas son algo necesario para saber si vamos por el camino correcto y si no es
así, tomar las medidas correspondientes.
Pasare por alto la creación de una cuenta de Google Analytics y la obtención del código, voy a
dar por hecho que ya tienes el código para insertarlo en una Landing Page de las que vienen
prediseñadas en Thrive Content Builder.
Utilizare de ejemplo la portada de mi web o página de inicio que está realizada con una Landing
Page prediseñada y luego personalizada al 100%.
Lo primero que tienes que hacer es abrir la Landing Page que tengas en el modo de edición
haciendo Clic en el botón que dice Edit with Thrive Content Builder (Editar con TCB).
Punto 3: Una vez desplegado este menú de opciones debes hacer Clic en el botón de Setup
custom scripts (configuración de Scripts personalizados).
Punto 4: En la imagen superior puedes ver tres áreas de inserción de códigos, pero Google
recomienda poner su código en el Header (Encabezado), por eso debes ponerlo como se
muestra en la imagen superior.
Punto 5: Por último, quedaría hacer Clic en el botón Save (Guardar) eso es todo. Si tienes varias
Landing Page debes repetir el mismo proceso.
Punto 1: Con la opción Reset Landing Page (restablecer la página de aterrizaje) puedes volver
la plantilla a su estado inicial, como cuando la cargaste por primera vez.
Punto 2: Are you sure you want to CLEAR all content from this Landing Page? This action
cannot be undone (¿Seguro que deseas borrar todo el contenido de esta Landing Page? Esta
acción no se puede deshacer).
Punto 3: Por último, debes hacer Clic en el botón Aceptar, ten en cuenta que todas las
modificaciones que hayas echo a la plantilla se perderán y empezaras de cero, como se aprecia
en la siguiente imagen.
Punto 1: Aquí puedes ver el resultado de aplicar Reset Landing Page, la imagen de fondo que
habíamos cambiado en el ejemplo ya no está y en su lugar se cargó la imagen original de la
plantilla.
Punto 2: ¿Te acuerdas que habíamos cambiado la tipografía del encabezado por la fuente
Comic Sans? Bueno, ahora ya no está al resetear la Landing Page se cargaron todos los valores
predeterminado de las fuentes, tamaños y colores.
Punto 1: Esta opción Export Landing Page es muy interesante porque te permitirá exportar o
guardar la plantilla completa en tu ordenador, esto es útil si quieres cargar esta plantilla ya
modificada por ti en otra página de tu misma web o también en otra web de tu propiedad o
simplemente hacer un copia como Backup o respaldo de seguridad. Luego se abrirá una ventana
como se ve en la siguiente imagen.
Punto 1: Cuando hagas Clic en la opción Export Landing Page se abrirá una ventana como se
ve en la imagen superior para que puedas introducir un nombre de archivo antes de proceder a la
descarga.
Punto 2: De forma opcional puedes agregarle una imagen en miniatura respetando el tamaño
recomendado de 166px140px, haciendo Clic en el botón Choose image (elegir imagen), pero
como te dije antes es opcional.
Punto 3: Para proceder a la descarga debes hacer Clic en el botón Download File (descargar
archivo).
Punto 1: En la imagen superior puedes ver con claridad el archivo .zip que guardarás en el
ordenador, solo debes elegir una carpeta donde depositarlo y hacer Clic en el botón Guardar.
Este archivo del ejemplo tve-lp-portada.zip contiene la plantilla completa con todas las
modificaciones que hayas echo en la Landing Page.
Luego puedes utilizar este archivo .zip para replicar el contenido exacto en otra página de tu
misma web o cualquier otra que tengas de tu propiedad, de esta manera ganarás mucho tiempo
en la creación de las mismas.
Además podrías tener una copia de tus Landing Page en tu ordenador como copia de seguridad
como, nunca está demás y como dice el dicho más vale prevenir que curar.
Punto 1: Este es el proceso inverso de exportar si haces Clic en la opción Import Landing page
(importar Landing Page) se abrirá una ventana de búsqueda para que selecciones de tu
ordenador el archivo que quieres importar.
Punto 2: Esto es una advertencia y te pregunta si estás seguro de lo que vas hacer, porque al
importar otra plantilla encima de otra la anterior se sobrescribirá con el nuevo contenido.
Punto 3: Ahora para poder cargar el archivo zip debes Hacer Clic en Aceptar.
Voy a seguir con la Landing del ejemplo y voy a importar el archivo tve-lp-portada.zip de la
exportación anterior, en la siguiente imagen cargare el archivo zip.
Cuando se abra la biblioteca de medios de WordPress debes hacer Clic en el botón Selecciona
archivos.
Punto 2: Una vez localizado debes seleccionarlo haciendo Clic sobre el mismo y luego hacer
Clic en el botón Abrir como se muestra en la imagen.
Punto 3: Al momento de hacer Clic en Abrir el archivo zip se cargará en la biblioteca de medios
de WordPress. Solo queda que hagas Clic en el botón Import File (Importar archivo) eso es todo
en unos segundos tendrás la plantilla importada dentro del editor de Thrive Content Builder lista
para trabajar en ella. No fue tan difícil, ¿verdad?
Punto 1: La opción Revert to theme (Revertir al tema de WordPress) esto significa que la
Landing Page desaparecerá y en su lugar se cargará una página normal del theme o tema que
tengas instalado en tu WordPress.
Punto 2: Esta es una advertencia antes de proceder:
Are you want to DELETE al of contents that was created in this landing page and revert to
the theme page?
If you click OK, any custom content you added to the landing page will be deleted.
Estás seguro que quieres BORRAR los contenidos que creaste en esta Landing Page y volver a
la página original de tu tema de WordPress?
Si haces clic en Aceptar, se eliminará cualquier contenido personalizado que hayas agregado a tu
Landing Page.
Punto 3: Por último, debes hacer Clic en el botón Aceptar para revertir tu Landing Page actual a
una página normal del tema o theme de WordPress. Una vez aplicado se vería como en la
siguiente imagen.
Punto 1: El elemento Page Section (sección de página) solo está disponible cuando estés
trabajando sobre una plantilla de Landing Page, en una página normal este elemento no
aparecerá.
¿Cómo funciona? Pues muy simple, como cualquier otro elemento lo arrastras y sueltas en la
posición donde quieras añadir una nueva sección. En la siguiente imagen puedes apreciar la
nueva sección añadida en nuestra página de ejemplo.
Punto 1: Aquí puedes ver en la parte superior de la página la nueva sección resaltada
generalmente aparecerá en color gris claro con un bloque te texto en su interior.
Las secciones de página se pueden colocar donde te apetezca, arriba, abajo en el medio, si no te
gusta el lugar actual puedes arrástralo y soltarlo las veces que quieras hasta dar con la posición
adecuada.
Punto 2: Aquí puedes observar el texto de ejemplo This is a page section (Esta es una sección
de página), si haces doble clic en el texto de ejemplo se abrirá el panel de configuración donde
podrás agregar un color de fondo, una imagen de fondo, bordes y sombras, pero lo veremos en
detalle en las siguientes imágenes.
Punto 1: Puedes cambiar el color de fondo de la sección de página haciendo Clic en el botón
Background Colour (color de fondo).
Punto 2: En ese instante se abrirá una ventana con un selector de colores debes mover el
puntero con forma de círculo a través del cuadro de tonos y hacer Clic sobre él.
Punto 3: Una vez seleccionado el color puedes guardarlo para usarlo más tarde haciendo Clic en
el botón Save as Favourite Color (guardar color como favorito).
Punto 4: Por último, debes hacer Clic en el botón OK para aplicar el color.
Si quieres eliminar el color de fondo que aplicaste con anterioridad y volver al color
predeterminado que tenía la plantilla cuando la cargaste por primera vez, solo debes hacer Clic
en el botón Clear background color (Limpiar color de fondo).
Punto 1: Para insertar una imagen de fondo tienes que hacer Clic en el botón Background
image... (Imagen de fondo) en ese instante se abrirá la biblioteca de medios de WordPress.
Punto 2: Una vez dentro de la biblioteca de medios debes elegir una imagen, de ser posible que
sea una imagen grande por ejemplo 1882x392 pixels es un buen tamaño para que cubra todo el
ancho de la página.
Punto 3: Cuando tengas la imagen seleccionada debes elegir en el botón insertar en la entrada
como se puede observar en la imagen superior.
Punto 4: En la siguiente imagen puedes ver la imagen de fondo aplicada en la sección de página.
Static image (imagen estática o fija) esta es una función interesante que queda muy bien, porque
si está marcada la casilla Static image cuando hagas scroll en la página todos los textos bajarán
pero la imagen de fondo quedará en el mismo lugar, dando lugar a un efecto muy agradable. ¡No
dejes de probarlo!
Otra opción interesante es la posibilidad que la imagen de fondo se muestre con la altura
completa de la misma, para que esto suceda solo debes tener marcada la casilla Fullheight
image (Altura de imagen completa).
Como puedes observar la imagen ocupa más espacio hacia abajo y ocupará más o menos
dependiendo de la altura que tenga la imagen que quieras colocar.
Punto 1: Como en cualquier otro elemento dispones de cuatro tipos de márgenes que puedes
aplicar a la sección de página (Page Section):
Top (Arriba), Botton (Abajo), Left (Izquierda) y Right (Derecha).
Ahora bien todos estos valores lo puedes modificar a tu antojo agregando solo el número en la
casilla correspondiente, ten en cuenta que cuanto mayor sea el número mayor será el margen.
10, 11, 12 etc. Solo tienes que poner el número sin el (px).
-10, -11, -12 etc. Estos valores corresponden a márgenes negativos que puedes aplicar en
todo momento.
Punto 2: Debajo de la columna de Margin (Márgenes) dispones de un botón que dice Clear
Margin (Borrar márgenes) si haces Clic sobre él, todos los valores se pondrán a cero (0) esto es
muy útil cuando de tanto probar diferentes valores, no te convence el resultado y quieres volver a
empezar.
Punto 3: Padding (rellenos o espaciados) como en los márgenes dispones de cuatro tipos de
Paddings que puedes aplicar:
¿Cuándo aplicar un Padding? Los paddings se suelen aplicar para mantener una separación de
un objeto con otro, por ejemplo como se ve en la imagen inferior, entre el icono con forma de
nube y la imagen la imagen de fondo hay una separación arriba y abajo (Top y Bottom) de 30 px
y un margen Top (Arriba) de 0px con un margen Bottom (Abajo) de 20px.
Pero también se puede aplicar Margin & Paddings a la sección de página como lo harías con un
objeto diferente, como puedes ver en la siguiente imagen en concreto el icono con forma de nube
lo agregue dentro de la sección de página con el elemento Image ¿Te acuerdas?
Bien, esta nube tiene márgenes y rellenos para mantener una separación coherente con respecto
al texto y la imagen de fondo y puedes verlo en detalle en la siguiente imagen.
Punto 1: Aquí puedes que hay un Margin Top (Margen Arriba) de 0px entre el icono con forma
de nube y el texto superior (This is a page section).
Punto 2: La imagen del ejemplo también dispone de un Margin Bottom (Margen abajo) de 20px
con respecto al borde inferior de la imagen de fondo.
Punto 3: Aquí puedes ver una Padding (Relleno o espacio) entre el icono con forma de nube y el
borde inferior de la imagen de fondo.
Punto 4 y 5: El icono con forma de nube está en el medio de la página porque tiene un Margin
Left (Margen izquierdo) y un Margin Right (Margen derecho) de 445px.
Sombras – Shadow
Punto 1: Para poder aplicar una sombra primero debes elegir un color para la sombra externa o
la sombra interna.
Punto 2: Para acceder al panel de sombras debes hacer Clic en el botón Shadow (Sombra).
Punto 3: Ajustes de la sombra interior (Internal Shadow).
Punto 4: Ajustes de la sombra exterior (External Shadow).
Punto 5: Puedes elegir entre una Sombra pequeña, mediana y grande.
Punto 6: Aquí puedes hacer otros ajustes como poner la sombra arriba, abajo o en el centro.
Punto 7: Puedes poner los ajustes a cero haciendo Clic en el botón Clear Internal Shadow y
Clear External Shadow (Limpiar sombras internas y externas).
En la imagen superior puedes ver claramente una External Shadow Large (sombra Externa
Grande) aplicada en la parte inferior de la imagen de fondo.
En esta imagen puedes apreciar una Internal Shadow Large (sombra interna grande) aplicad en
la imagen de fondo.
Siempre puedes eliminar las sombras aplicadas completamente, solo debes hacer Clic en el
botón Clear shadow (limpiar sombra).
Punto 1: Puedes aplicar bordes a tu sección de página (Page Section) como se ve en la imagen
superior y para este cometido dispones de un botón llamado Border type (tipos de bordes).
Si haces Clic en él se desplegará una lista de 8 tipos de bordes para aplicarlos en tiempo real,
solamente haciendo Clic en ellos se irán mostrando en el borde de la sección de página.
Punto 2: También puedes ajustar el borde a gusto, en el caso del ejemplo este tiene un borde de
10px, si lo quieres más grueso o más fino deberás escribir un número en la casilla del punto 2,
cuanto mayor sea el número más grueso será el borde.
Punto 3: Aquí se puede ver un borde dotted (punteado) aplicado en la sección de página.
¿Te acuerdas? Como insertar enlaces, puedes verlo aquí escribe un texto por ejemplo Ir a la
sección 1 lo seleccionas y en el campo de insertar enlaces escribes el Custom ID precedido del
símbolo #, tendría que quedar así: #seccion-1 eso es todo ya tienes creado un link o enlace
interno que al hacer Clic sobre el texto (Ir a la sección 1) te llevará a la parte superior de la página
del ejemplo.
Para poder ver el enlace o link en acción debes guardar la página y luego previsualizarla de este
modo podrás probar cómo funciona el nuevo enlace interno. Eso es todo, no ha sido difícil
¿Verdad?
Punto 1: Para crear un enlace interno en el editor flotante de Thrive Content Builder, este último
dispone de un campo que se llama ID (identificación). Lo puedes ver más claro más arriba en el
punto 1
Punto 2: Por ejemplo, puedes poner el ID título-1 o lo que quieras, es irrelevante. Podrías poner
solo un número o solo una palabra o ambos. Como puedes observar en el punto 2, haré el
ejemplo con título-1.
Punto 3: Primero debes seleccionar un texto para poder aplicarle el enlace o link, en el ejemplo
he puesto un texto al final de la página para que me lleve al principio de la misma.
Punto 4: Una vez seleccionado el texto en el punto 3, debes agregar el ID que puse en el punto 2
que es título-1 ¿Te acuerdas? Bien, debes ponerlo en el campo que tiene un icono de eslabón de
cadena que es el símbolo universal para representar un enlace o link, pero debes ponerlo
precedido del símbolo #. En resumen te quedaría así: #titulo-1
Punto 5: Por último, debes hacer Clic en el botón Insert (insertar enlace).
Punto 6: Si el enlace se creó correctamente verás por un par de segundos un texto en forma de
botón con el siguiente texto: Link Inserted (enlace insertado o creado).
Punto 7: Si quieres eliminar el nuevo enlace creado solo debes hacer Clic en el icono con forma
de eslabón roto.
Punto 8: El texto (ir al título principal) es el que tiene el enlace #titulo-1 que lo lleva hacia el ID
título-1
Punto 9: El texto (título principal) es el que contiene el ID título-1
Punto 10: Cuando hagas Clic en el enlace inferior del ejemplo que sería (ir al título principal) te
llevará hacia arriba hasta el texto Título principal. Eso es todo.
Aquí puedes ver otro ejemplo de inserción de Custom ID (identificación personalizada), pero esta
vez aplicado en una sección de página dentro de una Landing Page: Identificación personalizada
– Custom ID
Seguro que estás al tanto de que el correo electrónico no solicitado con fines comerciales o
publicitarios puede transformarse en una auténtica pesadilla, el llamado SPAM. Si quieres
conocer la historia de la palabra SPAM, visita la Wiki, te vas a sorprender.
Para evitar esto dentro de WordPress.org precisamente en los comentarios hay un plugin que es
gratuito y si quieres colaborar con la causa puedes hacer una donación a los autores del mismo.
Este plugin se llama Akismet, lo puedes descargar del repositorio de Wordpress.org, aquí te lo
dejo: Descargar plugin Akismet.
Realmente es una maravilla porque te protege de todo el correo no deseado (SPAM) en los
comentarios yo lo utilizo hace muchos años y realmente funciona, te lo recomiendo ampliamente.
¿Pero qué pasa si quieres proteger tus formularios de suscripción del temido SPAM y evitar que
se creen cuentas falsas? La solución está de la mano de reCaptcha con su famoso ¡No soy un
robot!
Thrive Content Builder provee de serie esta integración para que puedas mantener tu lista de
suscriptores, valga la redundancia, con suscriptores reales y de esta forma evitar las cuentas
falsas.
Te acuerdas del Manage Connections (administrador de conexiones) lo viste más arriba cuando
configuramos la API de Mailrelay .
Pues bien, ahora usaremos el mismo método, pero para integrar el famoso reCaptcha de Google.
Lo primero que debes hacer es darte de alta aquí o iniciar sesión en: Google reCaptcha creando
una cuenta, si ya tienes correo electrónico de Gmail no hace falta que crees otra, ya sabes el
lema; una cuenta, todo Google.
Debes iniciar sesión con tus datos de acceso haciendo Clic en el botón Get reCaptcha como
puedes ver en la siguiente imagen.
Una vez que hayas iniciado sesión con tu cuenta de Google deberás hacer Clic nuevamente en el
botón Get reCaptcha como en el Punto 1 y verás la siguiente imagen.
Punto 1: Una vez que ingresaste a la web de reCaptcha, debes hacer Clic en el botón Get
reCaptcha para iniciar sesión en el servicio gratuito de Google.
Punto 2: Si ya tienes una cuenta de Gmail debes poner tu dirección de correo electrónico aquí y
hacer Clic en el botón Siguiente.
Punto 3: Si no dispones de una cuenta de Google puedes crear una de forma gratuita haciendo
Clic en el enlace que dice Crear cuenta.
Punto 4: Una vez iniciado sesión, debes poner un nombre de referencia que podría ser el nombre
de tu sitio, yo utilice para el ejemplo MCD Diseño Web.
Punto 5: Aquí debes poner el nombre de tu dominio o sea la URL de tu web de esta manera:
miguelcarrerasdutra.com
Punto 6: Por último, debes hacer Clic en el botón Registro para que se generen las Claves que
nos interesan.
Punto 7: Aquí puedes ver claramente cómo se generó la Clave del sitio y la Clave secreta, solo
necesitas estos dos datos para configurar la API de reCaptcha en Thrive Content Builder.
Ahora puedes cerrar Google pero antes copia y pega estas dos claves en el bloc de notas
porque las vas a necesitar para configurar reCaptcha en el Manage Connections (administrador
de conexiones).
Punto 1: Para configurar la API de reCaptcha primero debes ingresar al escritorio de Thrive
haciendo Clic en el menú Thrive Dashboard.
Punto 2: Luego verás un rectángulo que en su interior dice API Connections (conexiones API) y
Manage Connections (administrador de conexiones), debes hacer Clic en este último para
ingresar a otro panel.
Punto 3: Una vez dentro del área de conexiones debes hacer Clic en donde dice Add new
connection (agregar nueva conexión).
Punto 4: Aquí debes hacer Clic en el menú - Select an app - en ese instante se desplegará un
menú con un listado de aplicaciones disponibles, debes buscar la que dice ReCaptcha.
Punto 5: Ahora Selecciónala haciendo Clic sobre ella para que cargue otro panel de
configuración.
Punto 6: Ya casi terminas, aquí debes colocar las claves que te proporcionó Google reCaptcha.
¿Te acuerdas?
Punto 7: Clave del sitio (Site Key) y Clave secreta (Secret Key).
Punto 9: Si realizaste todos los pasos de forma correcta verás un rectángulo que en el interior
dice Connection Ready! (conexión lista) y que puedes conectar a tus formularios opt-in cuando
quieras.
Eso es todo. ¡No fue tan difícil!, ¿verdad? Si llegaste hasta aquí sin equivocarte,
¡enhorabuena!
Ahora viene la otra cuestión, ya tienes las Claves de Google reCaptcha, configuraste la API
dentro de Thrive Content Builder, solo te queda saber cómo incluir el “¡Yo no soy un robot!” en
tus formularios, para ser más exactos, en los Thrive Lightboxes.
Bueno, en realidad esta parte es la más simple y te lo voy a mostrar con imágenes como es mi
costumbre.
Voy a suponer que ya tienes por lo menos creado un formulario Pop-Up con Thrive Lightboxes.
Si no es así, todavía estás a tiempo de crear uno para practicar este ejemplo. Lo puedes ver más
arriba en este mismo eBook, aquí te dejo el enlace interno: Crear formularios con Thrive
Lightboxes
Punto 1: Primero debes ir al menú Thrive Lightboxes y hacer Clic en él, en ese instante podrás
ver los formularios que tengas creado hasta el momento.
Punto 2: Elige uno del listado que esté funcionando y cliquea sobre el botón Edit with Thrive
Content Builder (Editar con TCB).
Punto 3: Ahora debes hacer Clic en donde dice Tu Nombre o Tu Correo para que se abra el
panel de configuración.
Punto 4: En la imagen superior puedes ver de forma clara el panel de configuración desplegado.
Punto 5: Luego debes hacer Clic en el botón Connect with Service (conectar con un servicio)
para que se abra otro panel de configuración que es el que nos interesa de momento.
Punto 6: Aquí es donde debes marcar la casilla para habilitar el reCaptcha y que se muestre en
el formulario de suscripción.
Punto 7: Aquí puedes ver en la zona resaltada el reCaptcha activado y con los ajustes
predeterminados que son el tema de color claro, mostrará imágenes y tendrá un tamaño normal.
Puedes cambiar estos ajustes a: color oscuro, mostrar audio y un tamaño compacto. Tú verás
cual te queda mejor.
Punto 8: Por último, para que el reCaptcha se visualice debes hacer Clic en el botón Save
(guardar). Eso es todo, ahora verás el reCaptcha dentro del formulario como en la imagen inferior.
Ya sabes que Mailrelay es una plataforma de envíos masivos de newsletter o boletines que
cumple con toda la normativa europea del Safe Harbor (puerto seguro).
Y también sabes que puedes crear una cuenta gratuita con ellos de por vida, con la posibilidad de
poder enviar hasta 75.000 e-mails a 15.000 suscriptores por siempre, con el solo hecho de
seguirlos en Twitter, Facebook y Google+.
Bien, yo utilizo a Mailrelay en todos mis proyectos y te lo recomiendo con los ojos cerrados,
además posee un soporte de ayuda excepcional.
El punto es que Thrive Content Builder dispone de una API de integración con Mailrelay para
hacerte la vida más fácil y olvidarte de copiar y pegar códigos.
En este mismo eBook te muestro cómo hacerlo y no lo he puesto en esta sección porque
consideré que era más oportuno que estuviera junto con el elemento Lead Generation para la
captación de suscriptores.
Aquí te dejo el enlace interno de todo el proceso paso a paso: API de Mailrelay como integrarla en
Thrive Content Builder
Primero que nada necesitas un software de traducción y para este tutorial voy a utilizar a Poedit
que es gratuito en su versión estándar y es más que suficiente para traducir de forma manual.
Aquí tienes el enlace para descargarlo:
Descargar Poedit
Elige la versión para Windows y procede a instalarlo como cualquier otro software.
Este archivo tendrás que descargarlo a tu ordenador para usarlo luego con Poedit, deberás
acceder por FTP (Protocolo de transferencia de archivos) a la siguiente ruta:
tusitio.com/wp-content/plugins/thrive-visual-editor/languages
Si no tienes ningún software de FTP puedes descargarte FileZilla, es gratis y el mejor.
Descargar FileZilla
Aquí puedes ver en la imagen inferior como se accede a la carpeta que contiene el archivo para
traducir.
tusitio.com/wp-content/plugins/thrive-visual-editor/languages
En el archivo thrive-cb.po se encuentran todas las palabras y frases que se pueden traducir con
Poedit, arrastra este archivo a una carpeta de tu ordenador y luego cliquea dos veces sobre el
archivo thrive-cb.po, en ese instante se abrirá Poedit.
Cuando se abra Poedit lo primero que debes hacer es hacer Clic en el botón Corregir idioma
como se muestra en la imagen inferior.
Ahora debes elegir el idioma al que quieres traducir el plugin, en este caso elige español o el que
prefieras, pero para el ejemplo seguiré con español.
Ahora si, después de configurar todo, puedes traducir línea por línea como muestra la siguiente
captura.
Luego de haber traducido las líneas que necesitabas o todas las líneas, debes hacer Clic en el
botón Guardar que está en la parte superior izquierda de la captura superior.
Nota: Al guardar la traducción se va a generar otro archivo con el nombre thrive-cb.mo en
resumen tendrás dos archivos con extensión .po y .mo
Una vez terminada la traducción debes mover los archivos a una nueva ubicación porque tras una
actualización del plugin de TCB se sobre-escribirán los archivos y perderás todo el trabajo de
traducción que hayas hecho.
Para que esto no suceda deberás crear una nueva carpeta en tu servidor en la siguiente ruta
utilizando siempre FileZilla como FTP.
tusitio.com/wp-content/languages/thrive/
Copia en la nueva carpeta creada en tu servidor el archivo recién traducido thrive-cb.po y thrive-
cb.mo
Una vez copiado debes renombrar los archivos de esta manera para el idioma Español:
thrive-cb-es_ES.po
thrive-cb-es_ES.mo
Así es como deben quedar, de esta manera cuando actualices Thrive Content Builder las
traducciones no se perderán.
Thrive Content Builder se ha renovado por completo y ahora se llama Thrive Architect. Si ya
tenias de antes TCB, te habrás enterado por la actualización, pero si todavía no te haz decidido a
comprar esta excelente herramienta, tendrás la suerte de adquirir desde cero la nueva versión de
TCB que se llama ahora Thrive Architect.
No solo fue un cambio de nombre si no que se cambió toda la estructura de menúes para hacerlo
más ágil y productivo con mayor compatibilidad para dispositivos móviles. Se acabó el problema
de no poder visualizar correctamente en un móvil o tablet, ahora podrás configurar y corregir
hasta el mínimo detalle de forma separada sin perjudicar la vista de escritorio. Esto último es algo
que mucho de nosotros esperábamos ¡Enhorabuena!
Estoy muy emocionado por esta nueva evolución de TCB, ahora Thrive Architect, tengo mucho
por contarte, es por eso que en el transcurso de este eBook voy a desglosar la nueva estructura
paso a paso y compararla con su predecesor TCB para que no te queden dudas de nada. Pero
antes voy a empezar con las preguntas más frecuentes. ¡Manos a la obra!
Yo te recomendaría para que te familiarices con Thrive Content Builder (la vieja versión) y las
configuraciones de todos los elementos y empieces desde el principio de este eBook, luego de
haberlo leído de punta a punta te darás cuenta que en Thrive Architect ahora todo es más
simple y rápido.
Pero tú, que ya eras usuario de TCB, será cantar y coser y quedarás sorprendid@ gratamente
porque hay miles de cosas que se simplificaron hasta el mínimo detalle y se agregaron
muchísimas nuevas funciones que te dejarán atónito.
El funcionamiento de Thrive Architect es muy sencillo como su predecesor TCB, al crear una
entrada tendrás un nuevo botón que antes no estaba que tiene un icono que dice Edit with Thrive
Architect (Editar con Thrive Architect) y si lo miramos desde todas las entradas verás el mismo
botón. En la imagen superior puedes verlo claramente.
El editor de WordPress nativo seguirá estando en el mismo lugar, pero oculto y puedes utilizarlo
también para crear tus entradas o artículos como venias haciendo hasta ahora, solo tienes que
hacer clic en el enlace que dice Return to the WP editor (volver al editor de WordPress) .
Thrive Architect no solo sirve para crear Landing pages, si no que también se puede utilizar para
crear tus propios artículos, un claro ejemplo está en mi propia web ya que todo lo que escribo lo
realizo con Thrive Architect y te aseguro que una vez que lo pruebes no volverás atrás.
Punto 1: Botón con forma de enlace para arrancar el editor de Thrive Architect.
Cuando veas todas las entradas que tienes, encontrarás el mismo botón o enlace que en este
caso tendrá el texto Edit with Thrive Architect (editar con Thrive Architect). Al hacer clic en él,
como muestra la imagen superior, se abrirá una nueva ventana en el navegador para cargar el
editor de Thrive Architect y así puedas de esta manera editar el artículo seleccionado.
Punto 1: Botón en las páginas con forma de enlace para arrancar el editor de Thrive
Architect.
En las páginas sucede lo mismo, se agrega el nuevo botón de Edit with Thrive Architect, de
esta forma podrás crear una landing page una página convencional o editar las que tengas
hechas con anterioridad. Como te habrás dado cuenta, esto es igual a la versión anterior de TCB.
Punto 1: Panel de edición de Thrive Architect que contiene todos los elementos para
arrastrar y soltar.
Después de hacer clic en el botón verás la entrada como la verían los visitantes de tu web con la
diferencia de que tendrás el editor de Thrive Architect a la izquierda o la derecha como si se
tratara de un sidebar con todos los elementos disponibles para arrástralos y soltarlos en la
página. De esta forma crear tu página, post o Landing page será cantar y coser.
Notarás que el panel lateral esta a la izquierda y antes en TCB estaba a la derecha, pero no te
preocupes por que puedes ponerlo del lado que quieras entrando en la configuración que te
mostraré más adelante.
Ya sabes que al utilizar Thrive Architect podrás eliminar muchos plugins que utilizabas o
pensabas utilizar en tu sitio para diferentes funcionalidades, ya que Thrive Architect trae de serie
la mayoría de las funciones que utilizamos a diario con otros plugins y esto es maravilloso.
No solo reducirás la cantidad de plugins instalados sino que tu servidor compartido trabajará
mucho más ligero y evitarás que te suspendan la web por consumir demasiados recursos del
servidor, además todas las páginas de tu sitio web cargarán súper rápido, ¡y esto a Google le
gusta mucho!
Otra ventaja es que ganarás velocidad en la creación de post, páginas y landing page de forma
simple y rápida solo arrastrando y soltando. Te gustó, ¿verdad? El editor de serie que trae
WordPress es muy limitado, pero el de Thrive Architect es muy rápido y lleno de elementos para
crear la web de tus sueños, es por eso que maquetar, guardar, hacer previzualizaciones en
tiempo real, etc. es juego de niños.
Y si esto fuera poco tendrás a tu disposición plantillas pre-diseñadas para crear landing pages
impresionantes y personalizarlas a tu antojo como así también plugins integrados para diferentes
funciones. No podrás creer el resultado final, que será realmente profesional y lo mejor de todo es
que lo hiciste tu mism@.
Crear columnas, tablas, botones, testimonios, mapas, grillas, llamadas a la acción, etc. es muy
fácil. Ya sabes que hacer columnas o tablas con el editor de WordPress nativo es bastante
complicado y ni hablar de crear formularios, pero con Thrive Architect esto es soplar y hacer
botellas.
No tienes que ser programador, puedes utilizar Thrive Architect desde el primer día. Sí, ya sé
me dirás que está en inglés, pero no es una pega porque es inglés técnico y no hay mucho para
leer, es muy visual, tiene una interface muy simple y minimalista, con iconos que muestran cada
función con menúes desplegables. Si te quedaran dudas puedes acceder a todos los tutoriales en
español y vídeos que están disponibles en mi web de forma gratuita.
Una vez que lo pruebes no podrás dejar de utilizarlo yo se lo que te digo te harás adict@ a Thrive
Architect.
¿Cuál es su precio?
Esto si es una buena noticia para estos tiempos que corren, los precios se mantiene igual que la
versión anterior de Thrive Content Builder. En sus 3 modalidades los precios y características son
los siguientes.
5 License Pack (Paquete de 5 licencias). Podrás instalar el plugin hasta un máximo de 5 web que
quieras de tu propiedad con actualizaciones ilimitadas y 1 año de soporte ilimitados en sus foros
para clientes; por unos $97 que serían unos € 80 aproximadamente (dependiendo de la cotización
al momento de la compra), pago único. Para mi, esta opción es la recomendada porque tengo
varios sitios, pero puedes ver los precios aquí. Al final de la página está la tabla de precios para
comprarlo como muestra la captura de arriba.
1 License (1 sola licencia). Si solo tienes una web y no te planteas tener otra el día de mañana
puedes optar esta opción. Tiene las mismas características, actualizaciones ilimitadas y 1 año de
soporte ilimitados en sus foros para clientes y es más económica que la anterior; $67 unos €55
aproximadamente (dependiendo de la cotización al momento de la compra), pago único, pero solo
puedes utilizarlo en una sola web.
15 License Pack (Paquete de 15 licencias). Esta es la última opción por $147 unos €121
aproximadamente (dependiendo de la cotización al momento de la compra), se paga una sola vez
y puedes instalar el plugin hasta en 15 sitios web diferentes siempre que sean de tu propiedad.
Creo que es un producto de excelente calidad para que cualquiera pueda diseñar web
profesionales sin conocimientos de programación, aunque si quisieras hacer personalizaciones
más profundas dentro de las plantillas puedes hacerlo.
También dispones de la opción Thrive MemberShip el pago es anual y debes pagarlo todos los
años para seguir recibiendo actualizaciones, la ventaja es que puedes descargarte todos los
plugins de thrivethemes y los nuevos que van saliendo. Puedes ver los precios Aquí
FOUNDATION (Fundación o cimientos vendrían a ser como los elementos básicos para empezar
a maquetar tu web) - Dispones de 8 elementos que puedes arrastrar y soltar donde te apetezca.
BUILDING BLOCK (Construcción de bloques, son módulos más avanzados que te permiten crear
contenidos dinámicos) - Dispones de 31 elementos que puedes arrastrar y soltar a continuación
veremos uno por uno su función.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Heading – Títulos
El elemento Heading (Títulos) te permite insertar títulos desde H1 hasta H6 donde quieras con la
posibilidad de personalizarlos en su totalidad, puedes ver los títulos en este mismo artículo por
que todos ellos están hechos con este elemento en la videoteca de Thrive Architect puedes ver
como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Image – Imagen
El elemento Image (Imagen) te permite insertar imágenes del tipo gif, jpg y png entre otros,
además puedes aplicarles diversos tipos de filtros como escala de grises, blur, opacidad, etc.
como puedes ver todas las imágenes de este artículo están insertada con este elemento, en la
videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Button – Botón
El elemento Button (Botón) te permite insertar botones prediseñados en diferentes estilos para
realizar llamadas a la acción de todo tipo. En la videoteca de Thrive Architect puedes ver como
funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Columns – Columnas
El elemento Columns (Columnas) te permite insertar de una forma muy cómoda y fácil columnas
de cualquier tamaño donde quieras en la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Content Box (Caja de contenido) es un elemento muy útil porque te permite colocar
varios elementos dentro de una caja que se adapta a todos los dispositivos un claro ejemplo de
esto es este mismo párrafo que está encerrado en un Content Box (Caja de contenido) en la
videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Content Template (Plantillas de contenido) este es otro de mis elementos favoritos
porque puedes guardar tus creaciones para utilizarla en cualquier momento y lo bueno de esto es
que mantendrá todas las modificaciones que les hayas hecho pero en la videoteca de Thrive
Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Click to Tweet (Compartir mensajes vía Twitter) es muy interesante y práctico porque
te permite colocar citas en cualquier parte de tu artículo para que los visitantes la compartan vía
Twitter a sus amigos con un solo clic, puedes ve arriba de este párrafo un ejemplo pero para
dejártelo más claro mira el siguiente vídeo en la videoteca de Thrive Architect.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Credit Card (Iconos de tarjetas de credito) este elemento te permite insertar iconos
muy bien definidos en cualquier parte de tus páginas, artículos y landing pages, muy útil si vendes
algún producto en tu web, en la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Custom HTML (Html personalizado) es otro de mis preferidos. Si te gusta el HTML,
esto es para ti, podrás poner tus propios códigos donde quieras, por ejemplo, iconos de redes
sociales o un footer (pie de página) como puedes ver arriba de este párrafo, en la videoteca de
Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Custom Menu (Menú personalizado) te permite colocar tu menú principal, secundario
o de categorías en una landing page de forma muy sencilla. Además puedes configurar todos los
aspectos del mismo en la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Divider (Líneas divisorias) te permite insertar líneas separadoras donde quieras solo
arrastrando y soltando, además dispone de diferentes estilos. En la videoteca de Thrive Architect
puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Google Map (Mapas de Google) te permite insertar mapas de Google Map en
páginas, artículos o landing page su funcionamiento es muy sencillo elige la zona que quieres
mostrar arrastra y suelta el elemento donde quieras en la videoteca de Thrive Architect puedes
ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Icon – Iconos
El elemento Post Grid (Cuadrícula de artículos) te permite insertar en páginas, artículos y landing
pages una cuadrícula de artículos de diferentes categorías es altamente configurable, pero para
que lo veas claro en la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Progress Bar (Barras de progreso) te permite insertar en páginas, artículos y landing
page barras de progreso altamente configurables para mostrar datos representativos de todo tipo
en la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Social Share (Compartir en redes sociales) es otro de mis favoritos y te permitirá
insertar botones de las redes sociales más populares en páginas, artículos y landing pages. La
configuración del mismo es muy simple, además de que dispones de varios estilos para que no
tengas que repetir el diseño. En la videoteca de Thrive Architect puedes ver como funciona.
Lectura recomendada
Configuración del botón de Facebook
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Styled List (Listas con estilo) te permite insertar listas con iconos a la izquierda desde
la galería de iconos, además es muy flexible a la hora de ordenar los textos hacia arriba o hacia
abajo solo arrastrando y soltando, en la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Table – Tablas
El elemento Table (Tablas) te permite insertar tablas de todo tipo en tus páginas, artículos y
landing pages de forma muy sencilla, ya sabes lo lioso que puede ser hacer esto con el editor
nativo de WordPress. En la videoteca de Thrive Architect puedes ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Table of Contents (Tabla de contenidos) este elemento es genial porque te permitirá
generar un índice completo del artículo que hayas creado de forma muy sencilla. Puedes ver un
ejemplo en este mismo post al principio del mismo, en la videoteca de Thrive Architect puedes ver
como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Tabs (Pestañas con contenido) es muy interesante porque te permitirá mostrar
muchos contenidos en un espacio reducidoy puedes mostrarlo tanto en horizontal como en
vertical, pero una imagen vale más que mil palabras, en la videoteca de Thrive Architect puedes
ver como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Testimonials – Testimonios
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Vídeo (Vídeo adaptativo) es sin duda uno de los más utilizados y te permitirá insertar
vídeos de las plataformas más populares como por ejemplo; YouYube, Vimeo y Wistia entre
otros, además de que es responsive (adpatativo). En la videoteca de Thrive Architect puedes ver
como funciona.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento More Tag (Etiqueta Leer más...) te permitirá agregar una etiqueta para leer más
contenido cuando se hace clic en el texto (Leer más...). Además puedes colocarlo en cualquier
parte de un párrafo solamente arrastrando el elemento More Tag en la posición deseada.
Cómo puedes apreciar en el ejemplo de la imagen superior la etiqueta More Tag está aplicada al
principio de todos mis artículos, de esta forma en la vista Blog se muestra un fragmento de texto
que escribí previamente al principio del mismo y de esta forma el visitante tiene que hacer clic en
la etiqueta Leer más para poder ver el artículo completo.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
Otro elemento que te facilitará la vida es Styled Box (Cajas con estilos) porque al arrastrar este
elemento en la posición deseada se desplegará un catálogo con un montón de cajas
prediseñadas listas para utilizar, solo debes cambiar el texto por el tuyo y listo.
Como puedes apreciar en el ejemplo de la imagen superior esta es una de las cajas prediseñadas
listas para usar, porque dispones de más de 55 cajas preformateadas para que encajen con tu
temática. El cielo es el límite, ¡deja volar tu imaginación!
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Numbered List (Listas con números) es muy similar al elemento Style List (Listas con
estilo) que se encuentra más arriba en este mismo tutorial aquí, la diferencia está en que no
muestra iconos sino que muestra números.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Call to Action (Llamada a la acción) te permitirá colocar en cualquier sitio cajas
predefinidas para redirigir al visitante a una landing page como la del ejemplo superior, haz clic en
el botón y mira que pasa. Además podrás editar todos los textos, imágenes y botones como te
apetezca.
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
El elemento Guarantee Box (Caja de garantía) es muy útil en el caso que vendas un servicio o
producto, donde podrás garantizar la devolución del dinero en caso de insatisfacción del cliente y
podrás hacerlo de una manera muy fácil solo arrastrando y soltando desde el catalogo de cajas
ya prediseñadas, además podrás editar todos los textos e imágenes a tu antojo. ¡Prueba haber si
te gusta alguna!
Si haces clic en el primer icono superior derecho puedes duplicar todo el contenido con todas sus
configuraciones.
En la versión anterior Thrive Content Builder te permitía cargar elementos prediseñados desde el
panel de elementos que estaba a la derecha de la pantalla, ahora la cosa cambió un poco, los
elementos prediseñados se cargan desde el catálogo de plantillas disponibles y es una plantilla
que contiene muchas cajas de contenido de diferentes elementos que se va ampliando en cada
actualización. Lo bueno de esto es que dispones de los diseños anteriores y los nuevos de Thrive
Architect. En la videoteca de Thrive Architect puedes ver como funciona.
Una de las cosas que pedíamos a gritos, los usuarios de TCB, era la posibilidad de insertar
vídeos en una sección de fondo y como la gente de thrivethemes saben escuchar en esta versión
de Thrive Architect esto es ahora posible. En la videoteca de Thrive Architect puedes ver como
funciona.
Antes en Thrive Content Builder solía suceder que la versión de escritorio no se correspondía con
la versión móvil porque algunos elementos quedaban desencajados y no había forma de corregir
esto de forma automática, la única posibilidad era tirar de CSS, como lo puedes ver aquí. No
obstante, ahora en Thrive Architect esto se acabó porque dispones de correcciones
independientes que no afectarán a la vista de escritorio, tablet y móvil. La cosa sería así:
Desktop / Vista ordenador de escritorio: Todos los cambios que hagas en esta vista afectará a
la vista Desktop, Tablet y Móvil.
Tablet / Vista Tableta: Todos los cambios que hagas en esta vista afectará solo a la vista Tablet
y Mobile.
Mobile / Vista móvil: Todos los cambios que hagas en esta vista afectará solamente a la vista
Mobile.
Igualmente si eres de los frikis que les gusta experimentar, siempre tienes la posibilidad de crear
tus propias modificaciones de forma manual añadiendo tu propio CSS personalizado, en la
videoteca de Thrive Architect puedes ver como funciona.
Otra de las sorpresas que nos trae Thrive Architect es que podrás ocultar cualquier elemento con
el panel Responsive que ves en la imagen superior, solamente deslizando el selector de VISIBLE
a HIDDEN se mostrará o no un elemento cualquiera que hayas seleccionado en la vista Desktop /
Ordenador de escritorio, Tablet / Tableta o Mobile /Móvil así de fácil podrás ocultar lo que quieras
en todas las vistas. En la videoteca de Thrive Architect puedes ver como funciona.
Si tenías Thrive Content Builder, seguramente tendrás creadas varias páginas y landing pages
con el formato viejo de TCB. No hay problema, puedes dejarlo así porque conviven perfectamente
el uno con el otro, pero si te vieras en la necesidad de editar un botón como el de la imagen
superior, tendrías que migrar ese botón al nuevo formato de Thrive Architect. No te preocupes
porque es muy sencillo, solo tienes que hacer clic en el botón que dice MIGRATE ELEMENT y
eso es todo, en la videoteca de Thrive Architect puedes ver como funciona.
Este es un punto a destacar, las listas con estilo. En la versión de Thrive Content Builder podías
elegir entre 6 iconos diferentes y no podías personalizar los iconos de forma individual, pero esto
se acabó ahora. En Thrive Architect dispones de una galería enorme de iconos, además puedes
modificar el color y el tamaño de forma independiente de cada una de las líneas. Con estas
mejoras no hay límite en la creación de listas, solo tu imaginación. En la videoteca de Thrive
Architect puedes ver como funciona.
Una de las mejoras más importantes en relación con Thrive Content Builder es sin duda el tema
de los márgenes, antes tenías que poner un número especifico guardar y luego previsualizar para
ver como iba quedando la cosa, pero este método no era muy productivo.
Pero ahora con Thrive Architect esto será como cantar y coser porque el sistema de márgenes es
ahora más visual y podrás mover cualquier elemento por la pantalla y verlo al mismo tiempo sin
necesidad de guardar y previzualizar 100% en tiempo real.
En la videoteca de Thrive Architect puedes ver lo fácil que es aplicar márgenes y rellenos a
cualquier elemento en tiempo real.
Aplicar una sección de fondo de ancho completo en Thrive Content Builder era posible creando
una landing page desde cero y no se podía aplicar a nuestros post o páginas normales.
Pero ahora en Thrive Architect crear una sección de fondo con contenido que ocupe el ancho
completo de una página o post es algo sumamente sencillo, se acabaron las limitaciones puedes
crear diseños exclusivos donde quieras.
Punto 1: Debes hacer clic en el icono que se encuentra en la base del panel de elementos como
puedes apreciar en la imagen.
Punto 2: En ese momento se desplegará un menú relacionado con el manejo de las landing
page, donde no solo podrás cargar una plantilla sino que además podrás exportarla, importarla,
guardarla o resetear la página al modo original de tu plantilla de WordPress.
Punto 3: Cuando se abra el catalogo tendrás un abanico amplio de posibilidades de landing page
prediseñadas listas para utilizar en tu sitio.
Ya sabes que puedes cargar landing page o páginas de destino prediseñadas o sea, que están
listas para utilizarlas en tu sitio, solo tienes que cambiar las imágenes, textos y configurar los
formularios de suscripción si los tuviera.
La diferencia en Thrive Architect es que los botones han cambiado de lugar para acceder al menú
de opciones y puedes verlo en la imagen superior.
En la videoteca de Thrive Architect te muestro el proceso de cargar una landing page desde el
catalogo de Thrive Architect y te darás cuenta que es muy fácil.
Como puedes ver en la imagen superior, los elementos que estaban antes en la izquierda ya no
están, pasaron a la derecha para una mayor comodidad y el lado izquierdo solamente se habilita
cuando seleccionamos algún elemento de la derecha mostrando las configuraciones del elemento
activo en ese momento. Además, los botones de cambio de pantalla y previsualización quedaron
en el medio. Cabe aclarar que esta imagen es la que se muestra cuando editamos un post o
entrada cualquiera, si estuvieras editando una pagina verías más botones asociados a la creación
de landing page.
Elementos
#1: Si haces clic en el signo "+" se desplegará un menú con todos los elementos disponibles que
antes estaban a la vista, pero del lado izquierdo. Y si vuelves hacer clic en el signo "+" el panel
quedará oculto para tener una mayor área de trabajo sin distracciones como puedes observar en
la imagen superior.
#2: Si haces clic en el icono con forma de engranaje podrás acceder a Advanced Settings
(configuraciones avanzadas) y a Save as Template (guardar como plantilla tu trabajo). Estas son
los opciones disponibles si se trata de una entrada o post convencional.
Pero si estas editando una página la cosa cambia porque tendrás más opciones especificas para
la creación de landing page.
#2: Si estás editando o creando una página tipo landing page la cosa cambia un poco porque
tendrás más opciones especificas para la creación y administración de las mismas que paso a
detallarte.
Global (lo que cambies aquí afecta a todo el sitio). Dentro del menú Global hay un sub-menú con
opciones concretas:
Change template (cambiar plantilla). El icono con forma de nube te está indicando que puedes
descargar o cambiar plantillas del amplio catálogo disponible, si haces clic se abrirá una ventana
con diferentes plantillas pre-diseñadas que puedes utilizar en tu proyecto como puedes ver en la
segunda imagen superior.
El último icono A/B (test prueba A y prueba B) solo está disponible cuando editas o creas una
landing page y sirve para que puedas generar 2 copias de la misma página, pero por ejemplo, con
diferentes botones y colores o lo que quieras cambiar para hacerla diferente una de otra.
El test A/B mostrará a los visitantes de forma alternada las dos variaciones de una misma página
para ver cual tiene mejor llegada con tu publico objetivo y te dará una página ganadora (que será
la que tuvo mejor enganche con los visitantes) y todo esto de forma automática. ¡Impresionante!
¿Verdad?
#3: Cuando no hallas ningún elemento del panel de la izquierda verás esta imagen que te indica
donde están los botones principales.
• Add new element (agregar nuevo elemento)
• Change template (cambiar de plantilla)
• Responsive y preview (vista previa y adaptada)
Con elemento
En cambio, cuando seleccionas un elemento del icono "+" en la derecha, esta misma imagen que
no tenía nada pasa a tener las diferentes opciones de configuración del elemento elegido, en este
caso la imagen corresponde al elemento Text (texto).
También puedes apreciar que solo se abre la primera pestaña (la principal) y las demás opciones
secundarias quedan cerradas para no confundirte. El sistema es del tipo "accordion" y me gustó
mucho porque es más cómodo trabajar con cero distracciones y seguro que a ti te va a gustar
también.
Previsualización
#4: Otros de los cambios importantes es que el botón Preview (pre-visualizar) que antes estaba a
la izquierda ahora pasó a estar en el centro, al lado de las vistas para dispositivos móviles.
Para poder ver una vista previa primero debes guardar tu trabajo haciendo clic en el botón Save
Work (guardar trabajo) y luego si puedes, hacer clic en el botón Preview para ver el estado actual
de tu entrada o página.
Vistas adaptables
#5: Las vistas previas para escritorio, tablet y móvil también pasaron a estar en el centro para
mayor comodidad porque antes estaban a la izquierda.
Botón de guardado
#6: Este botón que es uno de los más importantes Save Work (guardar trabajo) también se ha
simplificado, porque hay solo dos opciones; guardar el trabajo actual o guardar el trabajo y salir
del modo de edición en Save and Exit (guardar y salir).
Deshacer y rehacer
#7: Este cambio también es significativo porque ahora las flechas, para volver a un paso anterior
o posterior, están bien a la vista al lado del botón de guardado y esto si es de agradecer porque
antes había que ingresar en el menú de guardado para disponer de estas opciones que son de
uso permanente.
Administrador de revisiones
#8: Por último, pero no menos importante, el botón para administrar las revisiones, en el caso que
quisieras volver a un guardado anterior, ahora está a la vista porque antes se encontraba oculto
en el menú de guardado.
Con esto terminamos con lo que es la interface principal del editor Thrive Architect. Como te
habrás dado cuenta, todos los cambios fueron realmente acertados porque las funciones que
usarás más a menudo están a la vista y bien distribuidas. Honestamente me llevó minutos
adaptarme al nuevo entorno y puedo asegurarte que mejora la productividad en un 100%. No
obstante, todavía hay más novedades que iré desarrollando en el siguiente apartado.
¿Alguna vez te ha pasado de tener que cambiar el color del encabezado de todas las páginas y
tener que hacerlo de forma manual página por página? Claro, si son dos páginas no pasa nada,
pero cuando tienes que hacer el cambio a 20 páginas o más esto se transforma en un tedio.
Para solucionar este problema los chicos de Thrive Themes crearon lo función de Global Colors
(Colores globales). Esto quiere decir que cuando haces un cambio en donde esté aplicado un
color global, automáticamente se cambiará en todas las páginas que tengan asignado el color
global que intentas cambiar. En resumen, podrás cambiar el color de fondo del encabezado de
tus 20 páginas en un solo clic. A continuación te muestro donde encontrar esta maravillosa
función.
Como puedes ver en la imagen superior, la nueva función de colores globales se encuentra justo
al lado de los colores favoritos.
Para que un color sea tratado con global tienes que guardarlo primero haciendo clic en la opción
As Global (guardar como color global) para poder utilizarlo posteriormente.
En la segunda imagen superior te contaré como diferenciar, editar y desvincular un color global.
#1-2 Como puedes observar en el punto 1 y 2 el color del ejemplo tiene un triángulo en la parte
inferior derecha del mismo, esto te está indicando que en algún momento decidiste que ese color
se tratará como global para utilizarlo donde quieras.
#3 Cuando seleccionas un color global tienes la posibilidad de cambiar la tonalidad por otra
haciendo clic en el botón Edit (editar), pero ten en cuenta que si el color ya se aplicó con
anterioridad en alguna parte de tu sitio, este mismo también cambiará de color al mismo tiempo.
#4 Como te habrás dado cuenta hay un botón Unlink (Desvincular) y si haces clic aquí el color en
cuestión no será más un color global.
Ahora también se puede aplicar estilos globales específicos a los botones, el proceso es muy
simple y lo tienes descrito en las tres de arriba.
Primero para que un botón tenga estilo global debes hacer clic en el icono superior derecho como
muestra la primera imagen.
Segundo se abrirá una ventana donde debes poner un nombre al nuevo estilo, en el caso del
ejemplo lo llamaré Mi botón 1. Luego clic en Apply (aplicar) y listo, el botón es considerado como
global.
Ahora si quieres editar este nuevo botón con estilo global debes hacer clic en el icono con forma
de lápiz o de lo contrario no podrás editarlo.
Si quieres eliminar o desvincular el estilo global del botón debes hacer clic en los tres puntos
verticales (menú) donde tendrás dos opciones Rename (renombrar) y Delete (eliminar).
Te aparecerá la siguiente advertencia:
Al eliminar el estilo global, todos los elementos que lo usen se restablecerán a sus estilos
predeterminados. ¿Estás seguro que deseas continuar?
Esto quiere decir que si tenías aplicado el estilo global de ese botón en muchas páginas de tu
sitio al eliminar el estilo global todos los demás perderán las propiedades que tenían y volverán a
sus valores por defecto. (Así que cuidado con esta opción)
Esta nueva función de plantillas y símbolos es tan potente que te permitirá ganar mucho tiempo
en acciones repetitivas de tu web. Lo cierto es que la función Templates (plantillas) ya la
veníamos usando, ¿te acuerdas? Cualquier elemento, cajas o botones se podían guardar para su
uso posterior sin tener que crearla de vuelta, hasta ahí muy bien.
Pero ahora se suma la opción Symbols (símbolos) ¿Y para qué sirve? Pues para facilitarte la
vida.
Por ejemplo, estuviste un tiempo largo creando una caja de promoción muy bonita y la has puesto
en todas las páginas, pero resulta que lo que promocionas cambia de precio a la semana,
¡menudo problema! Tendrías que entrar uno por una a todas las páginas que tienen esa caja con
la promo y cambiar su precio por el nuevo; bien si son dos páginas, pero si son 30 páginas sería
un tedio.
Para solventar este problema se creó Symbols (símbolos). En vez de guardar la caja como
Templates (template tradicional) ahora puedes elegir guardarla como un símbolo. ¿La diferencia?
Aquí viene lo bueno; tomando de ejemplo la caja de la promo en las 30 páginas de tu web, justo
hoy toca cambiar el precio de la promo, pero como guardaste previamente la caja con Symbols
(símbolos) cuando hagas el cambio en una página el mismo cambio se repetirá de forma
automática en el resto de las 29 páginas restantes. ¡Impresionante!
Ahora te voy a mostrar todo el proceso en imágenes para que veas lo fácil que es crear todos los
símbolos que quieras, ten en cuenta que casi todos los elementos disponibles en Thrive Architect
se pueden guardar en forma de plantillas y símbolos.
Para guardar un elemento cualquiera debes hacer clic en el icono con forma de diskette como se
nuestra en la imagen superior.
Se abrirá una ventana donde puedes elegir los símbolos que tengas guardados.
Eso es todo, cuando hagas un cambio en uno, se cambiará también en todos los sitios donde
aparezca el símbolo en cuestión.
En este vídeo puedes ver el proceso de creación de un símbolo.
Templates & Symbols (Plantillas y Símbolos)
Recursos
Tutoriales y guías en la web
Puedes consultar de forma gratuita contenidos en mi blog, como guías y tutoriales paso a paso
para que seas el mejor ¡creando! No te los pierdas valen su peso en oro.
Te recomiendo los siguientes:
Thrive Architect nueva interface más fácil que nunca
Performag Theme Premium Parte 1: Te cuento todos sus secretos paso a paso
Performag Theme Premium Parte 2: Te cuento todos sus secretos paso a paso
Crear una base de datos en CPanel para utilizarla en una instalación manual de
WordPress.org
Thrive Quiz Builder: Crear cuestionarios impresionantes en segundos nunca fue tan fácil
GeneratePress: Mega tutorial de esta plantilla para WordPress que llegó para quedarse
Cómo obtener el código html de un formulario en Mailrelay para utilizarlo con Thrive
Content Builder
Crear una base de datos en CPanel para utilizarla en una instalación manual de
WordPress.org
Nota: Estos vídeos no reemplazan al contenido de este eBook, ya que traté de mostrar de forma
rápida el funcionamiento de los mismos.
Por ende para ver cada configuración en profundidad, siempre deberás recurrir a lo que está
escrito en este eBook con las infografías correspondientes en cada caso.
También puedes acceder a las videotecas desde el listado que verás a continuación haciendo
clic en los enlaces correspondientes.
CANAL EN YOUTUBE
Canal de Thrive Content Builder y Thrive Architect en Español - YouTube
GRUPO EN FACEBOOK
Thrive Architect la evolución de Thrive Content Builder
Table - Tablas
Table of Contents - Tabla de contenidos
Tabs - Pestañas con contenido
Testimonials - Testimonios
Toggle - Contenido desplegable
Vídeo - Vídeo adaptativo
WordPress Content - Contenido de WordPress
Sí, es compatible y yo lo utilizo en mis proyectos web junto con Thrive Content Builder lo puedes
descargar desde el repositorio de WordPress. Es gratuito en su versión estándar y tiene una Pro
de pago.
Sin duda es uno de los mejores plugin en este campo con más de 1+ millón de instalaciones
activas y 1.333 estrellas y sumando día a día.
Al principio puede parecer un poco raro porque verás el editor clásico de WordPress vacío pero
con el tiempo te acostumbrarás, el panel de configuración de YOAST sigue estando en su lugar,
solo tienes que rellenar los campos de título descripción y palabra clave como se ve en la
siguiente imagen.
Para editar el contenido solo debes cliquear sobre el botón Edit with Thrive Content Builder
(Editar con Thrive Content Builder) como se ve en la imagen inferior y de esa forma podrás hacer
las correcciones que te sugiere el analizador de contenidos de YOAST.
Esta es una pregunta recurrente entre los suscriptores y la respuesta es sí, se puede exportar
cualquier página o Landing Page en otra página y también replicarla en otra web.
En este eBook está explicado el procedimiento pasó a paso con infografías.
Aquí te dejo el enlace interno: Exportar una Landing Page
Y el otro enlace interno de importación: Importar una Landing Page
Pero una imagen vale más que mil palabras puedes verlo en mi web porque realicé una Súper
Mega Guía de esta Plantilla Performag.
Aquí te dejo el enlace externo: Editor con nuevos Shortcodes
Según los desarrolladores de Thrivethemes ellos afirman que TCB funciona perfectamente con
cualquier tipo de plantilla o themes, sean gratuitos o premium.
Ahora bien, en mi experiencia puedo decir que he probado TCB con themes o plantillas de
Génesis y funciona perfectamente como así también con themes o plantillas gratuitas, no he
tenido problema alguno.
Ahora mismo en algunas de mis web estoy utilizando themes o plantillas de thrivethemes porque
junto con TCB son ¡dinamita pura!
Tienes que saber que no es necesario tener Thrive Content Builder para usar el Theme
Performag o cualquier otro Themes de Thrivethemes. ¡Pero juntos son dinamita!
TCB está preparado para funcionar con cualquier tipo de plantillas o themes, da igual que sean
gratuitas o premium (de pago).
Es más, lo puedes utilizar con las propias plantillas que trae WordPress.org por defecto, que son
gratuitas.
Pero si tienes la posibilidad de comprar TCB + Plantilla juntos son una formula explosiva y el
cielo es el límite. En mi web tengo instalado el Theme Performag + Thrive Content Builder y te
digo que no volvería jamás al antiguo editor de WordPress. Si tu bolsillo te lo permite, pega el
salto ahora, no te arrepentirás, es una inversión.
No hace falta comprar Thrive Content Builder para usar un Theme o plantilla de thrivethemes son
totalmente independientes.
Es decir Thrive Content Builder puede funcionar con cualquier plantilla o theme que tengas y los
Themes de thrivetheme.com pueden funcionar perfectamente sin tener que comprar Thrive
Content Builder ¿Se entendió? Pero juntos son imparables.
Sí, dispones de soporte especializado que te ayudará a evacuar todas tus dudas por medio de
tickets y foros exclusivos para clientes.
La compra de cualquier plugin de Thrivethemes.com incluye 1 año de soporte ilimitado, luego
de ese periodo puedes pagar una pequeña cantidad extra si quieres seguir teniendo ayuda del
soporte.
Cabe señalar que tanto los foros de clientes como el soporte de ticket de ayuda están en inglés.
Si no te llevas bien con el inglés no te preocupes porque estas herramientas son muy intuitivas y
además me tienes a mí creando guías, tutoriales totalmente en español para hacerte la vida más
fácil.
En realidad Thrive Content Builder está creado para editar páginas y artículos de tu blog. Si estás
editando una página normal o un artículo (Post) solo podrás editar el body (cuerpo) del contenido
de esa página o ese artículo en cuestión.
Ahora bien, si quieres editar completamente una página, puedes hacerlo perfectamente con el
formato de Landing Page, de esta manera podrás personalizar al 100% una página, esto quiere
decir que puedes crear un encabezado, un footer o lo que se te ocurra, el cielo es el límite.
Aquí puedes ver unos ejemplos de páginas creadas íntegramente desde la cabeza a los pies:
Portada
Recursos Gratuitos
La respuesta es sí, puedes utilizar Shortcodes (Códigos cortos) de otro plugin que tengas
instalado.
Pero deberás hacerlo utilizando el elemento WordPress Content (Contenido de WordPress)
¿Te acuerdas? Lo viste más arriba en este mismo eBook, te dejo el enlace interno para refrescar
la memoria: Elemento WordPress Content
Tu web no cargará lenta, todo lo contrario, cargará mucho más rápido que antes. Los chicos de
thrivethemes.com se toman muy enserio el tema de la velocidad, proporcionando en los diseños
de las plantillas puro CSS evitando de esta manera la carga de imágenes que pueden ralentizar la
web.
El plugin de TCB posee un código limpio y ligero y eso a Google le gusta mucho.
Si ya tenías una web de antes, lo más seguro es que tengas artículos ya creados con el editor de
WordPress convencional, estos artículos se seguirán viendo de la misma forma.
La diferencia está en que no podrás editar tus antiguos post con el editor de Thrive Content
Builder.
TCB trabaja de forma separada del editor estándar de WordPress para evitar conflictos.
Pero no te preocupes, porque hay una solución, puedes copiar el contenido y pegarlo en el editor
de TCB y hacer las mejoras correspondientes.
Tienes que tener claro que siempre podrás seguir usando el editor convencional de WordPress
pero con la única salvedad que lo que crees en el editor de convencional, no lo puedes editar con
Thrive Content Builder.
En resumen, pueden convivir perfectamente tus artículos viejos hechos con el editor convencional
y los nuevos hechos con el editor de TCB de forma separada.
Eso sí, siempre puedes insertar Shortcodes (códigos cortos) con el elemento WordPress Content
(Contenidos de WordPress) que está disponible dentro del editor de TCB.
Aquí te dejo algunos ejemplos de mi web:
Artículos creado con el editor convencional de WordPress
Artículos creados con el editor de Thrive Content Builder
TCB además de poder crear con el impresionantes Landing Pages, está preparado para crear
artículos o post sin ningún tipo de problemas.
Puedes ver en mi web, por ejemplo, que todos los artículos que tengo están creados directamente
con el editor de Thrive Content Builder.
Visitar el blog
Con Thrive Content Builder puedes crear artículos o post, páginas y Landing Page de forma
simple y segura. ¡¿Qué más se puede pedir?!
Si, TCB puede utilizarse en cualquier idioma de tu instalación de WordPress, esto quiere decir
que aunque Thrive Content Builder esté en su idioma nativo, el inglés, puede instalarse en un
WordPress con idioma nativo español; por ejemplo, ruso o japonés o cualquier idioma que
quieras.
El plugin TCB siempre se mostrará en inglés, que es su idioma nativo, independientemente del
idioma que tenga configurada tu actual instalación de WordPress.
Si bien TCB viene solo en su idioma nativo que es el inglés, puedes traducir tú mismo los archivos
de lenguaje al idioma que tú quieras.
Aquí en este mismo eBook te enseño cómo hacerlo: Traducir al español TCB
Por supuesto que sí, TCB ya viene de serie integrado con un fabuloso constructor de Landing
Pages con un catálogo de más de 123 plantillas prediseñadas y otras tantas en la nube que te
puedes descargar listas para utilizar.
Aquí te cuento más: Crear Landing pages
¿Las licencias Single Site y Unlimited Site se pagan por única vez?
Las licencias Single Site (1 sola web) y Unlimited Site (webs ilimitadas) tienen un pago único al
momento de comprarlo con soporte gratis por un año.
También si quisieras puedes extender el soporte técnico por más tiempo pagando una diferencia.
Pero para que te quede más claro fíjate más arriba que te cuento más detalles.
Ver los tipos de licencias de Thrive Content Builder
Sí, la licencia Agency tiene una renovación anual (se paga todos los años) porque está pensada
para gente que se dedica de forma profesional a crear webs para clientes.
Y este tipo de licencia te ofrece todos los productos de Thrivethemes.com entre ellos Thrive
Content Builder, Thrive Leads, todas las plantillas y el resto de productos que tiene esta empresa
y los nuevos que van saliendo.
Pero como ya te mencioné tienes que pagar una membresía que se paga de forma anual (todos
los años tienes que renovar la membresía).
Hoy por hoy son cada vez más las personas que navegan desde su móvil o Tablet y TCB está a
la altura de estos requerimientos, porque todos sus productos son responsive (adaptables a todo
tipo de dispositivo móvil).
Esta es la pregunta del millón ya que mucho de nosotros trabajamos hace tiempo con TCB la
empresa Thrivethemes decidió que el plugin Thrive Architect sería una actualización del viejo
TCB.
Si ya habías comprado Thrive Content Builder con anterioridad la nueva actualización a Thrive
Architect será gratuita para ti. ¿A qué mola?
¿Qué pasará con las páginas creadas con Thrive Content Builder?
Otra de las preguntas que nos quitan el sueño a los usuarios de TCB y es que pasará con los
contenidos viejos los que estaban hechos con TCB, no desesperes los chicos de Thrivethemes
piensan en todo.
Si tenías de antes TCB, no te preocupes, porque todo tu trabajo anterior es compatible 100% con
Thrive Architect, es mas podrás editar los contenidos hechos anteriormente con TCB con el nuevo
plugin Thrive Architect sin ningún problema. Aquí tienes un vídeo para que no te queden dudas.
Esta es otra de las preguntas que retumban en nuestros oídos y si eres un fanático como yo de
todos los productos de esta empresa estarás pensando... ¿Que pasará con los demás plugins
que compré? Pues nada, no te preocupes, por ejemplo:
Como así también todo el resto de plugins y plantillas que ofrece Thrivethemes que no son pocos,
de esta forma Thrive Architect estará integrado 100% a toda la familia de plugins de esta empresa
como era antes con TCB.
Si algún día decides no utilizar más Thrive Architect cosa que dudo pero bueno nunca se sabe
¿Qué pasaría? con los contenidos creados en páginas, post y landing como por ejemplo botones,
columnas, cajas de contenidos propias y prediseñadas pues se mantendrá intacto y podrás
retocar todo el contenido con el editor nativo de WordPress sin ningún problema pero con algunas
salvedades que te detallo a continuación.
Las licencias en Thrive Architect han cambiado con respecto a la vieja versón de Thrive Content
Builder ahora son de este modo: Single Licence (1 sola web), 15 Licence Pakc (15 webs
solamente) y 5 Licence Pack (5 webs solamente) tienen un pago único al momento de comprarlo
con soporte gratis por un año.
También si quisieras puedes extender el soporte técnico por más tiempo pagando una diferencia.
En el siguiente enlace puedes ver los tipos de licencias de Thrive Architect.
Thrive Architect además de poder crear con el impresionantes Landing Pages, está preparado
para crear artículos o post sin ningún tipo de problemas.
Puedes ver en mi web, por ejemplo, que todos los artículos que tengo están creados directamente
con el editor de Thrive Architetc.
Visitar el blog
Con Thrive Architect puedes crear artículos o post, páginas y Landing Page de forma simple y
segura. ¿Qué más se puede pedir?
Si, Thrive Architect puede utilizarse en cualquier idioma de tu instalación de WordPress, esto
quiere decir que aunque Thrive Architect esté en su idioma nativo, el inglés, puede instalarse en
un WordPress con idioma nativo español; por ejemplo, ruso o japonés o cualquier idioma que
quieras.
Si bien Thrive Architetc viene solo en su idioma nativo que es el inglés, puedes traducir tú mismo
los archivos de lenguaje al idioma que tú quieras.
Las licencias Single Licence (1 sola web), 15 Licence Pakc (15 webs solamente) y 5 Licence Pack
(5 webs solamente) tienen un pago único al momento de comprarlo con soporte gratis por un año.
También si quisieras puedes extender el soporte técnico por más tiempo pagando una diferencia.
En el siguiente enlace puedes ver los tipos de licencias de Thrive Architect.
Sí, la licencia Thrive Membership tiene una renovación anual (se paga todos los años).
Este tipo de licencia te ofrece todos los productos de Thrivethemes entre ellos Thrive Architect,
Thrive Leads, todas las plantillas y el resto de productos que tiene esta empresa y los nuevos que
van saliendo.
Pero como ya te mencioné tienes que pagar una membresía que se paga de forma anual (todos
los años tienes que renovar la membresía). Aquí puedes ver los precios: Precios Thrive
Membership
Sí, la licencia Agency Membership tiene una renovación anual (se paga todos los años) porque
está pensada para gente que se dedica de forma profesional a crear webs para clientes, es un
poco más cara que la licencia Thrive Membership y tienes acceso a todos sus productos que
tiene thrivethemes y los nuevos que van saliendo.
Pero como ya te mencioné tienes que pagar una membresía que se paga de forma anual (todos
los años tienes que renovar la membresía). Aquí puedes ver los precios: Precios Agency
Membership
Tu web no cargará lenta, todo lo contrario, cargará mucho más rápido que antes. Los chicos de
thrivethemes se toman muy enserio el tema de la velocidad, proporcionando en los diseños de las
plantillas puro CSS evitando de esta manera la carga de imágenes que pueden ralentizar la web.
El plugin de Thrive Architect posee un código limpio y ligero y eso a Google le gusta mucho.
La respuesta es sí, puedes utilizar Shortcodes (Códigos cortos) de otro plugin que tengas
instalado.
Pero deberás hacerlo utilizando el elemento WordPress Content (Contenido de WordPress).
En realidad Thrive Architetc está creado para editar páginas y artículos de tu blog. Si estás
editando una página normal o un artículo (Post) solo podrás editar el body (cuerpo) del contenido
de esa página o ese artículo en cuestión.
Ahora bien, si quieres editar completamente una página, puedes hacerlo perfectamente con el
formato de Landing Page, de esta manera podrás personalizar al 100% una página, esto quiere
decir que puedes crear un encabezado, un footer o lo que se te ocurra, el cielo es el límite.
Sí, dispones de soporte especializado que te ayudará a evacuar todas tus dudas por medio de
tickets y foros exclusivos para clientes.
La compra de cualquier plugin de Thrivethemes incluye 1 año de soporte ilimitado, luego de ese
periodo puedes pagar una pequeña cantidad extra si quieres seguir teniendo ayuda del soporte.
Cabe señalar que tanto los foros de clientes como el soporte de ticket de ayuda están en inglés.
Si no te llevas bien con el inglés no te preocupes porque estas herramientas son muy intuitivas y
además me tienes a mí creando guías, tutoriales y eBook totalmente en español para hacerte la
vida más fácil.
No hace falta comprar Thrive Architetc para usar un theme o plantilla de thrivethemes son
totalmente independientes.
Es decir Thrive Architetc puede funcionar con cualquier plantilla o theme que tengas y los themes
de thrivethemes pueden funcionar perfectamente sin tener que comprar Thrive Architetc ¿Se
entendió? Pero juntos son imparables.
Aquí puedes ver algunas de las plantillas con sus demos: Más themes impresionantes de
thrivethemes
Reflexión final
Llegamos al final, espero que esta Guía Definitiva Actualizada de TCB y Thrive Architect en
español te sirva de referencia y como material de consulta cuando te surjan dudas. Ese era mi
objetivo y creo que lo he cumplido.
Pero si de algo estoy seguro, es que no te arrepentirás de haberlo adquirido, tendrás un mundo
nuevo a tus pies que dará rienda suelta al creativo que llevas dentro y te dará la satisfacción de
crear algo por ti mismo.
Ya me conoces, nunca promociono una herramienta sin antes testarla a fondo, es por eso que me
tomo el tiempo que sea necesario para exprimirla a fondo y sacarle todo el potencial, para luego
crear guías, tutoriales, eBook gratuitos para vosotros.
De más está decir que soy afiliado de esta magnífica empresa creadora de impresionantes
herramientas web que se llama Thrivethemes.com. Échale un vistazo, es una empresa seria y sus
productos han dejado con la boca abierta a millones de usuarios entre ellos a mí mismo.
Si este eBook te anima a pegar el salto y pasar a otro nivel en la creación de web profesionales,
me daré por satisfecho pues ese era mi objetivo. ¡Que el cielo sea tu límite! Porque tendrás en
tus manos una herramienta increíble que te cambiará la vida, te lo aseguro.
Si compras el plugin desde cualquier enlace que diga Thrive Content Builder o Thrive Architect
en este eBook o desde mi web, a ti te saldrá lo mismo pero yo ganaré una pequeña comisión que
me alentará a seguir creando recursos web gratuitos para todos. ¡Gracias!
Te invito a que eches un vistazo a la web oficial de Thrive Architect para que conozcas las
impresionantes herramientas que tienen para WordPress.org.
Si no puedes acceder copia y pega este enlace en tu navegador:
https://www.miguelcarrerasdutra.com/go/thrive-architect/
VISITAR LA WEB OFICIAL DE THRIVE MEMBERSHIP
miguelcarrerasdutra.com
Sígueme por aquí:
Facebook | Twitter | Linkedin | Pinterest | YouTube | Instagram | Vimeo
No quiero despedirme sin antes agradecerte que hayas descargado este eBook. Gente como tú
me anima a seguir creando recursos gratuitos para todos.
La Guía Definitiva Actualizada de Thrive Content Builder en Español que ahora se llama Thrive Architect por
Miguel Carreras Dutra está bajo una licencia Creative Commons Reconocimiento-SinObraDerivada 4.0 Internacional
License. Creado a partir de la obra en thrivethemes.com/architect
Copyright © 2019 Miguel Ángel Carreras Dutra. Todos los derechos reservados.
Prohibida la reproducción total o parcial de este eBook, por cualquier medio, sin el permiso previo y por escrito del
autor. Todas las marcas registradas que aparecen en este documento son propiedad de sus respectivos propietarios.