Problema: la simple copia de tablas HTML no es limpia

Es importante que el personal de las empresas no copie las tablas, de lo contrario tendremos mucha «basura» en nuestro código HTML, como se ha descrito. El código HTML no es visible en la zona «visual» del editor. Para editarlo tienes que hacer clic en «Texto» en el Editor de WordPress. Cuando el código se copia simplemente, se lleva consigo pequeños fragmentos que no queremos. He aquí un ejemplo directo de la práctica:

Ejemplo – HTML incorrecto de una tabla

Todavía hay muchas cosas copiadas aquí que no se pueden ver:

<th class=»headerSort» tabindex=»0″ title=»Ordenación ascendente» role=»columnheader button»>No.</th>
<th class=»headerSort» tabindex=»0″ title=»Ordenación ascendente» role=»columnheader button»>Distrito</th>.
<th class=»headerSort» tabindex=»0″ title=»Sort Ascending» role=»columnheader button»>Área</th>

Así que vemos que algunas cosas se quitan al copiar y pegar.

Ejemplo – Buen HTML de una tabla

Así es como se vería limpio:

<th>No.</th>
<th>Distrito</th>
<th>Área</th>

Solución: Plantilla de tabla HTML

Hay que usar un poco de HTML o conocerlo. Lo mejor es guardarlo brevemente y luego copiarlo o editarlo:

• Sugerencia1 : <table> y <tbody> sólo están al principio </table> </tbody> sólo al final
• Consejo 2: Utiliza <th> sólo en la primera línea y ciérrala de nuevo (th significa «titular de la tabla»).
• Sugerencia 3: <tr> abre una fila y </tr> la cierra (tr se llama «fila de la tabla»)
• Consejo 4: <td> abre un valor o una caja y </td> la cierra (td significa «Datos de la tabla»)

Aquí hay una tabla con 3 columnas y 3 filas:

<table>
<tbody>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
</tr>
</tbody>
</tabla>

Este es el aspecto de la mesa terminada:

Otro ejemplo con 2 columnas y 2 filas:

<table>
<tbody>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
</tr>
</tbody>
</tabla>

Otro ejemplo con 4 columnas y 5 filas

<table>
<tbody>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
<th>Cabecera 3</th>
<th>Cabecera 4</th>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>
<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr></tbody>
</tabla>

Añadir más columnas y filas

Puede obtener más filas iniciando o cerrando una nueva «Fila de Tabla» dentro de su «Tabla» <table>…</table>. Esto se ve así:

<tr>
…
</td>

En función del número de columnas, hay que insertar a continuación los «Datos de la tabla».

<tr>
<td>Texto 1</td>
<td>Texto 2</td>
<td>Texto 3</td>
<td>Texto 4</td>
</tr>

Anuncios de eventos en Facebook y página de me gusta

Los diseños para los anuncios de eventos de Facebook y los banners de «Me gusta» de la página se crean mejor con 1200 x 444 píxeles. Esta unidad no es utilizada por Facebook, pero hoy en día hay que pensar en muchos dispositivos en los que se ven los anuncios, desde ordenadores portátiles hasta iPhones. Con 1200 x 444 px siempre tendrás una resolución exacta en todos los dispositivos, incluso en las modernas pantallas Retina.

Crearun diseño con 1200 x 444 píxeles

La pantalla del ordenador de sobremesa será de 470 x 174 píxeles / La pantalla del móvil será de 560 x 210 píxeles
– es escalado automáticamente por Facebook

Enlace al sitio web de Facebook y anuncio de la oferta

Los anuncios de enlaces a sitios web y ofertas de Facebook sólo difieren ligeramente en sus dimensiones verticales. Facebook utiliza 627 píxeles en lugar de 444. Por lo tanto, cree siempre su diseño para los banners de enlaces de sitios web y anuncios de ofertas con 1200 x 627 píxeles.

Creardiseño en 1200 x 627 píxeles

La pantalla del ordenador de sobremesa es de 470 x 246 píxeles / La pantalla del móvil es de 560 x 292 píxeles
– es escalado automáticamente por Facebook

Si te interesa más el marketing en Facebook, echa un vistazo a nuestra agencia de marketing en Facebook.

Para más información, echa un vistazo a nuestra agencia de marketing en Facebook.

Instrucciones
Diseño de páginas de fans en Facebook en 4 pasos:

Paso 1: Diseño gráfico de Facebook en Photoshop

El PSD es el doble de grande de lo requerido. ¿Por qué? Así que definitivamente no tendrás ningún problema con la foto de perfil cuyas dimensiones son mayores que los píxeles que realmente se muestran. Introduzca los gráficos en las carpetas previstas (título, perfil). ¡Tip! Como se marca en la plantilla como «EJEMPLO», las capas de fondo conectan la imagen del perfil y del título. Esto mantiene la transición limpia y puedes mover libremente el fondo de un lado a otro sin problemas.

Paso 2: Desactivar la capa de vista previa

Para guardar la imagen de perfil y de portada de Facebook, primero hay que desactivar el nivel superior «imagen de perfil – forma».

Paso 3: Seleccionar y recortar las máscaras

Seleccione las máscaras de las dos carpetas (título, perfil). Simplemente con ALT + clic del ratón. Vuelva a la vista normal y recorte la imagen (Edición > Recorte). De este modo, tendrás las dimensiones originales. Recuerde: la imagen del título debe ser (como mínimo) de 850 x 315 píxeles y la del perfil (como mínimo) de 180 x 180 píxeles, pero la visualización está limitada a 160 x 160 píxeles.

Paso 4: Guardar y cargar

Guarda tu imagen como un jpg con nivel de calidad 10, 11. A continuación, puedes subir tu nueva imagen de perfil y de portada a la página de fans de Facebook.

Descargar: 4x archivos gráficos para campañas de Facebook Ad (2014)

¡Tip! Nuestra guía XXL: Facebook Ads – Publicidad, anuncios y píxeles

Anuncios de eventos en Facebook y página de me gusta

Crea tus diseños para Facebook Event Ads y Page Like Banner con 1200 x 444 píxeles. Esto le da una resolución exacta, incluso con las modernas pantallas Retina.

Creardiseño en 1200 x 444 px

Pantalla de escritorio: 470 x 174 px
– es escalado automáticamente por Facebook

Pantalla móvil: 560 x 210 px
– es escalado automáticamente por Facebook

Enlace al sitio web de Facebook y anuncio de la oferta

Los anuncios de enlaces a sitios web de Facebook y de ofertas difieren ligeramente en la vertical. Aquí, en lugar de 444 píxeles, se utilizan 627 píxeles. Esto se debe al diferente formato de los anuncios. Cree su diseño para los banners de enlaces a sitios web y anuncios de ofertas con 1200 x 627 píxeles.

Creardiseño en 1200 x 627 px

Pantalla de escritorio: 470 x 246 px
– es escalado automáticamente por Facebook

Pantalla móvil: 560 x 292 px
– es escalado automáticamente por Facebook