WYSIWYG

El campo WYSIWYG coloca el editor de texto enriquecido de WordPress en un widget personalizado que crea con los complementos maestros Creador de widgets. Los editores obtienen negrita, cursiva, enlaces, listas y el botón Agregar medios, la misma barra de herramientas que usan al escribir una publicación. Su widget recibe HTML formateado y lo imprime con un token. Es el campo para cualquier región de texto donde un área de texto simple aplanaría el formato.

WYSIWYG es uno de los campos que puede utilizar en el Widget Builder de la versión gratuita. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo WYSIWYG #

• Agrega el editor de texto enriquecido al panel de su widget en Elementor, con pestañas Visual y Código y un botón Agregar medios.
• Guarda lo que los editores escriben como HTML.
• Lo imprime a través de un token como {{ member_bio }}, filtró la forma en que WordPress filtra el contenido de la publicación.
• Mantiene el formato: párrafos, negrita, cursiva, enlaces, listas y encabezados, todos renderizados.
• Toma un valor predeterminado, que puede incluir marcado, por lo que un widget nuevo muestra un ejemplo trabajado.

¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero, luego regresa con un widget abierto.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalados y activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget “Miembro del equipo”: campos de texto para el nombre y la función, y un campo WYSIWYG con nombre member_bio para la biografía.

Cómo agregar un campo WYSIWYG #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Agregue una sección sobre el Contenido tab, por ejemplo “Miembro”.
3. Tipo wysi en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar WYSIWYG en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

Explicación de las opciones de campo WYSIWYG #

• Etiqueta: el texto encima del editor en Elementor, por ejemplo “Bio”. El campo comienza con la etiqueta “Contenido”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo member_bio.
• Descripción: una pista que se muestra debajo del editor en Elementor. Úselo para establecer expectativas, como “Dos o tres oraciones. Negrita, los enlaces y las listas están bien”
• Valoarea implicită: el contenido inicial. Este es un cuadro de texto sin formato, así que escriba usted mismo el HTML, por ejemplo, un párrafo con a strong etiqueta y un enlace.

Bloque de etiquetas está activado de forma predeterminada aquí, que es lo que desea: el editor necesita todo el ancho del panel. Dejar Selector vacío, ya que un bloque de texto no es un valor CSS.

El resto de Configuraciones Comunes se comporta como en otros campos, incluido Condiciones si la región solo debería aparecer cuando se establece otro campo.

En nuestras pruebas, la tarjeta de campo dentro del generador mostró el valor predeterminado como HTML sin formato en su pequeño editor de vista previa. Esa es sólo la vista previa del propio constructor. Elementor representa el mismo valor predeterminado que el texto formateado.

Imprime el contenido en tu plantilla #

Un token coloca toda la región. Envuélvelo en un recipiente que puedas peinar y guárdalo para que un campo vacío no deje envoltorios perdidos:

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

Estilee la región desde el panel CSS apuntando a las etiquetas que escribe el editor:

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

No agregues raw a un token WYSIWYG. El token simple ya representa el formato y raw sólo retira el filtro de seguridad.

Lo que el filtro guarda y deja caer #

El valor pasa por el mismo filtro que usa WordPress para el contenido de la publicación. En nuestras pruebas, encabezados, párrafos, strong, em, listas, enlaces e incluso en línea style los atributos se mantuvieron sin cambios. Un iframe se eliminó y se eliminó una etiqueta de script sin ejecutarse.

Un detalle que debe conocer antes de entregar el widget a un cliente: cuando se pegaba una etiqueta de script a través de la pestaña Código, la etiqueta se eliminaba pero el JavaScript que contenía permanecía en la página como texto sin formato, por lo que aparecía una línea de código en el medio de la biografía. Nada te advierte. Dígale a los editores que peguen texto, no incrustaciones, y verifique la pestaña Código si aparecen caracteres perdidos en una página.

Utilice el control WYSIWYG en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El campo muestra el editor completo debajo de su etiqueta: Agregar medios, las pestañas Visual y Código, un menú desplegable en formato de párrafo, negrita, cursiva, subrayado, listas, un botón de enlace y pantalla completa.

Los editores escriben como lo hacen en una publicación. La vista previa se actualiza tan pronto como el foco sale del editor. El Código tab muestra el HTML subyacente, que es útil para limpiar el formato pegado.

Aquí está la carta terminada en el frente, con la frase en negrita, el enlace y la lista, todos provenientes del campo:

Casos de uso comunes #

• Biografías de miembros del equipo y cajas de autores.
• Descripciones de características o servicios que necesitan una lista o una frase en negrita.
• Cuerpos testimoniales con cita y línea de atribución.
• Cualquier región de texto de formato largo en una tarjeta, cuadro o widget de panel.

Consejos para trabajar con el campo WYSIWYG #

• Dale un valor predeterminado con margen real. Luego, los editores ven el tipo de contenido que espera la región y usted conoce los renderizados de formato.
• Establezca la longitud en la Descripción. “Dos o tres oraciones” guarda muchas correcciones de diseño más adelante.
• Estilee las etiquetas, no el texto. Reglas para p, a y ul dentro de su clase de contenedor, mantenga la región consistente independientemente de lo que escriban los editores.
• Guarde la ficha con {% if %} entonces un campo vacío no deja un contenedor vacío en la página.
• Doar text simplu? El Campo de área de texto es más ligero. Para marcar pegados o incrustar fragmentos, utilice Campo de código.

Preguntas frecuentes #

Envolviendo #

Coloque un campo WYSIWYG en una sección de Contenido, asígnele una etiqueta clara, una descripción útil y un valor predeterminado con marcado real, luego imprima el token dentro de un archivo {% if %} proteja y diseñe las etiquetas desde el panel CSS. Los editores obtienen la barra de herramientas que ya conocen y su widget obtiene un formato HTML limpio. Para texto sin formato utilice el Campo de área de texto, para fragmentos pegados el Campo de códigoși verifică precios por lo que incluye cada plan.