Saltar a la navegación

Hacer que el texto sea modificable con etiquetas de plantilla

En una plantilla HTML creada por ti mismo puedes indicar mediante etiquetas qué elementos se pueden modificar al crear una campaña. Para el texto se utiliza <lp-singleline> cuando se trata de una línea suelta y <lp-multiline> para un bloque de varias líneas. El texto que coloques entre las etiquetas aparecerá en el editor como valor predeterminado.

Estas etiquetas solo son válidas para una plantilla HTML importada, no para el editor drag & drop. Puedes leer cómo importar este tipo de plantilla en Importar tu plantilla HTML propia.

Una línea suelta con <lp-singleline>

Usa <lp-singleline> para hacer que un fragmento corto de texto sea modificable, como un encabezado o un pie de foto.

Al rellenar la plantilla, el redactor puede añadir un enlace detrás del texto y modificar la alineación (izquierda, derecha o centro). Si la etiqueta ya está dentro de un enlace en tu HTML, el editor utilizará ese enlace como valor predeterminado. Por lo demás, deliberadamente no es posible realizar más modificaciones en el diseño.

Opciones

Con cinco atributos puedes determinar qué puede hacer el redactor con la línea.

lp-label

Muestra el valor de este atributo en el editor encima del campo de texto.

lp-disable-href

Desactiva la posibilidad de convertir la línea en un enlace. Si en la plantilla ya había un enlace rodeando la línea, este ya no se podrá modificar.

lp-toc

Incluye esta línea de forma predeterminada en la tabla de contenidos, incluidas todas las repeticiones si la línea se encuentra dentro de un repeater. Al rellenar el boletín, el redactor podrá decidir igualmente en cada línea si se incluye o no en la tabla de contenidos.

lp-disable-align

Desactiva la posibilidad de modificar la alineación.

lp-toolbar

Limita las opciones de alineación, por ejemplo, solo a izquierda y derecha: lp-toolbar="alignLeft,alignRight". Los valores posibles son alignLeft, alignRight y alignCenter. Indicar un solo valor no tiene sentido, e indicar los tres es lo mismo que omitir el atributo.

Ejemplos

Un encabezado que el redactor puede convertir en un enlace en el editor:

<h2><lp-singleline lp-label="Encabezado sobre el boletín">Las últimas noticias</lp-singleline></h2>

El mismo encabezado con un enlace fijo que no se puede modificar. Ten en cuenta que las etiquetas a están fuera del singleline:

<a href="http://example.net"><lp-singleline lp-label="Encabezado sobre el boletín" lp-disable-href>Las últimas noticias</lp-singleline></a>

Un bloque de texto con <lp-multiline>

Usa <lp-multiline> para varias líneas de texto, como un párrafo. Si el redactor hace clic en este elemento, se abrirá un editor con el que podrá dar formato al texto e insertar enlaces, variables de relación, redes sociales y mucho más.

Dentro de un multiline también puede haber una imagen. En ese caso, el texto fluirá a su alrededor y, al editarlo, el redactor podrá colocar la imagen a la izquierda, a la derecha o a ancho completo. Puedes leer cómo incluir esto en tu plantilla en Etiquetas para modificar una imagen.

Opciones

lp-label

Muestra el valor de este atributo encima del editor del campo de texto.

lp-toolbar

Determina qué botones muestra la barra de herramientas del editor. Sin este atributo se muestran los doce botones. Si indicas algunos valores, solo serán visibles esos botones.

Estos son los doce valores para lp-toolbar:

ValorBotón
boldnegrita
italiccursiva
striketachado
linkenlace
bulletListlista con viñetas
orderedListlista numerada
heading2encabezado 2
heading3encabezado 3
alignLeftalinear a la izquierda
alignCentercentrar
alignRightalinear a la derecha
separatorlínea separadora entre botones

Ejemplos

Un párrafo que aparece en el editor bajo la etiqueta «Párrafo principal»:

<lp-multiline lp-label="Párrafo principal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</lp-multiline>

Una barra de herramientas con solo negrita, cursiva, un enlace y dos encabezados, con una línea separadora entre ellos:

<lp-multiline lp-label="Párrafo principal" lp-toolbar="bold,italic,link,separator,heading2,heading3">Lorem ipsum</lp-multiline>

Artículos relacionados