«Cajas flotantes» en un artículo WordPress

Supongamos que queremos lograr en nuestros artículos lo que se ve a continuación: una caja con un contenido arbitrario.

Esta caja puede aceptar cualquier tipo de contenido, ya sea texto aclaratorio, enlaces a otros artículos (cuando tenemos una «miniserie»), imágenes, lo que sea necesario.

Simplemente hay que utilizar el código comentado en este artículo.

Para lograr esto tenemos que utilizar código html, con el comando div y el parámetro del mismo style.

No será necesario ir a la pestaña HTML del editor de WordPress para lograr todo esto, pero si lo hacemos al volver al editor visual nos encontraremos con la caja perfectamente formateada mientras que si escribimos el código en el editor visual solo veremos el código: será necesario ir a la «vista previa» (o publicar) para ver cómo queda.

Los parámetros a utilizar son: float para indicar dónde debe colocarse el cuadro; width para indicar el ancho del cuadro; background-color para indicar el color de fondo; padding para establecer una distancia entre el borde del cuadro y el contenido; border si queremos un borde… internet está llena de guías para HTML por lo que dejo al lector el ejercicio de buscar lo que necesite, incluyendo cómo se llaman los colores en HTML.

Ahora los dejo con el código que utilicé para crear el cuadro que se ve en este artículo:

<diXv style="float: right; 
  width: 50%; background-color: lightgray; 
  padding: 1em; border: 1px solid gray;">

Esta caja puede aceptar cualquier tipo de contenido, 
ya sea texto aclaratorio, enlaces a otros artículos 
(cuando tenemos una «miniserie»), imágenes, lo que 
sea necesario.

Simplemente hay que utilizar el código comentado 
en este artículo.

</div>

NOTA 1: Para evitar que el ejemplo de código sea «compilado» por WordPress tuve que agregar la X roja y así «romper» la etiqueta «div» inicial, por lo que ya saben: nada de copiar y pegar irracionalmente 😉

NOTA 2: El cuadro será rodeado por el texto que le sigue. Es decir, dado que este cuadro está a la derecha el texto que se tenga luego del /div de cierre comenzará arriba a la izquierda del cuadro, tal y como se ve en este artículo.

NOTA 3: Para un ejemplo donde se utiliza esta «caja» como índice de una miniserie de artículos, pueden ver esta entrada de mi blog en inglés. Allí también utilicé el parámetro font-size:80%; para reducir el tamaño del texto.

Anuncios

3 comentarios en “«Cajas flotantes» en un artículo WordPress

Aquí puedes dejar un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s