Plantillas de Email

From SinergiaCRM - Wikisuite
Jump to navigation Jump to search

Conceptos básicos

Las Plantillas de Email son una herramienta del CRM que permite preparar el contenido que se desee enviar a la base social, ya sea a través de una campaña (ver Creación de una campaña), como respuesta automática a una inscripción o donación mediante formularios (ver Formulario de inscripción a un evento o Formularios de captación de fondos) o como resultado de la ejecución de un flujo de trabajo (ver Flujos de trabajo - Enviar correo).

El acceso a las Plantillas de Email debe hacerse desde el menú de acciones del módulo Campañas. Se podrá escoger si ver el listado de plantillas existentes o crear una de nueva.


Plantillas Email.jpg


Las plantillas de tipo system, orientadas a notificaciones del sistema, solo pueden ser editadas por un usuario administrador del CRM. El resto de tipos pueden ser editados por cualquier usuario.


Selección y tipos de editores de plantillas

En SinergiaCRM basado en Suite cabe la posibilidad de que un usuario defina que editor quiere utilizar en el menú superior derecho, perfil, en el campo "Tipo de editor". Hay tres opciones:


Perfil usuario.png


a) HTML directo. Editor de texto plano que está enfocado en integrar el código HTML de plantillas externas ya que no ofrece ninguna herramienta que facilite la edición del código HTML.


HTML Directo.jpg


b) Mozaik. Editor de texto WYSIWYG que está enfocado en facilitar la introducción de bloques de código en plantillas creadas desde el inicio con este editor, o en plantillas que ya contienen información y que fueron creadas con este mismo editor.


Mozaik.jpg


c) TinyMCE. Editor de texto WYSIWYG ya incluido en la anterior versión de SinergiaCRM basada en Sugar.


TinyMCE.jpg


Este editor ofrece una solución intermedia con la que se puede:

- Crear plantillas desde su inicio de una manera secuencial y disponiendo de las típicas herramientas de un editor de texto: Negrita, Fuente, Tamaño de fuente, Color, Alineación del texto, integrar multimedia, etc.

- Maquetar visualmente la estructura de la plantilla.

- Editar el código HTML de plantillas externas a través del Menú Herramientas / Código fuente o desde el icono <> de la barra de herramientas.

Importante: 
- Cuando se crea un usuario en SinergiaCRM, este tendrá configurado el editor TinyMCE.
- Dependiendo de las necesidades de la entidad y atendiendo a las características de cada editor de texto, desde SinergiaTIC os recomendamos usar TinyMCE o Mozaik para trabajar con las plantillas. 
- Además, es necesario un criterio común en la entidad para determinar quién y cómo se realiza el trabajo con las plantillas. Para determinar estos criterios tened en cuenta el siguiente apartado de Editores HTML y Usuarios


Editores HTML y Usuarios

SinergiaCRM permite configurar el editor de texto con el que quiere trabajar cada usuario. Esta flexibilidad ofrece ventajas pero, a la par, posibilita escenarios de riesgo a tener en cuenta por la entidad:

- Al editar una plantilla creada con TinyMCE desde el editor Mozaik se modifica el código de la plantilla y puede que se pierdan algunos estilos o que se desconfigure la maquetación de la plantilla. Por el contrario, si se crea una plantilla creada con el editor Mozaik y más adelante se edita con el editor TinyMCE la plantilla no es modificada.

- La modificación sucede aunque la plantilla sea editada con un usuario diferente al que la creó. Es decir, si la plantilla fue creada por un usuario 1 que tuviese configurado el editor TinyMCE y la edita un usuario 2 que tiene configurado el editor Mozaik, el código HTML de la plantilla será modificado.


Para gestionar este posible problema sería bueno aplicar alguna de las siguientes recomendaciones:

- Disponer de un usuario exclusivo en el CRM con el cual realizar todas las ediciones de plantillas.

- Tener configurado el mismo editor en los diferentes usuarios.

- Actuar con precaución a la hora de editar las plantillas, por ejemplo, asegurándonos de que el usuario que vaya a modificar la plantilla tiene configurado el editor TinyMCE.

- Actuar con precaución si soy un usuario que tengo configurado el editor Mozaik.


Por último, se recomienda revisar los editores de cada usuario y aplicar la política acordada.


Creación de una plantilla

El procedimiento para crear una plantilla de correo electrónico dependerá del editor que se tenga configurado.

Es posible incorporar a una plantilla de correo del CRM código HTML procedente de plantillas externas (por ejemplo, de MailChimp o aplicaciones similares). Sin embargo, cabe tener en cuenta que el editor del CRM es estricto en el cumplimiento de los estándares HTML por lo que es posible que algunos elementos de dichas plantillas sean ignorados. En cualquier caso, desde el propio editor del CRM es perfectamente posible diseñar desde cero plantillas como las que se suelen utilizar habitualmente en envíos electrónicos.


Inserción de variables

En la creación de la plantilla es relevante destacar la posibilidad de personalizar el envío incorporando campos de datos en el cuerpo del mensaje (por ejemplo, para incluir un saludo con el nombre de la persona destinataria).

Es posible añadir estas variables al momento de crear una plantilla de email desde "Insertar Variable" en el editor.


Insertar variable.jpg


Para conseguir el nombre de la variable deseada, en el primer desplegable se escoge el módulo al que pertenece el campo, en el segundo se escoge el nombre del campo que se desea insertar en el cuerpo del mensaje y en el último espacio aparece el nombre de la variable. Para añadirla al cuerpo del texto se puede usar el botón "Insertar" y la variable se añadirá donde esté el cursor.


Publicación de imágenes

Independientemente de que editor tenga configurado el usuario, una forma para publicar una imagen en una plantilla es subirla previamente en alguna ubicación web pública desde donde puedan ser referenciadas mediante su dirección URL específica.

Por ejemplo, podría crearse una carpeta en el sitio web de la organización que se llame imagenes_boletines y guardar en ella todas las imágenes. Lógicamente, una imagen que vaya a ser usada en varias plantillas (logos de la entidad o de redes sociales, etc.) bastará con subirla una sola vez. Una vez subidas las imágenes, cada una de ellas tendría una URL del tipo http://www.entidad.org/imagenes_boletines/foto1.jpg. Al insertar una imagen en la plantilla (Insert/edit image), aparecerá la siguiente ventana emergente, en la que deberá indicarse la citada URL.


Editor plantillas imagenes.jpg


Al indicar la URL automáticamente se rellenarán las casillas de las dimensiones. El resto de casillas pueden rellenarse o no según convenga.


En función del editor que se use, las imágenes también pueden incorporarse a las plantillas subiendo un archivo de tipo imagen.

Con Mozaik, las imágenes pueden ser incorporadas subiendo el archivo directamente desde el ordenador a través del icono que aparece a la derecha del campo Enlace, en la vista de popup de Insertar/editar imagen. Al cargar el archivo, se rellenarán automáticamente las casillas de las dimensiones. El resto de casillas pueden rellenarse o no según convenga.

Con TinyMCE no disponemos del icono en la vista de popup de Insertar/editar imagen, pero sí podemos realizar los pasos siguientes:


1. Editar plantilla e ir a la parte de los Adjuntos, en la zona inferior de la vista.

2. Adjuntar una imagen a través del botón de Seleccionar Archivo. En caso de que que la imagen la tengamos disponible en el CRM como un documento podemos pulsar en el botón DOCUMENTO

3. Pulsar en el icono del clip que aparece a la izquierda de la imagen adjuntada para que se incorpore al cuerpo de la plantilla.

4. Guardar plantilla

5. Editar plantilla y pulsar en el recuadro de Quitar que parece en la parte de Adjuntos. Esto hará que la imagen no aparezca como documento adjunto sin eliminarla de del cuerpo de la plantilla.

6. Guardar plantilla


Se pueden subir imágenes de los tipos habituales utilizados en internet: jpg, gif, png. Las dimensiones y la resolución son libres, pero cabe tener en cuenta que cuanto más grande sea la imagen más tiempo necesita para cargarse. En este sentido lo ideal es tratar de buscar un buen equilibrio entre calidad y peso. Por ejemplo, en Photoshop existe una opción llamada Guardar para web especialmente pensada para lograr este objetivo. De todos modos, cualquier editor gráfico permite trabajar estos elementos sin mayores dificultades. Cabe tener en cuenta también que habitualmente el cuerpo de un boletín electrónico convencional no suele superar los 600 píxeles de ancho, por lo que las imágenes tampoco deberían superar este ancho.

Insertar enlace en imagen

Las imágenes incorporadas en el cuerpo de texto del correo electrónico pueden estar vinculadas a un enlace. De esta manera, al hacer clic encima de esta se redireccionará al usuario a la página web que se desee.

Para insertar el enlace en la imagen, esta debe estar seleccionada, pero tiene una particularidad. Para hacerlo correctamente hay dos maneras:

- Pulsar con el ratón a la izquierda de la imagen y arrastrar hacia la derecha manteniendo pulsado el ratón.

- Pulsar a la izquierda de la imagen y pulsar la tecla Shift (o mayús) + flecha hacia la derecha una o dos veces.

Una vez seleccionada la imagen se puede insertar el enlace seleccionando la opción Insertar/Editar enlace desde el menú superior Insertar o desde el botón derecho del ratón.


Insertar enlace en imagen.jpg


Plantillas basadas en tablas

La práctica totalidad de los boletines electrónicos basan su estructura (maquetación) en una o más tablas. Antiguamente este sistema de maquetación se utilizaba también para los sitios web en general, pero su uso no cumplía con los estándares y se fue abandonando con la progresiva evolución de las hojas de estilo (CSS). Sin embargo, en los boletines se ha mantenido el uso de las tablas porque simplifica enormemente el diseño de los mismos y porque los clientes de correo electrónico (es decir, las aplicaciones en las que los destinatarios visualizarán los boletines recibidos) no suelen realizar una gestión del HTML/CSS tan completa como la que realizan los navegadores. En este sentido, las tablas ayudan a lograr una visualización correcta y homogénea de los contenidos de un boletín en cualquier cliente de correo, ya sea web o de escritorio (Outlook, Gmail, Thunderbird, etc.).

El diseño de una tabla se realiza igual como se haría en un documento de texto tipo Word, por ejemplo. Una tabla contiene un cierto número de filas y cada fila un cierto número de celdas. Dentro de cada celda se puede colocar contenido o no (a veces se usan para dejar espacio libre o para separar celdas con contenido). También se puede jugar con la combinación de celdas para lograr, por ejemplo, una cabecera de una sola celda en la que meter una imagen que ocupe todo el ancho del boletín.

Normalmente las tablas no se ven, es decir, sus bordes (tanto los exteriores como, sobre todo, los de las celdas interiores) son transparentes, pero están ahí, marcando los límites espaciales del boletín y de cada una de sus partes.


Importación de plantillas externas

Ante todo, cabe tener presente que no es posible asegurar que la importación de código HTML generado en cualquier herramienta externa vaya a producir una visualización en el CRM que sea idéntica a la apreciada en el editor original. Para evitar la inserción de código potencialmente malicioso, SinergiaCRM debe aplicar una serie de controles de seguridad en el momento de guardar una plantilla. De ser necesario, se realizarán modificaciones en el código que pueden generar alguna distorsión en el aspecto original de la plantilla.

Actualmente existen múltiples herramientas de marketing electrónico como Mailchimp que permiten el diseño de boletines u otros formatos de correo a partir de plantillas predefinidas más o menos vistosas. Existe la posibilidad de usar una de estas plantillas externas en el CRM, mediante el copiado y pegado del correspondiente código HTML de la plantilla.

Una vez copiado el código de la plantilla en la herramienta de origen deberá pegarse en el editor del CRM mediante el desplegable Herramientas > Código fuente (os recomendamos hacerlo en el editor TinyMCE y desaconsejamos hacerlo en Mozaik ya que su cometido no es integrar código HTML externo). Al pulsar el botón en cuestión aparecerá una ventana emergente que mostrará el contenido actual de la plantilla con las etiquetas HTML visibles. Puede borrarse todo lo que aparezca y a continuación pegar el código procedente de la herramienta externa para finalmente pulsar el botón Update, cerrándose la ventana emergente y así ver la plantilla en el editor visual.

Tras realizar varias pruebas de integración de plantillas creadas con diferentes aplicativos externos al CRM, recomendamos tener en cuenta los siguientes apartados ya que pueden aplicar dependiendo de la herramienta externa utilizada por la entidad.


Mailerlite

Por las pruebas realizadas, sus plantillas se integran correctamente y no es necesario realizar modificaciones.


Mailchimp

1) Algunos editores introducen metainformación que no es necesaria para la maquetación de la plantilla y que el editor HTML de SinergiaCRM interpreta como líneas de texto, por lo que habrá que eliminar esa información. Esto lo podemos hacer de una manera visual desde la vista de edición del propio editor o, si se dispone del conocimiento básico del lenguaje HTML, también lo podemos realizar desde el editor HTML. Por ejemplo, en algunas plantillas generadas por Mailchimp se introduce el siguiente código tras la etiqueta <HEAD> y habría que eliminarlo:

<!-- NAME: 1:2:1 COLUMN - FULL WIDTH -->
<!--[if gte mso 15]>
	 <xml>
	      <o:OfficeDocumentSettings>
	      <o:AllowPNG/>
	      <o:PixelsPerInch>96</o:PixelsPerInch>
	      </o:OfficeDocumentSettings>
	</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>*|MC:SUBJECT|*</title>


2) Igual que en el punto anterior, en algunas plantillas se introduce el siguiente código tras la etiqueta <BODY> y habría que eliminarlo.

<!--*|IF:MC_PREVIEW_TEXT|*-->
<!--[if !gte mso 9]><!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">*|MC_PREVIEW_TEXT|*</span><!--<![endif]-->
<!--*|END:IF|*-->


3) Algunas plantillas producen un error al ser guardadas, quedando completamente en blanco. En este caso procede buscar el siguiente contenido en el código original y modificarlo según lo indicado:

<td align="center" valign="top" ">

Las comillas sueltas que aparecen destacadas en rojo son las que producen la incidencia y deben ser eliminadas, quedando la línea así:

<td align="center" valign="top">


4) En algunas plantillas se incluye una barra superior que los receptores visualizan sin estilo:

Esto es lo que se ve en el CRM antes del envío:

Plantilla mailchimp 001.png

Esto es lo que ve la persona destinataria:

Plantilla mailchimp 002.png

Para evitar este efecto cabe eliminar de la plantilla el código que se indica a continuación:

<link rel="stylesheet" href="https://us1.campaign-archive.com/css/archivebar-desktop.css" mc:nocompile>  </head> <body id="archivebody"> <div id="awesomewrap"> <div id="awesomeshare"> <div id="zclipwrap"> <div class="copy-container"> <label for="clipboardSource">Campaign URL</label> <span id="copyURL"> <input id="clipboardSource" name="shorturl" style="margin-top:6px;" type="text" value="https://us1.campaign-archive.com/?u=a71630e6678578401847f57a2&id=2a5e9093ce" class="av-text"> <a id="copyToClipboard" href="javascript:;">Copy</a> </span> </div>  </div> <ul id="awesomesocial"> <li class="twt"> <div> <a title="Share on Twitter" target="_blank" href="https://twitter.com/share?url=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fu%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce" rel="noopener noreferrer">Twitter <b>0 <i>tweets</i></b></a> </div>  </li> </ul> </div> <ul id="awesomebar"> <li> <a href="http://eepurl.com/hTr2lD" title="Subscribe to List" target="_blank" rel="noopener noreferrer">Subscribe</a> </li>  <li><a href="https://us1.campaign-archive.com/home/?u=a71630e6678578401847f57a2&id=b578b72b42" title="View Past Issues" target="_blank" rel="noopener noreferrer">Past Issues</a></li> <li class="float-r"><a class="rss" target="_blank" href="https://us1.campaign-archive.com/feed?u=a71630e6678578401847f57a2&id=b578b72b42" title="subscribe to the email archive feed" rel="noopener noreferrer">RSS</a></li> <li class="float-r more"><a href="javascript:;" data-to-toggle="#translate">Translate</a> <ul id="translate"> <li> <a rel="nofollow" title="English" href="http://translate.google.com/translate?hl=auto&langpair=auto|en&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">English</a> </li><li> <a rel="nofollow" title="العربية" href="http://translate.google.com/translate?hl=auto&langpair=auto|ar&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">العربية</a> </li><li> <a rel="nofollow" title="Afrikaans" href="http://translate.google.com/translate?hl=auto&langpair=auto|af&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Afrikaans</a> </li><li> <a rel="nofollow" title="беларуская мова" href="http://translate.google.com/translate?hl=auto&langpair=auto|be&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">беларуская мова</a> </li><li> <a rel="nofollow" title="български" href="http://translate.google.com/translate?hl=auto&langpair=auto|bg&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">български</a> </li><li> <a rel="nofollow" title="català" href="http://translate.google.com/translate?hl=auto&langpair=auto|ca&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">català</a> </li><li> <a rel="nofollow" title="中文(简体)" href="http://translate.google.com/translate?hl=auto&langpair=auto|zh-CN&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">中文(简体)</a> </li><li> <a rel="nofollow" title="中文(繁體)" href="http://translate.google.com/translate?hl=auto&langpair=auto|zh-TW&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">中文(繁體)</a> </li><li> <a rel="nofollow" title="Hrvatski" href="http://translate.google.com/translate?hl=auto&langpair=auto|hr&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Hrvatski</a> </li><li> <a rel="nofollow" title="Česky" href="http://translate.google.com/translate?hl=auto&langpair=auto|cs&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Česky</a> </li><li> <a rel="nofollow" title="Dansk" href="http://translate.google.com/translate?hl=auto&langpair=auto|da&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Dansk</a> </li><li> <a rel="nofollow" title="eesti&nbsp;keel" href="http://translate.google.com/translate?hl=auto&langpair=auto|et&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">eesti keel</a> </li><li> <a rel="nofollow" title="Nederlands" href="http://translate.google.com/translate?hl=auto&langpair=auto|nl&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Nederlands</a> </li><li> <a rel="nofollow" title="Suomi" href="http://translate.google.com/translate?hl=auto&langpair=auto|fi&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Suomi</a> </li><li> <a rel="nofollow" title="Fran&ccedil;ais" href="http://translate.google.com/translate?hl=auto&langpair=auto|fr&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Français</a> </li><li> <a rel="nofollow" title="Deutsch" href="http://translate.google.com/translate?hl=auto&langpair=auto|de&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Deutsch</a> </li><li> <a rel="nofollow" title="&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ή" href="http://translate.google.com/translate?hl=auto&langpair=auto|el&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Ελληνική</a> </li><li> <a rel="nofollow" title="हिन्दी" href="http://translate.google.com/translate?hl=auto&langpair=auto|hi&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">हिन्दी</a> </li><li> <a rel="nofollow" title="Magyar" href="http://translate.google.com/translate?hl=auto&langpair=auto|hu&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Magyar</a> </li><li> <a rel="nofollow" title="Gaeilge" href="http://translate.google.com/translate?hl=auto&langpair=auto|ga&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Gaeilge</a> </li><li> <a rel="nofollow" title="Indonesia" href="http://translate.google.com/translate?hl=auto&langpair=auto|id&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Indonesia</a> </li><li> <a rel="nofollow" title="íslenska" href="http://translate.google.com/translate?hl=auto&langpair=auto|is&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">íslenska</a> </li><li> <a rel="nofollow" title="Italiano" href="http://translate.google.com/translate?hl=auto&langpair=auto|it&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Italiano</a> </li><li> <a rel="nofollow" title="日本語" href="http://translate.google.com/translate?hl=auto&langpair=auto|ja&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">日本語</a> </li><li> <a rel="nofollow" title="ភាសាខ្មែរ" href="http://translate.google.com/translate?hl=auto&langpair=auto|km&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">ភាសាខ្មែរ</a> </li><li> <a rel="nofollow" title="한국어" href="http://translate.google.com/translate?hl=auto&langpair=auto|ko&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">한국어</a> </li><li> <a rel="nofollow" title="македонски&nbsp;јазик" href="http://translate.google.com/translate?hl=auto&langpair=auto|mk&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">македонски јазик</a> </li><li> <a rel="nofollow" title="بهاس ملايو" href="http://translate.google.com/translate?hl=auto&langpair=auto|ms&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">بهاس ملايو</a> </li><li> <a rel="nofollow" title="Malti" href="http://translate.google.com/translate?hl=auto&langpair=auto|mt&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Malti</a> </li><li> <a rel="nofollow" title="Norsk" href="http://translate.google.com/translate?hl=auto&langpair=auto|no&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Norsk</a> </li><li> <a rel="nofollow" title="Polski" href="http://translate.google.com/translate?hl=auto&langpair=auto|pl&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Polski</a> </li><li> <a rel="nofollow" title="Portugu&ecirc;s" href="http://translate.google.com/translate?hl=auto&langpair=auto|pt&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Português</a> </li><li> <a rel="nofollow" title="Portugu&ecirc;s&nbsp;-&nbsp;Portugal" href="http://translate.google.com/translate?hl=auto&langpair=auto|pt-PT&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Português - Portugal</a> </li><li> <a rel="nofollow" title="Rom&acirc;nă" href="http://translate.google.com/translate?hl=auto&langpair=auto|ro&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Română</a> </li><li> <a rel="nofollow" title="Русский" href="http://translate.google.com/translate?hl=auto&langpair=auto|ru&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Русский</a> </li><li> <a rel="nofollow" title="Espa&ntilde;ol" href="http://translate.google.com/translate?hl=auto&langpair=auto|es&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Español</a> </li><li> <a rel="nofollow" title="Kiswahili" href="http://translate.google.com/translate?hl=auto&langpair=auto|sw&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Kiswahili</a> </li><li> <a rel="nofollow" title="Svenska" href="http://translate.google.com/translate?hl=auto&langpair=auto|sv&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Svenska</a> </li><li> <a rel="nofollow" title="עברית" href="http://translate.google.com/translate?hl=auto&langpair=auto|iw&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">עברית</a> </li><li> <a rel="nofollow" title="Lietuvių" href="http://translate.google.com/translate?hl=auto&langpair=auto|lt&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Lietuvių</a> </li><li> <a rel="nofollow" title="latviešu" href="http://translate.google.com/translate?hl=auto&langpair=auto|lv&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">latviešu</a> </li><li> <a rel="nofollow" title="slovenčina" href="http://translate.google.com/translate?hl=auto&langpair=auto|sk&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">slovenčina</a> </li><li> <a rel="nofollow" title="slovenščina" href="http://translate.google.com/translate?hl=auto&langpair=auto|sl&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">slovenščina</a> </li><li> <a rel="nofollow" title="српски" href="http://translate.google.com/translate?hl=auto&langpair=auto|sr&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">српски</a> </li><li> <a rel="nofollow" title="தமிழ்" href="http://translate.google.com/translate?hl=auto&langpair=auto|ta&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">தமிழ்</a> </li><li> <a rel="nofollow" title="ภาษาไทย" href="http://translate.google.com/translate?hl=auto&langpair=auto|th&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">ภาษาไทย</a> </li><li> <a rel="nofollow" title="Türkçe" href="http://translate.google.com/translate?hl=auto&langpair=auto|tr&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Türkçe</a> </li><li> <a rel="nofollow" title="Filipino" href="http://translate.google.com/translate?hl=auto&langpair=auto|tl&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Filipino</a> </li><li> <a rel="nofollow" title="украї́нська" href="http://translate.google.com/translate?hl=auto&langpair=auto|uk&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">украї́нська</a> </li><li> <a rel="nofollow" title="Tiếng&nbsp;Việt" href="http://translate.google.com/translate?hl=auto&langpair=auto|vi&u=https%3A%2F%2Fus1.campaign-archive.com%2F%3Fe%3D%5BUNIQID%5D%26u%3Da71630e6678578401847f57a2%26id%3D2a5e9093ce">Tiếng Việt</a> </li> </ul> </li> </ul> </div>


5) Habitulamente conviene establecer explícitamente una anchura al div general desde el interfaz del editor. Para ello podemos arrastrar el delimitador de área más externo desde su lado derecho hacia el centro.


Margen div exterior.JPG


Volver al inicio