¿Cómo hacer un blog atractivo en WordPress con código HTML y CSS. [Plantillas para copiar y pegar]

Voy a comenzar este artículo dejando claro muchos aspectos que os vendrán bien a la hora de seguridad y hacer cambios en vuestra web en un futuro.

Una web que centre su estrategia en contenidos, tiene un apartado de Blog o noticias donde va escribiendo artículos, como éste, dónde aporto mis conocimientos a mi comunidad, con toda la información que voy explicando, ellos pueden aprender e implementarlo en sus proyectos. Intento dar solución a problemas que tiene mis seguidores.

Explico mediante videotutoriales o por escrito de forma resumida y «al grano», mi conocimiento en Diseño web, el uso de herramientas, tendencias, cosas que me están funcionando a mi, la implementación de la estrategia en todo lo que hago…

Llegados a este punto, si tu tienes este tipo de web, es importante que sepas que los artículos, post o entradas en WordPress, deben estar editados con el método clásico o con Gutenberg (si lo manejas), pero si has usado un plugin como  editor visual conocidos como Page Builder  (Divi, Elementor, Visual, Thrive…) no deberías hacer los artículos con estos plugin.

¿Por qué? Pues muy sencillo, estos plugin, utilizan shortcodes, para hacer llamadas al código que realmente ejecuta. Y estos una vez que los estás utilizando, todo va bien, pero imagínate que él plugin que utilizas desaparece, deja de actualizarse y ¿tienes que eliminarlo?

Pues que todo se rompe, y en el caso de una web, donde tienes 5 o 6 páginas, puedes volver a rediseñar, pero en el caso de las entradas que estás publicando quizá semanalmente o mensual, al cabo del tiempo son muchas las que tienes que rediseñar. ¡¡¡Un infierno, no!!!

Por ello desde un principio es importante que las entradas de tu Blog lo hagas desde el editor de WordPress, que es sencillo de usar como si de un Word se tratara.

Y aquí tenéis el apartado de configuración de cpanel de WordPress y como publicar entradas en WordPress:

flecha-marcadorEditar un artículo del Blog en WordPress. Instalar Plugin Editor Clásico.

Si queréis más información sobre este Plugin podéis encontrarlo aquí

Uso de Html y Css en tu Blog. ¿Qué es?

Como hemos visto, es sencillo escribir una entrada de Blog en WordPress. Pero tiene pocas funcionalidades si queremos hacer un artículo o post atractivo. Para ello, hay una posibilidad que es utilizando el código Html y css. No tienes que saber programar. Con los video tutorales que te adjunto podrás paso a paso hacerlo.

a) Definición de Código HTML

Las páginas web se escriben en el estándar HTML (HyperText Markup Language)

( Lenguaje de Marcado de Hipertexto) Este Lenguaje tiene un papel clave: Le dice al navegador como mostrar su contenido por medio de unas instrucciones especiales llamadas ETIQUETAS, que le indican cuando comenzar un párrafo,poner cursiva, enseñar una imagen, dirigirse a otra página, etc…

Las etiquetas HTML son instrucciones de formato que le dicen al navegador como transformar el texto normal en algo visualmente atractivo.

¿Qué es una etiqueta? Se compone de los símbolos < >. Hay etiquetas que tienen inicio y cierre como la etiqueta de párrafo <p>Inicio y </p> cierre. Lo que se coloca entre ambas etiquetas sería la frase que se interpretará como un párrafo.

Ej: <p>Soy María, Consultora de marketing, especializada en Diseño Web</p>

Y si quiero que especializada en Diseño Web se muestre en negrita, pondremos la etiqueta <strong>

Ej: <p>Soy María, Consultora de marketing, <strong>especializada en Diseño Web</strong></p>

Pero para hacer un diseño limpio y rápido, utilizamos las etiquetas en Html y hacemos uso de la hoja de estilos CSS.

En la Wikipedia, podéis encontrar esta definición y más información detallada.

b) Definición de Código CSS

Hojas de estilo en cascada, es un lenguaje que se utiliza para estilizar los elementos de un lenguaje de marcado como HTML. Como hemos visto anteriormente, en Html se usa etiquetas y si queremos «ponerlo bonito» dar diferentes formatos, colores, tamaños, estilos…a las etiquetas usamos el código CSS. Que también podrías hacerlo directamente en el código HTML, pero queda de una forma más limpia y sobretodo, el navegador cuando ve la web, recibe la instrucción de código CSS, lo interpreta y se guarda en caché de tal forma que la próxima vez no tendrá que emitir la instrucción y eso supone mejor velocidad en la Web.

Para ello, usamos en el código HTML, las cajas <div></div> donde se les da una clase que será lo que queremos modificar en la etiqueta. Me explico mejor con un ejemplo:

Tenemos un título h2 que queremos poner en color rojo.

En el blog en la pestaña de HTML, escribiremos

<div class=rojo>

<h2>Título</h2>

</div>

Pues una vez que tenemos incluido el titulo dentro de la caja div a la cual le hemos puesto una clase rojo, que es el elemento que pondremos en CSS de esta forma:

.rojo{ color:red;}

La clase le ponemos un punto (.) delante y abriremos corchetes y dentro ponemos lo que queremos modificar.

Igual te parece así un poco lio, pero en los videos y en la practica y con los códigos que te dejo a continuación te resultará mas fácil porque simplemente copiando y pegando, lo tendrás. Pero me parecía interesante que sepas de donde sale todas estas instrucciones.

Escribir un Post en el Blog. Poner negrita, insertar imagen, cursiva…

 

Una vez que ya sabéis crear una entrada y darle formato, el uso de la situación de las imágenes, el tamaño de la tipografía, como introducir encabezados y párrafos, ponerlo en negrita o cursiva, como en Word.

Vamos a ver, como introducir Código CSS, en nuestras entradas y que salga un recuadro con un color, que un párrafo en concreto tenga un pading por todos sus lados, el subrayado que utilicemos o la negrita sea de un color especifico.

Y no os asustéis porque no tenéis que saber código, os voy a poner ejemplos con el código que necesitas para que lo copies y pegues en tus entradas.

Voy a explicarlo de la mejor forma posible, cualquier duda en comentarios y os voy contestando.

Normalmente en WordPress, cuando vais apariencia del tema, en el Menú vertical, abajo del todo, tenis un apartado que pone CSS adicional, es aquí donde tenéis que incluir el código que os voy indicando a lo largo del Post para darle un aspecto más atractivo a tu Blog. Si no lo veis, podéis usar el Plugin Gratuito del repositorio de WordPress: Simple Custom CSS.

CSS adicional, donde está

 

Cómo ver el código HTML y CSS en una página Web.

 

 

Escribir código Html en las entradas del Blog de tu página Web.

 

 

Copiar el código CSS en tu página Web

 

 

 Ejemplos con código HTML Y CSS para copiar y pegar en tu página Web.

 

Caja con un fondo de color

⇒Código Html:

código HTML caja fondo Lo que aparece dentro de la caja, es la frase que tenéis que poner vosotros la que queráis. La que hay entre ><.

 

DISEÑO WEB WORDPRESS, código CSS

⇒Código Css:
.caja-fondo{
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #f25616;
font-size: 18px;
font-weight: 400;
text-align: center;
background-color: black;}

Caja con marco de un color

⇒Código Html:

DISEÑO WEB WORDPRESS, código CSS

Código HTML Caja-marco
⇒Código Css:

.caja-marco{
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: black;
font-size: 18px;
font-weight: 400;
text-align: center;
width:500px;
padding:5px;
margin: 10px;
border: solid #49cbcd 10px;}

Caja con esquinas redondeadas

⇒Código Html:

Cja-borde-html

DISEÑO WEB WORDPRESS, código CSS

⇒Código Css:

.caja-borde-redondeado{
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: black;
font-size: 18px;
font-weight: 400;
text-align: center;
width:700px;
padding: absolute;
margin: 10px 10px 10px 10px;
border: solid #49cbcd 10px;
border-radius: 20px 20px 20px 20px;}

Caja que el fondo sea de color opaco

⇒Código Html:
caja-borde-redondeada

DISEÑO WEB WORDPRESS, código CSS

⇒Código Css:

.caja-opaca{
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #ffffff;
font-size: 18px;
font-weight: 600;
background-color: #f25616;
opacity: 0.4;
height:80px;
width: 400px;
text-align: center;
padding-top:30px;
padding-left:10px;
margin-right:20px;}

Caja margen a la izquierda

⇒Código Html:

caja-margen-izquierda

DISEÑO WEB WORDPRESS, código CSS

⇒Código Css:

.recuadro{padding: 15px 15px 15px 15px;
border-left: 5px solid #F25616;
blackground: #f5f5f5;
line-height: 26px;}

Caja con sombra exterior

⇒Código Html:

Caja-somb ra-exterior

DISEÑO WEB WORDPRESS, código CSS

 

⇒Código Css:

.caja-sombra-externa{
width: 400px;
height:50px;
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #ffffff;
font-size: 18px;
font-weight: 600;
padding-top:30px;
background-color: #f44611;
box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.6);}

 Caja con sombra interna.

⇒Código Html:

Cha-sombra-interior

DISEÑO WEB WORDPRESS, código CSS

⇒Código Css:

.caja-sombra-interna{
width: 400px;
height:50px;
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #ffffff;<
padding-top:30px;
font-size: 18px;
font-weight: 600;
background-color: #f44611;
box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.5);}

Son diferentes formatos que podemos darle a las cajas y así mostrarlo para remarcar títulos, frases más importantes, citas o resumen.

Ahora vamos hacerlo con la tipografía, cómo sabes en el Blog usamos H1 como título principal y después de este hacemos uso de H2, H3, H4…para los encabezados. Es importante que los uses de forma jerárquica. Yo utilizo H1 para el título, los secciones H2 si dentro de esta sección hay apartados h3 y si hubiera sub-apartados h4. Siempre en esa linea, es importante para la usabilidad, y Google le gusta las cosas bien estructuradas.

Lo mismo que hemos realizado con las cajas, lo podemos hacer con las tipografías, si queremos cambiar el tamaño, la familia o el color. A continuación os dejo una serie de ejemplos:

Cambio de tamaño en la tipografía

⇒Código Html:

código-cambio-tamaño-tipografia

Diseñadora Web

⇒Código Css:

.tamaño-32 {font-size:32px;}

Cambio de familia en la tipografía

⇒Código Html:

familia-tipografía-codigo-html

Apasionada de la Fotografía

⇒Código Css:

.tipo-monospace {font-family:monospace;}

Os dejo estas dos tablas para que entendáis mejor que son los elementos que usamos en los textos con css:

 

imagen-tabla-tipografia-css

 

Aquí os dejo esta tabla, más sencilla de utilizar a la hora de cambiar la tipografía de un párrafo o encabezado.

 

imagen-tabla-codigo-css

 

Y en esta imagen que muestro a continuación verás de una forma mas clara, a la hora de centrar el texto, si le damos un ancho a la caja, le ponemos un margen o un padding como afectaría. Como veis, lo forma un cuadrado, por lo tanto son cuatro lados, si queremos modificar el padding o margen solo de la parte de arriba utilizaremos Top, si es de la parte de abajo es bottom, de la izquierda (left) y la derecha (right). Su estructura sería así –> padding=20px(top), 25px(left),30px(bottom),25px(right). Si solo queremos de arriba, los demás pondremos 0.

 

imagen-esquema-codigo css

 

Y quien quiera solo cambiar del código las medidas, os dejo que linea de código Css significa cada modificación:

  • opacity: 0.5 –>Cuando queremos poner opaco un color o cuadro.
  • border-radius: 20px 20px 20px 20px; –>Para poner las esquinas de la caja redondeadas.
  • height: 60px; –> Poner la altura de un cuadro o caja.
  • width: 800px; –> Indicar la anchura del cuadro o caja.
  • box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.6); –> Esta linea pone la sombra externa de caja, cuadro o imagen.
  • box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.5); –>Esta otra linea es para poner sombra interna a una caja, cuadro o imagen.
  • border-radius: 50%; –>Otra forma de poner el borde redondeado de un cuadro o caja, con porcentaje.
  • color: #codigo hexagesimal; –>Forma de poner los colores a la tipografía, cuadro, borde…siempre con la almohadilla delante (#).
  • Font-size: 18px; Esta linea de código modifica el tamaño de la tipografía.

Todas las instrucciones de CSS se indican con un “punto” (.) delante de la etiqueta, y las instrucciones que queremos modificar entre { }. Y al cerrar cualquier linea de código siempre ;

 

Espero que os haya gustado este artículo y os sea de utilidad, he intentado explicarlo lo mejor posible, y muy por encima a mí me llevo a profundizar en él un año entero y muchos más de practicas haciendo páginas web en Html y CSS, sin usar CMS. Imaginaros ahora con WordPress como me siento. Gano mucho en tiempo y los resultados son mucho mejores.

Si quereis algum código de algo en concreto ponerlo en los comentarios y o lo hago y mando para que podais copiar y pegar y listo.

 

banner-publicidad- diseño-web

12 comentarios en «¿Cómo hacer un blog atractivo en WordPress con código HTML y CSS. [Plantillas para copiar y pegar]»

    • Me alegro Alex, que sea de utilidad. Puede servir de guía para tenerlo y cuando vayas hacer una sombra, una caja con un borde…etc ir aquí y coger el código. Gracias por el comentario.

      Responder
  1. Madre mía Maria, con los videos y todo, esto el que no tenga ni idea, se monta un blog fácilmente, ojalá hubiera tenido yo este artículo, hace unos años!!
    Un abrazo y nos vemos en nada.
    Toñi Rodriguez Navas

    Responder
    • Gracias Toñi, me alegro leer tu comentario. La idea es esa, la gente le tiene algo de miedo cuando escucha código y de esta forma con los videos y ejemplos, no es difícil utilizarlos o entender como darle altura a un bloque o sección por ejemplo.

      Responder
  2. Muy muy bueno Maria, pedazo de post con tantos ejemplos prácticos que serán de utilidad a mucha gente que no tiene idea de código. A mi me vendrá genial, ya te digo jajajaja además con los vídeos muy al grano y didácticos, muy bueno de verdad. Lo comparto. Enhorabuena

    Responder
    • Gracia Claudio, menudo subidón leer estas palabras. Analicé un poco las necesidades de muchos «compis» para comprender de que forma podía explicar este tema, que a muchos al principio «da miedo» como modificar código, me ha llevado un tiempo, pero quería ponerme en la piel de los que no sabían…y con ese apoyo pude hacer unos videos que creo que son bastante entendibles. Seguimos remando y gracias por compartir. Hay que dar visibilidad de los contenidos que hacemos con pasión y enseñan y facilitan él trabajo a otros. Yo me guardo el tuyo que has publicado reciente de mail https://claudioinacio.com/2019/11/14/como-hacer-un-buen-mailing/ que es una tarea que estoy empezando hacer.

      Responder
  3. Excelente post para aprender paso a paso como se estructura y funciona el código de estilos CSS. La aportación de código con los ejemplos sin duda es de valor para aquellos que no sepan nada. Felicidades María por el post.

    Responder
    • Muchas Gracias Jorge, lleva muchas horas de trabajo. Pero lo he disfrutado mucho y ver estos comentarios y lo que está aportando a la gente, para mi es gratificante.

      Responder
  4. Hola María gracias muy buen artículo. Estoy tratando de implementarlo pero en mi sitio trabajo con Elementor, supongo que en teoría debería funcionar pero no funciona, alguna idea de porque no sale la sombra.

    Gracias.

    Responder
    • Buenas Franklin, si utilizas Elementor y modificas el código HTML para darle una clase para poner la sombra, se te puede descolocar la página.

      Si publicas los artículos con Elementor, cosa que no te recomiendo, por lo que te cuento en el Post. Pero si tu decides hacerlo, una vez que creas una caja, te vas a estilo. y en el apartado de borde puedes ponerle el Radio (grosor de linea) y más abajo tienes un apartado de sombra. Y no hace falta introducir código.

      Dime si he contestado así a tu respuesta, y si tienes dudas vuelve a escribirme y te hago un video ejemplo de como hacerlo con elementor.

      Saludos

      Responder
  5. ¡Enhorabuena María!

    Me das la vida con este post porque me va a ayudar mucho a maquetar mis posts. Los ejemplos es lo que más me gusta, porque me ayuda a entenderlo todo de una manera más visual. De todas formas te consultaré mis dudas, jejeje.

    Un abrazo

    Responder

Deja un comentario