Gracias a los gestores de contenido como WordPress, la gente como yo, que no somos programadores, podemos crear páginas y sitios web, con una apariencia profesional, impensable hace unos años. Pero es que, además, existen herramientas en internet que nos permiten añadir o cambiar CSS3 sin saber programar. Una opción atener en cuenta para personalizar pequeños detalles del tema de WordPress elegido.
Cómo generar código CSS3 sin saber programar
Este artículo lo voy a dividir en dos partes, ya que utilizaré dos herramientas diferentes, una para modificar CSS3 sin saber programar y otra para añadir animaciones con CSS3, también sin saber programar.
Tengo que aconsejar que este método, si no tenemos ningún conocimiento de nada de CSS, sólo lo apliquemos a etiquetas de fácil localización, como barras de menú, imágenes o titulares genéricos, entre otros.
También tengo que avisar, que la excesiva utilización de efectos o cambios, puede llegar a ralentizar el sitio y convertirlo en un carnaval.
Modificar elementos CSS3 sin saber programar
Cuando adquirimos un tema de WordPress, es porque es el que más se ajusta a nuestras necesidades, pero siempre hay algún detalle visual que nos gustaría cambiar o adaptar a nuestro gusto.
Por eso yo siempre recomiendo adquirir un tema de pago o Premium, hay que rascarse un poco el bolsillo, pero no es nada comparado con las opciones que nos ofrecen frente a uno gratuito.
Puedes leer este artículo sobre las ventajas de los temas Premium sobre los gratuitos.
Si, aun así, con tu tema Pro de pago, o si has decidido optar por uno gratuito, quieres modificar algún detalle del tema, te explico cómo hacerlo en el siguiente tutorial.
Localizar la etiqueta del elemento que queremos cambiar
Lo primero de todo es conocer la clase o identificador de la etiqueta que queremos modificar. Desde nuestro navegador abrimos la ventana que nos permite inspeccionar los elementos del sitio. Existe en todos los navegadores. Yo utilizo Chrome.
Nos fijamos que esté marcada la pestaña "Elements", activamos el selector para mover el ratón por la página y seleccionar el elemento al que queremos aplicar el comportamiento CSS. En mi caso voy a aplicar un estilo diferente a la barra del menú.
Al señalar la barra del menú, se marca de otro color la línea donde se encuentra la etiqueta.
En este caso la etiqueta se llama "nav" y tiene asignado el nombre "nav-primary" en la clase "class", esto es importante para saber si tenemos que hacer referencia a la etiqueta, con un punto o una almohadilla, en los estilos CSS.
- Si la etiqueta utiliza una clase "class", como en este caso, se pondrá un punto delante del nombre, ".nav-primary"
- Si la etiqueta utiliza un identificador "id", se pondrá una almohadilla delante del nombre, "#mysticky-wrap"
- Si vamos a hacer referencia a una etiqueta directamente, sólo pondremos la etiqueta, "header"
Seguidamente añadiremos unos corchetes entre los que colocaremos el código que generaremos con la herramienta CSS.
Lo podemos ir apuntando en un papel, en un bloc de notas del escritorio del ordenador o directamente en la pestaña de "CSS adicional" del personalizador de WordPress.
1 | .nav-primary {} |
Esto es lo más difícil que vamos a realizar.
Generar código CSS3 sin saber programar
Vamos a lo divertido y asunto principal de este tutorial, crear el código CSS sin saber programar. Esto es posible gracias a personas que realizan herramientas como CSS matic.
La herramienta, totalmente online y gratuita, es muy intuitiva y gráfica, pudiendo ver el efecto que queremos utilizar antes de copiar el código.
Podemos generar efectos de degradados, bordes redondeados, texturas para fondos y sombras. Como ejemplo voy a aplicar un efecto de degradado en la barra del menú.
Tras buscar y modificar las opciones para encontrar el efecto que más nos guste, se ha ido generando un código automáticamente en la ventana de la derecha. Sólo tenemos que copiar el código y pegarlo entre los corchetes de la etiqueta.
Pegar el código en WordPress
Llegamos al último paso, para pegar el código generado en la herramienta anterior en nuestro WordPress, tenemos que ir, si aún no tenemos abierta la opción, a "Personalizar" desde el menú de "Apariencia", o desde la barra superior si estamos en la parte frontal o Front-End.
Abrimos la última pestaña donde pone "CSS adicional", primero colocamos la etiqueta a la que queremos aplicar el efecto (en este caso ".nav-primary {}" y pegamos el código que se ha generado con la herramienta entre los corchetes.
Crear animaciones CSS3 sin saber programar
Este sistema sigue el proceso que el anterior, por lo que no voy a repetir los pasos anteriores y sólo voy a mencionar algunos detalles a tener en cuenta.
La aplicación es también online y gratuita, se llama "WAIT! Animate", y en ella podemos elegir varios efectos de movimiento. Muy útiles para dotar de dinamismo a objetos sobre los que queremos llamar la atención.
Tenemos que fijarnos que, a la hora de copiar y pegar el código, sólo tendremos que cambiar la etiqueta que viene por defecto por la nuestra, sin añadir los corchetes en esta ocasión.
Podréis ver el proceso en el vídeo, ya que es muy similar al descrito en el apartado anterior.
Animar los iconos sociales del tema DIVI
Como ejemplo de lo que podemos hacer sobre elementos que ya existían en un tema, voy a animar los enlaces de las redes sociales que aparecen en el menú de un tema premium como es DIVI.
Siguiendo las pautas marcadas anteriormente, podemos realizar cambios espectaculares en cualquier tema o plantilla conociendo el camino exacto de las etiquetas.
En el tema DIVI, el efecto de movimiento se lo daremos a la siguiente etiqueta que pertenece al menú superior:
1 2 3 | #et-info .et-social-icon .icon { } |
Si el efecto se lo queremos poner a los iconos de la barra inferior, donde aparecen los créditos de la página web, cambiaremos la etiqueta del identificador por la que haga referencia a la barra inferior:
1 2 3 | #footer-bottom .et-social-icon .icon { } |
Entre las llaves se colocará el código que conseguiremos en las webs que consultemos.
Esto está muy bien, pero tendrá un movimiento infinito y puede que resulte un tanto pesado estar viendo como se mueven continuamente.
Gracias a la función "hover" de las hojas de estilo, podemos hacer que el movimiento, o efecto elegido, sólo se reproduzca cuando pasamos con el ratón por encima.
Para poner un ejemplo, el código para los iconos del menú superior quedaría de la siguiente forma:
1 2 3 | #et-info .et-social-icon .icon:hover { } |
Anímate a crear un sitio único y deferente añadiendo y modificando las hojas de estilo que traen los temas por defecto. Y además sin conocimientos de programación.
Excelente la explicación que das en este post, pero necesito hacerte una pregunta: Este procedimiento quise aplicarlo a los iconos de las redes sociales en el menú secundario de el tema divi elegant pero no me funciona y no veo qué ocurre, por favor si me puedes ayudar con hacer esto mismo en los iconos de los menú primario o secundario o cualquier otro por favor
Hola Douglas Olivares, actualizo el artículo y añado un vídeo realizando el proceso de animación de los iconos de las redes sociales. Aunque te contesté ya en el canal de Youtube, me parece correcto que quede reflejado también aquí.
buenas tardes,
quiero modificar mi tema que es el siguiente: /*
Theme Name: Appointment Red
Appointment Red theme is a child theme of Appointment theme and is the Red color variation.
únicamente quiero que la franja roja sea mas estrecha y que mi menú y el logo esten bien alineados.
grcs
Hola marcos, veo que existen dos versiones del tema, uno gratuito que se puede instalar desde el repositorio de wordpress y otro PRO de pago, no se si en la versión de pago se podrá hacer desde alguna opción que tenga el tema, pero desde el gratuito hay que modificar la función CSS que hace referencia a la franja roja. Te indico los pasos, es un corta pega en toda regla.
1 - Abre "Personalizar" desde el menú "Apariencia" de la zona de administración o si estas en la parte frontal, desde el menú superior de la franja negra
2 - Ve a la pestaña "Header settings - Custom CSS"
3 - En el recuadro superior borra todo y pega el siguiente código tal cual:
.page-title-section .overlay {
padding-top: 20px;
padding-bottom: 18px;
}
4 - Modifica los valores en "px" hasta conseguir el ancho que te guste.
Para alinear el menú con el logotipo habría que estudiar más en profundidad el código para realizar el proceso y hacerlo "responsive"