Un bloque HTML personalizado le permite agregar contenido HTML y editarlo sin tener que ver la página o publicar como HTML. Puede incrustar código HTML e incluso usarlo para marcar su texto, luego convertirlo en un bloque de párrafo con texto estilizado si lo desea. Este bloque es excelente 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 más de cerca un bloque HTML personalizado. Veremos cómo agregarlo a sus publicaciones y páginas, revisar su configuración y opciones, ver consejos para usarlo y leer algunas preguntas frecuentes.
Suscríbete a nuestro canal de YouTube
¿Cómo agregar un bloque HTML personalizado a su publicación o página?
Para agregar un bloque HTML personalizado a su contenido, coloque el cursor donde desea que aparezca el bloque y seleccione la herramienta Insertar. Se abrirá un cuadro de búsqueda, donde puede ingresar su término de búsqueda o desplazarse por las opciones. Búsqueda html y seleccione el bloque cuando aparezca en los resultados.
Como alternativa, puede escribir /html donde desea que aparezca el bloque y presione Entrar o selecciónelo de las opciones sobre el área del bloque.
Ahora tiene un bloque HTML personalizado en su contenido donde puede agregar código HTML. Veremos algunos ejemplos con el código a medida que avanzamos en la configuración.
Configuraciones y opciones de bloques HTML personalizados
A diferencia de la mayoría de los bloques, un 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 parte del bloque para ver sus herramientas. Si no las ve todas, haga clic debajo del bloque en una nueva área y el resto de las herramientas aparecerán cuando vuelva a seleccionar el bloque.
Cada bloque tiene sus propios controles específicos donde puede elegir opciones para el bloque. El 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 opciones.
Repasemos 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 convertir el bloque en otros tipos de bloques. Las opciones incluyen código, columnas o un grupo.
Código – Convierte un bloque HTML personalizado en un bloque de código para que se puedan mostrar diferentes tipos de código.
columnas – coloca el bloque en columnas.
Grupo – agrega un bloque a un grupo para que se puedan personalizar como un solo bloque.
Herramienta de arrastre de bloque HTML personalizado
La herramienta de arrastre contiene seis puntos que puede agarrar con el mouse para moverlos.
Luego simplemente arrastre el bloque a cualquier parte del contenido y suéltelo. Aparece una línea azul para indicar dónde se colocará el bloque a medida que lo arrastra.
Cuando vea aparecer la línea azul donde desea bloquear, suelte el botón del mouse y el bloque se colocará en su nueva ubicación.
Mover un bloque HTML personalizado
Las flechas hacia arriba y hacia abajo mueven el bloque una sección de contenido cada vez que hace clic en él. 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 avanzar un bloque una sección o dos.
Bloque HTML HTML personalizado y vista previa
Los botones HTML y Vista previa le permiten elegir cómo funciona el bloque con HTML en el editor. El botón HTML está seleccionado de forma predeterminada. Esto muestra el código HTML como código, no su ejecución. Este ejemplo muestra el HTML de Google Maps.
Al seleccionar Vista previa, se muestra cómo aparecerá el HTML en la interfaz de usuario cuando se ejecute en el navegador. Es fácil cambiar entre vistas para editar su HTML y ver cómo se verá para el usuario final. Es una gran manera de hacer cambios y ver los resultados rápidamente. Este ejemplo muestra un mapa de Google incrustado tal como aparecería en el contenido.
Como otro ejemplo, aquí hay algo de HTML para agregar estilo a una línea de texto. Esta es una vista HTML donde puedo crear y editar HTML.
Aquí hay un modo de vista previa que le muestra cómo se verá desde el frente.
Opciones de bloque HTML personalizado
En el lado 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 configuraciones, convertir en bloques, copiar, duplicar, insertar antes o después, mover, agregar a bloques reutilizables, agrupar o eliminar un bloque.
Esto es para lo que son las opciones de bloque HTML personalizado:
Ocultar más configuraciones – esto oculta la barra lateral derecha, expandiendo el lienzo.
Convertir a bloques – esto convierte el contenido a otros bloques apropiados. El texto se convertirá en bloques de párrafos, las imágenes en bloques de imágenes, etc. El código incrustado, como el código de Google Map que utilicé en mi ejemplo, seguirá siendo un bloque HTML personalizado. Si es posible convertir otro HTML en el bloque, se eliminará del bloque cuando se coloque en otro bloque.
Copiar – copia el bloque en el portapapeles, para que pueda pegarlo en cualquier parte del editor.
Duplicar – esto coloca un bloque duplicado debajo del original.
Insertar antes – agrega un área de bloque antes de un bloque HTML personalizado para que pueda colocar otro bloque.
Insertar después – agrega un área por bloque donde se puede colocar otro bloque.
Mover a – te permite mover el bloque hacia arriba o hacia abajo con las teclas de flecha. Moverás la línea azul. Cuando llegue a donde lo desea, presione enter y el bloque se moverá de inmediato.
Agregar a bloques reutilizables – agrega un bloque HTML personalizado a los bloques reutilizables para que pueda reutilizarlo en cualquier página o publicación.
Grupo – agrega un bloque a un grupo para que pueda personalizar los bloques como una sola unidad.
Eliminar bloque – elimina el bloque.
Sugerencias y mejores prácticas para usar un bloque HTML personalizado de manera eficiente
Use este bloque para diseñar el texto y editar el HTML primero, luego use la herramienta Convertir en bloques para crear párrafos u otros tipos de contenido. Esto le da más control sobre su contenido y es especialmente útil si no necesita mantener la versión HTML. Puede obtener una vista previa mientras viaja. De esta manera, no tiene que cambiar entre 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. De esta manera, no tiene que ir a la vista del Editor de código y agregar código a otros tipos de bloques, como un bloque de párrafo.
El uso de este bloque en lugar de las versiones de página y publicación en el editor de código le impide trabajar con las etiquetas de página y publicación. Esto crea un entorno de trabajo más limpio que es más fácil de usar.
Ya sea que esté agregando su propio código HTML o incrustando código de otra fuente, use la función de vista previa con frecuencia para asegurarse de que su código HTML funcione según lo previsto.
No utilice la etiqueta de secuencia de comandos en un bloque. Se puede eliminar y luego su código no funcionará.
Preguntas frecuentes sobre un bloque HTML personalizado
¿Qué hace un bloque HTML personalizado?
Le permite ingresar código HTML en el campo para que pueda trabajar con él mientras mantiene la página o la publicación en el editor visual.
¿Cómo se puede utilizar un bloque HTML personalizado?
Se puede agregar cualquier código HTML con 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 texto y luego convertirlo en un bloque de párrafo.
¿Codificará por colores las etiquetas?
No, las etiquetas del bloque se parecen a cualquier editor de texto.
¿Un bloque HTML personalizado ejecuta HTML?
Ejecuta HTML como de costumbre en la interfaz de usuario. En el editor, puede ejecutar código HTML o mostrar código. Depende de usted por cuál navegar y puede elegir entre dos opciones en cualquier momento con un solo clic de un botón.
¿Se admiten todas las etiquetas HTML?
No. Puedes ver la lista de etiquetas HTML soportadas por WordPress Código compatible lado.
Solicitud
Este es nuestro vistazo a un bloque HTML personalizado. Este bloque no está destinado solo a desarrolladores. El principal beneficio 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 del contenido que se muestra normalmente. Luego puede trabajar con el HTML en el bloque y mostrarlo 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. ¿Está utilizando un bloque HTML personalizado? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de enterlinedesign / shutterstock.com
