El Pullquote es un elemento de texto, normalmente una cita o extracto de un artículo, que se coloca de mayor tamaño de letra, y sirve para destacar un tema clave o bien conducir a los lectores a un aspecto clave. Se usa mucho en periodismo.
Un ejemplo lo tenemos en esta imagen en la que el efecto pullquote queda encerrado en una hoja de árbol y, además, entre dos columnas de texto:
 |
Foto cortesía de InDesignSecrets
Y así quedaría en un texto a una sola columna:
 |
Foto cortesía de Drupal
>> OPCIÓN 1 (+ elegante y editable a gusto personal)
- Proceso: plantilla y editor de la entrada.
Primero hay que establecer los atributos de estilo y para ello hay que copiar el siguiente código antes de ]]></b:skin>
.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}
Los parámetros (fuente, tamaño, color...) son completamente editables a gusto personal.
Luego, solo nos queda redactar el artículo en una entrada. El texto que se quiera poner en pullquote hay que encerrarlo entre las etiquetas SPAN con la clase pullquote. Así:
Luego, solo nos queda redactar el artículo en una entrada. El texto que se quiera poner en pullquote hay que encerrarlo entre las etiquetas SPAN con la clase pullquote. Así:
<span class="pullquote">TextoTextoTextoTextoTexto</span>
>> OPCIÓN 2 (+ sencilla, sin muchos rodeos)
Copiar este código directamente en el editor de la entrada:
<div style="float:right;height:6em;width:150px;margin-top:10px;margin-bottom:10px;margin-left:10px;line-height:18px;text-align: right;">
<span >text text text text text text text text text text...</span>
</div><p style="text-align: justify;">
Según nos dice wikipedia: Pullquote es una cita o extracto de un artículo que se coloca en un mayor tamaño de letra en la misma página, que sirve para destacar y conducir a los lectores en un artículo y o bien para destacar un tema clave. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo.</p>
<div style="clear:both;"></div>
Lo que está en verde y en negrita es el texto del pullquote. Lo marcado en rosa es el texto del artículo, escrito normalmente, sobre el que queremos que aparezca incrustado el pullquote.
En ambos casos, el efecto queda muy estético y por supuesto da estilo a las entradas.
