¿Le gustaría llamar la atención de los lectores sobre cierto texto en las publicaciones de su blog? Una forma eficaz de lograrlo es creando cuadros de texto llamativos y elegantes. En este tutorial, te mostraré cómo crear fácilmente cuadros de texto usando CSS. Crearemos dos clases, right_box y left_boxque hará flotar los cuadros de texto hacia la derecha o hacia la izquierda.
Paso 1: crear clases CSS
Para comenzar, abra su hoja de estilo y agregue las siguientes reglas CSS para el right_box clase:
.right_box {
float: right;
width: 200px;
margin-left: 15px;
border: 1px solid #FGFGFG;
padding: 10px;
background-color: #efefef;
}
Siéntase libre de personalizar el ancho, el margen, el color del borde, el relleno y el color de fondo para que coincida con sus preferencias.
Paso 2: definir el cuadro de texto en la publicación
Ahora que tenemos nuestra clase CSS, procedamos a crear el cuadro de texto dentro de nuestra publicación de WordPress. Sigue estos pasos:
- Cambie al modo HTML del editor de texto.
- Ubique la sección de texto que desea resaltar y envuélvala con un
<div>elemento usando elright_boxclase. Por ejemplo:
<div class="right_box">
This is the text you want to highlight.
</div>
- Guarda tu publicación.
Paso 3: verificar el estilo
Para confirmar que el texto está controlado por la regla CSS, puede verificar la barra de estado en la parte inferior izquierda del Editor de texto mientras el cursor está dentro del texto resaltado. Debería mostrar “ruta: div.right_box”.
Tenga en cuenta que no verá las etiquetas div ni el efecto de cuadro en el modo Visual mientras edita la publicación, ya que no utiliza la hoja de estilo del tema. Sin embargo, cuando obtenga una vista previa o publique la publicación, el estilo del cuadro de texto se ajustará a la clase CSS que haya definido.
Espero que este tutorial te ayude a mejorar las publicaciones de tu blog y captar la atención de tus lectores con cuadros de texto visualmente atractivos. ¡Feliz blog!
