Insertar Google Tag Manager con Elementor

Insertar Google Tag Manager con Elementor

No es necesario acceder al código del head del theme de Wordpress y tampoco instalar un nuevo plugin.

Incluir código javascript con Elementor en Wordpress es muy fácil.

En la barra de herramientas de nuestro administrador colocamos el mouse por encima de la opción Elementor y podremos observar diferentes opciones.

Buscamos la opción Custom Code y hacemos clic en ella para abrir una nueva ventana donde se desplegará una tabla con los custom codes creados o vacía si aún no hemos creado ninguno.

Para incluir un nuevo Custom Code hacemos clic sobre el botón New Code situado en la parte superior de la ventana.

Insertar Google Tag Manager con Elementor Paso 2

Se nos abrirá una nueva ventana de edición donde tendremos que elegir un nombre para nuestro nuevo Custom Code, la sección del documento donde se incluirá: head, al comienzo del body o al final, el código en sí (código proporcionado por Google Tag Manager) y la prioridad de inserción sobre otros custom codes.

Para insertar nuestro código Tag Manager escogeremos la opción del head con prioridad por defecto 1.

Guardamos y ya lo tenemos disponible en nuestro sitio.

Cómo recuperé mi antiguo MacBook Pro

macbook pro

Cómo recuperé mi antiguo MacBook Pro

Mi MacBook Pro es del año 2011. Sí, una auténtica reliquia. Hacía tanto tiempo que no lo usaba que ya casi no recordaba ni lo que pesaba el condenado.

El pobre tenía varios achaques: no funcionaba el lector de DVD, tampoco respondía bien la tecla 2 —esa en la que también está el símbolo @— y, aun así, me propuse recuperarlo.

No pretendía convertirlo en mi ordenador principal, claro. Pero sí quería darle una segunda vida como equipo de apoyo, portátil de pruebas o dispositivo de respaldo. Porque, seamos sinceras, no está la economía para tirar cohetes y tampoco está de más aprovechar mejor lo que ya tenemos.

La cuestión es que yo pensaba que todo iba a ser coser y cantar. Pero no. Me encontré con algunos problemas que me quitaron bastante más tiempo del que esperaba.

El problema: un MacBook Pro antiguo y un sistema incompatible

Mi idea inicial era sencilla: formatear el disco, reinstalar el sistema operativo y dejar el MacBook Pro funcionando de nuevo.

Pero la realidad fue un poco menos amable.

Probé varias soluciones que encontré buscando en Google. Algunas parecían prometedoras, otras no encajaban del todo con mi caso y otras directamente no funcionaron. El problema principal era que mi MacBook Pro estaba bastante desfasado y necesitaba una versión antigua de macOS compatible con su modelo.

En mi caso, el equipo estaba con Lion como sistema operativo. El problema llegó cuando formateé el disco sin tener una copia de seguridad preparada y, lo más importante, sin disponer de un instalador compatible.

Ahí empezó el fregao.

Lo que intenté antes de encontrar la solución

Antes de dar con el método que finalmente funcionó, intenté crear un instalador booteable de varias formas. Y cuando digo varias, quiero decir muchas.

Probé con tutoriales, combinaciones de teclas, recomendaciones de foros y métodos que, sobre el papel, parecían bastante lógicos. Pero nada. Siempre aparecía algún problema:

  • El instalador no era compatible con mi MacBook Pro.
  • La recuperación por internet no terminaba de funcionar.
  • El proceso se quedaba bloqueado.
  • No conseguía preparar correctamente el USB de arranque.
  • El sistema no encontraba una versión adecuada para instalar.

Después de varios intentos, empecé a pensar que quizá el portátil ya había cumplido su ciclo. Pero el problema no era necesariamente el MacBook en sí, sino encontrar la versión correcta del sistema operativo y una forma fiable de instalarla.

La solución: crear un USB booteable con Disk Creator

La luz al final del túnel apareció cuando encontré una herramienta llamada Disk Creator.

Con este programa pude crear un USB booteable a partir de un instalador compatible con mi antiguo portátil. Ese fue el punto clave: no se trataba solo de reinstalar macOS, sino de instalar una versión que mi MacBook Pro de 2011 pudiera aceptar.

El instalador del sistema operativo lo descargué desde la página de soporte de Apple. Puedes encontrarlo aquí: descargar e instalar versiones anteriores de macOS desde Apple.

Para preparar el USB, utilicé Disk Creator. Puedes acceder desde este enlace: descargar Install Disk Creator para Mac.

Una vez tuve el instalador compatible y la herramienta preparada, el proceso empezó a ser mucho más claro.

Pasos que seguí para recuperar el MacBook Pro

El proceso, resumido, fue este:

  1. Comprobar qué versión de macOS podía instalar en mi MacBook Pro.
  2. Descargar una versión antigua del sistema operativo compatible.
  3. Descargar e instalar Disk Creator.
  4. Conectar un pendrive al iMac desde el que estaba preparando el instalador.
  5. Crear el USB booteable con Disk Creator.
  6. Conectar ese USB al MacBook Pro antiguo.
  7. Encender el portátil manteniendo pulsadas las teclas command + option + R.
  8. Esperar a que arrancaran las opciones de recuperación.
  9. Seguir los pasos del instalador.
  10. Instalar el sistema operativo y dejar que el proceso terminara.

Y sí: después de varios intentos fallidos, funcionó.

Puede parecer un proceso más complicado de lo que realmente es, pero una vez entiendes dónde está el bloqueo, todo empieza a tener sentido. En mi caso, el problema no era solo arrancar el Mac, sino conseguir un instalador compatible en un USB preparado correctamente.

Qué aprendí recuperando un Mac antiguo

Lo más importante que aprendí es que, cuando trabajas con dispositivos antiguos, no siempre sirve seguir el tutorial más reciente.

Muchas guías están pensadas para modelos actuales o para versiones modernas de macOS. Y eso, con un MacBook Pro de 2011, puede convertirse en un problema. No porque el ordenador esté completamente perdido, sino porque necesita una solución adaptada a su generación.

También aprendí que hay que tener paciencia. Mucha. Porque estos procesos pueden fallar por detalles pequeños: el USB, el formato del disco, la versión del instalador, el modelo exacto del Mac o incluso la forma en la que se ha descargado el sistema.

Al final, recuperar un equipo antiguo tiene bastante de prueba y error. Pero también tiene algo muy satisfactorio: entender el problema, encontrar la pieza que faltaba y ver cómo una máquina que parecía condenada al cajón vuelve a arrancar.

Consejos antes de intentar recuperar tu MacBook Pro

Si estás pensando en recuperar un Mac antiguo, mi primer consejo es que compruebes el modelo exacto y la versión máxima de macOS que admite. Este paso te puede ahorrar muchos dolores de cabeza.

También te recomiendo revisar si tienes archivos importantes dentro del equipo. Si todavía conserva datos que quieres guardar, intenta hacer una copia de seguridad antes de formatear o reinstalar nada.

Además, prepara el proceso con calma:

  • Usa un pendrive fiable.
  • Descarga el instalador desde una fuente segura.
  • Comprueba que la versión de macOS sea compatible.
  • No desconectes el equipo durante la instalación.
  • No te desesperes si el primer intento no funciona.

Con orden y un poco de paciencia, el proceso es mucho menos dramático de lo que parece cuando estás en mitad del caos.

Por qué merece la pena darle una segunda vida

Recuperar mi antiguo MacBook Pro no lo convirtió en un ordenador moderno. No va a competir con un equipo actual ni va a ser la máquina más rápida del mundo. Pero sí volvió a ser útil.

Ahora puede servirme como equipo secundario, portátil de respaldo o dispositivo para pruebas. Para quienes trabajamos en desarrollo web, tener una máquina extra donde experimentar sin miedo puede venir bastante bien.

También me recordó algo importante: no siempre necesitamos comprar algo nuevo para resolver un problema. A veces basta con revisar lo que ya tenemos, entender sus límites y buscar la manera de aprovecharlo mejor.

Y si trabajas con Mac en tu día a día, quizá también te interese este artículo sobre atajos y trucos para usar Visual Studio Code desde la terminal en Mac, porque va muy en la línea de sacarle más partido a tus herramientas.

Una pequeña victoria tecnológica

Al final, recuperar mi MacBook Pro fue menos imposible de lo que parecía, pero sí necesitó paciencia, búsqueda y varios intentos fallidos.

La clave estuvo en crear un USB booteable con una versión compatible de macOS y dejar de insistir con métodos que no estaban pensados para un equipo tan antiguo.

Ahora mi viejo MacBook vuelve a funcionar. No será el más rápido, ni el más silencioso, ni el más ligero. Pero sigue teniendo utilidad.

Y, sinceramente, hay algo bastante bonito en recuperar una herramienta que parecía condenada al olvido.

Máscara de texto con modo de fusión en CSS

Máscara de texto con modo de fusión en css

El de hoy es un ejemplo práctico donde veremos cómo conseguir un efecto de máscara aplicado a un texto sobre una imagen solo con código html y css.

HTML

En cuanto a la estructura html necesitaremos un contenedor que utilizaremos para mostrar una imagen de fondo y que a su vez contendrá el texto que nos hará de máscara.

wild and free

CSS

En cuanto al estilo vamos a diferenciar dos partes. La primera es la más importante ya que es la que nos servirá para entender y conseguir el efecto de máscara aplicado a un texto, lo cual es muy sencillo,  y una segunda parte que nos servirá para obtener un resultado que se vea igual de estilado al de la imagen del ejemplo. 

Máscara de texto con modo de fusión en css
Ejemplo del resultado final

Para conseguir el efecto de máscara utilizaremos la propiedad mix-blend-mode o modo de fusión de css que aplicaremos al texto. Esta propiedad especifica cómo el contenido de un elemento, en éste caso nuestro encabezado H1, debe combinarse con su fondo principal directo, es decir, el contenedor con clase bg.

h1 {
  background-color: white;
  mix-blend-mode: screen;
}

El código siguiente es opcional ya que lo utilizaremos si queremos conseguir un resultado igual al del ejemplo.

Igualmente vamos por partes para ir entendiendo cual es la función de cada línea del código y poder modificarlo a nuestro gusto.

Con esta línea importamos una fuente de Google Fonts. Para éste ejemplo utilizaremos la Open Sans Condensed.

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');

Al contenedor principal le agregamos la propiedad overflow: hidden para evitar que el contenido genere scroll al desbordarse.

main{
	overflow:hidden;
}

Cargamos la imagen que se muestra de fondo y lo hacemos solo una vez (no-repeat) de manera proporcional a su tamaño mínimo para que ocupe todo el contenedor (cover).

Le diremos al contendor que ocupe todo el ancho y alto en relación a las dimensiones del viewport y que lo trataremos como un elemento flexible.

.bg {
  background-image: url("https://cdn.pixabay.com/photo/2017/04/27/07/26/rock-climbing-2264698_960_720.jpg");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height:100vh;
  display: flex;
}

Utilizamos como fuente la importada anteriormente desde Google Fonts.

Establecemos un tamaño de fuente calculada a partir del 5rem en relación al tamaño de su contenedor.

h1 {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: calc(5rem + 10vw);
	font-weight: 700;
	letter-spacing: -0.5rem;
	line-height: 0.8;
	margin: 1%;
	padding: 5%;
	text-align: right;
	text-transform: uppercase;
}

La propiedad box-sizing nos garantiza que el width y el height del content no se verá afectado por el padding ni por el border.

.content {
	box-sizing: border-box;
}

Con esta media query lo que buscamos es que en pantallas más grandes la máscara de texto ocupe la mitad de la ventana y en pantallas más pequeñas nuestra máscara abarque todo el ancho de la ventana. Cuando el ancho de nuestra ventana sea como mínimo de 40em nuestro content tendrá un ancho de 50vw y un relleno a los lados de 5rem.

@media (min-width: 40em) {
    .content {
        padding-left: 5rem;
        padding-right: 5rem;
        width: 50vw;
    }
}

Código de los estilos completo.

h1 {
	background-color: white;
	mix-blend-mode: screen;
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700");
main {
	overflow: hidden;
}
.bg {
	background-image: url("https://cdn.pixabay.com/photo/2017/04/27/07/26/rock-climbing-2264698_960_720.jpg");
	background-position: 0% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	display: flex;
}
h1 {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: calc(5rem + 10vw);
	font-weight: 700;
	letter-spacing: -0.5rem;
	line-height: 0.8;
	margin: 1%;
	padding: 5%;
	text-align: right;
	text-transform: uppercase;
}
.content {
	box-sizing: border-box;
}
@media (min-width: 40em) {
    .content {
        padding-left: 5rem;
        padding-right: 5rem;
        width: 50vw;
    }
}

Demo

Puedes ver la demo y el código en mi repositorio de GitHub.