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

Escrito por: MCD

Tiempo de lectura minutos

10

WordPress.org y Thrive Content Builder tutorial parte 3 las mejores herramientas ¡Para la creación!

More...

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

¿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 la creatividad que llevas dentro.

Tercera parte de la Súper Mega Guía de Thrive Content Builder, esta vez le toca el turno a los Advanced Elements (Elementos avanzados) que son 14 en total.

Si no has visto la primera y segunda parte de esta Súper Mega Guía te recomiendo que empieces por el principio aquí te dejo los enlaces y no te pierdas el Mega Tutorial en Español de Thrive Architect la evolución más esperada de Thrive Content Builder:

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

Advanced Elements - Elementos avanzados

Widget - Menú personalizado

thrive content builder 3

Si te encuentras en la necesidad de mostrar un menú en tus landing pages, el elemento Widgets es lo que necesitas.

¿Cómo funciona? En realidad no tiene demasiada complejidad. Al hacer clic en el elemento Widgets se desplegará un menú con la opción + Custom menu (menú personalizado). Debes arrastrarlo a la posición deseada y en ese momento se mostrará el menú que tengas configurado en tu instalación de WordPress.

Si haces clic dentro de la caja de puntos que muestra tu menú actual, se mostrará un panel flotante de configuración donde tienes las opciones típicas de alineación del texto, márgenes, menú primario y menú secundario si lo hubiera, pero también podrás mostrarlo en vertical u horizontal como muestra la imagen de arriba.

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.

Menú personalizado

Thrive Content Builder la herramienta que estabas buscando para ser un creativo/a profesional. ¡Mega tutorial en español!

Tweetealo a tus amigos

Pricing Table - Tabla de precios

thrive content builder 3

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.

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

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 la segunda parte de esta guía. Si no te acuerdas puedes verlo aquí.

Tabla de precios

Tabbed Content - Pestañas con contenidos

thrive content builder 3

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!

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.

Pestañas con contenidos

Featured Grid - Cuadrícula de contenidos destacados

thrive content builder 3

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.

¿Cómo funciona? como en la mayoría de todos los Advanced Elementos (Elementos avanzados) al hacer clic sobre el se desplegará un menú con diferentes plantillas predefinidas, en este caso puedes elegir cuadrículas entre 2 y 4 columnas con imágenes o con iconos, puedes ver la diferencia en la imagen superior en el punto 7.

En la cuadrícula que se muestra como ejemplo dispones de un botón Add Media (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 instalado la galería de iconos te muestro como hacerlo en la primera parte de esta guía aquí.

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.

Cuadrícula de contenidos

WordPress y Thrive Content Builder el matrimonio perfecto. ¡No te pierdas este increíble mega tutorial para crear la web de tus sueños!

Tweetealo a tus amigos

Content Toggle - Contenido oculto y desplegable

thrive content builder 3

Content Toggle (Contenido oculto y desplegable) este es un elemento muy practico 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 como se vería ¿Te ha gustado verdad?

¿Cómo funciona? su configuración es sencilla debes arrastrar y soltar el elemento Content Toggle (Contenido oculto y desplegable) a la posición deseada en ese instante te aparecerá la caja de puntos con la plantilla de ejemplo un título y un texto oculto de relleno, si haces Clic sobre cualquiera de ellos se abrirá el editor flotante para que puedas personalizar tus propios textos.

Puedes ver un ejemplo funcionando aquí debajo.

Lección 1
Lección 2
Lección 3

Se puede ver claramente que tiene dos partes a configurar una es el título y la otra el contenido que estará oculto.

Como cambiar los textos del Título y Contenido oculto:

  1. 1
    Para cambiar el título Content Toggle Headline solo debes Cliquear sobre el mismo y se abrirá el editor flotante.
  2. 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. 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.

Contenido oculto

Table - Tablas

thrive content builder 3

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 tu puedes editar haciendo clic en los mismos.

Para editar la tabla después de creado 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.

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.

Tablas

Data Elements - Elementos de información

thrive content builder 3

Data Elements (Elementos de información) otro elemento que forma parte de mis favoritos ¿Para que 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 estés 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 sólo 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.

Alimentos + consumidos

Frutas 90%
Vegetales 70%
Carnes 50%

¡Gracias por tus donaciones!

750
Total recaudado

¿Quieres formar parte? somos una comunidad de:

3000 Suscriptores ¡Únete ahora!

¿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 vera 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.

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.

Elementos de datos

Presume de una web profesional sin saber programación con Thrive Content Builder. ¡Mega tutorial solo arrastrando y soltando!

Tweetealo a tus amigos

Google Map Embed - Insertar mapas de Google

thrive content builder 3

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

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.

Insertar mapas

Countdown Timer - Temporizador de cuenta atrás

thrive content builder 3

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.
  • + Countdown Evergreen (Temporizador indefinido) este elemento cumple la función de insertar contadores de cuenta regresiva igual que el elemento Countdown con la diferencia que puedes elegir la duración en días y no por fecha específica como el anterior.

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.

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.

Temporizador de cuenta atrás

Responsive Video - Vídeo adaptable

thrive content builder 3

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.

¿Cómo funciona? debes arrastrar y soltar el elemento Responsive Video en la posición deseada en ese momento verás una caja de puntos con un botón en su interior que dice Add Video (añadir vídeo) cuando hagas clic en el mismo se abrirá el panel de configuración donde podrás ingresar la URL de tu vídeo como se ve en la imagen superior.

Dispones de las plataformas de vídeo más conocidas como ser Youtube, 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ídeo dándole un aspecto más profesional, debajo puedes ver un ejemplo en acción.

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.

Vídeo adaptable

Ahora tú puedes crear la web de tus sueños solo arrastrando y soltando. ¡Mega tutorial en español!

Tweetealo a tus amigos

Table of Content - Tabla de contenidos

thrive content builder 3

Table of Content (Tabla de contenidos) este elemento es imprescindible a la hora de crear artículos extensos como este que estas viendo ahora, no solo por una cuestión estética y orden de la información si no que le darás al usuario que visita tu web una mejor experiencia al navegar tu web.

¿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 que 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 hallas 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.

Puedes ver un ejemplo funcionando en este mismo artículo al principio del mismo.

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.

tabla de contenidos

Lead Generation - Formularios para la captación de suscriptores

Configuración del elemento Lead Generation

thrive content builder 3

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 ayudará 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.

Si haces clic en el interior de la caja de puntos se abrirá el panel de configuración flotante, al principio puede parecer un poco compleja la configuración del mismo pero no es así, (como decía un amigo mío de tan fácil era difícil 🙂

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 puedes ver el proceso en el siguiente enlace: 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.

¿Que sistema debo utilizar? Mailpoet plugin interno en WordPress o Mailrelay plataforma externa.

  • Mailpoet el mejor plugin gratuito para el envió 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 plataforma 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 envió 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 echa para utilizar el formulario cuando quieras y donde quieras.

Lead Generation

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

  • Hosting 1GB = 150 emails por hora.
  • Hosting 2GB = 200 emails por hora.
  • Hosting 3GB = 250 emails por hora.
  • Hosting 4GB = 300 emails por hora.
  • Hosting 5GB = 350 emails por hora.
  • Hosting 6GB = 400 emails por hora.
  • Hosting 7GB = 450 emails por hora.
  • Hosting 8GB = 500 emails por hora.
  • Hosting 9GB = 550 emails por hora.
  • Hosting 10GB = 600 emails por hora.

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 envió y lo harías a través de Mandrill que es una plataforma externa para el envió 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).

Thrive Content Builder el mejor constructor web de la historia... !Mega tutorial en español para dejar volar tu imaginación!

Tweetealo a tus amigos

Mailrelay plataforma externa para el envió de newsletter

La otra alternativa es Mailrelay la utilizo en mi web y te la recomiendo ampliamente para el envió de tus boletines. Mailrelay es una plataforma externa con sede en España y está preparada para enviar grandes volúmenes de correos sin pestañear, además tiene convenios con los grandes proveedores de correos como Hotmail, Yahoo, Gmail y esto te asegura que tus correos llegarán a destino y que tu IP no caerá en las listas negras de los mismos.

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 en serio te recomiendo a Mailrelay con lo ojos cerrados es Gratis toda su plataforma esta 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.

Como obtener el código HTML de un formulario en Mailrelay

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!

thrive content builder 3
  • Antes que nada es bueno tener al menos un grupo creado dentro de Mailrelay en este caso del ejemplo se llamará 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 el.
  • 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 esté 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.
  • Paso 1: 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 3: En Grupos debes elegir Blog el grupo que creaste anteriormente.
  • 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.
  • Paso 1: Ejemplo de una página personalizada de una URL de éxito. 
  • Paso 2: Ejemplo de una página personalizada de una URL de error.
  • Paso 3: Ejemplo de una página personalizada de una URL de confirmación.
  • Paso 1: Ya estamos en la recta final en el paso anterior le dimos forma al formulario y ya está listo pero todavía necesitas copiar el código html para pegarlo en el elemento Lead Generation.
  • Paso 2: Verás el formulario creado en el paso anterior Formulario Suscripción MCD debes seleccionarlo para que quede resaltado.
  • Paso 3: 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 está 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í.
  • En la siguiente captura te muestro el procedimiento para pegar el código del formulario de Mailrelay en el elemento Lead Generation.
  • Si no te acuerdas cual era el elemento aquí te dejo el enlace donde debes pegar el código: Lead Generation (Formularios para la captación de suscriptores) ¿Te acuerdas?
  • Visita desde este enlace 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

Insertar el código del formulario de Mailrelay en Lead Generation

Insertar el código de mailrelay

Método 2: Utilizar la API de Mailrelay en Lead Generation

API de Mailrelay

  • Método 2: Hay otra forma de integrar los formularios creados en Mailrelay y es con su propia API que está integrada en el elemento Lead Generation, en el vídeo de arriba te muestro el procedimiento.
  • La única pega hasta el momento es que no envía un correo de confirmación al usuario lo suscribe automáticamente.

Post Grid - Cuadrícula de artículos

Post Grid (Cuadrícula de artículos) otro elemento de mis favoritos que te permitirá mostrar en forma de cuadrícula 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.

¿Como 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, título, leer más o un resumen como lo muestra en detalle 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.

Por último la cuarta pestaña Display Settings (configuración de visualización) puedes elegir la cantidad de columnas y la disposición horizontal o vertical de la cuadrícula.

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.

Cuadrícula de artículos

Comments - Comentarios

Comments (Comentarios) este elemento viene bien si no quieres utilizar el sistema de comentarios propio de WordPress en su lugar  podrías utilizar los de Facebook o Disqus.

¿Como funciona? debes hacer clic en el elemento Comments en ese momento se desplegará un menú con 2 opciones 1 - Facebook y 2 - Disqus 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.

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í: hairfreelife.discus.com el nombre corto del foro de Disqus es "hairfreelife" debes poner esa parte.

El segundo campo del paso 11 lo puedes dejar en blanco o poner la url completa Ej. 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.

Comentarios

Videoteca 80 vídeos tutoriales de TCB

Final de los Advanced Elements

¡Llegamos al final de los Advanced Elements! Espero que esta súper mega guía te sirva de referencia y como material de consulta cuando te surjan dudas. Ese era mi objetivo y creo que lo he cumplido.

Este es la tercera parte de esta súper mega guía que ha sido más larga de lo que esperaba. Dispones de un abanico amplio de posibilidades para dar rienda suelta a tu imaginación y puedas crear impresionantes sitios web con estilo y calidad profesional.

Si de algo no me arrepiento es de haber adquirido este plugin de la empresa Thrive Themes que se llama Thrive Content Builder y sé que te va a encantar tanto como a mi, que ahora se llama Thrive Architect y está incluido en Thrive Suite.

Ya está disponible la cuarta parte de esta Súper Mega Guía y puedes verla en este enlace: Thrive Content Builder Parte 4: La Súper Mega Guía más completa que hayas visto

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

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

FAQ's - Preguntas Frecuentes

¿Cómo insertar enlaces o links para saltar a un texto u objeto dentro de la misma página?

thrive content builder tutorial parte 3
thrive content builder tutorial parte 3
thrive content builder tutorial parte 3
thrive content builder tutorial parte 3
thrive content builder tutorial parte 3
  • 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 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? 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

Thrive Architect Mega Tutorial en Español

¿Te ha sido útil este artículo?

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

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

__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"62516":{"name":"Main Accent","parent":-1}},"gradients":[]},"palettes":[{"name":"Default Palette","value":{"colors":{"62516":{"val":"rgb(19, 114, 211)","hsl":{"h":210,"s":0.83,"l":0.45}}},"gradients":[]},"original":{"colors":{"62516":{"val":"rgb(19, 114, 211)","hsl":{"h":210,"s":0.83,"l":0.45}}},"gradients":[]}}]}__CONFIG_colors_palette__
__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"89b00":{"name":"Main Accent","parent":-1},"f4f63":{"name":"Accent Dark","parent":"89b00","lock":{"saturation":1}}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"89b00":{"val":"var(--tcb-skin-color-4)"},"f4f63":{"val":"rgb(3, 2, 2)","hsl_parent_dependency":{"h":0,"l":-0.38,"s":0.27}}},"gradients":[]},"original":{"colors":{"89b00":{"val":"rgb(19, 114, 211)","hsl":{"h":210,"s":0.83,"l":0.45,"a":1}},"f4f63":{"val":"rgb(12, 17, 21)","hsl_parent_dependency":{"h":206,"s":0.27,"l":0.06,"a":1}}},"gradients":[]}}]}__CONFIG_colors_palette__
Thrive Content Builder Parte 4: el tutorial más completo en español que hayas visto
__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"89b00":{"name":"Main Accent","parent":-1},"f4f63":{"name":"Accent Dark","parent":"89b00","lock":{"saturation":1}}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"89b00":{"val":"var(--tcb-skin-color-4)"},"f4f63":{"val":"rgb(3, 2, 2)","hsl_parent_dependency":{"h":0,"l":-0.38,"s":0.27}}},"gradients":[]},"original":{"colors":{"89b00":{"val":"rgb(19, 114, 211)","hsl":{"h":210,"s":0.83,"l":0.45,"a":1}},"f4f63":{"val":"rgb(12, 17, 21)","hsl_parent_dependency":{"h":206,"s":0.27,"l":0.06,"a":1}}},"gradients":[]}}]}__CONFIG_colors_palette__
Thrive Content Builder Parte 2: mega tutorial en español más completo

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

¡Esto también te puede interesar!

Échales un vistazo...

Elije una categoría
  • Todos
  • Hosting
  • Plugins WordPress
  • SEO Optimización
  • Themes WordPress
  • Thrive Apprentice
  • Thrive Architect
  • Thrive Automator
  • Thrive Comments
  • Thrive Content Builder
  • Thrive Leads
  • Thrive Quiz Builder
  • Thrive Theme Builder
¡Deja un comentario, tu aportación será muy apreciada!
  • Lo del cambio de nombre era broma Miguel. Es por lo extenso que va a ser por lo que te propuse el nombre de Biblia.

    Yo estoy en un grupo en Facebook con unas 200 personas que están aprendiendo a crear un blog. Algunos utilizan Thrive. Cuando tengas el e-book a punto para el público, házmelo saber y lo comentaré en el grupo. Puede que a alguien le interese.

    Saludos y suerte en tu lanzamiento

    • No te preocupes Kelo lo de la Biblia cuadraba bien pero ya lo tenia usado 🙂
      A penas lo termine avisare a todos mis suscriptores por correo con un enlace para que descarguen la Demo del e-book de forma gratuita y que puedan echarle un vistazo y ver si les gusta, puedan adquirir la versión completa a un precio económico.
      Gracias Kelo toda ayuda es bien recibida para que mucha gente disfrute de esta herramienta increíble que es TCB.

      ¡Saludos estamos en contacto! 🙂

  • Muchos presumen de tener el mejor tutorial de thrive, tu no presumes Miguel, pero lo tienes. Muy bien explicado todo como se hace, hasta el último detalle. Muchas gracias. Por cierto, cámbiale el nombre a tu e-book. Deberías llamarle «la Biblia Definitiva de Thrive Content Builder»

    Saludos.

    • Gracias Kelo voy a pensar lo del cambio de nombre todavía no esta nada dicho, pero el primer e-book que regale como recurso gratuito tenia unas 140 páginas y se llamaba así, pero como este lo supera en cantidad de material, literalmente es mas del doble además de los vídeos que lo acompañan, es por eso que quise llamarlo Thrive Content Builder la Guía Definitiva Actualizada.

      Saludos y suerte 🙂

  • Hola Miguel,

    Primero felicitarte y darte las gracias por esta serie de tutoriales. Estoy montando un blog con Thrive y me han ayudado mucho.
    Quería hacerte una consulta, ya que no he encontrado la solución en los tutoriales. Es sobre el Content Toggle. Una vez tienes creada la lista de contenidos, como se hace para que al clicar sobre un apartado, vayas directamente al texto del mismo? Creo que a esto se le llama texto ancla, o algo así. No he conseguido averiguar la manera.

    Muchísimas gracias y repito, Felicidades por el aporte.

    • Hola Kelo,
      Antes que nada gracias por tus palabras son realmente gratificantes.

      Creo que esta ves se a que te refieres y es insertar enlaces o links para saltar a un texto u objeto dentro de la misma página ¿verdad?

      Si esto es así quiero comentarte que este tema esta incluido en el próximo e-book de Thrive Content Builder la Guía Definitiva Actualizada, que ya lleva nada mas y nada menos que 333 páginas y que ya lo daría por terminado, pero faltan los vídeos que son unos cuantos y que en unos días los estaré finalizando.

      Por que te cuento esto, pues te habrás dado cuenta que no posteo nada hace un tiempo, es que el e-book me demanda muchas horas y lo quiero terminar para compartirlo con vosotros lo antes posible. 🙂

      Te voy a dar un adelanto del e-book espero que esta ves haya acertado y esta sea la respuesta que buscabas.

      Agregue una nueva sección dentro de la parte 3 que se llama FAQ (Preguntas Frecuentes) aquí te deje la respuesta para ti y para el que la necesite.

      ¿Cómo insertar enlaces o links para saltar a un texto u objeto dentro de la misma página?

      Saludos Kelo y mucha suerte con el proyecto, ya me dieron ganas de conocerlo. 🙂

  • Hola buenos días,

    Estoy haciendo un blog con Thrive y estoy siguiendo tus tutoriales que me parecen excelentes y muy prácticos. Con ellos voy resolviendo paso a paso las dudas que tengo sin ningún problema. Pero hay algo que no sé hacer y no he encontrado la manera en tus explicaciones. Se trata del content toggle. Cual es la url que te lleva a un sitio determinado de la misma página?. O dicho de otra forma. Como se hace para que al clicar encima de la parte del post a la que quieres ir te lleve allí. Gracias por tu comentario.

    • Hola, Kelo
      Antes que nada gracias por tus palabras. El elemento Content Toogle como se ve Aquí sirve para ocultar contenidos generalmente texto pero podría mostrar imágenes o lo que quieras.

      Se puede ver claramente en el ejemplo, tiene dos partes a configurar una es el título y la otra el contenido que estará oculto.

      Como cambiar los textos Título y Contenido 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 TRIANGULO que esta a la izquierda del titulo, en ese momento se desplegara hacía abajo el área oculta para cambiar la frase del ejemplo Content Toggle Headline

      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 eso es todo! 🙂

      Una vez dentro del área oculta puedes poner a un texto determinado un link o enlace a otra pagina haciendo Clic en el icono con forma de eslabón de una cadena que se llama Create link (Crear enlace) poniendo la URL que quieras y haciendo Clic en el botón Insert (Insertar) para que quede fijado el nuevo enlace.

      Este tipo de elemento es muy usado para mostrar FAQ (preguntas frecuentes) con la pregunta en el título y la respuesta en el área oculta, entonces cuando haces Clic en la pregunta se despliega la respuesta.

      Para poner links o enlaces dentro de una misma pagina deberías usar el elemento Table of Contents (Tabla de contenidos) lo puedes ver Aquí, para que esto funcione debes crear encabezados o títulos H1, H2, H3 etc. de esta forma se van generar nuevos enlaces por cada título y subtitulo que tengas en tu artículo.

      Espero haber interpretado bien tu pregunta si no es así estoy aquí para responder las dudas que te vallan surgiendo. Te cuento que estoy trabajando en un nuevo e-book que es la Guía Definitiva de Thrive Content Builder donde estarán las preguntas más frecuentes y ademas de otras funcionalidades, trucos que ofrece esta excelente herramienta.

      Un abrazo! Estamos en contacto 🙂

    • Muchas gracias por tu respuesta, tan rápida y en Domingo!

      Entiendo que para que el contenido quede oculto debo poner la tabla de contenidos dentro del content toggle. Es así?

      Espero me avises cuando esté disponible tu nuevo e-book sobre Thrive.

      Saludos.

    • Los que nos dedicamos a esto no tenemos domingo 🙂

      Mira Kelo generalmente el elemento Table of Contents (Tabla de contenidos) se utiliza al principio de cada post o artículo como puedes ver en todos mis post, después del tercero o cuarto párrafo incluyo una Tabla de contenidos para que el visitante pueda navegar de forma más cómoda cuando los post son muy largos.

      Ese sería el uso normal de este elemento ponerlo al principio del artículo, ahora bien una vez que tengas tu post armado con todos los títulos y subtitulo debes hacer Clic en el botón Update del elemento Table of Contents (Tabla de contenidos) para que se actualicen todos los enlaces internos de los títulos de tu post.

      Ahora guardas tus post (Save Changes) y haces un previo haciendo clic en el botón Preview, de esta forma puedes posar el puntero del ratón sobre los enlaces de la tabla de contenidos y haciendo Clic con el botón derecho del ratón hacer Clic en Copiar dirección del enlace que necesites.

      Ahora ya tienes un enlace, pegalo en el bloc de notas para usarlo después te quedaría algo así: https://www.miguelcarrerasdutra.com/thrive-content-builder-tutorial-parte-3/#tab-con-3

      Como te habrás dado cuenta este enlace lo copie de mi artículo de la tabla de contenidos y puedes observar que termina con #tab-con-3, por que el título Pricing Table (Tabla de precios) tiene ese código interno que lo agrega la tabla de Contenidos de forma automática, al hacer Clic en el botón Update de la Tabla de contenidos.

      Ahora solo te queda pegar este enlace https://www.miguelcarrerasdutra.com/thrive-content-builder-tutorial-parte-3/#tab-con-3 dentro del texto del área oculta del elemento Content Toogle.

      Cambia el texto por defecto Add your content here… por otro que quieras, lo seleccionas (para que quede pintado) y haces Clic en el icono con forma de eslabón de una cadena que se llama Create link (Crear enlace) poniendo la URL que quieras y haciendo Clic en el botón Insert (Insertar) para que quede fijado el nuevo link.

      Muy pronto estará disponible el e-book de forma gratuita para que todos lo puedan tener, avisare por correo cuando llegue el día 🙂

      Eso es todo espero haberte ayudado 🙂

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >
    Success message!
    Warning message!
    Error message!