Códigos CSS y HTML para WordPress [+trucos]. Colores CSS para personalizar tu página web o blog

¿Alguna vez has querido modificar un elemento de tu página web y no has sabido cómo hacerlo?

Actualmente para crear webs existen constructores que nos facilitan la creación de contenido, y que para muchos, nos facilitan el trabajo y la vida, ya que nos hacen ahorrar tiempo.

Pero, ¿y si aprendes tú mismo el lenguaje de las webs? ¿sabes que no habría nada que se te resistiera a la hora de crear tu página?

Las últimas tendencias del diseño web cada día son más visuales y difíciles de hacer a código, pero nunca viene mal aprender lenguajes por si algún elemento se nos resiste con los constructores visuales.

En este completísimo artículo aprenderás todo los que necesitas saber sobre códigos CSS, colores CSS y HTML para Wordpress. Además encontrarás TRUCOS para Wordpress muy útiles y que te ayudará a personalizar y hacer un diseño único de tu página web o blog.

 

 

Qué es HTML y para qué sirve

El código HTML es un lenguaje de etiquetas que sirve para modelar nuestras páginas webs.

Es como un documento al que puedes poner etiquetas y te organiza y gestiona el contenido.

Una página web en su nivel no es más que un documento de texto plano, que se puede enviar de un ordenador a otro gracias al protocolo WWW.

Entonces, si se trata de un documento con sólo texto, ¿por qué las páginas web tienen ese diseño con sus tablas, listas, imágenes, etc.?

Esto es gracias al lenguaje HTML con el que podemos modificar partes de este documento.

Un ejemplo de esto sería que, cuando escribamos el texto <b>hola</b>, queremos que realmente sea hola en negrita.

Este trabajo de “sustitución” lo hace el navegador, el cual sabe cómo reemplazar cualquier código gracias a que existe un estándar denominado HTML.

Los códigos HTML para web han ido evolucionando a lo largo de los años hasta llegar al HTML5, el cual es mucho más versátil y limpio que las versiones anteriores, además de permitir una mayor adaptación a los distintos tamaños de pantallas, resoluciones, etc.

El HTML para insertar un título h3 sería:

Pero este código podría personalizarse de la siguiente forma, añadiéndole un color azul:

Ahora bien, si queremos personalizar cada título, deberíamos incluir la misma etiqueta a todos, por lo que acabaríamos repitiendo lo mismo millones de veces, a no ser que queramos que cada etiqueta tuviese un estilo diferente.

 

También te podría interesar:

57 Mejores Plugins de Wordpress Gratuitos y Pago en 2018

Los 20 mejores sitios para descargar themes WordPress gratis

¿Qué es un Blog y para qué sirve? [Tipos de Blogs]

 

Estructura de códigos HTML

La estructura básica de este lenguaje por el que están compuestas nuestras páginas empieza con un head, que se trata de la cabecera de la página, donde estará la información más técnica que necesitará nuestro navegador.

Esta sección irá seguida de un body, donde añadiremos el contenido de toda la página (imágenes, textos, formularios, etc.).

Qué es CSS y para qué sirve

Una vez entendido el código HTML nos viene otra duda, ¿qué es el código CSS?

El código CSS es un lenguaje que surge para organizar y facilitar la tarea del código HTML.

El CSS definirá la presentación o apariencia del documento de texto HTML.

Este lenguaje ha ido evolucionando hasta llegar al CSS3, el cual permite añadir a nuestro contenido transiciones y animaciones muy originales a los elementos de nuestra página web.

 

Estructura del código CSS

La estructura del CSS se compondrá del selector o elemento de HTML que queramos personalizar, seguido de la propiedad y el valor entre corchetes.

Por poner un ejemplo, vamos a escoger el elemento HTML del título h3, al cual vamos a añadirle un color blanco. La estructura por lo tanto será la siguiente:

Como he dicho antes, el HTML para insertar un título h3 sería:

Ahora pasaríamos a añadirle un CSS para personalizarlo, con la estructura que te acabo de explicar para que el mismo título se repita en toda la web con la misma apariencia.

Lo que ahora sucederá es que todos los títulos de nuestra página con una etiqueta HTML de título h3, tendrán el mismo color azul, con el mismo tamaño y estilo de letra.

TIP: Cuando tenemos una hoja de estilo CSS muy larga, podemos llegar a perder el rumbo. Añade comentarios entre /* y */ para especificar con texto lo que hacemos en cada línea de código.

Veamos un ejemplo de este tip.

Como te he dicho, he incluido una descripción de que le hemos añadido un color, sin afectar al código del h3.

 

¿Qué diferencia hay entre CSS y HTML?

No es tarea sencilla saber qué significa HTML y CSS si no has utilizado ninguno de ellos, por eso mismo te voy a enseñar la diferencia entre ellos.

Cuando procedes a crear tu página web, utilizas un lenguaje HTML para definir los contenidos y asignar qué tipo de elemento va a haber en cada sección de la página.

Es entonces cuando, una vez ya está creada esta estructura de elementos, actúa el CSS para definir el aspecto que va a tener la página web.

Por lo tanto, el HTML da la estructura o posición de los elementos y el CSS aplica los estilos.

Muchas personas confunden estos lenguajes, y es que a veces no es fácil ver la diferencia entre ellos si no entiendes bien del tema.

Por esto mismo, te lo voy a explicar con un ejemplo.

En HTML añades a tu diseño un título con una etiqueta del título con el color.

Pero ahora bien, si añadimos 20 títulos exactamente iguales, cambiando el texto, tendríamos la misma etiqueta para los 20 títulos, quedando un documento bastante largo.

El CSS te permitirá no tener duplicidad de código, y para el mismo título h3 tener una sola estructura, y no la misma repetida 20 veces.

Cuanto menos se duplique el código, más eficiente y más limpio será.

Por lo que se resumiría en el siguiente CSS:

Con este código, todos los títulos que tengan la etiqueta <h3> tendrán ese mismo color.

Como te acabo de enseñar, HTML define el contenido y CSS permite la organización del mismo, estructurarlo y definirlo.

 

Características básicas y propiedades de cada elemento

Antes de pasar a ver los elementos básicos de la estructura de un diseño web, te voy a enseñar cómo se compondrían las propiedades básicas de los bordes (border), rellenos (padding) y márgenes (margin).

Como ves en la imagen, el margen sería lo de más afuera del contenido, es decir, el espacio de alrededor. Sin embargo, el padding se trata del espacio entre el contenido y el borde.

Estos se compondrán de la zona de arriba (top), la de abajo (bottom) y la de los lados (right y left).

 

Modificar elementos de la estructura de tu página web con CSS y HTML

Para que entiendas un poco mejor el HTML y CSS, te voy a explicar algunos de sus elementos, y además te voy a dar ejemplos para que puedas ponerlos en práctica a la hora de crear tu página web.

Padding y Margin en CSS y HTML

La propiedad de Padding establece la anchura de la zona en la que está incluida el elemento.

Para el h3 del ejemplo, podemos añadirle anchura en la parte de arriba, izquierda, derecha y debajo de la siguiente forma:

Ahora bien, esto podemos resumirlo y agruparlo de la siguiente manera:

Como ya te he dicho, el margen será el espacio de alrededor, y se utilizará de la misma manera que el padding, pero cambiando la palabra por margin. Veamos un ejemplo:

En resumen sería lo siguiente:

 

Colores CSS y HTML

Antes de nada, debemos saber qué paleta de colores para la página web vamos a utilizar, y tener claros los códigos de colores CSS y HTML para realizar los cambios en la plantilla.

Color: Primero de todo, y como ya has visto antes, para incluir el color del texto en CSS a un título, simplemente añadiríamos la siguiente propiedad:

Background-color: Esta propiedad añade un fondo de color a nuestro elemento, y se añadiría de la siguiente forma:

Completo Listado de Colores CSS

Fondos en CSS y HTML

Background-image: Con esta función podemos insertar una imagen de fondo en nuestra página web.

Una vez tenemos la imagen subida en la carpeta de medios, simplemente sería insertar la URL después del código.

Background-repeat: Podemos repetir o no repetir el fondo que hayamos incluido en el elemento dependiendo del valor que le asignemos.

Background-Attachment: Incluye los efectos que tenga el fondo, es decir, si queremos que esté fijo (fixed) y no haga scroll con el contenido, o si al contrario, queremos que baje con el resto de elementos (scroll).

Background-Position: Cuando abarcamos una imagen en algunos constructores de WordPress (entre otros CMS) puede que no quede centrada del todo, por lo que la posición nos permitirá alinearla a la izquierda (left), derecha (right) o al centro (center).

Un ejemplo de fondos para nuestra web sería el siguiente:

Personalizar los Bordes con CSS y HTML

Con esta propiedad podemos poner bordes a nuestros elementos y, además, customizarlos.

Es una propiedad muy útil sobre todo para personalizar los botones con CSS.

Pero, ¿cómo los personalizamos? Lo haremos con estos valores:

• Border-width, es decir, la anchura del borde. Podemos hacerlo más fino y más grueso en función de nuestro diseño.
• Border-color. Esta función cambiará el color del borde. Pero ojo, el texto que lo componga seguirá del color original.
• Border-style es el estilo que queramos que tenga: punteado, sólido, con relieve…

Te voy a explicar los tipos de bordes que podrás aplicar.

• Solid: Añade una sola línea recta.
• Dotted: Borde de puntos separados por espacios.
• Dashed: El efecto es similar al anterior, pero en vez de puntos se trataría de un borde con líneas separadas.
• Double: Doble borde, son dos líneas rectas juntas y separadas entre ellas.
• Groove: Produce un efecto de borde hundido.
• Ridge: Es un tipo de borde que sobresale, como un efecto 3D.
• Inset: Como ves en la imagen, crea un efecto de borde hundido.
• Outset: Es un borde que sobresale, crea un efecto en 3D.
• None: No se mostrará ningún tipo de borde.

Personalizar Textos y Fuentes con CSS y HTML

Cuando tenemos un texto en nuestra web, muchas veces no nos gusta la forma del párrafo, las fuentes, los tamaños o cualquier otra cosa que pueda afectar al diseño de la página.

Por esto mismo el HTML y CSS nos permiten hacer ciertos cambios en nuestras palabras para que tengan una apariencia más estética.

Vamos a ver algunas de estas modificaciones:

Font-family: Con esta propiedad podemos seleccionar el tipo de fuente que tendrá nuestro texto.

La ventaja que tiene es que, si en nuestro código añadimos dos tipos de fuentes seguidas, indicaremos una fuente alternativa a la inicial, por si algún usuario no dispone de esa fuente en su dispositivo, le aparecerá la segunda por defecto.

Font-style: Además de elegir el tipo de fuente, podemos escoger las versiones de las letras y establecer cursivas en CSS, negritas, oblicuas, etc.

Font-Weight: Esto es el peso de las fuentes. Para que lo entiendas mejor, se trata del grosor que tengan las letras. Pueden ser finas, medias, gruesas; en función del valor que le asignemos, que será entre 100 y 900.

Font-Size: Definiremos su tamaño en pixeles o porcentaje en función de la necesidad que tengamos en nuestro diseño web.

Si lo que queremos es cambiar el tamaño de letra en HTML y no en CSS, utilizaremos la etiqueta <Font Size> por ejemplo:

Al contrario que en CSS, que sería de la siguiente forma:

Line-Height: El interlineado CSS es el espaciado entre una frase y otra dentro de un mismo párrafo. Se puede definir en porcentaje (100% es el interlineado normal) o en “em”. Esto se utilizará para nuestro interlineado del HTML.

Text-align: Si queremos que nuestro texto esté alineado a la izquierda o derecha, deberemos indicárselo con esta propiedad.

Text-decoration: Podemos decorar nuestro texto con líneas alrededor (subrayados, líneas por encima…). Algunos de sus valores son los siguientes:

• Underline: Subraya el texto. El subrayado en CSS se suele ver sobre todo en enlaces.
• Overline: Incluye una barra sobre el texto.
• Line-through: Tacha el texto.

Text-transform: Cuando tenemos un texto muy largo en minúsculas y queremos pasarlo a mayúsculas, o viceversa, nos ponemos a reescribirlo, pero hay una forma muy sencilla de hacer esto automático, y es con los siguientes valores:

• Uppercase: Mayúsculas.
• Lowercase: Minúsculas.
• Capitalize: Primera palabra en Mayúscula.

!important:

Muchas veces la plantilla viene con unas personalizaciones por defecto, y, por mucho que intentemos cambiarlas, chocan ambas instrucciones.

Cuando añadimos este término, conseguiremos darle prioridad a nuestra instrucción.

Aquí tienes un ejemplo de cómo incluiríamos algunos de estos elementos para nuestro título ejemplo:

Etiquetas básicas de estilos en HTML para los textos

<h1> </h1>: Asignamos al texto el rol que va a tener en la página (h1, h2, h3…), en este caso sería el título principal.

<b> </b> ó <strong> </strong>: Con estas etiquetas de HTML incluimos las negritas en el texto.

<i> </i>: Etiqueta HTML para añadir cursivas al texto.

<p> </p>: Mediante una etiqueta indicamos que se trata de un párrafo.

Es decir, si en un texto no incluimos esta etiqueta, quedará todo en un mismo párrafo junto.

Si la distribuimos en párrafos se organizará de la forma que le indiquemos.

<br>: Con la etiqueta BR conseguiremos un salto de línea o lo que también se conoce como un break.

Te he explicado algunos de los elementos básicos de la web y algunas de sus propiedades, pero existen otras como serían añadir sangría al texto (text-indent) o el espaciado entre caracteres (letter-spacing), entre otras.

Crear Listados en HTML

El lenguaje nos permite crear diferentes listados para ordenar nuestros artículos o secciones de texto en las páginas webs.

Listado por puntos en HTML

Con la etiqueta <ul> crearemos un listado por puntos como el siguiente:

Cada punto irá precedido de la etiqueta <li> de “lista” para estructurar nuestra etiqueta UL.

 

Listado por números en HTML

Con la etiqueta <ol> crearemos un listado numerado como el siguiente:

Al igual que el anterior, deberá ir precedido de la etiqueta <li> para organizar los puntos de nuestra lista.

Otros elementos de una página web

Enlaces en HTML

A muchos nos ha pasado que un enlace se nos ha puesto por defecto en color azul y con el típico subrayado de Word.

Te voy a enseñar cómo cambiar esto de forma manual.

Los enlaces se especifican con la etiqueta HTML <a> </a> junto con el atributo href para especificar la URL de destino del enlace.

Y si ahora decidimos personalizar el enlace, tenemos opciones para hacerlo:

• a:link – Este será el estilo por defecto del enlace cuando aún no se ha clicado sobre él, ni se ha visitado nunca. Es decir, el estilo por defecto.
• a:visited – Aquí aplicaremos el estilo del enlace visitado. ¿Recuerdas el típico color morado de Google? Pues lo mismo para nuestra web.
• a:hover – Cuando pasamos el ratón por encima de un enlace, suele cambiar de Definiremos qué color que tendrá.
• a:active – Cuando clicamos con el ratón hasta soltar, este link tendrá un estilo, que, aunque se suele ver poco, podemos definirlo.

TIP: Para ocultar el subrayado que viene por defecto con el enlace, utilizaremos la línea a:link { text-decoration:none; }

Ahora solo nos quedará definir los estilos del enlace de la siguiente forma:

Como puedes ver, he añadido al enlace un color negro, y para cuando se haya visitado un tono azul. A ambos les he puesto con CSS un color de fondo gris.

Además, si lo que queremos es que este enlace se abra en una pestaña nueva, utilizaremos el target=”_blank” en la etiqueta HTML.

Imágenes <img>

Podemos insertar imágenes en nuestra web de la siguiente forma, especificando la URL a mostrar, el texto alternativo, y el ancho y alto de la imagen.

No te olvides de antes de insertar tus imágenes, optimizarlas y retocarlas con algún programas para editar fotos gratis o de pago.

El código HTML para insertar una imagen sería de la siguiente forma:

[clickToTweet tweet=” No te olvides de poner el atributo ALT a tus imágenes, beneficiarás el posicionamiento SEO de tu web.” quote=” No te olvides de poner el atributo ALT a tus imágenes, beneficiarás el posicionamiento SEO de tu web.”]

 

Tablas en HTML

Con el lenguaje HTML también podemos insertar tablas mediante la etiqueta <table>, indicando cada fila entre <tr> y cada columna en <td>.

Por ejemplo:

Aplicar CSS para tablas sería a través de los estilos. Seleccionaríamos nuestra tabla y modificaríamos los colores, bordes, textos, etc.

¿Dónde y cómo editar HTML en WordPress?

Podemos insertar código HTML en la página de WordPress a través de los widgets, entradas del blog y las propias páginas.

Añadir HTML en los Widgets de WordPress

WordPress nos permite incluir Widgets en nuestras barras laterales, superiores o inferiores; y para ello, vamos a Apariencia y a Widgets.

Si queremos incluir en nuestro Sidebar código HTML personalizado, arrastraremos el widget hasta el propio Sidebar.

Aquí podremos añadir los shortcodes de los plugins que queramos o nuestro propio código.

Añadir HTML en las Entradas del Blog de WordPress

La forma de modificar el HTML en el blog de WordPress sería a través de la pestaña de HTML que sigue a la de Texto o Visual.

Aquí añadiríamos todas las especificaciones que tendría nuestra entrada del post para maquetarla y que se quede como la tenemos en nuestra cabeza.

Añadir HTML en las páginas de WordPress

Al igual que en las entradas del blog, en la misma pestaña, añadiríamos nuestro código HTML de nuestras páginas.

Pero aquí tenemos otra opción que va a depender del constructor.

Podemos añadir un shortcode también arrastrando el elemento llamado “shortcode” o “HTML” (dependiendo del constructor que utilices en tu página web) en nuestro diseño de una manera muy sencilla.

¿Cómo y dónde modificar la plantilla de WordPress y su CSS?

Muchas veces entendemos la teoría, pero nos bloqueamos cuando toca modificar algún estilo, y no sabemos dónde acudir.

La hoja de estilos CSS (style.CSS) es un archivo que conecta y afecta a los HTML de nuestra página web. Es decir, se trata de una hoja que se orienta a dar estilo a nuestro documento HTML y que utilizaremos para dar un diseño personalizado a la web.

Pero, ¿dónde editar esta hoja de estilos CSS de WordPress?

Tenemos varias opciones para ir a esta hoja de estilos y modificarla a nuestro gusto.

Opción 1: A través de nuestro FTP, en la carpeta de tu tema tendrás el archivo Style.CSS donde podrás añadir los estilos que te apetezcan para tu diseño web.

Opción 2: Si no quieres meterte en tu FTP, desde el propio WordPress en la pestaña de “Apariencia”, “Editor”, podrás modificar las carpetas de tu plantilla.

Opción 3: Si eres de los que no les gusta tocar su FTP ni las carpetas internas, en el propio WordPress te vas a “Apariencia” y a “Personalizar”, y se te abrirán las personalizaciones de tu página web.

Una vez abiertas, vamos a “CSS adicional”. Aquí podrás añadir tu código personalizado, donde además, el propio editor te informará de los errores que tenga el código que añadas (si tienes la última versión de WordPress instalada).

Opción 4: Hay muchos temas de WordPress que te permiten añadir CSS personalizado desde sus propias opciones a través del Custom Code o Código personalizado.

Aun así, yo te voy a enseñar a hacerlo con la Opción 3, desde el CSS adicional.

 

También te podría interesar: 

Los 60 mejores Blogs de Marketing Digital en Español en 2018

Cómo crear una página web o Blog en Wordpress sin programar

Guía SEO para Wordpress + Manual SEO para ECommerce

 

¿Cómo inspeccionar los elementos de una página web?

Ahora viene la gran pregunta, ¿tengo yo que crear cada código sin saber lo que va a salir en mi pantalla una vez lo haya guardado?

No, tenemos una forma muy práctica y que me encanta para ver y crear los códigos en todo momento. Este es el inspeccionador de elementos.

Pero ojo, el inspector de elementos no lo tienen todos los navegadores, vamos a acceder a través de Google Chrome.

Cuando estamos en nuestra página web, pulsamos el botón derecho de nuestro ratón o touchpad y se nos abre un desplegable donde pulsamos en Inspeccionar.

Una vez pulsemos, se nos abrirá nuestra consola para ver el código de la página web.

Aun así pensarás, ¿y ahora qué? ¿Qué hago yo con tanta código extraño?

Pues ahora vas a descubrir el inspeccionador de elementos.

Si te fijas a la izquierda de nuestro panel tenemos una flecha que te va a ayudar un montón y, a partir de ahora, vas a consultar bastante.

Al seleccionarla, pulsamos en el elemento que queramos modificar. En mi caso como he estado hablando de títulos, voy a coger el h2.

Como ves, nos ha seleccionado ya el texto, y a la derecha nos aparece su personalización.

Ahora vamos a cambiarla.

Si bajamos hacia abajo, en las opciones de los estilos (Styles, en la columna de la derecha) iremos viendo todo lo que va conformando el texto h2.

Cuando llego a la clase .h2, tendré su tamaño, color y otros elementos.

Pues, para que destaque nuestra modificación, vamos a añadirle un fondo de color.

Como ves a la derecha, sobre el .h2 le he escrito “background-color:#569FE8” , y me muestra la web como quedaría con este fondo.

Pero ahora bien, ¿Piensas que ya estaría establecido este fondo de color azul? No.

Si actualizo la página, las característica del h2 volverán a estar como antes, ya que esto es solo para probar y no actúa sobre el código de la página.

Ahora bien, si yo quiero dejar este fondo establecido en mi web, lo que haré será pegar la nueva personalización en mi hoja de estilos o en mi Custom Code.

Te voy a enseñar cómo.

Primero de todo, abrimos el CSS adicional en el personalizador de WordPress.

Una vez lo tengamos abierto, copiamos el código que hemos modificado en la consola, quedando de la siguiente manera:

¿Te has fijado que solo he cogido el .h2 y no todo lo que había dentro de los corchetes?

En realidad no haría falta pegar de nuevo todas las características, ya que estas ya están establecidas en la plantilla, y el tamaño de fuente y la línea no la vamos a cambiar.

Al pulsar en Publicar, tendremos nuestro fondo cambiado en la página web.

TIP: Al seleccionar con la flecha un elemento lo tendremos asignado con una clase (class=”nombre”;) esta clase será el elemento que deberás modificar añadiéndole un punto delante (.nombre) y sus propiedades.

Las clases en CSS se pueden definir, y sirven para identificar etiquetas y agregarles propiedades.

La ventaja de esto es que podemos crear nuevas clases a atributos, y personalizarlos como queramos.

¿A que parecía más complicado de lo que en realidad es?

Lo que yo he hecho ha sido un cambio mínimo, pero con tu consola, tu inspeccionador de elementos y tu capacidad de búsqueda, podrás personalizar el diseño de tu web como quieras.

Al final le acabas cogiendo tanto gustillo, que te vuelves un obseso del retoque (te lo digo por experiencia).

Editar el CSS para móviles. Los Media Querys

¿Qué pasa si solo quiero modificar estos elementos en formato móvil?

Te voy a enseñar un truco para que, desde tu ordenador, veas cómo se ve tu web en los diferentes dispositivos móviles.

Abriremos de nuevo el inspeccionador de elementos, y seleccionamos el botón de Responsive (el símbolo de pantalla de móvil de al lado de la flecha mágica que te he enseñado antes).

Aquí podemos ver los diferentes dispositivos en los que se visualiza nuestra web.

En este caso, si queremos volver a modificar el h2 solo para los móviles, volveremos a pinchar con la flecha nuestro h2 y le pondremos el fondo de nuevo.

Buscamos la clase correspondiente o el elemento que queramos modificar y aplicamos el fondo.

Pero esta vez, si te fijas, arriba tenemos un @media only screen and (max-width: 1000px).

Volveremos a nuestro CSS adicional del personalizador y añadiríamos el código modificado junto con el media query, quedando de la siguiente forma:

¡Ya tendríamos el fondo de color azul solo para móviles!

Crea tu código HTML con Word [Truco]

[clickToTweet tweet=”¿Sabías que puedes crear un texto en Word y pasarlo a formato HTML pulsando a un solo botón?” quote=”¿Sabías que puedes crear un texto en Word y pasarlo a formato HTML pulsando a un solo botón?”] 

Si no lo sabías, te voy a explicar cómo hacerlo por si algún día te es de gran ayuda.

Primero de todo creamos nuestro texto en Word.

Una vez lo tengamos creado, con sus colores, negritas, y toda la personalización que queramos, vamos a “Guardar Como” y seleccionamos la opción “Páginas Web”.

Ya tendremos nuestro archivo en formato web.

Lo que yo hago ahora es abrirlo en Google Chrome y selecciono “Ver código fuente de la página”.

Una vez se me abre, voy directamente a la etiqueta “Div” de la página que se ha generado (sin mirar el head), donde tendré el HTML creado.

¡Solo habrá que copiarlo y pegarlo en nuestra web!

Tengo que decirte que esta es una manera de ahorrarnos trabajo, pero siempre es preferible hacerlo desde nuestro propio CMS o web para que quede el código lo más limpio posible, sin influencia del propio Microsoft Word.

Trucos para personalizar tu página web y plantilla de WordPress con CSS

Cómo crear una página de error 404 [+ Ejemplos reales]

Cuando un nuevo visitante entra en nuestra web y se encuentra con “PÁGINA NO ENCONTRADA”, probablemente la abandonará y no la volverá a visitar.

Entonces, ¿cómo podemos solucionar esto? Personalizando el error 404.

Pero esto lo hemos leído muchas veces y pensamos que está muy bien personalizar el 404, pero no sabemos cómo hacerlo.

Tenemos varias formas para crear esta página y poder retener al usuario que llegue a la web aunque no haya entrado en la página que esperaba.

Por ello, te voy a explicar las diferentes opciones de crear la página 404 en WordPress.

Personalizar el error 404 con CSS de una manera original

Podemos avisar al usuario de una forma creativa de que lo que busca no está en esa página, mediante efectos divertidos de CSS para el error 404.

Personalizar el error 404 mediante un Plugin de WordPress

404 Page es un plugin muy sencillo para hacer tu página 404.

Simplemente elaboras con tu constructor una página nueva con los elementos que quieras incluir, y en el propio plugin eliges cuál será tu página elegida para que aparezca cuando salga el error.

Personalizar el error 404 a través de .htaccess

Una vez tengamos hecha nuestra página con el constructor, tendremos que ir a nuestro archivo .htaccess y establecer que los errores 404 se redireccionarán a la página que hemos diseñado nueva.

Lo mejor sería hacer una página nueva, donde incluyas llamadas a la acción.

Para un blog, un buen error 404 sería incluir los últimos artículos que se han escrito, un botón para que te sigan en Feedly, junto a cajas de suscripción o de descarga de ebooks.

Para un ecommerce o página de servicios lo ideal sería incluir una serie de productos, junto con llamadas a la acción como descuentos por la suscripción a la Newsletter.

Te voy a enseñar varios ejemplos de otros bloggers que utilizan estas técnicas de error 404, para que cojas ideas a la hora de personalizar la página de error de tu web:

Blogpocket

Ignacio Santiago

Jesús Pernas

Luis M. Villanueva

Rafa Sospedra

Rubén Alonso

Vilma Nuñez

Personalizar las categorías del Blog con CSS

¿Te ha pasado alguna vez que has entrado en un blog y te encanta la forma que tiene distribuidas y personalizadas las categorías?

Las categorías de un blog te ayudan a estructurar los artículos de tu web para que las temáticas sean fácilmente accesibles para el usuario que llegue a tu blog.

Estas categorías son una forma de organizar el contenido de tus entradas y tienen un papel muy importante, ya que pueden mejorar o empeorar el posicionamiento SEO.

Si vas creando contenidos de forma periódica, y cada artículo lo enlazas a su categoría correspondiente, estas se van actualizando al crear contenido nuevo, lo que es muy importante para el posicionamiento.

Si las categorías de tu blog son llamativas, puede que el lector que esté leyendo tus artículos visite una temática que le interese y empiece a leer más artículos, disminuyendo así el porcentaje de rebote, aumentando las páginas vistas, incrementando el tiempo de estancia en la página web, etc.

Pero si tienes un blog, sabrás que WordPress solo permite poner un nombre, una pequeña descripción sin personalización y un slug a la categoría, sin poder personalizarlas de una manera sencilla.

Pues bien, tenemos diferentes opciones para su personalización.

Una de ellas sería mediante un plugin como Visual Term Description Editor o CategoryTinyMCE, los cuales añadirán al cuadro de descripción de la categoría, un editor de WordPress para que puedas personalizar las descripciones de manera visual.

Pero te voy a enseñar cómo hacer estas categorías más llamativas de forma manual con CSS para mejorar la experiencia de usuario de tus lectores y el SEO de tu página web.

Podemos personalizar las categorías cambiando su color de fondo la barra lateral para que quede con un aspecto visual y acorde a nuestra página web.

¿Y cómo conseguimos esto?

Con el inspeccionador de elementos y la flecha que te he explicado antes, vamos a la sección de las categorías, y nos aparecerá un class=”cat-item” o un nombre similar dentro de la clase, dependiendo de la plantilla.

Cogemos el texto que hay dentro de las comillas (cat-item) y vamos a nuestro CSS personalizado.

Una vez estemos allí, al texto que tenemos copiado le añadimos un punto antes, quedando de la siguiente manera: .cat-item

Ahora solo es cuestión de añadirle entre los corchetes las personalizaciones.

¡Ya tendremos nuestras categorías de colores!

Pero, ¿y si queremos hacer cada categoría de un color para que llame más la atención del usuario?

Pues bien, repetiríamos los pasos anteriores, pero en vez de seleccionar todas las categorías, iríamos señalando con la flecha una por una, e iremos copiando los nombres de dentro del class.

Normalmente estas categorías van asociadas a unos números. En mi caso van a ser .cat-item-81, .cat-item-82 y .cat-item-83.

Los cambios nos quedarán con el siguiente estilo:

Y solo tendríamos que añadir el siguiente código, cambiando los nombres y números, con el color que queramos incluir a cada categoría:

Ocultar un elemento de la página web con CSS

Muchas veces en nuestro diseño tenemos elementos que no nos gustan o que no queremos que aparezcan, y no sabemos cómo quitarlos.

Cuando diseñamos la página web con un constructor, es sencillo hacer desaparecer un elemento, pero a la hora de diseñar un blog con el que no utilizamos el constructor, hay elementos que no queremos que aparezcan, como podría ser la fecha, los comentarios, los likes al post, etc.

Con la propiedad display podemos ocultar un elemento en nuestra página web.

Para llevar a cabo esto, tendríamos que ir al inspector de elementos y buscar con la flecha el elemento que queremos eliminar.

Una vez lo tengamos, buscamos el nombre asignado dentro de la clase y le añadimos la propiedad display:none; de la siguiente forma:

Lo que he hecho aquí es que en mi página principal del blog, no van a aparecer el número de comentarios que tiene cada artículo, por lo que tan solo estará la fecha.

Parecía más complicado de lo que es, ¿verdad?

Elemento destacado en el menú con CSS

¿Has entrado a alguna página web y has visto que sus servicios o algún otro elemento del menú destaca sobre los demás?

Seguro que sí.

Esta técnica es muy útil para llamar la atención del usuario hacia esa página de nuestra web por encima de las otras.

Recuerda utilizar esta técnica con una estrategia previa para guiar al usuario a esa página y así lograr tus objetivos.

Te voy a explicar cómo destacar un elemento del menú a código.

Como en las ocasiones anteriores, hay que identificar el atributo class asignado a cada ítem del menú con el inspeccionador de elementos.

Una vez hayamos localizado el elemento, donde nos da espacios, lo sustituimos por puntos de la siguiente forma:

Una vez lo tengamos, será cuestión de añadirle un fondo de color y un radio para crear nuestro elemento de la siguiente manera:

Recuerda sustituir el nombre del ítem del menú por el de tu página.

Insertar iconos HTML

En los artículos que leemos estamos acostumbrados a ver iconos para distribuir los puntos o bien por mitad del texto.

A través de esta página de iconos buscamos el que nos interese incluir, y copiamos y pegamos el código en el HTML de la entrada o página de nuestro WordPress.

¿Debería Aprender HTML y CSS?

El código HTML para web y el código CSS no son algo sencillo de primeras. Pero una vez les coges el truco, el resto viene solo.

Es cierto que hoy en día no necesitamos saber código para hacer el diseño de nuestra página web, pero no está de más saber dónde acudir en el caso de querer modificar un elemento y que nuestro constructor no nos permita editar.

Además, las extensiones nos facilitan mucho la faena a la hora de ponernos a editar nuestro tema.

Mi consejo es, si quieres modificar algo y lo haces desde el código personalizado, no tengas miedo de probar cosas nuevas, el mismo WordPress te avisará de los errores que hayan en el código incluido.

Así es como de verdad se aprende, probando. Y sí, yo también la he cagado muchas veces.
Además, el conocimiento es poder, nunca se sabe cuándo podríamos llegar a necesitar saber este tipo de cosas.

¿Te atreves a modificar el código de tu página web?

¿Sabes de alguna técnica o truco con HTML y CSS interesante?

Si te ha gustado el artículos, puedes compartirlo con un amigo/a.