Z-index en CSS: Posicionar elemento web

z-index en css posicionar elemento web

z-index en css posicionar elemento web

¿No te ha ocurrido alguna vez que la plantilla que tienes genera conflicto con alguna funcionalidad o plugin que has instalado?

 

A mí me ocurrió recientemente con el plugin que tengo para que os suscribáis a los boletines de noticias o newsletter (que por cierto lo tengo un poco abandonado). El menú que dispongo está por encima del resto de los elementos por por una mala programación del plugin este se muestra por encima de todo el diseño que tengas por delante.

 

¿Cómo se soluciona esto de una forma fácil y rápida?

Mediante el CSS o Sistema de Hojas de Estilo de Cascada. Para no soltar mucha palabrería y abreviarlo digamos que es un archivito que indica a los elementos como los textos, imágenes de que forma se tienen que mostrar, que distribución o bajo que directriz.

capas photoshop

Así que vamos a usar el atributo de CSS: Z-Index que no deja de ser un atributo empleado desde hace mucho que indica el orden de un elemento sobre sus semejantes. Es como en Photoshop cuando dejamos una capa al final y las otras por encima.

 

 

 

 

 

 

Para ello simplemente tenemos que realizar los siguientes puntos:

 

  1. Abrir el inspector sobre la web que queremos trabajar. Hacer click derecho con el ratón y escoger inspeccionar.inspeccionar
  2. Nos saldrá un faldón abajo y el primer botón nos permitirá escoger un elemento de la web. Diciéndonos todo tipo de información.elemento inspeccionado
  3. Debajo del título. A continuación de los atributos que salgan antes del último } Introducir lo siguiente position: relative; z-index:-10; (en el ejemplo he puesto 10 para que veáis como sigue superponiendose sobre el menú que trae nuestra plantilla)z-index
  4. Una vez hecho esto con el atributo z-index decimos si queremos que se vaya muy abajo (valores negativos incluso) a los más altos (valores positivos). De esta forma hemos resuelto esto pero solo falta un pequeño paso.banner arreglado
  5. Meter este código en nuestra plantilla en su correspondiente CSS. Para ello hemos de ir al personalizadorpersonalizar apariencia
  6. Y finalmente pegar el código que hemos metido de nuevo en el CSS Personalizado. O cuando salgamos de donde inspeccionamos el elemento antes y recarguemos la web se habrá perdido (de hecho puedes coger web que te de la gana y modificarlo pero siempre tendrás que guardar la configuración en algún sitio para que se aplique).css adicional
  7. Comprobar que exactamente funciona correctamente.

sidebar correcto

¡¡Y con esto ya lo tenemos zanjado gracias al CSS!! ¿Te ha gustado este artículo? Igual te interesa saber qué es minificar el CSS 🙂

 

Los clientes no son lo primero

los clientes no son lo primero

los clientes no son lo primero

Si Richard Branson, magnate inglés fundador de la compañía Virgin y que nos deleita con perlas como la que os he traído hoy.

 Los clientes no son lo primero, lo primero son los empleados. Si cuidas de tus empleados, ellos cuidarán de tus clientes.

virgin

Quiero coger con permiso su frase y reinterpretarla para autónomos que lo dejaría tal que así:

Los clientes no son lo primero, lo primero es la salud y después la marca personal. Si cuidas de tu salud y después de tu marca personal, ellos cuidarán de tus clientes.

 

¡¡Y es así!! Llevo un año haciéndolo a la inversa. Al primer toque de un cliente dejaba TODO lo que estaba haciendo por atender a ese cliente. Mi cabeza entraba en un bucle de estrés que no terminaba hasta que ese cliente estuviera satisfecho, respondido o hecho lo que había solicitado. Mis horarios ni quehaceres de ese día existían ya desde el primer minuto de ese email o llamada.

Básicamente a primera hora de la mañana hacía lo de los clientes, después de comer seguía con lo de los clientes. Si me había pillado el toro no salía a la calle. Y si aún no lo había completado tampoco iba al gimnasio y los artículos diarios pues si no podía ese día pues ya otro día que estuviera más libre

Siempre vendrán nuevos clientes

Tarde o temprano te llegarán. O alguno que ya atendiste en el peor momento te dirán que quieren algo urgente. Por eso hay que asumir que NUNCA te vas a quitar todos los encargos y vas a estar libre UNAS SEMANAS para hacer lo que te gustaría o adelantar esos artículos. Salvo fechas como Agosto y Navidad donde puedes relajarte. Los que hayas conseguido volverán y los que están por llegar si haces MARCA PERSONAL y te MUEVES ( importante ponerlo en mayúscula!!) acabarán viniendo.

nuevo cliente

Antes no iba a negocios por puerta fría, ni me curraba la localización de nuevos clientes en caso de que los actuales no quisieran más cosas.

El autónomo no tiene un sueldo fijo haga lo que haga

Aquí hay que aclarar que no incluyo a los que trabajan para una empresa pero lo facturan ellos por cuenta propia. Me refiero a aquel que depende de las ventas, los clientes o la situación del mercado. Siempre va ser una montaña rusa pero los autónomos hemos de pagar una cuota mensual a la seguridad social INDIFERENTEMENTE DE QUE GANES 0€ o 1000€ siempre tendremos en nuestra cuenta un cobro de 275€  por EMPRENDER y ser AUTÓNOMO en España (menos mal que en mi caso me pude acoger a la tarifa “PLANA”).

sueldo autónomo

La salud es lo primero

Sí lo sé. Nos lo dicen tanto y hacemos tan poco caso. Pero no sé vosotr@s pero antes era tan sedentario que solo bajaba a por el pan. Ese era mi ejercicio. Los clientes nunca te preguntarán que tal te encuentras físicamente o si tienes tiempo para desarrollar tu marca personal. Y es normal. Estás detrás de un ordenador, no te ven diariamente. Cada vez lo hacemos tan sencillo que ni cuesta pedir. Un email escrito en unos segundos y ya tienes una nueva tarea que hacer en la cola.

Antes para nada era consciente de esto y me pasaba jornadas sin despegarme del ordenador salvo para comer o cenar. Me acostaba a las 2 a.m y me levantaba a las 8-10 a.m mareado y con dolor de cabeza para seguir trabajando y acostarme a las 2 a.m ese día también. Los fines de semana no libraba por eso de que el CLIENTE te llama cuando mejor le viene no cuando a ti mejor te venga. He recibido whatsapp o emails a las 12 de la mañana o más tarde. Esto de ser freelance te hace no poder cerrar tu oficina virtual a los clientes. POR ESO LO TIENES QUE HACER TÚ.

salud autonomo

Y empieza por apuntarte a un gimnasio e ir indiferentemente de si tengas mucho o poco trabajo. Cada día que faltes estarás empeorando físicamente y mentalmente para atender a nuevos clientes, gestionar mejor el estrés o la falta de tiempo. Y volverás a sentarte en la silla sin salir ni airearte o relacionarte con otra gente aunque sea en el gym.

Cada año pasa muy rápido y créeme. Este primer año de autónomo se me ha pasado como un suspiro pues ayer no sabía si era martes o miércoles.

Cuando más tiempo menos haces

Cuando estaba en el paro para nada mejoraba mi marca personal. Ni estudiaba cosas nuevas en internet para ponerme al día o hacía tantas cosas como hago ahora Y CON MENOS TIEMPO!! Olvídate de esas frases de CUANDO TENGA MÁS TIEMPO, CUANDO SEA RICO, CUANDO TENGA MENOS TRABAJO.

Jamás van a llegar y si llegan ya estarás jubilado y lamentarás ahora no tener la vitalidad o las mismas ganas de antes. El momento es AHORA.

Así que si puedes haz alguna de estas cosas para mejorar la marca que venda de ti y te haga recibir nuevos clientes:

  • Escribir artículos
  • Hacer un podcast
  • Redactar un ebook
  • Montar una tienda online
  • Hacer un canal en Youtube
  • Potenciarte por Instagram
  • Hacer una página web Facebook

Todas estas cosas son GRATIS  y simplemente necesitan de tu tiempo para hacerlo. Y si tienes alguna duda siempre me puedes preguntar 😉

menos tiempo

Estas semanas que estaba la perrita de mi hermana. Aunque haya sido una paliza me sentía más vivo que nunca cuando podía escribir un artículo diario como este que me lleva 1 hora. 1 podcast, ir a la calle a hacer la llamada a puerta fría a 3 negocios,  postear en las redes sociales, pasear a la perrita sobre 40-60 minutos  unos 3 veces al día, ir al gimnasio, dar alguna clase particular y atender a los clientes. Y aún así me sentía maravilloso de todo lo que había logrado y me animaba a que empezará el nuevo día para superarme. En la empresa que trabajé 6 meses al revés. Odiaba levantarme para trabajar y aquí adoro levantarme para hacer todo lo que tengo que hacer y cuando llega la noche en vez de ver la rampa de la mañana, ver el tobogán por la noche.

 

Quita las notificaciones del móvil

No sé ni si fue un accidente o lo hice a posta. Pero ya no me llegan emails al móvil ni tengo espacio para instalar el Twitter. Así que no me entero de nada hasta que no llego a mi casa ni enciendo el ordenador. ¡¡Es lo mejor que puedes hacer!! Antes si iba por la calle había incluso días que contestaba a cosas del trabajo desde el gimnasio!! Incluso me daba media vuelta y volvía a casa a trabajar aún no habiéndome puesto la camiseta del gym. ¡¡No puedes permitir que los clientes gobiernen tu vida!! Si pierdes un cliente pues mala suerte, ya llegará otro. Si tus presupuestos son pequeñitos lo puedes hacer. Si ya cada cliente es el sueldo de varios meses más complicado.

Pero creemé que puedes encontrar nuevos clientes y quitarte esa sensación de estrés de depender constantemente tu día a día gracias a los clientes. Está claro que sin ellos y sin su interés por nuestros servicios no progresaremos. Aunque lo más importante es que tú estés bien y crezcas profesional y personalmente. Quizás el día de mañana les dices a tus clientes que cambiaste de oficio y ya buscarán a otra persona para que les haga lo que tú no pudiste. No es tan grave y no serías la primera ni la última persona que lo hace.

Así que aunque algún cliente me ponga la soga en el cuello tras leer esto. Yo ahora interpongo mi salud, luego la marca personal y después los encargos de los clientes. Y a quien no le guste ya vendrá otro que le guste. No se puede contentar a todos. Pues si lo hiciéramos no existiría ningún emprendedor pobre 😉

¿Y a ti qué te parece la reflexión? ¿Estás a favor o en contra?

 

 

Copias de Seguridad rápidas en WordPress

copias de seguridad

copias de seguridad

Cuando empiezo con un proyecto o retoco la web de un cliente siempre les pregunto por la posibilidad de hacerles un backup o copia de seguridad. Para mí más vale prevenir que lamentar y es que ¿no lo haríais lo mismo si pudieráis hacer un backups facilmente ? Hoy en día tenemos la suerte de tener infinidad de medios para realizaros pero aún así hasta que no pasa algo grave no aprendemos la lección. Así que hoy os voy a enseñar a realizar cpias de seguridad rápidas en WordPress!!

El plugin que mejor me ha funcionado siempre se llama All in One WP. Es verdad que hay muchísimas opciones seguramente igual de validas o más completas inclusive. Como por ejemplo entrar al cPanel de vuestra compañía de hosting o el famoso Duplicator.

Pero en mi caso requiero rapidez y una copia bien hecha. Y este plugin me lo proporciona todo. Ya que permite:

  • Exportar un sitio web
  • Importar un sitio web
  • Tener un listado de las copias de seguridad

all-in-one wp migration

¿Por qué All in One WP Migration?

Necesitaba algo que me permita hacer una copia de seguridad rápidamente, sin temor a equivocarme, tenerlo bien localizado y poder restaurarlo en cualquier sitio, una copia idéntica de la web. Sin duda All in One WP Migration me ha funcionado siempre, cuando otras opciones he tenido que lidiar con algún problemilla.

Y es que ya que tenemos esta opción de restaurar en el mundo virual ¿¿¡¡Por qué no hacerlo!!?? Si tuvierais la posibilidad de hacerlo en vuestra vida real ¿No querríais rehacer muchas cosas hechas mal? 😉

Ojo al realizar las copias estás ocupando espacio de tu alojamiento. Conviene saber cuanto espacio tenéis contratado para no tener luego disgustos o cortes por parte de la compañía.

Aquí puedes ver partes del plugin en cuestión.

 

exportar copia de seguridad
Opciones a exportar la copia de seguridad
reemplazar texto wordpress
Posibilidad de reemplazar textos
exportar wordpress
Proceso de una exportación

 

Una vez hecho podrás descargar el zip de la copia de seguridad. E instalar este plugin All in One Wp Migration en otro WordPress, en tu versión local de la instalación e incluso pagar la versión PRO que te permite restaurar multi-sites sin ningún problema. La única limitación de la versión gratuita es que solo se permite restaurar 512 megas.

No obstante puedes quitarle opciones como te muestro aquí.

exportar sitio
Puedes quitar todo lo que te estorbe a tu antojo 🙂

 

 

Exportar e importar paso a paso 🙂

  1. Instalar el plugin desde donde queremos crear la copia de seguridad https://es.wordpress.org/plugins/all-in-one-wp-migration/
  2. Generar una copia de seguridadall in one
  3. Descargar la copia. En mi caso esta que se llamará nombredetuwordpress.wpress

    descargar copia wordpress
    Lo que pesa mi web al completo 🙂
  4. Lo he probado con mi propia web borrándola entera
  5. He generado una nueva instalación de WordPress 
  6. He entrado a mi panel de control. Como veis tiene la plantilla por defecto Twenty Seventeen
  7. Instalo el plugin All in one en la nueva instalación
  8. Importo la copia. Espero a que se suba. Me pedirá que actualice los enlaces permanentes dentro de ajustes.
  9. Y voilá!! Ya está el proceso de importar una copia de seguridad generada con este maravilloso pluginrubiworks

 

 

Como véis lo restaura magistralmente, cero problemas y muy muy sencillo que es lo que se busca 🙂

 

¿Le habéis probado? ¿Qué os parece? ¿Tenéis otras soluciones? ¡¡Votad que es gratis!! 🙂

 

Instalar un chat en mi página web

instalar un chat

Hoy quiero que probéis conmigo la posibilidad de instalar un chat en vuestra página web, negocio, portafolio o tienda online.

Os lo voy a explicar tanto por texto como por video (Es una sugerencia que me hizo una amiga llamada María. Desde aquí un abrazo ;))

Puede que os parezca algo muy enrevesado, complejo de instalar o incluso poco agradable si disponemos de casi nada de tiempo.Francamente creo que todo lo que ayude al consumidor siempre será una gran inversión de tiempo. Además está más que demostrado que aumenta la tasa de conversión (hacer que un cliente haga una acción en tu web y no sea un mero fantasma que pasaba por allí) que iremos viendo poco a poco.

¿Qué es un live chat?

 

Es un chat en vivo con el que puedes interactuar con otra persona en una página web. Normalmente permite saber cuando las personas están conectadas, saber cuando están escribiendo y responder en tiempo real. ¡¡Sin esperas!!

 

¿Por qué funciona el Live chat en una web?

  • Es inmediato y obtienes respuesta en breve tiempo
  • Puedes hacer otras cosas mientras
  • No tienes que redactar un email, depender de una app o coger el teléfono
  • Realizas las preguntas sin decir quien eres (¿Te imaginas dar tu email para preguntar en una tienda física?)
  • Puedes contestar con más preguntas al momento o cuando esté en línea
  • Transmite confianza y tranquilidad de cara al consumidor
  • Potencias que entren más a tu web

Como habréis visto en la gráfica de arriba así como en puntos de antes. Estas creo que son las más destacables y por las que os animaría a que lo probaráis. Si queréis saber más del tema os dejo un artículo (en inglés) que habla muy bien de ello.

 

Videotutorial para instalar un chat en nuestra web con Tawk.to (gratuito)

 

 

Y con esto ya tienes unos puntos extra para ganar nuevos clientes en tu web!! ¿Quieres probar con mi chat? 🙂

¿Qué es minificar una web?

Si es la primera vez que escuchas Minificar. No te preocupes que has llegado al sitio correcto. Aquí te explico qué es minificar y como realizarlo en tu web hecha con WordpPress.

¿Qué es minificar y más concretamente minificar una web?

Puede que te confundas con el comando de Final Fantasy VII si eres un poco friki. Donde se convertía en pequeño los personajes en pantalla mediante una magia…

minificar

En realidad es algo así pero con CSS y Javascript. Tanto CSS como Javascript son archivos de un lenguaje que al abrirlos con un simple editor verás parrafadas de texto. Entonces minificar es hacer más ligero esos archivos de texto. No tiene más.

CSS es el archivo que da formato, colores, tamaños de texto, fondos, posicionado de los bloques al contenido de una web. Mientras que Javascript es un lenguaje de programación con el que se hace que infinidad de funciones o tareas complejas se hagan por arte de magia.

Por tanto WordPress necesita acelerar sus webs para que Google esté contento y cada vez cuenta con más parámetros el SEO de Google. Por eso es clave optimizar la minificación. Existen diversas formas y herramientas. Pero vamos a realizarlo de la forma más fácil y entendible por todos.

Si todavía no te ha quedado claro. Minificar es ahorrar espacio en los archivos de tu página web que tienes alojados en tu alojamiento web.

Minificar: paso a paso

1. Encontrar fallos de minificación

Lo mejor es asistir a cualquier analizador de SEO para ver o comprobar que fallos tienen nuestra web. En este caso nosotros usamos uno que me gusta mucho llamado SEO Site CheckUp.

 

 

que es minificar

Aquí podéis ver que mi web 5 Failed Checks  o 5 Chequeos Fallidos. Y nos avisa mediante una alerta de que el test de minificación para JS (Javascript) y CSS han fallado. Por tanto tenemos que arreglar estos errores no siempre solucionables al 100% para mejorar el posicionamiento en Google. Puede que no os aporte gran diferencia pero muchas correcciones bien pequeñitas hacen unos resultados tremendos.

Esto es lo que me dice si amplio la lista de archivos no minificados. Entonces tendremos que descargarlos, comprimirlos y volverlos a subir al servidor.

minificados

2. Localizar archivos sin minificar por FTP

Una vez obtenido el listado debemos localizar ese archivo en nuestra carpeta de instalación de WordPress. Para ello tienes este fantástico artículo donde explico como usar un cliente FTP (programa para acceder al contenido del alojamiento web) qué es, como conectarse y localizar los archivos en cuestión.

 

minificar js
Todos los temas y plugins suelen tener carpetas con los js y css
js
El archivo original que podemos encontrar tanto de CSS o Javascript puede ser así.

3. Cómo minificar

Ya localizados, abiertos o descargados los archivos. Simplemente el penúltimo paso es incorporarlo o pegarlo a una web que se encargará de limpiar el relleno, los saltos de linea, espacios, para juntar todas las cadenas lo más seguidas posibles. Puede que para ti resulte inconveniente por no enterarte de lo que pone o no estar justificado. De hecho te saldrá todo del tirón, desde la primera linea y no apto para la lectura de humanos. Pero para las máquinas les dan igual y encima lo hacen más ligeras esas cadenas de texto. Normalmente serán ficheros o archivos que jamás tocarás o editarás. Por lo que no te preocupes. Encima si son de plugins que se actualizan con frecuencia, esos archivos se reemplazarán y te tocará rehacerlo cada vez.

 

Webs para minificar CSS y Javascript
https://jscompress.com
https://javascript-minifier.com
https://www.minifier.org
https://cssminifier.com
Pegamos el archivo original y copiamos el resultado para guardarlo y subirlo

Hay plugins que te lo automatizan estas compresiones, pero además de sobrecargarte el servidor con más peticiones, cada vez que entren tus usuarios a disfrutar de tu contenido les harás esperar unas décimas más. Así que mi consejo es hacer este tipo de test una vez a la semana y dedicarlo a corregir errores. Ya que incluir un plugin para resolver unos archivos que solo pretende Google que ahorres unos kylobites, al final más que ahorrar estás gastando muchos recursos para esa solución. Te dejo a tu suerte la opción que quieras. Si deseas correr un plugin de fondo que haga esto de forma automática o hacerlo tu mismo, así como tener un mayor control de los errores que tengas en tu página. Por lo que con esto solo te tocaría resubirlo y reemplazarlo por ese mismo archivo.

4. Subir y reemplazar archivos por los minificados

Una vez subido se reemplazará por el archivo original. Normalmente serán los plugins que constantemente se actualizan y quizás los desarrolladores tienen en un lenguaje ordenado para saber sacar sus parches, arreglar los fallos sin perderse y seguir avanzando con nuevas funcionalidades.

Así que te tocará hacerlo de vez en cuando. Pero nadie dijo que para triunfar fuese fácil. Si así fuese todos lo seríamos. 😉

Si te ha gustado puedes ver otros artículos relacionados, compartir y valorar esta entrada. ¡¡Muchas gracias!! 😀

Artículos relacionados

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies