Cómo Añadir y Editar Texto

Un excelente texto es la clave para construir landing pages que conviertan. Afortunadamente, el texto es uno de los elementos más fáciles de editar y personalizar en el Editor de Páginas de Unbounce. Dispones de diversas opciones para adaptar el texto, como editarlo en plantillas de texto o arrastrar y soltar tu propio widget de texto para introducir texto en un lugar distinto de tu landing page. Una vez que has introducido el texto puedes modificar sus dimensiones, enlazarlo, cambiar su estilo y mucho más.

Este artículo te ayudará a:

  • Identificar áreas de texto en la plantilla de tu landing page.
  • Insertar áreas de texto en tu landing page usando el widget de texto.
  • Formatear e incorporar tu marca a tu texto.
  • Crear enlaces en los campos de texto para dirigir a los visitantes a otras páginas.

Cómo Añadir y Editar Texto

  1. Haz doble clic en el texto existente para editarlo.

o

  1. Arrastra y suelta el widget de Texto desde el panel de widgets de la izquierda para agregar un nuevo cuadro de texto.
  2. Escribe tu texto en el cuadro.
  3. Formatea el texto usando el Panel de propiedades de la derecha (incluyendo el tipo y tamaño de la fuente, color del texto y del resaltado, formateado (como negrita, cursiva y subrayado), la alineación del texto y el espaciado entre líneas.

Si añades la etiqueta <span> dentro del código fuente, la etiqueta <span> no puede estar vacía.


Cómo crear un Vínculo en el Editor de Texto

  1. Selecciona el texto que quieres convertir en vínculo.
  2. Haz clic en la pestaña Action ubicada a la derecha del Panel de propiedades.
  3. Pega tu enlace en el campo "URL".
  4. Pulsa Enter para activar el enlace de texto.

Cómo eliminar los Subrayados de los Enlaces de Texto

Quitar el subrayado de los enlaces en tu página es fácil con un poco de magia CSS.

Para configurar esto:

  1. Haz clic en el botón Stylesheets que se encuentra en la parte inferior derecha del Editor de Páginas.
  2. Asigna el nombre Link Styles a tu Stylesheet.
  3. Pega el código siguiente:

 

¡Listo! El CSS ejercerá sus súper poderes en la vista previa y en la página publicada.

¿Necesitas obtener más información sobre la personalización de enlaces en la página con CSS?

Échale un vistazo a este tutorial.


Cómo usar Google Fonts en tu landing page

Con un poco de copia y pega, y una pizca de código CSS, puedes agregar fácilmente las Google Web Fonts a tu landing page en Unbounce.

Ten en cuenta que las Web Fonts no son compatibles con todos los navegadores.

  1. Visita https://fonts.google.com y haz clic en el icono + para seleccionar la fuente que quieres añadir a tu landing page.
  2. Abre la ventana Selected en la parte inferior de la pantalla.
  3. En la sección Embed Font (Insertar Fuente), cambia a "@IMPORT" y copia el código. 
  4. Vuelve a tu landing page en Unbounce y pega este código en la pestaña "Javascript". Asegúrate de elegir Head en el menú desplegable de Placement (Ubicación). Finalmente, haz clic en Done.
  5. Regresa a Google Fonts y copia el código de la sección Specify in CSS (Especificar en CSS).
  6. Vuelve a Unbounce, da click en Stylesheets y pega el siguiente código (con el código que copiaste de Google Fonts reemplazando la sección en negritas):
<style type="text/css">
h1 * {
paste_font_webcode_here
}
</style>

Nota:la etiqueta 'h1' afecta al estilo de texto al que se aplica esta fuente. 'h1' aplica esta fuente al estilo 'Heading 1', pero esta etiqueta puede cambiarse según el estilo (por ejemplo, h2 = Heading 2, h3 = Heading 3, etc.)

 

Para indicar el peso de una fuente, agrega este CSS antes del corchete de cierre de h1:

        8.

font-weight:300 !important;

Sustituye '300' con el peso de la fuente que quieres usar 

  1.    Selecciona el texto para el que quieres cambiar la fuente y selecciona "Heading 1" en el menú  

              desplegable de estilo del panel de propiedades a la derecha.

  1.    ¡Guarda y publica tu página para ver tu fuente en acción!

Notarás que no puedes ver los cambios de CSS en el Editor de Páginas. Para comprobar la apariencia de tu código CSS, tendrás que publicar o re-publicar tu página y comprobarlo en la URL publicada.


Cómo usar fuentes personalizadas en tu landing page

¿Te gustaría usar una fuente específica?

El primer paso es dirigirte a plataformas donde encontrarás fuentes web gratis como Google Fonts y Adobe Edge Web Fonts. ¡Si encuentras tu fuente en uno de estos sitios, estás de suerte! Porque, incluir esa fuente en tu landing page es solo cuestión de añadir algunos toques de JavaScript y CSS a tu landing page y ellos te enseñarán cómo hacerlo.

Google Fonts tiene una biblioteca muy amplia, y algunas fuentes son muy similares a las fuentes de pago más populares. Por ejemplo, Montserrat es una gran alternativa gratuita a Gotham. Hemos preparado una guía completa para usar Google Fonts en tus landing pages. La puedes ver arriba.

Si no puedes encontrar la fuente que estás buscando en plataformas como estas, tendrá que comprar la licencia para esa fuente.

A veces, la licencia de la fuente te permitirá usarla directamente en tu página web usando @font-face. Si lo hace, y tú tienes acceso a un servidor web, sigue las instrucciones que encontrarás en la parte inferior de esta sección para subir la fuente e incorporarla a tu landing usando @font-face.

De lo contrario, si la fuente está disponible en Adobe Typekit, esa suele ser la forma más fácil de usar la fuente en tu landing page de manera que cumpla con los términos de la licencia de la fuente.

Incluso si no está en Typekit, la entidad que emite la licencia de la fuente puede que permita que se utilice con Typekit. Si no lo hace, tendrás que preguntarles qué otras soluciones tienen para las fuentes web. Si te ofrecen una solución, lo más probable es que funcione con Unbounce.

Una vez que tengas la fuente incorporada a tu landing page en Unbounce, tienes que aprender a utilizarla en diversas partes de tu página.  

Cómo utilizar la fuente personalizada de tu empresa

Si tu empresa utiliza su propia fuente, tus opciones serán algo diferentes. La forma más sencilla de incorporar la fuente a tu landing page es alojarla en un servidor web y utilizar @font-face para incluirla en tu landing page.

Esto, sin embargo, hará que tu fuente sea accesible a cualquier persona con conocimientos técnicos. Aunque es cierto que puedes evitarlo con algunas medidas, lo cierto es que no hay forma de proteger totalmente una fuente cuando se utiliza @font-face.

Para las empresas, Typekit puede ser una solución más eficaz. Typekit alojará tus fuentes y las servirán a tus landings de manera más fácil y mucho más protegida.

Cómo utilizar @font-face para incluir tus fuentes

Para hacer esto, tu fuente deberá estar licenciada para el uso de @font-face, y necesitarás tener acceso a un servidor web para alojar la fuente.

  1. Sube la fuente a tu servidor.

-En cuantos más formatos tengas la fuente, mejor. Para máxima compatibilidad intenta tenerla en .eot .woff .ttf y .svg.

  1. Asegúrate de que tus fuentes se sirven con un encabezado “Access-Control-Allow-Origin: *”

-Aquí encontrarás una guía que cubre esto. Sin este detalle no funcionará en Internet Explorer o Firefox.

  1. Haz clic en Stylesheets en la parte inferior del Editor de Páginas.
  2. Pega el siguiente CSS, agregando las URLs de tu fuente:

 

  • Haz clic en Stylesheets en la parte inferior del Editor de Páginas.
  • Pega los selectores que necesites del código CSS anterior.
  • Sustituye 'MyFontName' con el nombre de tu fuente y 'Fallback' con una fuente segura para la web que sea tu segunda opción preferida (tu Plan B).

Idiomas soportados

Unbounce soporta cualquier idioma, siempre y cuando cuente con un juego de caracteres. De forma predeterminada, el editor de texto está configurado para idiomas que se escriben de izquierda a derecha. Para escribir en un lenguaje de derecha a izquierda, necesitarás algo de código personalizado. Échale un vistazo a este post en nuestra comunidad para obtener una guía paso a paso sobre cómo configurar esta función.


Glosario

Copywriting de conversión: La práctica de escribir texto web con el objetivo de convertir leads en clientes. Encontrarás algunos de nuestros recursos sobre el copywriting de conversión en el enlace de abajo. La guía del marketing de conversión para Copywriting de landing pages.

 

Back to: Building Your Landing Pages >>

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 1
Tecnología de Zendesk