Tips Divi archivos - Aula Wordpress

Guía paso a paso para utilizar la autenticación de dos factores de Wordfence en WordPress

lastutok — Sat, 04 Mar 2023 13:56:06 +0000

En este artículo te explicaré cómo utilizar la autenticación de dos factores incluida en Wordfence para WordPress.

Paso 1: Instalar y activar Wordfence

Lo primero que debes hacer es instalar y activar el plugin Wordfence en tu sitio web de WordPress. Si ya tienes Wordfence instalado, asegúrate de que esté actualizado a la última versión.

Paso 2: Configurar la autenticación de dos factores

Una vez que Wordfence esté activado, ve a la pestaña de «Login Security» en el panel de administración de Wordfence. Aquí encontrarás la opción «Two-Factor Authentication». Haz clic en el botón «Enable» para activar la autenticación de dos factores.

Paso 3: Configurar la autenticación de dos factores para los usuarios

Una vez que la autenticación de dos factores esté habilitada, puedes configurarla para cada usuario en tu sitio web. Para hacer esto, ve a la página de «Usuarios» en el panel de administración de WordPress y haz clic en el usuario al que deseas agregar la autenticación de dos factores. En la página de edición de usuario, desplázate hacia abajo hasta la sección de «Wordfence Two-Factor Authentication» y haz clic en «Configure Two-Factor Authentication».

Paso 4: Escanear el código QR

En la página de configuración de autenticación de dos factores, verás un código QR que puedes escanear con una aplicación de autenticación de dos factores en tu teléfono móvil. Si aún no tienes una aplicación de autenticación de dos factores, puedes descargar una como Google Authenticator o Authy.

Escanea el código QR con tu aplicación de autenticación de dos factores y luego ingresa el código de seis dígitos que aparece en tu aplicación en el campo de «Verification Code» en la página de configuración de Wordfence.

Paso 5: Guardar la configuración

Una vez que hayas ingresado el código de verificación, haz clic en el botón «Save Changes» para guardar la configuración de autenticación de dos factores para el usuario.

Paso 6: Ingresar el código de verificación

Ahora, cuando el usuario intente iniciar sesión en el sitio web, se le pedirá que ingrese su nombre de usuario y contraseña como de costumbre. Luego, se le pedirá que ingrese el código de verificación de seis dígitos generado por su aplicación de autenticación de dos factores.

¡Listo! Ahora has configurado correctamente la autenticación de dos factores para un usuario en tu sitio web de WordPress utilizando el plugin Wordfence. Repite el proceso para cada usuario que desees proteger con autenticación de dos factores. Esto ayudará a aumentar la seguridad de tu sitio web y protegerlo de posibles ataques.

La entrada Guía paso a paso para utilizar la autenticación de dos factores de Wordfence en WordPress se publicó primero en Aula Wordpress.

Cómo crear una página de redirección con un loader gráfico

lastutok — Fri, 03 Mar 2023 05:38:05 +0000

Cómo crear una página de redirección con un loader gráfico

En ocasiones, es posible que deseemos redirigir a los visitantes de nuestro sitio web a otra página. Por ejemplo, podemos querer llevar a los usuarios a una página de destino después de que completen un formulario de registro, o podemos tener una nueva versión de nuestro sitio web que deseamos que los usuarios visiten. En cualquier caso, una página de redirección puede ser una solución efectiva. Además, agregar un loader gráfico a la página puede mejorar la experiencia del usuario al mostrar que algo está sucediendo en segundo plano.

En este artículo, veremos cómo crear una página de redirección con un loader gráfico utilizando HTML y CSS.

Creando la estructura HTML

Para comenzar, crearemos un archivo HTML básico con un título, un encabezado y un cuerpo. En el cuerpo, agregaremos un loader gráfico y un mensaje de «Cargando web…». También agregaremos una imagen con el logo de la página inicial.

Redirección a otra página web

Cargando web…

En este ejemplo, hemos agregado una clase CSS llamada .loader que define los estilos del loader gráfico. La animación del loader gráfico se define en la regla @keyframes spin. Además, hemos agregado una clase CSS llamada .logo que define los estilos de la imagen del logo, y una clase CSS llamada .loading-text que define los estilos del mensaje de «Cargando web…».

Agregando la redirección

Ahora que tenemos una estructura básica de HTML y los estilos para nuestro loader gráfico y otros elementos, podemos agregar el código que redirige a los visitantes a la página de destino. Para hacer esto, agregaremos un script en el cuerpo del documento que utiliza la propiedad window.location.href para redirigir a los usuarios a la página de destino. En nuestro ejemplo, la página de destino es «https://www.otra-web.com». Puedes reemplazar esta URL con la dirección de la página que desees.

Probando la página de redirección

Una vez que hayas creado tu página de redirección con un loader gráfico, es importante probarla para asegurarte de que funcione correctamente. Para hacerlo, guarda el archivo HTML y ábrelo en tu navegador web. Deberías ver la imagen del logo de la página inicial, seguida del loader gráfico y el mensaje de «Cargando web…». Después de unos segundos, deberías ser redirigido a la página de destino.

Conclusiones

En resumen, crear una página de redirección con un loader gráfico puede mejorar la experiencia del usuario al mostrarles que algo está sucediendo en segundo plano mientras se redirigen a la página de destino. Para hacer esto, se necesita un archivo HTML básico con un loader gráfico y un mensaje de «Cargando web…». También es importante agregar un script que redirija a los usuarios a la página de destino. Con estos pasos simples, puedes crear una página de redirección efectiva para tu sitio web.

La entrada Cómo crear una página de redirección con un loader gráfico se publicó primero en Aula Wordpress.

Código para no permitir la selección de texto de tu web

lastutok — Thu, 16 Feb 2023 05:43:20 +0000

No quieres que los visitantes a tu página web puedan seleccionar el texto de tu web.

Copia este sencillo código en tu hoja de estilos (style.css) o en la sección que tu plantilla lo permita.

html {
user-select:none;
}

La entrada Código para no permitir la selección de texto de tu web se publicó primero en Aula Wordpress.

Los mejores plugins de WordPress para mejorar la accesibilidad a personas con discapacidad visual

lastutok — Wed, 01 Feb 2023 12:12:10 +0000

Mejorando la accesibilidad visual en tu sitio de WordPress

¿Por qué es importante mejorar la accesibilidad visual en tu sitio web?

La accesibilidad en línea es esencial para garantizar que todos los usuarios, independientemente de sus habilidades, puedan acceder y utilizar fácilmente el contenido de tu sitio web. Las personas con discapacidad visual en particular enfrentan desafíos únicos al navegar por la web, como la dificultad de leer contenido en pantalla o de encontrar información relevante.

Afortunadamente, existen varios plugins de WordPress que pueden ayudar a mejorar la accesibilidad visual para estos usuarios. Al implementar estos plugins en tu sitio web, puedes garantizar que tu contenido sea fácilmente accesible para todos.

Los mejores plugins de WordPress para mejorar la accesibilidad visual

Lector de pantalla: Este plugin permite a los usuarios activar un lector de pantalla que leerá en voz alta el contenido de tu sitio web. Esto es especialmente útil para personas con discapacidad visual que tienen dificultad para leer contenido en pantalla.
Botón de aumento de tamaño de fuente: Este plugin agrega un botón en tu sitio web que permite a los usuarios aumentar el tamaño de la fuente. Esto es especialmente útil para personas con discapacidad visual que tienen dificultad para ver contenido en pantalla a tamaños de fuente estándar.
Opciones de alto contraste: Este plugin agrega opciones de alto contraste a tu sitio web. Esto permite a los usuarios cambiar los colores de tu sitio web para que sea más fácil de ver para personas con discapacidad visual.
Descripciones de imágenes: Este plugin agrega descripciones de imágenes a las imágenes en tu sitio web, lo que permite a las personas con discapacidad visual entender el contenido de las imágenes.

Conclusión

La accesibilidad es esencial para garantizar que todos los usuarios puedan acceder y utilizar fácilmente el contenido de tu sitio web. Con los plugins adecuados, puedes mejorar significativamente la accesibilidad visual en tu sitio de WordPress para personas con discapacidad visual. Al implementar estos plugins, puedes garantizar que tu contenido sea fácilmente accesible para todos

La entrada Los mejores plugins de WordPress para mejorar la accesibilidad a personas con discapacidad visual se publicó primero en Aula Wordpress.

Efecto de zoom al pasar el cursor (Hover Zoom-In) sobre una imagen en DIVI

lastutok — Tue, 31 Jan 2023 20:53:06 +0000

Efecto de acercamiento al pasar el cursor (Hover Zoom-In) que se puede agregar casi a cualquier módulo de Divi que contenga una imagen.

Hay dos pasos para aplicar el efecto.

En primer lugar, agregue un nombre de clase CSS adicional al módulo, por ejemplo:

zoom-divi

A continuación, agregue el siguiente código al campo CSS personalizado en el Dashboard / Opciones del tema / Configuración general:

.zoom-divi.et_pb_image:hover img,
.zoom-divi .et_pb_image_wrap:hover img,
.zoom-divi a:hover img {
transform: scale(1.3);
transition: all 2s 0s ease;
}

.zoom-divi,
.zoom-divi a {
overflow: hidden;
}

.zoom-divi.et_pb_image img,
.zoom-divi .et_pb_image_wrap img,
.zoom-divi a img {
transition: all 1s 0s ease;
}

Si desea cambiar ligeramente la animación, puede jugar con los valores en el código.

Si ve que el código no funciona para un módulo de Divi, no dude en dejar en los comentarios sus consultas o dudas.

La entrada Efecto de zoom al pasar el cursor (Hover Zoom-In) sobre una imagen en DIVI se publicó primero en Aula Wordpress.

Cómo optimizar un articulo de WordPress para optimizar el SEO

lastutok — Fri, 20 Jan 2023 13:28:35 +0000

Para optimizar un artículo de WordPress para SEO, hay varios aspectos a tener en cuenta:

Utilice palabras clave relevantes en el título y en el contenido del artículo. Asegúrese de que la palabra clave aparezca en el título y en el primer párrafo del artículo.
Utilice etiquetas alt para las imágenes en el artículo. Las etiquetas alt describen la imagen y ayudan a los motores de búsqueda a entender mejor el contenido del artículo.
Utilice títulos y subtítulos para dividir el contenido en secciones fáciles de leer. Los títulos y subtítulos deben contener palabras clave relevantes.
Utilice enlaces internos y externos relevantes en el artículo. Los enlaces internos ayudan a los motores de búsqueda a entender mejor la estructura de su sitio web y los enlaces externos proporcionan información adicional sobre el tema del artículo.
Utilice un plugin de SEO para optimizar el artículo. Los plugins de SEO, como Yoast SEO, proporcionan consejos y sugerencias para optimizar el artículo para los motores de búsqueda.
Asegúrese de que el sitio web esté optimizado para SEO, ya que esto ayudará a los motores de búsqueda a comprender mejor el contenido del artículo.

Recuerda que el SEO es un proceso continuo, y que debes estar actualizando y mejorando tu sitio constantemente para asegurarte de que estás haciendo todo lo posible para que los motores de búsqueda lo encuentren y lo muestren a los usuarios.

La entrada Cómo optimizar un articulo de WordPress para optimizar el SEO se publicó primero en Aula Wordpress.

Agregar texto a la derecha del menú móvil de Divi

lastutok — Sun, 15 Jan 2023 06:22:32 +0000

En este tutorial te mostraré cómo agregar texto al lado derecho del menú móvil de Divi (el icono de hamburguesa) y cambiar el icono de hamburguesa por una X cuando el menú está abierto.

CSS

Agrega el siguiente CSS al archivo style.css de tu tema hijo o en el campo CSS Personalizado de la pestaña Opciones Generales del Tema Divi.

/* Colocar la palabra "MENÚ" después del icono de hamburguesa móvil. */ .mobile_menu_bar:after { content: 'MENU'; position: relative !important; bottom: 10px; left: 10%; color: #c4c4c4; }

/*Cambiar el icono de hamburguesa a X cuando está abierto*/
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
}

Dependiendo del tamaño de tu barra de menú, probablemente tendrás que experimentar con el valor de abajo en el CSS.

Y así tienes una manera muy fácil de hacer que el menú móvil hamburguesa sea un poco más comprensible para aquellos que no saben lo que es.

La entrada Agregar texto a la derecha del menú móvil de Divi se publicó primero en Aula Wordpress.

Agregar un texto antes de los botones Share de Addthis

lastutok — Thu, 08 Dec 2022 19:50:48 +0000

Antes se ve de esta manera:

.at-below-post.addthis_tool:before {
padding-top: 25px!important;
content: «¡ Compártelo ! «!important;
visibility:visible;
font-size: 14px;
font-weight: bold;
color: #000;
}

Una vez que agregamos el código anterior, tendremos el siguiente resultado:

La entrada Agregar un texto antes de los botones Share de Addthis se publicó primero en Aula Wordpress.

Cómo reproducir videos automáticamente en el módulo de video Divi y ocultar controles

lastutok — Mon, 01 Aug 2022 03:16:57 +0000

En este tutorial, compartiré los pasos para reproducir videos automáticamente en el módulo de video Divi y ocultar los controles en el video.

Antes de comenzar con el tutorial, es importante saber que no es posible reproducir automáticamente videos con sonido. Los navegadores bloquearán la carga del video si intenta reproducirlo sin silenciar.

Otra cosa a tener en cuenta es que el código de reproducción automática, solo funcionará en videos auto alojados.

Esto no funcionará para reproductores de video de terceros como YouTube o Vimeo.

Ahora comencemos.

1. Agregar la clase CSS al módulo de video
Lo primero que se debe hacer es agregar una clase CSS personalizada al módulo de video. Esto es para que el código no afecte a todos los módulos de video en su sitio web.

Puedes agregar la Clase CSS dentro de la Configuración del módulo de video > Avanzado > ID y clases de CSS > Clase CSS. Para este tutorial, le agregaremos la clase video-autoplay.

Aquí hay una captura de pantalla para ayudar a comprender dónde agregar la clase CSS en la configuración del módulo de video.

2. Agregar el siguiente código jQuery paraa la reproducción automática de video en las opciones de tema
Debes agregar el código en: DIVI> Opciones de tema> Integración> Agregar código a la de su blog.

< script>
jQuery(document).ready(function() {
if (jQuery(‘.video-autoplay .et_pb_video_box’).length !== 0) {
jQuery(‘.video-autoplay .et_pb_video_box’).find(‘video’).prop(‘muted’, true);
jQuery(«.video-autoplay .et_pb_video_box»).find(‘video’).attr(‘loop’, ‘loop’);
jQuery(«.video-autoplay .et_pb_video_box»).find(‘video’).attr(‘playsInline’, »);

jQuery(«.video-autoplay .et_pb_video_box»).each(function() {
jQuery(this).find(‘video’).get(0).play();
});
jQuery(‘.video-autoplay .et_pb_video_box’).find(‘video’).removeAttr(‘controls’);
}
});
< /script>

(Quitar espacio entre < script y < /script)

Eso es todo. Ahora, cada módulo de video en tu sitio que tenga la clase video-autoplay, reproducirá automáticamente el video.

Si no estás seguro de dónde agregar el código, aquí hay una captura de pantalla para ayuda.

El código anterior silencia el video, lo configura para que se reproduzca en bucle y oculta los controles en él. Si desea deshabilitar el bucle del video, puede eliminar la línea número 5 del código.

jQuery(«.lwp-video-autoplay .et_pb_video_box»).find(‘video’).attr(‘loop’, ‘loop’);

Y si desea mostrar controles en el video, debe eliminar la línea número 11 del código.

jQuery(‘.lwp-video-autoplay .et_pb_video_box’).find(‘video’).removeAttr(‘controls’);

La entrada Cómo reproducir videos automáticamente en el módulo de video Divi y ocultar controles se publicó primero en Aula Wordpress.

Cambiar el logotipo de DIVI solo en dispositivos móviles

lastutok — Thu, 28 Jul 2022 05:29:01 +0000

Use este código cuando desee mostrar un logotipo diferente en el dispositivo móvil que el logotipo que se muestra en el escritorio. Esto está configurado para dispositivos de 980 píxeles de ancho y menos, y puede cambiar esa configuración cambiando el valor.

@media only screen and (max-width: 980px) {
.et_show_nav #logo {
content: url(‘URL de la imagen de logo alternativo’) !important;
}
header#main-header {
padding-top: 0px !important;
}
}

La entrada Cambiar el logotipo de DIVI solo en dispositivos móviles se publicó primero en Aula Wordpress.