πŸ“ Guía completa del editor WYSIWYG de contenido en Webered

El editor WYSIWYG de Webered te permite editar tus páginas de forma visual, sin necesidad de conocimientos de código.

A continuación, te explicamos todas sus herramientas y funciones.

πŸ”Ή 1. Barra de herramientas principal

La barra de herramientas del editor tiene varias opciones organizadas en menús desplegables y botones de acceso rápido. Vamos a ver cada una en detalle.

wyswyg-67dc7f923542c.png

Menús principales

πŸ“Œ Edit (Editar)

Contiene opciones básicas de edición:

  • Deshacer (↩️ Undo): Revierte el último cambio realizado.
  • Rehacer (β†ͺ️ Redo): Restaura un cambio que fue deshecho.

πŸ“Œ Insert (Insertar)

Desde este menú podés agregar distintos elementos a tu contenido:

  • Imagen πŸ–ΌοΈ: Insertar una imagen desde la solapa "Imágenes" (ver más abajo el paso a paso).
  • Enlace πŸ”—: Agregar un hipervínculo a un texto o imagen.
  • Tabla πŸ“Š: Insertar una tabla para organizar información.
  • Carácter especial Ω: Agregar símbolos especiales como ®, ©, €, etc.
  • Línea horizontal ―: Separar secciones con una línea.

πŸ“Œ View (Vista)

  • Activar los caracteres invisibles.
  • Vista Previa
  • Pantalla completa: Expande el editor para ver y editar con más espacio.

πŸ“Œ Format (Formato)

Aquí se encuentran las opciones para dar estilo al texto:

  • Negrita (B): Resalta palabras en negrita.
  • Cursiva (I): Aplica cursiva al texto.
  • Subrayado (U): Agrega un subrayado al texto.
  • Tachado ( S ): Muestra el texto con una línea en el medio.
  • Color de texto 🎨: Cambia el color de las letras.
  • Color de fondo: Resalta texto con un color de fondo.

πŸ“Œ Table (Tabla)

Permite crear y modificar tablas. Opciones disponibles:

  • Insert Table: Define el número de filas y columnas.
  • Propiedades de la tabla: Ajusta el ancho, borde y alineación.
  • Agregar/eliminar filas o columnas.

πŸ“Œ Tools (Herramientas)

  • Código fuente (<>): Permite ver y editar el HTML del contenido.
  • Buscar y reemplazar πŸ”: Encuentra palabras y las reemplaza automáticamente.

πŸ”Ή 2. Botones rápidos en la barra de herramientas

Además de los menús, hay botones para acceder rápido a funciones clave:

  • πŸ–οΈ Formato de párrafo: Permite elegir estilos como títulos (H1, H2, H3) o párrafos normales.
  • πŸ“ Alineación de texto: Alinear a la izquierda, centro, derecha o justificar.
  • πŸ“‹ Listas: Crear listas numeradas (1, 2, 3) o con viñetas (•, β—‹).
  • πŸ–ΌοΈ Insertar imagen: Para agregar imágenes previamente subidas a la solapa "Imágenes". Ver punto 3
  • πŸŽ₯ Insertar Video: Para agregar videos desde enlaces o embebidos Ver punto 4
  • πŸ”— Insertar enlace: Agregar un enlace a una palabra o imagen.Ver punto 5
  • πŸ”² Insertar tabla: Para organizar información en filas y columnas Ver punto 6

πŸ–ΌοΈ 3. Cómo insertar imágenes paso a paso

Para agregar imágenes en tu contenido, seguí estos pasos:

A) Subir la imagen

  1. Ir a la solapa "Imágenes" en la parte superior del editor.
  2. Hacer clic en "Subir imagen".
  3. Seleccionar la imagen desde tu computadora y subirla.

B) Insertar la imagen en el contenido

  1. Volver a la solapa "Contenido".
  2. Hacer clic en el botón "Insertar imagen" de la barra de herramientas.
  3. Seleccionar la imagen previamente subida.
    imagenes-67dc7bdfef279.png
  4. Opcionalmente puedes agregar una descripción o ajustar el tamaño o alineación si es necesario. Dejando activada la marca de Restringir proporciones para evitar estiramiento de la imagen.

πŸŽ₯ 4. Cómo insertar videos de YouTube o Vimeo

A) Copiar el código de inserción

Si el video está en YouTube o Vimeo:

  1. Ingresá a YouTube o Vimeo y buscá el video que querés insertar.
  2. Hacé clic en el botón de "Compartir".
  3. Seleccioná la opción "Insertar" (Embed).
  4. Copiá el código HTML 

B) Insertarlo en el editor

  1. En el editor WYSIWYG de Webered, hacé clic en "Tools" y luego en "Código fuente (<>)."
  2. Pegá el código del iframe en el lugar donde querés que aparezca el video.
  3. Hacé clic en "Aceptar" o "Actualizar".
  4. Guardá los cambios y previsualizá la página.

πŸ’‘ Consejo: Para que el video se adapte bien a pantallas móviles, podés envolverlo en un div con una clase CSS que haga que el iframe sea responsive.

πŸ”— 5. Cómo agregar enlaces

Para enlazar un texto o imagen a otra página:

  1. Seleccionar el texto o imagen donde querés agregar el enlace.
  2. Hacer clic en el botón "πŸ”— Insertar enlace".
  3. Ingresar la URL de destino.
  4. Elegir si querés que el enlace se abra en una nueva pestaña.
  5. Hacer clic en "Aceptar".

πŸ“Š 6. Cómo crear tablas

  1. Hacer clic en el botón de "Tabla" en la barra de herramientas.
  2. Elegir la cantidad de filas y columnas.
  3. Escribir contenido dentro de las celdas.
  4. Usar el menú "Table" para ajustar propiedades como bordes, colores y alineación.

πŸ”₯ Consejos para un contenido atractivo

βœ… Usá títulos (H1, H2, H3) para estructurar mejor la información.
βœ… Destacá palabras clave en negrita para mejorar la legibilidad.
βœ… Usá imágenes de buena calidad y optimizadas para que la página cargue rápido.
βœ… Mantené los párrafos cortos y claros para facilitar la lectura.

πŸ”Ή Recordá siempre hacer clic en "Guardar" para aplicar los cambios.

Creado con Webered WEBERED