Cómo utilizar el bloque HTML personalizado de WordPress

El bloque HTML personalizado le permite agregar contenido HTML y editarlo sin tener que ver la página o publicar como HTML. Puede incrustar HTML e incluso usarlo para marcar su texto y luego convertirlo en un Bloque de párrafo con texto con estilo si lo desea. Este bloque es ideal para aquellos que prefieren trabajar en HTML y es una de las mejores formas de incrustar ciertos tipos de código, como Google Maps.

En este artículo, analizaremos de cerca el bloque HTML personalizado. Veremos cómo agregarlo a sus publicaciones y páginas, veremos su configuración y opciones, veremos consejos sobre cómo usarlo y veremos las preguntas frecuentes.

Suscríbete a nuestro canal de Youtube

Cómo agregar el bloque HTML personalizado a su publicación o página

Para agregar el bloque HTML personalizado a su contenido, coloque el cursor donde desea que aparezca el bloque y seleccione la herramienta Insertador. Se abrirá un cuadro de búsqueda donde puede ingresar un término de búsqueda o desplazarse por sus opciones. Busque html y seleccione el bloque cuando se muestre en los resultados.

Alternativamente, puede escribir / html donde desea que aparezca el bloque y presionar enter o seleccionarlo de las opciones sobre el área del bloque.

Ahora tiene un bloque HTML personalizado dentro de su contenido donde puede agregar HTML. Veremos algunos ejemplos con código a medida que avanzamos en la configuración.

Configuración y opciones de bloques HTML personalizados

A diferencia de la mayoría de los bloques, el Bloque HTML personalizado no incluye opciones en la barra lateral del editor. Encontrarás todas las opciones que necesitas en la barra de herramientas.

Barra de herramientas de bloque HTML personalizado

Haga clic en cualquier lugar dentro del bloque para ver sus herramientas. Si no los ve todos, haga clic debajo del bloque en un área nueva, y luego el resto de las herramientas se mostrarán cuando vuelva a seleccionar el bloque.

Cada bloque tiene sus propios controles específicos donde puede seleccionar opciones para el bloque. Un pequeño conjunto de opciones de bloque encima de la barra de herramientas le permite cambiar el tipo de bloque, convertir a bloques y abrir las opciones.

Veamos cada configuración en detalle.

Bloque o estilo de cambio de HTML personalizado

Al seleccionar HTML en las opciones, se abre un cuadro desplegable donde puede transformar el bloque en otros tipos de bloques. Las opciones incluyen Código, Columnas o Grupo.

Código : transforma el bloque HTML personalizado en un bloque de código para que pueda mostrar diferentes tipos de código.

Columnas : coloca el bloque dentro de las columnas.

Grupo : agrega el bloque a un grupo para que pueda ajustarlos como un solo bloque.

Herramienta de arrastre de bloques HTML personalizada

La herramienta de arrastre incluye seis puntos que puede agarrar con el mouse para moverla.

Luego, simplemente arrastre el bloque a cualquier lugar que desee dentro de su contenido y suéltelo. Aparecerá una línea azul que indica dónde se colocará el bloque mientras lo arrastra.

Una vez que vea que aparece la línea azul donde desea el bloque, suelte el botón del mouse y su bloque se colocará en su nueva ubicación.

Movimiento de bloque HTML personalizado

Las flechas hacia arriba y hacia abajo mueven el bloque una sección de contenido cada vez que haces clic en ellas. La pantalla se desplazará a medida que el bloque se mueva automáticamente a su nueva ubicación. Esta es una manera fácil de mover el bloque una sección o dos.

Vista previa y HTML de bloque HTML personalizado

Los botones HTML y Vista previa le permiten seleccionar cómo funciona el bloque con HTML en el editor. El botón HTML está seleccionado de forma predeterminada. Esto muestra el HTML en su forma de código en lugar de ejecutarlo. Este ejemplo muestra el HTML de un mapa de Google.

Al seleccionar Vista previa, se muestra cómo se verá el HTML en la interfaz a medida que se ejecuta dentro del navegador. Es fácil alternar entre las vistas para editar el HTML y ver cómo se vería el usuario final. Esta es una excelente manera de realizar ediciones y ver rápidamente los resultados. Este ejemplo muestra un mapa de Google incrustado como aparecería dentro del contenido.

Como otro ejemplo, aquí hay algo de HTML para agregar estilo a una línea de texto. Esta es la vista HTML, donde puedo crear y editar HTML.

Aquí está el modo de vista previa que muestra cómo se verá en la interfaz.

Opciones de bloques HTML personalizados

En el extremo derecho de la barra de herramientas hay tres puntos en una pila vertical. Estos tres puntos abren un conjunto de 10 opciones en tres divisiones que le permiten ocultar la configuración, convertir a bloques, copiar, duplicar, insertar antes o después, mover, agregar a bloques reutilizables, agrupar o eliminar el bloque.

Esto es lo que pueden hacer las opciones de Bloque HTML personalizado:

Ocultar más configuraciones : esto oculta la barra lateral derecha, expandiendo su espacio de trabajo.

Convertir a bloques : esto convierte el contenido a los otros bloques apropiados. El texto se convertirá en bloques de párrafo, las imágenes en bloques de imagen, etc. El código incrustado, como el código de Google Map que utilicé en mi ejemplo, permanecerá como un bloque HTML personalizado. Si se puede convertir otro HTML dentro del bloque, se eliminará del bloque y se colocará en un bloque diferente.

Copiar : esto copia el bloque en su portapapeles para que pueda pegarlo en cualquier lugar dentro del editor.

Duplicar : coloca un duplicado del bloque debajo del original.

Insertar antes : esto agrega un área de bloque antes del Bloque HTML personalizado para que pueda colocar otro bloque.

Insertar después : esto agrega un área después del bloque donde puede colocar otro bloque.

Mover a : esto le permite mover el bloque hacia arriba o hacia abajo con las teclas de flecha. Moverás una línea azul. Cuando llegue a la ubicación que desea, presione enter y el bloque se moverá instantáneamente.

Agregar a bloques reutilizables : agrega el bloque HTML personalizado a sus bloques reutilizables para que pueda usarlo nuevamente en cualquier página o publicación.

Grupo : esto agrega el bloque a un grupo para que pueda ajustar los bloques como una sola unidad.

Eliminar bloque : esto elimina el bloque.

Consejos y prácticas recomendadas para utilizar eficazmente el bloque HTML personalizado

Use este bloque para diseñar su texto y editar HTML primero y luego use la herramienta Convertir a bloques para crear párrafos u otros tipos de contenido. Esto le da más control sobre el contenido y es especialmente útil si no necesita mantener la versión HTML. Puede ver la vista previa sobre la marcha. Esto evita que tenga que cambiar entre los editores visuales y de código en la configuración de WordPress en la barra lateral.

Use este bloque para mapas, anuncios, videos, etc. incrustados. Esto le evita tener que cambiar a la vista del Editor de código y agregar el código a otros tipos de bloques, como el Bloque de párrafo.

El uso de este bloque en lugar de la versión del editor de código de sus páginas y publicaciones evita que tenga que trabajar con la página y las etiquetas de publicación. Esto crea un entorno de trabajo más limpio y más fácil de usar.

Ya sea que esté agregando su propio HTML o incrustando el código de otra fuente, use la función Vista previa a menudo para asegurarse de que su HTML se ejecutará de la manera que desea.

No use la etiqueta de secuencia de comandos en el bloque. Podría eliminarse y luego su código no funcionaría.

Preguntas frecuentes sobre el bloque HTML personalizado

¿Qué hace el bloque HTML personalizado?

Le permite ingresar HTML en un campo para que pueda trabajar con él mientras mantiene la página o publicación en el Editor visual.

¿Cómo se puede utilizar el bloque HTML personalizado?

Se puede agregar cualquier HTML con las etiquetas compatibles. Puede usar el bloque para anuncios, mapas, videos, cualquier cosa con iframes, tablas, etc. También es una manera fácil de marcar su texto y luego convertirlo en un bloque de párrafo.

¿Codificará con colores el marcado?

No, el marcado en el bloque se parece a cualquier editor de texto.

¿El bloque HTML personalizado ejecuta HTML?

Ejecuta el HTML de forma normal en la interfaz. En el editor, puede ejecutar el HTML o mostrarle el código. Depende de usted lo que ve, y puede seleccionar entre las dos opciones en cualquier momento con un solo clic de botón.

¿Son compatibles todas las etiquetas HTML?

No. Puede ver una lista de etiquetas HTML que son compatibles en la página de código compatible con WordPress.

Conclusión

Ese es nuestro vistazo al bloque HTML personalizado. Este bloque no es solo para desarrolladores. La principal ventaja de usar este bloque es que no tiene que cambiar entre el editor visual y el editor de código para trabajar con HTML. Esto significa que puede trabajar con el resto de su contenido que se muestra normalmente. A continuación, puede trabajar con HTML en el bloque y obtener una vista previa en cualquier momento. El bloque HTML personalizado proporciona una forma sencilla de trabajar con HTML en el editor de bloques.

Queremos escuchar de ti. ¿Utiliza el bloque HTML personalizado? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de enterlinedesign / shutterstock.com