En este tutorial vamos a ver como podemos resaltar html en pantalla para que puedas usarlo en cualquier contenedor HTML que incluyas en tus articulos.

Prueba debajo de como resaltar HTML en pantalla, y arriba sigue el video con la explicacion acerca del codigo.

Como resaltar la caja en WordPress

Crear el mismo cogido en WordPress puede lograrse de varias maneras, dependiendo de tus necesidades. El siguiente método es uno bien básico que puede lograrse utilizando HTML, CSS y el JavaScript en varias partes del sitio.

Luego podriamos utilizar plugins si prefieres no tocar el código de tu tema.

Subscribete

para recibir las ultimas entradas.

Método 1: Caja Flotante con HTML, CSS y JavaScript

Paso 1: Añadir HTML

Usando el bloque /HTML, vamos a agregar el siguiente código HTML en dicho bloque de la página o entrada donde deseas que aparezca la caja flotante:

scroll down image preview para resaltar caja html

<div class="content">
  <div class="titlebox">
    <h1>Scroll Down</h1>
  </div>
  <div class="caja">¡Esta es la caja que se resaltará al aparecer en pantalla!</div>
</div>

Paso 2: Añadir CSS

Añade el siguiente código CSS en la sección de personalización de tu tema de WordPress (Apariencia > Personalizar > CSS Adicional) o directamente en el archivo style.css de tu tema hijo:

.caja-flotante {
    position: fixed;
    bottom: 10%;
    right: 10%;
    width: 300px;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
    z-index: 1000;
}

Scroll Down

¡Esta es la caja que se resaltará al aparecer en pantalla!

Paso 3: Añadir JavaScript

Agrega el siguiente código JavaScript en el mismo lugar que tu código HTML o en el archivo JavaScript de tu tema hijo:

<script>
function estaEnPantalla(elemento) {
  var posicion = elemento.getBoundingClientRect();
  return (
    posicion.top >= 0 &&
    posicion.left >= 0 &&
    posicion.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    posicion.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function resaltarCaja() {
  var caja = document.querySelector('.caja');
  if (estaEnPantalla(caja)) {
    caja.classList.add('resaltada');
  } else{
    caja.classList.remove('resaltada');
  }
}
window.addEventListener('scroll', resaltarCaja);
</script>

Método 2: Usar un Plugin

Si prefieres no tocar el código, puedes utilizar un plugin de WordPress que facilite la creación de cajas flotantes. Aquí hay algunos plugins populares:

Popup Maker: Es un plugin gratuito que te permite crear cajas modales y ventanas emergentes personalizables.
Elementor: Un constructor de páginas que incluye widgets para crear cajas flotantes y popups.
Hustle: Un plugin de WPMU DEV que permite crear popups, barras flotantes y más.

Paso 1: Instalar el Plugin

Ve a Plugins > Añadir nuevo en tu panel de administración de WordPress. Busca el nombre del plugin que prefieras (por ejemplo, «Popup Maker»), instálalo y actívalo.

Paso 2: Configurar el Plugin

Sigue las instrucciones específicas del plugin para crear y personalizar tu caja flotante. Por ejemplo, en Popup Maker, puedes crear una nueva ventana emergente y personalizar su contenido, apariencia y comportamiento desde la interfaz del plugin.

The Digital Mike

Como resaltar HTML al entrar en pantalla.