Cómo hacer una caja simple en WordPress

ramonjosegn · 10 Oct 2016

Hola, aunque esta pregunta parece algo "tonta" lo cierto es que los plugins que hay para crear cajas en WordPress están muy desfasados (no actualizados) o me dan problemas con mi theme.

Entonces ¿cómo armo una caja sencilla en WordPress?

Una caja simple, como un cuadrado con fondo para insertar una imagen u otro contenido.

A ver si me echáis un cable porque ya no se me ocurre cómo...

matitk · 10 Oct 2016

Hola, desde el editor html. Por ejemplo:

Esto donde quieres poner el contenido

HTML:

<div class="caja">
    <h1>Caja 1</h1>
    <p>Texto de Prueba</p>
</div>

y esto al final o donde te quede mas cómodo

HTML:

<style>
.caja {border: 5px solid black; background-color:yellow; text-align:center}
</style>

ramonjosegn · 10 Oct 2016

Gracias [MENTION=48004]matitk[/MENTION]

Si no encuentro otra forma me tocará cómo dices y a mano con CSS.

Ya tengo varias creadas así, y la verdad es muy engorros y he visto que se ensucia mucho el código.

Pero bueno, tocará así por lo visto. Muchísimas gracias por la ayuda.

krusty72 · 10 Oct 2016

Al código de matik agrégale un border-radius para que tenga bordes redondeados y un :hover para que al posicionar el ratón haga algún efecto la caja.

ramonjosegn · 10 Oct 2016

Gracias por las recomendaciones [MENTION=2092]krusty72[/MENTION]

Cajas con bordes ya tengo con shortcodes en realidad, ando buscando algo con bordes de 90 grados (o eso creo). Aún no decido a la verdad.

boscorelly · 13 Oct 2016

matitk dijo:
Hola, desde el editor html. Por ejemplo:

Esto donde quieres poner el contenido

HTML:

<div class="caja"> <h1>Caja 1</h1> <p>Texto de Prueba</p> </div>

y esto al final o donde te quede mas cómodo

HTML:

<style> .caja {border: 5px solid black; background-color:yellow; text-align:center} </style>

Hola, perdón por meterme en la conversación , he probado esto, he quitado el titulo y solo quiero que aparezca el texto, pero este texto aparece en la parte de arriba, para que aparezca en el centro hablando de altura no de anchura , como sería ?

Gracias

matitk · 13 Oct 2016

boscorelly dijo:
Hola, perdón por meterme en la conversación , he probado esto, he quitado el titulo y solo quiero que aparezca el texto, pero este texto aparece en la parte de arriba, para que aparezca en el centro hablando de altura no de anchura , como sería ?

Gracias

Hola, lo mas corto que se me ocurre es agregarle un padding-top, te quedaria asi

HTML:

<style>
.caja {border: 5px solid black; text-align:center; padding-top:20px}
</style>

sino creando otro div pero ya se hace mas largo

HTML:

<div class="caja">
    <div class="contenido"><p>Texto de Prueba</p></div>
</div>
<style>
.caja {border: 5px solid black; text-align:center}
.contenido {vertical-align:middle}
</style>

boscorelly · 18 Oct 2016

matitk dijo:
Hola, lo mas corto que se me ocurre es agregarle un padding-top, te quedaria asi

HTML:

<style> .caja {border: 5px solid black; text-align:center; padding-top:20px} </style>

sino creando otro div pero ya se hace mas largo

HTML:

<div class="caja"> <div class="contenido"><p>Texto de Prueba</p></div> </div> <style> .caja {border: 5px solid black; text-align:center} .contenido {vertical-align:middle} </style>

Gracias, probare a ver como me queda.

Saludos

ramonjosegn · 18 Oct 2016

Gracias por tomarte el tiempo de responder [MENTION=48004]matitk[/MENTION] especialmente picando código.

Cómo hacer una caja simple en WordPress

ramonjosegn

matitk

ramonjosegn

krusty72

ramonjosegn

boscorelly

matitk

boscorelly

ramonjosegn

Temas similares