Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

codigos-wordpress-42.svg

Códigos CSS y HTML para editar tu página web en WordPress

Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr. ¡Te lo cuento en este post!

Además, si quieres saber más sobre WordPress y aprender a hacer tu propia página web desde cero, puedes echar un vistazo a nuestros Curso de WordPress y Curso de WordPress Online.

Si vas a tu web y das a botón derecho y a continuación Ver código fuente de la página, lo que verás es el código HTML y CSS con el que está construido tu sitio. Estos códigos los crea automáticamente tu CMS para que tu web pueda verse en internet. Si trabajas con un gestor de contenidos no tienes que implementarlos manualmente, pero conociéndolos un poco puedes hacer verdaderas maravillas.

Las plantillas premium suelen tener una amplia sección de opciones para modificar fácilmente casi todos los elementos de tu web, como colores, fondos, estilos de letra, etc. Pero, ¿y si hay elementos y zonas de la plantilla que no puedes modificar porque no vienen incluidos en las opciones?

 

Códigos CSS y HTML para editar tu página web en WordPressAprende a modificar tu plantilla y hacer todo lo que quieras en tu web

Combinar el buen manejo de tu plantilla con el conocimiento de códigos básicos para webs te permite hacer páginas totalmente profesionales sin limitación ninguna. Y lo vas a poder hacer de un modo bastante rápido y fácil.

En este artículo no voy a enseñarte a ser un experto en código web, sino que te voy a tratar de explicar de manera amena cómo saber lo básico y después, cuando ya hayas aprendido lo necesario, te daré un listado de trucos con código para que puedas hacer cosas como:

  • Quitar la fecha de publicación de tus posts
  • Hacer desaparecer cualquier elemento de tu página
  • Cambiar colores y tamaños a tipografías, botones, fondos
  • Añadir código en tus widgets
  • Cambiar márgenes o espacios entre elementos
  • Personalizar al 100% el comportamiento responsive de tu plantilla según dispositivos
  • Añadir banners con HTML

Códigos CSS y HTML para editar tu página web en WordPressQué es CSS y para qué sirve

CSS es un código que funciona junto a HTML y sirve para modificar todo lo relacionado con el estilo, es decir, colores, tipografías, tamaños, etc.

Por ejemplo, mediante una regla CSS puedo redefinir el estilo de todas las etiquetas h1 (títulos 1 de mi web) para que a partir de ahora tengan un tamaño de 36 píxeles, color negro y tipografía Open Sans. El modo de hacerlo sería colocando el siguiente código en la hoja de estilos CSS:

h1 {
font-size: 36px;
color: #000;
font-family: 'Open Sans';
}

Con CSS también puedes hacer desaparecer los elementos de tu plantilla que quieras quitar introduciendo una simple línea de código. Lo verás en este post un poco más adelante.

Además con CSS puedes personalizar por completo el comportamiento responsive de tu plantilla, es decir, que se vea como quieras en cada dispositivo.

 

Códigos CSS y HTML para editar tu página web en WordPressQué es HTML y para qué sirve

A grandes rasgos podemos decir que HTML es un código que sirve para crear la estructura básica de un sitio web, cabecera, contenido, pie de página, barras laterales, etc. Funciona mediante etiquetas predefinidas a las que puedes modificar sus estilos mediante CSS.

Por tanto, se podría decir que el código CSS sirve para modificar y personalizar el HTML.

Aprender HTML y CSS no es difícil, con un poco de práctica y usando la lógica vas a poder convertir una plantilla básica en una web profesional, a pesar de que tu plantilla no incluya muchas opciones de personalización.

Pon mucha atención a la explicación inicial en la que te voy a enseñar a seleccionar los elementos de tu web para luego poder modificarlos en tu hoja de estilos.

Códigos CSS y HTML para editar tu página web en WordPressConceptos básicos de CSS

 

Qué es un selector y tipos

Un selector es el nombre que tiene un determinado elemento dentro del código de tu web. Conociendo el nombre del selector puedes modificar ese determinado elemento a tu antojo. Hay dos tipos de selectores: identificadores y clases.

– Un identificador es el nombre de un elemento concreto que no se repite más que una vez en toda la web. Es un nombre único, y aplicándole una modificación vas a modificar únicamente este elemento. Los identificadores se definen en la hoja de estilos CSS con # (almohadilla), y dentro del HTML aparecen escritos así: id=»nombre del identificador».

– Una clase es el nombre de una regla que se repite en varios sitios de tu web. Por ejemplo, puedes tener una clase llamada .negro que puedes aplicar tanto a textos como a botones para que se pongan de este color. Es decir, defines un estilo genérico que puedes aplicar a cualquier elemento cuantas veces quieras. Las clases se definen en CSS con un . (punto) y dentro del código HTML se aplican así: class=»nombre de la clase».

El nombre de los selectores viene determinado por el desarrollador de la plantilla, es decir, son nombres arbitrarios elegidos por el creador del tema, aunque a menudo tienen cierta lógica. Por ejemplo, las clases para botones suelen llamarse .button, el identificados de la cabecera de la web suele llamarse #header.

Qué es una propiedad

Una propiedad es la modificación o modificaciones concretas que aplicas en la hoja de estilos CSS a un elemento de tu web mediante un selector. Por ejemplo, al selector llamado #boton (que da estilo a un tipo concreto de botón dentro de mi sitio) le puedo aplicar las siguientes propiedades de color, ancho, relleno y borde:

  • background-color: #ccc; (color de fondo gris especificado en código hexadecimal)
  • color: #fff; (color del texto dentro de la caja en blanco)
  • width: 100px; (ancho de 100 píxeles)
  • padding: 20px; (relleno o margen interior de 20 píxeles por cada lado)
  • border: 1px solid #000; (borde de color negro continuo de 1 píxel de grosor)
  • border-radius: 5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)

Códigos CSS y HTML para editar tu página web en WordPressCómo aplicar propiedades a una clase o identificador

Siguiendo el ejemplo anterior, el código quedaría expresado así en la hoja de estilos CSS:

#boton {
background-color: #ccc;
color: #fff;
width: 100px;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
}

 

Es decir, estamos asignando una serie de propiedades de color, ancho, relleno, borde a todos los botones del sitio que tengan asignado el id #boton.

El selector o nombre va precedido de punto (.) o almohadilla (#) según sea una clase o identificador y a continuación entre {} se colocan las propiedades y sus valores.

Más adelante te voy a poner un listado de las propiedades más usadas actualmente en las webs para que las puedas aplicar en la tuya propia.

Códigos CSS y HTML para editar tu página web en WordPressUn poco de HTML

También puedes aplicar propiedades directamente a etiquetas HTML. Una etiqueta HTML es un elemento concreto de la web definido entre < y >, de este modo: <etiqueta>. Las etiquetas HTML representan partes concretas de la estructura y el contenido del sitio.

Por ejemplo, hay una etiqueta <html> que indica que el contenido de la web está en HTML. Hay una etiqueta <head> donde se ponen códigos específicos como el código de Google Analytics y muchas cosas más. La etiqueta donde está el contenido visual de la web (el que ve el usuario) es <body>. La etiqueta para dar formato de párrafo a un texto es <p>, y así con todo el contenido de la web. Hay muchas más etiquetas que te listaré más adelante.

Las etiquetas suelen tener una apertura y un cierre. Por ejemplo, la etiqueta body se abre como <body> y se cierra como </body>. ¿Qué quiere decir esto? Que todo el contenido que haya entre <body> y </body> está dentro y es afectado por la cualidad de esta etiqueta. En este caso concreto, todo lo que esté comprendido entre <body> y </body> es lo que se verá en la parte visual de la web.

Otro ejemplo, en el caso de la etiqueta de párrafo, los textos que están entre las etiquetas <p> y </p> adoptan los estilos definidos en la hoja de estilos para esta etiqueta (y que puedes modificar siempre que quieras).

Y otro más, un texto contenido entre la etiqueta <h1> y </h1> adopta estilos de encabezado o título 1, es decir, mayor tamaño y también mayor relevancia de cara a Google.

Códigos CSS y HTML para editar tu página web en WordPressCómo aplicar propiedades a una etiqueta HTML

En la hoja de estilos del sitio puedes aplicar propiedades para etiquetas concretas, de modo que las modificas globalmente en todo el sitio.

Por ejemplo, si quieres que todos los párrafos de tu web estén escritos en tipografía Open Sans, 14px de cuerpo de letra, color gris, interlineado de 18px y que haya siempre una separación de 20 píxeles entra párrado y párrafo, en la hoja de estilos escribes lo siguiente:

p {
font-family: 'Open Sans';
font-size: 14px;
color: #ccc;
line-height: 18px;
margin-bottom: 20px;
}

Más adelante te voy a mostrar un listado de las etiquetas más comunes que suele haber en las webs.

Códigos CSS y HTML para editar tu página web en WordPressCómo obtener el nombre o selector de un elemento de tu web

 

Inspector de elementos

Para saber cómo se llama un determinado elemento de tu web para después poder modificarlo en la hoja de estilos puedes usar el Inspector de Elementos. Casi todos los navegadores actuales ofrecen una herramienta similar. Yo te recomiendo especialmente el Inspector de Google Chrome por su excelente usabilidad y funcionalidades.

Cómo usar el inspector

Ve a tu web y coloca el puntero del ratón sobre un elemento concreto. Por ejemplo, vamos a obtener el nombre o selector de un botón real del sitio. A continuación, estando sobre el botón, pulsa botón derecho y haz click en Inspeccionar. Verás que en seguida aparece en la zona de abajo (o lateral) una ventana que muestra código. Este es el código HTML con el que está hecha tu página, y concretamente, al haber hecho click sobre el botón, te está mostrando la porción de código en la que está implementado el botón.

Códigos CSS y HTML para editar tu página web en WordPress

En el código dice class=»btn btn-primary btn-lg btn-icon-right». Esto quiere decir que este botón tiene varias clases (separadas por espacios y sin comas). Un elemento puede tener asignadas diversas clases para modificar diferentes aspectos. Es decir, que en la hoja de estilos hay varias clases definidas mediante los selectores .btn .btn-primary .btn-lg  y .btn-icon-right que tienen aplicadas una serie de propiedades cada una por separado y que influyen en que el botón sea rojo, de 394 píxeles de ancho y con el texto en color blanco, etc.

De este modo, si quieres modificar las propiedades o estilos de este botón, te bastaría con ir a tu hoja de estilos y buscar las expresiones .btn .btn-primary .btn-lg y .btn-icon-right, y dentro de las llaves {} introducir o modificar lo que desees para que este botón y todos los que tengan aplicadas estas clases adopten los nuevos estilos que quieras darles.

Códigos CSS y HTML para editar tu página web en WordPressCómo y dónde añadir código CSS para definir y modificar estilos de tu web

 

Mediante la hoja de estilos

Todas las webs tienen una hoja de estilos donde se definen las propiedades para todos los elementos de la web. Normalmente las propiedades se aplican a etiquetas HTML, clases e identificadores. Las hojas de estilos son archivos de extensión .css que tienes subido en tu servidor junto con el resto de archivos de tu web.

Hay hojas de estilo generales donde están definidos casi todos los estilos globales de la web, que suelen llamarse styles.css o stylesheet.css. También hay hojas de estilo secundarias para cosas concretas. Lo ideal es que no tengas muchas, sino que todo esté definido en unas pocas para mejorar el tiempo de carga del sitio y facilitarte poder modificarlas luego.

Cómo editar la hoja de estilos

Directamente en la hoja de estilos original (modo menos recomendable)

Lo primero es acceder al archivo de hoja de estilos .css mediante tu FTP o administrador de archivos de tu hosting. Una vez lo localices (en WordPress suele estar dentro de la carpeta principal del tema en una ruta parecida a esta: wp-content/themes/nombredeltema/css/styles.css), puedes editar directamente la hoja mediante editores como Dreamweaver, Coda, etc.

Los hostings te suelen dejar que edites directamente las hojas de estilos. Ten cuidado al hacerlo, te recomiendo hacer una copia previa. Si modificas algo y no sabes qué es lo que has tocado puedes estropear los estilos del sitio. Es por esto que este modo lo he marcado como menos recomendable, ya que requiere ser un poco más experto y además puede provocar algún accidente 🙂

También puedes acceder a los archivos de tu plantilla desde dentro de tu Escritorio de WordPress, en Apariencia > Editor. Como en el caso anterior, no es recomendable editar desde aquí ya que estarías modificando directamente los archivos y esto podría generar problemas en caso de que borres algo por error.

Con tu plantilla o con un plugin (modo más recomendable)

Este modo es más aconsejable ya que lo que modificas lo haces desde fuera, sin tocar la hoja de estilos original, de modo que en caso de equivocarte te bastaría con borrar el código que hayas escrito o desactivar el plugin.

Hay plantillas premium que incluyen una zona que suele llamarse Custom CSS o Custom Code donde puedes añadir tus propios estilos CSS a la hoja original de la plantilla. Esto suele encontrarse, en las Theme Options de tu plantilla, en alguna sección General o en una sección CSS.

Si tu plantilla no incluye una zona donde puedas añadir código CSS, puedes hacerlo fácilmente mediante un plugin como Simple Custom CSS. Al instalarlo y activarlo, en Apariencia tendrás una pestaña llamada Custom CSS o CSS personalizado.

Códigos CSS y HTML para editar tu página web en WordPress

Códigos CSS y HTML para editar tu página web en WordPressCómo es una hoja de estilos CSS

Una hoja de estilos CSS tiene un montón de etiquetas y selectores y para cada uno de ellos establece una serie de reglas mediante propiedades agrupadas entre {}.

Códigos CSS y HTML para editar tu página web en WordPress

Recapitulando lo dicho anteriormente:

– Dentro de la hoja de estilos, las etiquetas de HTML que quieras modificar debes escribirlas sin los <>. Por ejemplo, para todas las etiquetas <p> (párrafo) del sitio, escribes simplemente la letra p y a continuación sus propiedades específicas entre {}:

p {

}

– Los identificadores o elementos únicos debes escribirlos con #. Por ejemplo, escribes #botón y a continuación las propiedades concretas que quieres dar al identificador botón metidas entre {}:

#boton {

}

Los espacios entre definiciones CSS no importan, es decir, da igual si pones un espacio o das varias veces a Enter. Lo importante es que respetes SIEMPRE la estructura siguiente:

etiqueta o selector {
propiedad1: atributo;
propiedad2: atributo;
propiedad3: atributo;
propiedad4: atributo;
propiedad5: atributo;
}

 

Qué pasa si defines dos reglas iguales para un mismo elemento en distintas partes de la hoja de estilos

Si has definido propiedades para el identificador #boton dos veces en dos puntos diferentes de la hoja de estilos, bastaría con que vayas a las propiedades que quieres que sean preeminentes sobre las otras (que se apliquen sí o sí por encima de las otras) y antes del punto y coma que cierra cada una pongas !important:

p {
font-size: 14px !important;
}

Si en algún otro lugar de la plantilla, en las opciones del tema o en la hoja de estilos ya había una definición previa de estilos para la etiqueta p, con !important sobreescribimos esta regla y le forzamos a que a partir de ahora todos los párrafos se muestren siempre a un tamaño de 14 píxeles.

Códigos CSS y HTML para editar tu página web en WordPressCódigos CSS más usados

A continuación te voy a mostrar los códigos CSS más usados en webs y que tú mismo puedes aplicar en la tuya para que consigas personalizarla al máximo. Los he clasificado según sirvan para modificar elementos de texto, elementos gráficos (cajas, fondos, botones, etc) y otro tipo de elementos.

Para textos

Las propiedades y sus atributos más comunes para modificar la apariencia de tus textos web son las siguientes:

  • font-family: Establece una familia o fuente tipográfica.
  • font-style: Estilo normal, cursiva u oblicua. Atributos [ normal | italic | oblique ]
  • font-variant: Convierte las minúsculas en mayúsculas pero en tamaño menor. Atributos [ normal | small-caps ]
  • font-weight: Grosor de la tipografía especificado en medidas de 100 a 900.
  • font-size: tamaño o cuerpo de letra especificado en píxeles (px).
  • text-indent: cantidad de desplazamiento lateral de la primera línea del texto, expresado en px.
  • text-align: alineación del texto. Atributos [ left | right | center | justify ]
  • text-decoration: aplica efectos de subrayado, tachado, parpadeo. Atributos [ none | [ underline || overline || line-through || blink ] ]
  • letter-spacing: espaciado entre caracteres especificado en px.
  • text-transform: para transformar los textos a mayúsculas o minúsculas [ capitalize | uppercase | lowercase | none ].
  • line-height: interlineado entre renglones de texto expresado en px.
  • vertical-align: alineación vertical del texto. Atributos [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <longitud> ]

 

Para elementos gráficos de la web

  • width: ancho de un elemento o imagen. Puede definirse en píxeles (px), unidades em (em) y porcentajes (%).
    Ej.: #content {width:960px;}
  • height: altura de un elemento o imagen. Igual que la anterior.
    Ej.: #header {height: 250px;}
  • background-color: color de fondo de un elemento. Se expresa en valor hexadecimal con # y seis caracteres. Ej.: #boton {background-color: #1CBACC;}
  • background-image: imagen de fondo para un elemento.
    Ej.: #content {background-image: url(«https://www.aulacm.com/fondo.jpg);}
  • background-repeat: repetición o no de la imagen dentro del fondo (ideal para crear patterns o fondos con texturas). Se puede repetir en x (en horizontal) o en y (en vertical).
    Ej.: #content {background-repeat: repeat-x;}
  • background-position: posición de la imagen dentro del fondo. Se puede definir al centro, izquierda o derecha. También con píxeles y porcentajes.
    Ej.: #content {background-position: center;}
  • border: borde de un elemento o imagen. Tiene 3 parámetros: tipo de borde (liso, punteado, rayas, etc), grosor (expresado en píxeles) y color (expresado en valor hexadecimal). También puede definirse sin borde (none).
    Ej.: #boton {border: solid 1px #000000}
  • display: modo en que se muestra un elemento o imagen o no mostrarlo nunca. Tiene diversos valores, los más comunes son: mostrar elementos en bloque (block),
  • z-index: posición de un elemento o imagen en el eje z (para poner elementos tapando a otros elementos)

 

Para añadir espacios o márgenes

  • margin: margen a partir de un elemento hacia afuera expresado en px. Suele empujar a otros elementos cercanos
  • padding: relleno o espacio interior desde el borde de un elemento hacia dentro. Ampliar padding suele arrastrar hacia fuera los bordes y por consiguiente aumenta el tamaño del elemento

En sendos casos, puedes expresar el valor en píxeles pero también en porcentajes. Los porcentajes son ideales para definir espacios proporcionales, de modo que no haya una distancia fija entre elementos, sino que en función del tamaño de la pantalla o dispositivo, los elementos se coloquen proporcionalmente.

Esta es la clave para definir tamaños de elementos que sean responsive (que se adapten automáticamente a todos los dipositivos). De este modo, una caja con un ancho (width) al 100% siempre ocupará el 100% de la pantalla, ya sea una pantalla grande o un smartphone.

Además, tanto el margin como el padding pueden definirse para una dirección concreta arriba, derecha, abajo o izquierda:

  • margin-top: margen hacia arriba
  • margin-right: margen hacia la derecha
  • margin-bottom: margen hacia abajo
  • margin-left: margen hacia la izquierda
  • padding-top: relleno desde arriba hacia adentro
  • padding-right: relleno desde la derecha hacia adentro
  • padding-bottom: relleno desde abajo hacia adentro
  • padding-left: relleno desde la izquierda hacia adentro

Nota: Puedes especificar márgenes y rellenos en las cuatro direcciones sin necesidad de declararlos por separado. Basta con que dentro de la propiedad general escribas las cuatro direcciones todas seguidas y en el sentido de las agujas del reloj. Por ejemplo, si quieres poner a un elemento #boton un margen de 20 píxeles por arriba, 0 por la derecha, 20 por abajo y 5 por la izquierda, puedes escribir lo siguiente:

#boton {
margin: 20px 0 20px 5px;
}

Códigos CSS y HTML para editar tu página web en WordPressCódigos CSS para mejorar tu web

De todos los códigos anteriores, voy a destacar los que te pueden resultar de más utilidad y te voy a mostrar ejemplos concretos de cómo implementarlos en tu sitio:

 

Cómo hacer desaparecer un elemento de tu web

  • display. Con la propiedad display puedes ocultar cualquier elemento de tu web. Para implementarlo, lo primero es que obtengas el nombre del selector del elemento en cuestión. Por ejemplo, si lo que quieres es quitar la fecha de los artículos del blog, lo primero es ir a cualquiera de tus artículos, ponerte encima de la fecha, clickar botón derecho e Inspeccionar.

Códigos CSS y HTML para editar tu página web en WordPress

En la zona inferior se despliega el Inspector de Elementos y aparece marcada la parte de código que sirve para mostrar la fecha. Dentro de esa línea, hay un class=»date». Eso quiere decir que «date» es la clase que se aplica a la fecha para darle los estilos de letra, tamaño, color, etc.

Pero en este caso concreto no queremos modificar estos estilos, sino directamente eliminar la visualización de la fecha. Para ello, ve a la zona de CSS Personalizado de la plantilla (o al plugin Simple Custom CSS) y escribe lo siguiente:

.date {
display: none;
}

La clase «date» lleva un punto al inicio porque este es el modo de escribir los nombres de las clases en las hojas CSS. La orden «display: none;» significa «dejar de mostrar un elemento». Por tanto, en este caso concreto, estamos ordenando lo siguiente: todos los elementos que tengan asignada la clase «date» dejarán de mostrarse en la web.

Códigos CSS y HTML para editar tu página web en WordPress

 

 

Códigos CSS y HTML para editar tu página web en WordPress Curso de WordPress Online

Aprende WordPress y diseña tu propia Página Web al terminar el curso

32 horas + 18 horas de clases en directo
3 tutorías de 45 minutos con el profesor
6 clases en directo de 3 horas cada una
Tutorías grupales para avanzar los proyectos en equipo
Acceso al Área Privada de por vida
Códigos CSS y HTML para editar tu página web en WordPress Códigos CSS y HTML para editar tu página web en WordPress Códigos CSS y HTML para editar tu página web en WordPress

 

Cómo cambiar el tamaño y color de una tipografía concreta de tu web

  • font-size, color. ¿Y si en lugar de ocultar la fecha lo que queremos es simplemente modificar su tamaño de letra y color?

En ese caso, ve al CSS personalizado de la plantilla (o al plugin Simple Custom CSS) y escribe lo siguiente:

.date {
font-size: 36px !important;
color: #F00 !important;
}

Ahora la fecha se muestra en un cuerpo de letra mayor y en color rojo.

Códigos CSS y HTML para editar tu página web en WordPress

 

Recuerda, ¿por qué ponemos !important?

Para que las nuevas propiedades definidas «pisen» a las propiedades que trae la plantilla por defecto, ya que estamos tocando propiedades que ya vienen predefinidas en la plantilla con unos estilos concretos.

 

¿Qué es eso de #F00 que hemos puesto en la propiedad color?

Es un color (en este caso rojo) que hemos definido mediante valor hexadecimal. Este es uno de los modos más habituales de introducir un color exacto en entorno web. Con la aplicación Paletton puedes hacer pruebas y obtener valores de color hexadecimal para poner en tu web.

Aquí tienes un ejemplo de paleta hexadecimal de colores:

Códigos CSS y HTML para editar tu página web en WordPress

 

Códigos CSS y HTML para editar tu página web en WordPressCómo añadir código HTML a tu web

 

En una entrada o página

Puedes añadir códigos HTML dentro de tus entradas y páginas para conseguir un resultado mucho más personalizado. Normalmente, se editan las entradas dentro de la pestaña Visual, pero si quieres editarlas con HTML haz click en la pestaña Texto o HTML.

Si te fijas, en esta captura de pantalla de este mismo post he cargado la pestaña HTML y se ve el texto en código HTML puro. La palabra WordPress del primer renglón está entre las etiquetas <strong> y </strong>, lo que quiere decir que esta palabra toma un estilo negrita en la parte visual.

Códigos CSS y HTML para editar tu página web en WordPress

 

En un widget de texto

Puedes añadir código puro HTML en tus widgets en Apariencia > Widgets y arrastrando un widget de tipo Texto. Dentro de este widget puedes escribir cualquier código HTML y WordPress lo va a interpretar correctamente para que muestre lo que quieras.

Por ejemplo, si quieres añadir una imagen banner enlazada a una URL concreta de tu sitio web o externa, y que se vea en una zona de widgets de tu sitio, dentro de la caja texto que arrastras al área de widgets correspondiente escribes lo siguiente:

<a href="URL DEL ENLACE" target="_blank">

<img src="URL DE LA IMAGEN">

</a>

Códigos CSS y HTML para editar tu página web en WordPress

 

Códigos CSS y HTML para editar tu página web en WordPressCódigos HTML para mejorar tu web

A continuación, te pongo las etiquetas HTML más comunes en una web y que puedes insertar donde quieras o modificar las ya existentes mediante código CSS:

  • <p></p> Párrafos
  • <a href=»»></a> Enlaces
  • <b></b> Negritas
  • <i></i> Cursivas
  • <strong></strong> Negritas más gruesas
  • <h1></h1> Encabezado o título 1
  • <h2></h2> Encabezado o título 2
  • <h3></h3> Encabezado o título 3
  • <h4></h4> Encabezado o título 4
  • <h5></h5> Encabezado o título 5
  • <h6></h6> Encabezado o título 6
  • <li></li> Elemento de lista
  • <span></span> Selección de texto con un estilo determinado
  • <u></u> Texto subrayado
  • <em></em> Texto enfatizado
  • <small></small> Texto pequeño
  • <br /> Salto de línea (etiqueta única, no tiene cierre)
  • <img src=»»> Para insertar una imagen. Con el código <img src=»URL de la imagen»> puedes poner en cualquier zona de widgets un banner o imagen que quieras. Te aconsejo que antes de obtener la URL de la imagen la subas a tu propia Biblioteca de Medios y de ahí obtengas la URL que después pegas en el código.
  • <form></form> Formulario.
  • <table></table> Tabla
  • <iframe></iframe> Incrustar elementos de otras webs

 

Códigos CSS y HTML para editar tu página web en WordPressCómo generar código HTML fácilmente

¿Y si no sabes absolutamente nada de HTML pero quieres insertar códigos a tu web y hacerlo de manera sencilla? Con la herramienta Quackit puedes crear estilos de texto y estructuras de maquetación con tablas y generar automáticamente el código para insertarlo en tu web.

Códigos CSS y HTML para editar tu página web en WordPress

 

Códigos CSS y HTML para editar tu página web en WordPressCómo modificar los estilos CSS directamente sobre la web

¿Y si te digo que todos los cambios de CSS puedes hacerlos directamente sobre la web de manera visual y después llevarte ese código a tu hoja de estilos? Esto puedes hacerlo muy fácilmente con una extensión para Chrome llamada StyleBot. Esta estupenda herramienta te permite previsualizar las modificaciones que hagas a los estilos de la web y copiar todo el código resultante para ponerlo en tu hoja de estilos.

Para ello, haz click aquí y añádela a tu navegador Chrome. A continuación, la extensión se coloca en la zona superior derecha de tu navegador (en un botón donde dice CSS). Ahora, ve a tu web y haz click en el icono CSS y abre StyleBot. Aquí puedes modificar cualquier aspecto de la web: colores, tipografías y tamaños, bordes, etc.

Códigos CSS y HTML para editar tu página web en WordPress
Haz una modificación (en el ejemplo he cambiado a rojo el color de fondo o background-color de nuestra web) y a continuación pincha en Edit CSS para obtener el código. Este código lo pegas en tu hoja de estilos y ¡listo! Ya tienes hecha la modificación, así de fácil.

Recuerda que puedes pegar el código en tu hoja de estilos en un archivo que suele llamarse styles.css o stylesheet.css, o usar el plugin Simple Custom CSS si prefieres hacerlo de manera más sencilla y sin arriesgarte a tocar directamente los archivos de la web.

Códigos CSS y HTML para editar tu página web en WordPress

Importante: Aunque hagas modificaciones mediante StyleBot y veas tu web con los estilos ya cambiados, hasta que no los pegues en tu hoja de estilos no se realizarán las modificaciones realmente para que las puedan ver el resto de usuarios.

Códigos CSS y HTML para editar tu página web en WordPressCómo hacer tu web totalmente Responsive

Gracias a un código especial de CSS llamado Media Queries puedes controlar absolutamente cómo se muestra tu web en cada dispositivo.

Mediante media queries puedes indicar estilos CSS concretos para tu web en función del ancho de pantalla. Las media queries se ponen directamente en tu hoja de estilos CSS y se declaran del siguiente modo:

/* Smartphones (horizontal) ----------- */
@media only screen and (min-width : 321px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Smartphones (vertical) ----------- */
@media only screen and (max-width : 320px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPads (horizontal) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPads (vertical) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/**********
iPad 3
**********/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/* Ordenadores de escritorio y portátiles ----------- */
@media only screen  and (min-width : 1224px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Pantallas grandes ----------- */
@media only screen  and (min-width : 1824px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 4 ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

Te invito a visitar nuestra guía responsive para que puedas leer más detalles sobre como tener una web que se adapte a los diferentes dispositivos.

Códigos CSS y HTML para editar tu página web en WordPress¿Todo esto sólo me sirve para WordPress?

Realmente, si sabes HTML y CSS puedes modificar cualquier CMS o gestor de contenidos, y por supuesto cualquier web hecha con código puro. Basta con que sepas cómo hacerlo en cada caso, ya sea accediendo a los archivos de la plantilla o mediante plugins o extensiones. Al fin y al cabo, todas las webs, independientemente del gestor de contenidos que usen, muestran su contenido en HTML y CSS.

Códigos CSS y HTML para editar tu página web en WordPress¿Qué te ha parecido este artículo?

¿Quieres preguntar alguna duda o dar tu opinión? ¿Te gustaría compartir algún truco de código que uses en tu web? Déjanos un comentario.

Si quieres mejorar tu marketing, aquí te proponemos 615 acciones de marketing y publicidad según 25 expertos

Códigos CSS y HTML para editar tu página web en WordPress
Te recomendamos leer estos artículos relacionados
Filter by
Post Page
Marketing SEO Posicionamiento Web Community Manager Wordpress y Blogs SEM Marketing Online
Sort by

10 nuevas ofertas de empleo de Community Manager de abril

Seguimos con la promesa de compartir contigo nuevas ofertas de empleo de Community Manager y propuestas de trabajo
2024-02-28 00:00:00
elena

8

25 errores de posicionamiento en buscadores que destrozan tu SEO [Actualizado a 2024]

Mucha atención: este post es un listado de errores que puedes cometer o incluso
2024-02-25 00:00:00
ernesto

8

Diccionario Social Media: Las 100 palabras del Community Manager

Buenos días, hoy tenemos algo especial para ti. Te presento el diccionario del Community Manager 🙂 H
2024-02-23 00:00:00
elena

8

Ernesto G BustamanteCódigos CSS y HTML para editar tu página web en WordPress

57 comentarios

Únete a la conversación
  • Elena - 4 mayo, 2016 responder

    Muchas gracias, muy útil y bien explicado. Para los que no conocemos mucho el tema del código viene estupendo para empezar a comprenderlo.

  • Ismael Ruiz González - 4 mayo, 2016 responder

    ¡Totalmente maravillado! Sin duda, por post como éste, está claro que sois la mejor escuela de Marketing de España. Enhorabuena a Ernesto y a todo el equipo, por brindarnos tan brillante contenido 🙂

  • Rafa Arjonilla - 4 mayo, 2016 responder

    Qué gran post Ernesto, y qué bien viene. Está explicado súper fácil. Esta es otra de esas entradas para consultar varias veces e ir incorporando todo el conocimiento. ¡Sí señor! ¡Más en esta línea! jejeje

  • Anna - 9 mayo, 2016 responder

    Muchísimas gracias por este pedazo de post, Ernesto! No sabía nada de código y las modificaciones que hago en el de mi blog siempre han sido acompañadas de tutoriales en vídeo sin saber qué es lo que hacía. Ahora soy mucho más consciente de lo que toco 😀

    Ernesto G Bustamante - 13 septiembre, 2016 responder

    Me alegro de que te haya servido, Anna, y sobre todo de que hayas aprendido con el artículo. Un saludo 🙂

  • Mila - 23 mayo, 2016 responder

    Magnífico post!, es justo lo que necesitaba, llevaba tiempo buscando algo así, tan bien explicado ?. Gracias!

  • Patricia - 24 mayo, 2016 responder

    ¡Genial post Ernesto! Me va a ayudar mucho a pulir ciertos detalles de mi web. Muchas gracias por compartir lo que sabes, está muy completo. Un besico

  • Keiner Chará - 26 mayo, 2016 responder

    Deseo cambiar ma tipografia de mi web y el tamaño, para así respetar mi branding. Ahora con este completo post lo intentaré y volveré para comentar como me fue. Me preocupa únicamente que la tipografia no cambie ?

  • Keiner Chará  (@KeinerChara) - 26 mayo, 2016 responder

    Excelente entrada, pude cambiar la tipografía, tamaño y margen top de algunos títulos. Muchas gracias.

    Ernesto G Bustamante - 13 septiembre, 2016 responder

    Estupendo Keiner, me alegro de que hayas conseguido tu objetivo con el artículo

  • Joan Morci - 6 julio, 2016 responder

    ¡Genial Ernesto!

    Yo estuve en 2014 en un curso básico de WordPress, por una agencia de Burgos bastante conocida y la verdad que cuando pregunté al profesor por cierto detalle, vino a mi mesa a explicarme que eso que preguntaba era de un curso más avanzado (yo ya había hecho previamente una web en WordPress, pero no sabia lo que me reveló). Aún así, me mostro el método (que no explico) y yo me fije muy bien que tocaba y desde donde.

    Aquello tan avanzado era: ‘inspeccionar elemento’, algo que sale en el navegador pero que si no sabes lo que es, no sabes interpretarlo.

    Ahora te lo veo aquí, junto con otros detalles que no sabía y siento envidia de la gente que vive en Madrid y tiene la oportunidad de aprender en condiciones en un curso en vuestra academia. Por suerte, compartes ese conocimiento y no lo guardas para clases de pago. Algo muy inusual viniendo de una academia, dicho sea de paso.

    Hacer desaparecer la fecha en los artículos, ya sé que es una práctica que mucha gente hace para que Google no penalice contenido no fresco. A mí, personalmente me parece un mal hábito. Como sabes siempre recopilo información de otros artículos y me molesta mucho no saber fecha publicación, para saber si esa información aún es útil o está desfasada.

    Agradecido de las herramientas que ofreces y no conocía. A mí, me llama mucho una herramienta de fondos online, que te dejo por aquí el nombre (para no poner enlaces, spam): ‘Background Image Generator – SiteOrigin’.

    Y de la misma casa tienen un plugin que creo hace las veces de esa extensión de Google Chrome, el plugin se llama ‘SiteOrigin – CSS’. Me lo recomendó una persona que antes tenia otro plugin sólo para cambiar fuentes, y por lo visto este plugin hace las veces de Editor CSS, y tiene tanto panel de control muy liviano como opción de introducir manualmente y lo mejor vista previa. Pendiente de probarlo estoy.

    Por cierto, incluí este artículo en el mío del ‘tema hijo: cómo crearlo fácilmente’, está justo al comienzo donde hablo de los que sienten curiosidad por trastear con el CSS a mano.

    ¡Saludos grande! Gracias por hacernos a todos más sabios.

    Ernesto G Bustamante - 13 septiembre, 2016 responder

    Hola Joan,
    te agradezco tus palabras y tomo nota de tus recomendaciones. Y muchas gracias por ese enlace 🙂

  • Sofía - 10 agosto, 2016 responder

    Me ha parecido un artículo maravilloso! felicidades!!!!!

    Ernesto G Bustamante - 13 septiembre, 2016 responder

    Gracias Sofía, ¡saludos!

  • Pedro José - 14 noviembre, 2016 responder

    Estuve buscando esto por mucho tiempo, tenía muchas dudas hasta que leí este post. Es genial: completo, detallado y preciso. Muchas gracias, he sido enriquecido con este conocimiento.

    Ernesto G Bustamante - 19 diciembre, 2016 responder

    Gracias Pedro José, ese es nuestro objetivo, que os sea de mucha ayuda 😉

  • Caro chan - 18 diciembre, 2016 responder

    Buenas Ernesto, qué pedazo de post te ha quedado!
    Te cuento: he creado un html y CSS desde scratch y quiero implantarlo en mi tema de wordpress. He leído que html es dinámico y por lo tanto dificil de que lo que cambies sobreviva a una actualización¿no?. Con el tema CSS no tengo tanto problema porque sé que se puede crear una plantilla hijo. Podrías recomendarme tutoriales o alguna página que hable más en profundidad del tema -el inglés no es problema para mi, si ves que en español escasean los recursos-

    Muchisimas gracias!!

    Chuuuu!!

  • Concha - 1 febrero, 2017 responder

    ¿Me sabrías decir en qué tabla y en qué campo de la base de datos de WordPress se almacena el custom css que añades desde una plantilla? Es que he añadido un código en el cuadro de Custom CSS que me ofrecía la plantilla y se ha rallado. Ahora no puedo acceder ni a la web ni al panel de administración. Necesito borrar ese código, pero no sé dónde se almacena. Sé que debe ser en la BBDD, pero no lo encuentro. Te agradecería muchísimo tu ayuda. Muchas gracias

    Ernesto G Bustamante - 8 marzo, 2017 responder

    Hola Concha,
    esto depende de la plantilla. Te recomiendo que preguntes directamente a los desarrolladores de tu tema, ellos lo sabrán seguro 😉

  • Carlos - 16 febrero, 2017 responder

    Muy buen articulo! explicado de forma clara y con información super relevante, gracias por compartirlo

    Ernesto G Bustamante - 4 diciembre, 2017 responder

    Gracias a ti por tu comentario, Carlos, la idea es que sea información fácil de entender y de aplicar por cualquier persona, con la finalidad de ayudar en todo lo posible y aportar a la comunidad de usuarios.

    Un saludo 🙂

  • Deyvis - 11 abril, 2017 responder

    Hola! Me ha servido de mucha ayuda. No tengo ni idea de programación pero estoy creando mi pequeño blog para ayudar con mis conocimientos a quienes les puedan servir y a la vez hacer aquello que me gusta (escribir). Utilizare la información, es muy útil para personas con pocos conocimientos como yo. Espero tener pronto mi sitio listo y cuando lo esté os recomendaré. Muchas gracias!

    Ernesto G Bustamante - 4 diciembre, 2017 responder

    Hola Deyvis,
    es genial que el artículo haya servido para que entres en el mundo del código web con tantas ganas 😉

  • PEPO - 24 mayo, 2017 responder

    Hola Ernesto, gran artículo!!! Yo estoy empezando con wordpress para un proyecto de estudios, y tengo instalado un tema de pago. He creado una plantilla page-propia.php y necesito aplicar algunos estilos personalizados. Pensaba incluirlos en style.css y utilizar un tema hijo, pero he hecho la prueba y no funciona (en mi caso uso un tema de pago y style.css sólo incluye los comentarios sobre el tema, pero no definiciones de estilos, hay otros archivos en carpeta css/ y cuando inspecciono elementos con el examinador web, veo que la mayoría de los estilos provienen de master-min.php, un archivo que tiene includes de muchos css del tema, pero no del style.css.)
    Efectivamente funciona si incluyo el nuevo estilo en Apariencia>Personalizar>CSS Adicional y también en mi tema hay opción de Codigo personalizado para incluir CSS.
    Pero me gustaría saber por qué no me funcionan cuando los añado en style.css, pues parece la mejor opción utilizando un tema hijo. ¿Tiene algo que ver que ese archivo master-min.php que hace includes de las css no incluya el style.css?
    Además me queda la duda de si esos estilos personalizados desde CSS adicional de WP o desde el tema se mantienen cuando se actualice WordPress, o se actualice mi tema.
    Muchas gracias por tu ayuda.

  • Elena - 20 junio, 2017 responder

    Buenas tardes Ernesto. Felicidades por tu blog. Muy interesante el artículo, pero tengo una duda. Al hacer una auditoría seo de mi web me encuentro con que en la página de presentación tengo 3 h1, por que cada título de cada segmento viene definido como h1 en esa plantilla. ¿Cómo puedo modificarlo? ¿Como se puede tener acceso al html para modificarlo? Gracias

  • maria - 29 julio, 2017 responder

    Hola! sabes si aplicando content o algo de css podría cambiar el contenido de un h1?
    Gracias!

    Ernesto G Bustamante - 4 diciembre, 2017 responder

    Hola María,
    con un before o after de CSS podrías modificar el content de cualquier etiqueta.

    Saludos 😉

  • Francisco - 19 septiembre, 2017 responder

    Excelente artículo para los que nos estamos iniciando en este fascinante mundo del diseño web, en mi caso a manera de hobby y para personalizar/optimizar mi página web. Tengo una consulta: ¿la extensión stylebot, me servirá para trabajar en la optimización de la entrega de CCS del código fuente de mi web? En éstos días ando trabajando en eso, espero que si me ayude. Gracias espero una respuesta.

    Ernesto G Bustamante - 4 diciembre, 2017 responder

    Hola Francisco,
    me alegro de que el artículo te haya servido. Respondiendo a tu pregunta, Stylebot te lo recomiendo sobre todo para modificaciones puntuales, no para planificar la estructura CSS de un sitio desde cero.

    Saludos

  • Carmen - 18 octubre, 2017 responder

    Sólo darte las gracias por compartir tus conocimientos. Voy a comenzar a andar con éste, tú, artículo. Por primera vez me ha parecido entendible lo que estaba leyendo. Seguramente me apuntaré a hacerte preguntas más adelante. Gracias mil

    Ernesto G Bustamante - 4 diciembre, 2017 responder

    Hola Carmen,
    me alegra mucho que te haya servido para romper la barrera de empezar a tocar el código web, esa era la intención al escribirlo.

    Un saludo 🙂

  • Ricardo Valverde Honor - 30 abril, 2018 responder

    Excelente información practicamente me quito un gran dolor de cabeza en lo que ha diseño de paginas web o blog se refiere. Genial!

    Ernesto G Bustamante - 2 mayo, 2018 responder

    Genial Ricardo, esa es la idea del post, que realmente aporte 😉

  • Graciela Márquez Lara - 17 mayo, 2018 responder

    Ernesto qué pedazo de artículo te has marcado chiquillo. Completito, completito. Comparto, lo guardo en marcadores y lo que haga falta. Muchas gracias por explicarlo tan clarito para inútiles del HTML como yo. Un saludo de una ex-alumna.

  • noo - 13 junio, 2018 responder

    gracias

  • Ricardo - 13 junio, 2018 responder

    Un artículo muy bueno Ernesto, gracias por este post tan útil para diseñar y aplicar cambios en el CSS. Me lo guardo en marcadores para tenerlo a mano.

    Saludos!

  • Jose - 14 junio, 2018 responder

    Me guardo esta pagina para mis modificaciones. Es exactamente lo que buscaba para mi nivel.
    Hasta ahora era todo copia y pega. Ahora ya escribo yo mi propio codigo de puño y letra. He subido de nivel.
    Gracias

    Ernesto G Bustamante - 10 julio, 2018 responder

    Muy bien Jose, genial que el post te haya servido para aumentar tu confianza con el código web y subir de nivel. Saludos 😉

  • Ip - 6 julio, 2018 responder

    Gran tutorial para los bloggers que no son programadores web.

  • Alejandro Viana - 9 julio, 2018 responder

    Muy buenas tardes, felicitaciones. Me parece que esta información es exageradamente buena y oportuna para quienes nos adentramos apenas en el mundo del HTML y el CSS. Aplausos y abrazos. Sin embargo, mi problema radica en que no encuentro la solución a mis necesidades pues he diseñado una página web en WordPress, usando un tema de SitePad llamado Industrial y he venido teniendo verdaderos líos.

    Me salen parches de color azul cada que abro la web, este es el azul original del tema y no logro acoplar imágenes a los tamaños deseados, ni les puedo dar la animación que se requiere para lograr la mejor armonía. Ademá no encuentro la hoja de estilo por ningún lado ni localizo el sitio desde donde puedo modificar códigos, a menos de que sea el mismo editor de contenido que mil veces he visto pasar frente a mis ojos. Puedes ayudarme, por favor

  • carlos ramirez - 28 agosto, 2018 responder

    hola, tengo una MEGApregunta 🙂 mi pagina fue creada con codigo puro. me gustaria actualizarla con wordpress. quiero cambiar todo el aspecto con una plantilla nueva, que debo hacer para administrarla completamente desde wordpress???

    Ernesto G Bustamante - 29 agosto, 2018 responder

    Hola Carlos,
    para ello, debes instalar WordPress en tu hosting, instalar la plantilla y diseñar tu página web, aprovechando el contenido de la página anterior si así lo deseas 😉

  • Mar - 18 octubre, 2018 responder

    Hola,
    Como podría añadir espacio en blanco en la parte inferior de las entradas al blog.
    He añadido un plugin de post relacionados y me queda «pegado» al contenido :/
    Muchas gracias por adelantado por vuestra ayuda 😉
    Un abrazo!

    Ernesto G Bustamante - 18 octubre, 2018 responder

    Hola Mar, aplica margin-top a la clase o id que tenga la caja de relacionados 😉

  • Estefania - 17 diciembre, 2018 responder

    Ernesto me ha encantado este artículo sobre codificación HTML y CSS, por lo completo que es su contenido y por lo fácil que se hace contigo algo, que para mi antes era bastante complicado. ¡Enhorabuena!

    Ernesto G Bustamante - 18 diciembre, 2018 responder

    Hola Estefanía, me alegro de que el contenido te sirva para aprender, un saludo 🙂

  • Angel Garcia - 24 diciembre, 2018 responder

    Muy buen post. Me ha servido para empezar a comprender que es el código. Gracias

  • descargar itunes gratis - 3 enero, 2019 responder

    Me ha resultado util, gracias.

  • Carlos - 25 septiembre, 2019 responder

    Quiero agregar el código de google adsense pero no me sale la opción del Editor en Apariencia dónde ingreso ese código?

    Ernesto G Bustamante - 30 septiembre, 2019 responder

    Hola Carlos,
    hazlo directamente en el archivo header.php de tu plantilla en el hosting

  • Luis - 12 mayo, 2020 responder

    ¡Me ha parecido realmente bueno este articulo! Me ha ayudado muchísimo para hacer pequeñas modificaciones en la apariencia de mi blog. Aunque les recomiendo hacer copias de seguridad antes de tocar algo del código si no tienes experiencia en ello. ¡Yo borre algo que no tenía que borrar y por poco hago un desastre jijiji!
    Saludos

  • Rafa - 21 junio, 2020 responder

    Hola Ernesto !! Veo que este interesantísimo post data del 2016 y sinembargo por lo bueno que es , porque abarca una serie completa acerca de lo que es Código HTML y el stylesheet CSS, Aún varias gentes reaccionan por el simple hecho de que expones casi todo el tema con sus varias opciones., La verdad que es genial !! (En hora buena !!), Pero yo tengo una pregunta : y es que una cierta empresa me ha entregado una plataforma la cual puedo personalizarla a través de la sección STYLESHEET, TEMPLATES y VIEW, que figura en la plataforma de DEMO que me han enviado para así poder ir configurando de acuerdo a mis necesidades, Tengo mínimos dominio del tema, sin embargo he podido indagar el internet y me he topado con códigos que ya vienen hechos para generar DROP DOWN MENUS de navegación, Mi pregunta es la siguiente , cómo incrustar en la sección Stylesheet que es donde me imagino debe ir el código , Porque allí es donde veo el código original que dice Navegación. porque en mi caso tengo los dos códigos por separado (HTML y CSS) en el editor de códigos (ATOM), y ya he hecho el link de la CSS con el HTML. Espero su respuesta maestro, Y muchas gracias de antemano.

  • Martin - 2 enero, 2021 responder

    Buenísimo su artículo sobre CSS y HTML, estoy aprendiendo wordpress y tratando de hacer una web responsive. Muchas Gracias

  • CARLOS - 24 agosto, 2021 responder

    Buen artículo para los que nos estamos iniciando en este fascinante mundo del diseño paginas web, en mi caso a manera de hobby y para personalizar/optimizar mi página web. Tengo una consulta: ¿la extensión ssl, me servirá para trabajar en la optimización de la web

    CARLOS - 24 agosto, 2021 responder

    Excelente artículo para los que nos estamos iniciando en este fascinante mundo del diseño web, en mi caso a manera de hobby y para personalizar/optimizar mi página web. Tengo una consulta: ¿la extensión stylebot, me servirá para trabajar en la optimización de la entrega de CCS del código fuente de mi web? En éstos días ando trabajando en eso, espero que si me ayude. Gracias espero una respuesta.

    Ernesto G Bustamante - 11 enero, 2022 responder

    Hola Carlos, Stylebot no sirve exactamente para eso, sino para editar en front end los elementos de tu web mediante código CSS. Saludos 😉

  • alfredo - 31 octubre, 2022 responder

    Hola , se puede descargar de algun lado un pdf de esta info de html y css ? gracias

Únete a la conversación

RESPONSABLE: WEB Y CONTENIDOS SL FINALIDAD PRINCIPAL: Envío de nuestros artículos del blog, así como el aviso de nuevas actividades, algunas de las cuales podrían ser de carácter comercial LEGITIMACIÓN: Consentimiento del interesado. DESTINATARIOS: No se cederán datos a terceros, salvo autorización expresa u obligación legal DERECHOS: Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, transparencia y derecho a no ser objeto de decisiones automatizadas. INFORMACIÓN ADICIONAL: Puede consultar la información adicional y detallada sobre nuestra Política de Privacidad y Aviso Legal