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, veremos de cerca el bloque HTML personalizado. Veremos cómo agregarlo a sus publicaciones y páginas, ver su configuración y opciones, ver consejos sobre cómo usarlo y ver las preguntas frecuentes.
Suscríbete a nuestro canal de Youtube
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 Intro 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 bloque HTML personalizado
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 las ve todas, haga clic debajo del bloque en una nueva área y luego se mostrarán el resto de las herramientas 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, convertirlo en bloques y abrir las opciones.
Veamos cada configuración en detalle.
Cambiar bloque o estilo 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 bloque HTML personalizado
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 a medida que lo arrastre.
Una vez que vea que aparece la línea azul donde desea colocar 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 o dos secciones.
HTML personalizado Bloquear HTML y vista previa
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 mientras 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 hacer ediciones y ver rápidamente los resultados. Este ejemplo muestra un mapa de Google incrustado tal 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 el HTML.
Aquí está el modo de vista previa que muestra cómo se verá en la parte delantera.
Opciones de bloque HTML personalizado
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 en 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.
Sugerencias y mejores prácticas para usar el bloque HTML personalizado de manera efectiva
Use este bloque para diseñar su texto y editar HTML primero y luego use la herramienta Convertir en bloques para crear párrafos u otros tipos de contenido. Esto le brinda más control sobre el contenido y es especialmente útil si no necesita conservar la versión HTML. Puede ver la vista previa a medida que avanza. Esto evita que tengas 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 incrustados, anuncios, videos, etc. Esto evita que tenga que cambiar a la vista del Editor de código y agregar el código en 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 las etiquetas de página y publicación. Esto crea un ambiente de trabajo más limpio que es 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 de vista previa con frecuencia para asegurarse de que su HTML se ejecute de la manera que desea.
No utilice 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 la publicación en el Editor visual.
¿Cómo se puede usar el bloque HTML personalizado?
Se puede agregar cualquier HTML con las etiquetas admitidas. 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á por color el marcado?
No, el marcado en el bloque se parece a cualquier editor de texto.
¿El bloque HTML personalizado ejecuta el HTML?
Ejecuta el HTML de forma normal en el front-end. 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.
No. Puede ver una lista de etiquetas HTML compatibles en la página Código compatible de WordPress .
Conclusión
Esa es nuestra mirada 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 mostrándose normalmente. Luego puede trabajar con HTML en el bloque y obtener una vista previa en cualquier momento. El bloque HTML personalizado proporciona una manera fácil 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