WordPress Editor Showdown: HTML Editor vs Visual Editor, ¿cuál es mejor para usted?

La edición de contenidos es una parte integral de wordpress.Editor HTMLIdeal para desarrolladores que necesitan un alto grado de personalización y control sobre el diseño de las páginas;Editor visualIdeal para usuarios habituales que no saben codificar, es fácil editar contenidos rápidamente. Elegir el editor adecuado puede hacer que tu artículo o página sea el doble de eficaz. Hoy compararemos Editor HTML responder cantando Editor visualTe ayuda a encontrar rápidamente la mejor herramienta de edición de sitios web para ti.

1. ¿Qué es el editor HTML de WordPress?

WordPress Editor HTML es un editor de texto plano que permite a los usuarios editar directamente el código HTML. Al editar un post o una página en el backend, tras seleccionar el editor HTML, puedes ver el código fuente de la página y modificarlo directamente.

Esto significa que puede introducir o modificar directamente etiquetas HTML, estilos CSS, código JavaScript, etc. para controlar la visualización de la página. Como se muestra en la figura, este es el editor HTML que se muestra.

Características del editor HTML:

Edición directa del código fuenteControl preciso de la estructura y el diseño de la página.
Mayor personalizaciónEl código HTML: editando el código HTML, puedes implementar funciones avanzadas como formularios personalizados, incrustar widgets de terceros, etc.
Para usuarios con experiencia en codificaciónPara los desarrolladores o los que tienen HTML usuarios básicos, el editor HTML ofrece más flexibilidad.

Escenarios de uso del editor HTML:

Páginas personalizadas: El editor HTML es la mejor opción cuando se necesita un contenido de página muy personalizado.
Incrustación de código de tercerosPor ejemplo, incrustación de vídeos de YouTube, Google Maps, códigos de anuncios, etc.
Ajuste preciso de la disposiciónLos editores HTML ofrecen más libertad cuando se necesita un control total sobre la estructura y el diseño de una página.

2. ¿Qué es el editor visual de WordPress?

WordPress Editor visual(por ejemplo Editor Gutenberg también conocido como editor de bloques) es unaLo que ves es lo que hay (WYSIWYG)(WYSIWYG) que permite a los usuarios editar fácilmente el contenido a través de una interfaz gráfica. No es necesario saber HTML ni código alguno para diseñar una página arrastrando y soltando componentes. El editor visual permite ver directamente el estilo y el diseño del contenido que se está editando, lo que hace que su manejo sea muy intuitivo.

Funciones del editor visual:

Lo que ves es lo que hay (WYSIWYG): Puede ver directamente los cambios realizados sin tener que consultar el código fuente.
Sencilla función de arrastrar y soltarPuede construir el contenido de la página añadiendo, eliminando y ajustando bloques.
Adecuado para usuarios sin experiencia en programación: incluso sin conocimientos básicos de HTML, los usuarios pueden utilizar fácilmente la aplicaciónEditor visualCrear páginas y artículos.

Escenarios de uso del editor visual:

Edición rápida de contenidos: Se aplica a la edición cotidiana de artículos o páginas en los que no se requiere una personalización profunda.
Arrastrar y soltar componentes para construir la páginaPor ejemplo, diseñar rápidamente una página utilizando bloques de imágenes, bloques de párrafos, bloques de botones, etc.

Racionalización del flujo de trabajo: Adecuado para usuarios en general y escritores de blogs, especialmente aquellos webmasters sin experiencia en programación.

3. Editor HTML de WordPress frente a editor visual

funcionalidad	Editor HTML	Editor visual
método operativo	Edite directamente el código fuente y modifique manualmente HTML, CSS y JavaScript.	Edición de contenidos WYSIWYG (What You See Is What You Get) directamente mediante bloques de arrastrar y soltar.
personalización	Diseño de página totalmente personalizable para una personalización avanzada	Relativamente simplificado para la edición general de contenidos, pero menos personalizable
usuario aplicable	Para desarrolladores o usuarios con conocimientos de HTML	Adecuado para usuarios principiantes o sin experiencia en programación
Contenidos útiles	Control de todos los detalles, incluidas etiquetas HTML, secuencias de comandos y estilos	Edite texto, imágenes, botones y otros elementos principalmente mediante bloques predefinidos
destreza	Alto, capaz de realizar funciones avanzadas y controlar cada parte de la página	Inferior, centrado principalmente en el diseño de la página y la presentación del contenido
curva de aprendizaje	Steeper, se requieren algunos conocimientos de HTML/CSS	Fácil de usar, no requiere experiencia en programación
Escenarios aplicables	Diseño personalizado, código externo incrustado, modificaciones del desarrollador	Publicación rápida de contenidos, entradas de blog, diseños de página sencillos
Vista previa en tiempo real	Es necesario actualizar manualmente la página para ver el efecto.	Vista previa en tiempo real, vea el efecto inmediatamente al editar el contenido

4. ¿Cuándo elijo el editor HTML y cuándo el editor visual?

Selecciona la escena del editor HTML:

Gran demanda de personalización de páginasSi necesita personalizar completamente la estructura de la página, como ajustar manualmente el diseño, incrustar código personalizado, etc., el editor HTML es la mejor opción.
Requiere la incrustación de código de terceros: Los editores HTML ofrecen mayor flexibilidad para incrustar código publicitario, formularios, widgets de terceros, etc.
Desarrollo de funcionalidades complejas: Si su página requiere una secuencia de comandos o una funcionalidad específica, la opciónEditor HTMLPermite manipular el código directamente para conseguir efectos más complejos.

Seleccione la escena para el editor visual:

Edición rápida de contenidos: Si su objetivo es publicar contenidos rápidamente, escribir un blog o mostrar imágenes, el uso de un editor visual puede ahorrarle tiempo y esfuerzo.
Usuarios que no necesitan experiencia en programaciónSi no sabes programar o no quieres modificar la página manualmente, utiliza la funciónEditor visualSerá más intuitivo y fácil de seguir.
Diseño simplificadoSi sólo desea añadir texto, imágenes, botones, etc., un editor visual ofrece suficiente flexibilidad y es más fácil de dominar.

5. Cambiar al modo HTML en el Editor Visual de Gutenberg: Un puente entre la libertad y la visualización

Aunque el editor Gutenberg de WordPress es conocido por su enfoque WYSIWYG (What You See Is What You Get) para construir páginas sobre la marcha, conserva las mismas potentes capacidades de edición de HTML. Puedes cambiar a la vista de código siempre que lo necesites, lo que te da un control más granular sobre un bloque o una página completa. Esta flexibilidad es uno de los aspectos más destacados de la moderna experiencia de edición de WordPress.

1. Cómo pasar al modo HTML (nivel de bloque)

Si sólo desea realizar ediciones HTML en un bloque concreto, puede hacerlo:

En el editor visual de Gutenberg, haga clic en el iconobloque.
Haga clic en el icono de tres puntos (Más opciones) situado en la esquina superior derecha del bloque.
opción "Editar en HTML".
En este punto verás el código HTML para el bloque, haz los cambios para mantenerlo.
Una vez realizados los cambios, pulse de nuevo "Editar como visualización" para volver a la vista original.

🔧 Escenarios aplicables:

palo <span> tal vez <style> y otras etiquetas especiales.
Ajuste con precisión las propiedades de las imágenes o los estilos de los botones.
Añadir clase personalizada, atributos de datos, etc.

2. Cómo cambiar al modo de edición HTML de página completa (editor de código)

Si desea realizar cambios uniformes en el código fuente de todo un artículo o página, siga estos pasos:

En la esquina superior derecha del editor, haga clic en Menú de tres puntos verticales(Más herramientas y opciones).
opción "Editor de código"(Editor de código).
Todo el contenido de la página se convertirá en formato HTML y podrá modificar directamente el código de todos los bloques.
Cuando haya terminado, haga clic en la esquina superior derecha para volver al "Editor visual".

⚠️ Advertencias:

Tenga especial cuidado con los errores de sintaxis cuando realice cambios en el editor de código, ya que pueden afectar a la representación de toda la página.
Ideal para afinar el diseño global, añadir etiquetas de esquema, ajustar la estructura de anidamiento, etc.

3. ¿Por qué es importante esta característica?

Esta función de "alternancia perfecta entre visualización y edición HTML" convierte a WordPress en unApto para principiantes pero no limitado a usuarios avanzadosLa plataforma de creación. En lugar de copiar y pegar una y otra vez entre dos editores, ustedPuede afinar aún más los detalles con código basado en la visualización de la operaciónEsta es una de las cosas más importantes que buscan muchos desarrolladores web y creadores de contenidos.

6. Resumen

Los dos editores que ofrece WordPress tienen sus propias ventajas.HTML editor (software)Ideal para desarrolladores que necesitan un alto grado de personalización y control sobre el diseño de las páginas;Editor visualPara los usuarios normales que no saben codificar, es fácil editar rápidamente los contenidos.

El editor que elijas dependerá enteramente de tus necesidades: si quieres tener un control preciso sobre la página y poder manipular el código, un editor HTML es la mejor opción; si te centras en la simplicidad y en una experiencia de edición eficiente, un editor visual es más apropiado.

Espero que este artículo te ayude a comprender la diferencia entre los editores HTML y los editores visuales, para que puedas elegir según tus necesidades y mejorar la eficacia de la edición de contenidos web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres