Editor de boletines: Introducción a la creación de plantillas HTML

Tiempo de lectura: 6 min

En CleverReach le ofrecemos un gran número de plantillas que puede utilizar y personalizar fácilmente. Si aún así desea crear su propia plantilla, puede utilizar estas instrucciones:

Ejemplo

Empecemos con este sencillo ejemplo. Imaginemos que esta es nuestra plantilla y queremos que sea lo más fácil posible de editar para el usuario:

<html>
<body bgcolor="#ffffff">
    <h1>Boletín diario</h1>
    <p>Su actualización diaria de todo lo que ocurre con XXXXX</p>
    <table >
        <tr><td>
            <div>
                <h3>¿acaba de ocurrir esto?</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>No te creerías lo que acaba de pasar. Si quieres saber más, ¡haz clic en el enlace de abajo!</p>
                <a href="http://www.example.com">Leer más</a>
            </div>
            <div>
                <h3>Espera, ¿esto también ha pasado??</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Puede que no sea tan impresionante como la noticia anterior, pero sigue siendo muy muy interesante.</p>
                <a href="http://www.example.com">Leer más</a>
            </div>
        </td></tr>
    </table>
</body>
</html>

En este código sólo se pueden editar textos, imágenes y enlaces.

Por regla general, tratamos el texto y los enlaces como HTML simple, por lo que sólo podemos insertar estos dos tipos principales: HTML e IMAGEN

Para que el texto sea editable, lo envolvemos con 
Para que las imágenes sean editables, las envolvemos con

En nuestro ejemplo, sería así:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Boletín diario<!--#/html#--></h1>
    <p><!--#html#-->Su actualización diaria de todo lo que ocurre con ACME<!--#/html#--></p>
    <table >
        <tr><td>
            <div>
                <h3><!--#html#-->¿acaba de ocurrir esto?<!--#/html#--></h3>
                <!--#image#-->
                    <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->No te creerías lo que acaba de pasar. Si quieres saber más, ¡haz clic en el enlace de abajo!<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Leer más</a><!--#/html#-->
            </div>
            <div>
                <h3><!--#html#--><!--#/html#-->Espera, ¿esto también pasó??</h3>
                <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Quizás no tan impresionante como la noticia anterior, pero sigue siendo muy muy interesante.<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Leer más</a><!--#/html#-->
            </div>
        </td></tr>
    </table>
</body>
</html>

Ahora puede cargar esta plantilla en el editor y hacer clic en las áreas de texto o imagen para editarlas.

Nota: Puede utilizar el editor de código fuente durante el proceso de creación y cambiar fácilmente entre los editores (arriba a la derecha) para comprobar sus resultados.

Bloques de contenido HTML

El método anterior funciona bien si no quieres que el usuario tenga demasiada influencia, pero suele ser más habitual tener áreas específicas en las que el usuario puede simplemente soltar trozos de HTML preconstruidos que contienen diversas formas de diseños.

A estas zonas las llamamos bucles. Cada bloque de contenido está encerrado por  para mantener estos elementos separados.

En el ejemplo anterior, se puede ver que hay 2 DIVs allí, cada uno representando un bloque de contenido. Vamos a añadir nuestra etiqueta de bucle y dejar de lado uno de los bloques de contenido, ya que son bastante similares de todos modos:

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Boletín diario<!--#/html#--></h1>
    <p><!--#html#-->Su actualización diaria de todo lo que ocurre con ACME<!--#/html#--></p>
    <table >
        <tr><td>
        <!--#loop#-->
            <!--#loopitem#-->
                <div>
                    <h3><!--#html#-->¿acaba de pasar esto?<!--#/html#--></h3>
                    <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                    <p><!--#html#-->No te creerías lo que acaba de pasar. Si quieres saber más, ¡haz clic en el enlace de abajo!<!--#/html#--></p>
                    <!--#html#--><a href="http://www.example.com">Leer más</a><!--#/html#-->
                </div>
            <!--#/loopitem#-->
        <!--#/loop#-->
        </td></tr>
    </table>
</body>
</html>

Nota: Los bucles no pueden colocarse entre estructuras similares.

Etiquetas de plantilla

Esta es una lista de todas las etiquetas de plantilla disponibles que utilizamos para hacer que las plantillas sean editables. Los hemos dividido en 3 categorías:

Relacionado con el contenido (grundlegende Bearbeitung)
Hilfebezogen (Schaltflächen, Abstandshalter usw.)
Designbezogen (Ayuda en la gestión de su proyecto)

Contenido

Estas etiquetas te ofrecen opciones básicas de edición::

HTML

La etiqueta HTML puede manejar una variedad de cosas relacionadas con HTML. Desde texto simple a contenido complejo, dispone de varias opciones para controlar cada etiqueta HTML individualmente.

<!--#html mode="default" inline="true "#--><!--#/html#-->

modo establece varias opciones para el control de contenidos

por defecto: formato de texto básico, enlaces y marcadores de posición
completo: como por defecto, pero con imágenes
textonly: sólo muestra marcadores de posición en la barra de herramientas
link: sólo muestra la configuración del enlace y los marcadores de posición
safelink: Sin barra de herramientas, no puede eliminar enlaces, pero tiene una barra lateral en su lugar

inline="true" convierte el elemento en un elemento inline y no en un bloque (sólo dentro del editor). Esto sólo corrige errores visuales en el editor y no afecta a la salida real.

replace="true" marca todo el texto cuando se selecciona por primera vez para poder reemplazarlo más fácilmente.

IMÁGENES

Se utiliza para que las imágenes sean editables, pero también para que sean "seguras para el navegador". Posicionar imágenes en los correos electrónicos no es tan fácil como podría pensarse. Por lo tanto, el editor intenta incrustar la imagen en una tabla para alinearla correctamente. Si su imagen ya está incrustada en una tabla, coloque la etiqueta de imagen fuera de la tabla y no alrededor de la imagen. Si no desea que la imagen se ajuste, puede utilizar la opción "nowrap".

<!--#image align="center" #--><!--#/image#-->

align="center|left|right" Define la orientación estándar de la imagen. Si no hay ninguno, se intenta encontrarlo.

margin="10px 20px" define el borde exterior de la imagen (valor por defecto "0px")

nowrap="true" La imagen no se incluye en la tabla, por lo que no es posible alinearla.

noresize="true|fasle" Elimina la posibilidad de redimensionar

forcepx="true" Las imágenes porcentuales se convierten a px. Esto suele funcionar mejor con todos los clientes de correo electrónico

replace="true" Abre el explorador de archivos en cuanto se hace clic en la imagen. Sólo se utiliza una vez y para sustituir imágenes de marcador de posición.

inline="true" Hace que la imagen (en el editor) sea una imagen en línea y no un bloque. Esto sólo corrige los errores visuales en el editor y no tiene ningún efecto sobre la salida real.

LOOP

Las opciones de selección permiten al usuario introducir nuevos elementos de la lista de páginas. Schleifen können nicht zwischen Tabellenelementen platziert werden wie <table><tr> or <ol><li>

<!--#loop#-->
    <!--#loopitem#-->...<!--#/loopitem#-->
<!--#/loop#-->

elemento de bucle nombre: si se establece, lo convierte en un elemento desmontable en la barra lateral

loopitem sidebaronly: sólo se incluye en la barra lateral, pero no en el contenido real (por defecto:false)

loopitem plegable: hace que los botones sean plegables (por defecto:false)

PILA / ENTRADA PILA

Las pilas funcionan como bucles, pero su uso es muy limitado. La idea es dar al usuario un lugar donde pueda disponer sólo elementos simples (HTML, IMAGEN, BOTÓN, ESPACIADOR y DIVISOR). Esto puede utilizarse para hacer que las columnas sean editables sin romper las columnas reales.

<tabla>
    <tr>
        <td>
            <!--#stacks#-->
                <!--#stack-entry#--><p>A</p><!--#/stack-entry#-->
                <!--#stack-entry#--><p>B</p><!--#/stack-entry#-->
            <!--#/stacks#-->
        </td>
        <td>
            <!--#stacks#--><!--#/stacks#-->
        </td>
    </tr>
</table>

Ayudante Etiquetas

Estas etiquetas son principalmente elementos prefabricados, desde simples separadores hasta elementos complejos.

BOTÓN

Esto crea un botón HTML seguro para el cliente. Ninguno de los valores es realmente necesario.

<!--#button bgcolor="#e9703e" color="#000000" align="center" text="Leer más" #--><!--#/button#-->

text="¡Haga clic aquí!" Texto estándar

href="http://example.url"

bgcolor="#e9703e" Define el color de fondo

color="#ffffff" Define el color de la fuente

align="center|left|right|block" cambia la alineación. El bloque corresponde a toda la anchura

margin="10px 10xp 20px 20px" margen exterior

ESPACIADOR

Crea un espaciador editable.

<!--#spacer size="50px "#--><!--#/spacer#-->

size="20px" fija la altura por defecto en 20px

DIVISOR

Crea un separador de líneas (como <hr>)

<!--#divider padding="40px" width="85%" align="center" height="2px" color="#888888" bgcolor="transparent "#--><!--#/divider#-->

relleno = "20px" establece la altura por defecto de este elemento (no de la fila en sí)
anchura = "20px" el ancho de la línea actual
altura = "20px" la altura de la línea actual
bgcolor = "#ffffff"
color = "#ffffff"
align = "izquierda|centro|derecha|bloque"

DARSE DE BAJA

Permite al usuario seleccionar uno de los mensajes de cierre de sesión predefinidos.
Nota: Debe rellenarse previamente con texto.

<!--#unsubscribe#-->Por favor <a href="{UNSUBSCRIBE}">unsubscribe</a> me!<!--#/unsubscribe#-->

SOBRE NOSOTROS

Esto añade un área en la que el usuario puede seleccionar entre impresiones predefinidas.

Nota: Este contenido se sobrescribirá en cuanto cargue la plantilla en el editor. Si no lo desea, utilice HTML.

<!--#aboutus#--><!--#/aboutus#-->

ONLINEVERSION

Otra sección para mostrar un texto y un enlace a la versión en línea (navegador).
Nota: Debe rellenarse previamente con texto.

<!--#onlineversion#-->Si este mensaje no se visualiza correctamente, <a href="{ONLINE_VERSION}">haga clic aquí</a> por favor.<!--#/onlineversion#-->

CSS y diseño

Estos ajustes se centran en el diseño y CSS para proporcionar al usuario más opciones de estilo totalmente personalizadas.

TEMAS

Esto busca <style data="cr/theme"></style> y luego ofrece una pestaña Tematización bajo la pestaña Diseño en el lateral. Todas las clases definidas aquí se añaden también inline para garantizar la máxima compatibilidad.

Básicamente funciona como SASS, pero sólo sustituye variables.

Nota: Todo lo que esté por debajo de "*/" será reemplazado ya que será la salida CSS renderizada.

<style data="cr/theme">
/*
    $my_var: 15px;
    $slider-Max_width: 600px;
    $quad-Text_to_display: 12px 12px 24px 24px;
    $color-use_me: #ffffff;
    $image-Background_image: https://example.com/batman.png;


    .mytest { 
        width: $my_var; 
        margin: $quad-Text_to_display; 
        background-color: $color-use_me
    }
    .background {url($image-Imagen_de_fondo);}
*/
...
</estilo>

Ofrecemos una serie de preajustes y prefijos que puede utilizar para controlar el tipo de campo de entrada.

$slider- utiliza un control deslizante en lugar de una entrada

$quad- muestra un campo de entrada cuádruple (p. ej. para márgenes y rellenos)

$color- dará como resultado un selector de color

$image- devuelve un selector de imagen

$my_var El resultado es un campo de entrada denominado My var. En general, "_" se sustituye por " " (espacio).

Ajustes del editor definidos por el usuario

Esto controla el editor en sí y le da la opción de mostrar y ocultar algunos ajustes.
Nota: Esto debería estar idealmente en la primera línea, pero también funciona en todas partes.

<!--#template css="false" settings="false" #-->

css = "false" Oculta la pestaña Diseño en la barra lateral principal
settings = "false" Oculta la pestaña Configuración de la barra lateral.
default-elements = "false" Oculta todos los elementos en la barra lateral
user-elements = "false" Oculta todos los elementos de usuario en la barra lateral
agency-elements = "false" Oculta todos los elementos de agencia en el área de la página
custom-elements = "false" Oculta todos los elementos excepto la plantilla en la barra lateral
css-to-inline= "true|false" Fuerza CSS/estilos en modo inline
version = "2.0" Desactivación de antiguas funciones fallback para plantillas (por ejemplo, edición automática de plantillas).0" Desactivación de antiguas funciones fallback para plantillas (por ejemplo, edición automática de las clases "body", ".a", ".text")
hideplugins = "edithtml,conditional" Solicita ocultar ciertos plugins. Esto no es compatible con todos los plugins
fix-top = "true" Añade espacio adicional en la parte superior (sólo en el editor) para corregir la barra de herramientas HTML que falta
image-nowrap = "true" Desactiva el ajuste de tabla de las imágenes
image-nohref = "true" Desactiva los ajustes de enlace para todas las imágenes
loops-collapsible = "true" Hace que todos los botones de los elementos de bucle sean plegables.

Editierbares CSS / Estilo

Esto le permite tener bloques CSS editables en la pestaña de diseño para que los usuarios puedan modificar su plantilla a su gusto.

Coloque /* @title Display Name */ encima de una clase CSS para que esté disponible (y todos sus valores) en la pestaña Diseño.

<style>
    /* @title Display Name */
    .exampleclass {
    background-color: #080708 !important;
    color: #ffeeff;
    padding: 5px;
    margin: 10px 5px;
}
</style>

También puede combinar varias definiciones CSS en un grupo añadiendo @group mygroupname al comentario.

<style>
    /* @title márgenes y paddings
        @group Mi grupo personalizado 
    */
    .exampleclass1 {
    padding: 5px;
    margin: 10px 5px;
    }

    /* @title principalmente colores
        @group Mi grupo personalizado 
    */
    .exampleclass2 {
    background-color: #080708 !important;
    color: #ffeeff;
}

</style>

.editable

Si añade uno de sus elementos HTML dentro de un , todos los estilos quedan liberados para su edición.

Por defecto, se denominan "Elemento #", donde # es un número que depende del número de elementos editables que tenga. Puedes cambiar este nombre añadiendo data-name.

Opcional: Puede utilizardata-limit-a para hacer editables sólo los estilos CSS listados (separados por comas) y dejar el resto intacto.

Opcional: Puede utilizar data-style para proporcionar al usuario estilos adicionales sin escribir realmente estos valores en style, siempre que no difieran del valor original. Aquí sólo se escribiría si background-color fuera algo distinto de heredar.

<td style="padding: 10px 20px;text-direction:ltr;" data-style="background-color:inherit;" data-limit-to="padding,background-color" class="editable" data-name="Contenedor">

Etiquetas disminuidas

Las siguientes etiquetas están obsoletas y se convierten automáticamente a sus equivalentes más recientes.

 wird 
 wird 
 wird 
 wird 
 wird

Ayuda & Soporte

Si tiene alguna pregunta o necesita ayuda, póngase en contacto con nuestro equipo de servicio. Estarán ahí para ti.

Editor de boletines: Introducción a la creación de plantillas HTML

Ejemplo

Bloques de contenido HTML

Etiquetas de plantilla

Contenido

HTML

IMÁGENES

LOOP

PILA / ENTRADA PILA

Ayudante Etiquetas

BOTÓN

ESPACIADOR

DIVISOR

DARSE DE BAJA

SOBRE NOSOTROS

ONLINEVERSION

CSS y diseño

TEMAS

Ajustes del editor definidos por el usuario

Editierbares CSS / Estilo

.editable

Etiquetas disminuidas

Ayuda & Soporte

<%= previousTitle %>

<%= nextTitle %>

Unsere Webinare und Seminare

<%= block.name %>

Themen

<%= block.name %>

Noch weitere Fragen?

Themen

Búsqueda

Ejemplo

Bloques de contenido HTML

Etiquetas de plantilla

Contenido

HTML

IMÁGENES

LOOP

PILA / ENTRADA PILA

Ayudante Etiquetas

BOTÓN

ESPACIADOR

DIVISOR

DARSE DE BAJA

SOBRE NOSOTROS

ONLINEVERSION

CSS y diseño

TEMAS

Ajustes del editor definidos por el usuario

Editierbares CSS / Estilo

.editable

Etiquetas disminuidas

Ayuda & Soporte

<%= previousTitle %>

<%= nextTitle %>

Unsere Webinare und Seminare

<%= block.name %>

Themen

<%= block.name %>

Noch weitere Fragen?

Themen

Categorías