Editor Visual

El editor visual es uno de los elementos más utilizados en 3sellers, ya que es la puerta de entrada principal de la información a la aplicación para que posteriormente será visualizada en la web

Opciones de edición

El editor de texto tiene dos opciones de uso:

Texto enriquecido (Editor Visual). En esta forma, la información se genera como en cualquier otro editor de texto estándar.

Código HTML. En esta forma, el editor cambia y permite que se escriba con código HTML. Para usuarios avanzados puede resultar más apropiado ya que permite un control total de lo que se está generando.

El editor visual parte a parte

Estilo para el texto.
Negrita, Cursiva, Subrayado, Tachado

Alineación del texto.
Izquierda, Centrado, Derecha, Justificado

Formato del texto.
Formato, Fuente tipográfica, Tamaño de la fuente

Buscar y remplazar en el texto.
Buscar, buscar y remplazar

Buscar. Al hacer clic en el icono de buscar, se abrirá una ventana para que escribamos la palabra o frase que deseamos buscar. Debemos determinar si lo que buscamos está arriba o abajo de donde se encuentra el cursor en el texto y si hace diferencia entre mayúsculas y minúsculas.

Buscar y remplazar. Al hacer clic en el icono de buscar y remplazar, se abrirá una ventana y tendremos dos zonas de escritura. Una para que escribamos la palabra o frase que deseamos buscar y la otra para la que substituirá a la encontrada. Debemos determinar si lo que buscamos está arriba o abajo de donde se encuentra el cursor en el texto y si hace diferencia entre mayúsculas y minúsculas. Tenemos además las opciones de remplazar la búsqueda que ha hecho o remplazarlas todas en el texto de golpe.

Listado.
Lista desordenada, lista ordenada

Sangría.
Reducir sangría, Aumentar sangría

Corregir lo hecho.
Deshacer, Rehacer

Vínculos.
Crear o editar enlace, quitar enlace, insertar o editar ancla, insertar o editar imagen, insertar caracteres personalizados, insertar o editar medio embebido, limpiar código basura

Crear o editar enlace.
Esta herramienta nos sirve para redirigir una parte del texto que estamos editando a alguna URL, ya sea dentro de tu propia web o externa. Se señala el texto en el que deben clicar, ejemplo: contáctenos >> y ejecutamos la herramienta crear y editar enlace. Se abrirá una ventana en la que tendremos que rellenar al siguiente información:

• URL del hipervínculo - Dirección a donde apunta el enlace. ejemplo: /pages/contáctenos
• Anclas - Si hemos creado anclas con anterioridad, seleccionamos el identificador de la adecuada.
• Destino - Donde queremos que se abra la página a la que hemos hecho referencia. En la misma ventana, en una nueva, etc.
• Título - Nombre del enlace. Cuando se coloque el cursor encima del enlace se abrirá una pequeña ventana indicando el título.

Quitar enlace.
Desactiva los enlaces creados en la zona seleccionada.

Anclas.
Las anclas son elementos que se crean en el texto con un nombre que los identifique. A estas anclas se les puede hacer una referencia en un enlace para dirigir la navegación a esa zona. Ejemplo: en un texto muy largo, que se pierda de la pantalla el comienzo del mismo, se puede crear un ancla al principio de este y al final crear un enlace que sea 'subir' y que haga referencia al identificador de esa ancla, por lo que al hacer clic en ese enlace nos subirá al principio del texto. Al hacer clic en el icono del ancla se nos abrirá una ventana que nos brindará la opción para escribir en nombre del ancla.

Insertar o editar imágenes.
Lo primero que tenemos que hacer para poder insertar una imagen en el edito visual es tener la imagen subida a 3sellers y saber cual es su ruta.

1. Buscamos la imagen que queremos subir en nuestro ordenador
2. La subimos a 3sellers
3. Copiamos la ruta. Hay varias formas de conseguir la ruta de la imagen, una de ellas es la siguiente: Buscamos la imagen en 'Tus Archivos' en 3sellers, haces clic derecho donde dice URL. Se abrirá una ventana y entre las opciones que nos brinda está una que dice: Copiar la ruta de enlace. Hacemos clic y automáticamente nos copiará en la memoria del ordenador la ruta.

Insertar la imagen subida en el texto

Hacemos clic en el icono de crear y editar imagen y se nos abrirá una ventana que nos pedirá la siguiente información:

• URL de la imagen - Aquí debemos copiar la ruta de la imagen que con anterioridad tenemos en la memoria del ordenador. Nos colocamos en el campo de texto y apretamos la siguiente combinación de teclas: CTRL+V para que se nos pegue la ruta que estaba en memoria
• Descripción de la imagen - Esto sirve para las personas con discapacidad visual. Se debe escribir brevemente lo que se visualiza en la imagen
• Título - El título se mostrará en al web si por algún problema la imagen no puede visualizarse.

Una vez rellenada la información de la pestaña 'General', pasamos a la peaña 'Apariencia' para especificar donde queremos la imagen dentro del texto.

• Alineación - Determinamos si la imagen estará a la izquierda, centro, derecha, arriba, etc.
• Dimensiones - Detallamos el tamaño de la imagen y si queremos que sea proporcional.
• Espacio vertical - Espacio de separación que dejaremos entre la foto y el texto
• Espacio horizontal - Espacio de separación que dejaremos entre la foto y el texto
• Bordes - Grosor del borde en píxeles. Si no queremos bordes se deja en blanco o en 0.
• Estilo - Para los que dominan CSS, aqui pueden escribir los estilos que quieran aplicarle a la foto.

Insertar caracteres personalizados.
Esta herramienta nos permite insertar caracteres que no aparecen en el teclado. Se abre una ventana y seleccionamos el caracter deseado.

Insertar o editar medio embebido.
Esta herramienta nos permite insertar música, vídeo y demás elementos multimedia que se encuentran en otros sitio, como youtube, vimeo, etc. Se abre una ventana donde detallaremos el tipo de elemento de media que es, URL y dimensiones.

Limpiar código basura
Cuando llevamos rato trabajando con el editor, escribiendo, borrando, etc, se pueden quedar trozos de código interno que provoquen que no se visualice correctamente el contenido. Esta herramienta nos permite eliminar todo ese código erróneo.

Color en el texto
Color del texto, color del fondo

Elementos de tablas
Insertar nueva tabla, propiedades de la fila, propiedades de la celda, insertar fila (antes), insertar fila (después), suprimir fila, insertar columna (antes), insertar columna (después), suprimir columna, dividir celdas, vincular celdas, insertar regla horizontal, limpiar formato, mostrar u oculta líneas guías.

Insertar una tabla Para insertar una tabla en nuestro texto, hacemos clic en este icono y se nos abre una ventana en la que debemos especificar:

• Número de Columnas y Filas
• Relleno de celda y Espaciado de celda - valor en píxeles
• Alineación - izquierda, derecha o centro
• Ancho y Alto - valor en píxeles
• Borde - valor en píxeles, en blanco o 0 para que no tenga bordes.

Editar una tabla Para editar una tabla en nuestro texto, hacemos clic en esta herramienta y se nos abre una ventana en la que podemos especificar:

• Color de fondo
• Color del borde
• Imagen de fondo
• Otros

Subíndice
Subíndice, Superíndice

Pantalla Completa

• Primeros pasos con el editor en vivo
• Cambiando el logotipo con el editor en vivo
• Edición de colores y estilos
• Modificando enlaces con el editor en vivo
• Modificando el menú principal con el editor en vivo
• Modificando bloques de contenido
• Modificando las imágenes centrales con el editor en vivo
• Páginas
• Blogs
• Navegación y agrupaciones de enlaces (Menú superior, imágenes centrales, enlaces laterales, enlaces centrales)
• Restaurando bloques de contenido
• Páginas y bloques de contenido
• Opciones avanzadas
• Escribiendo artículos en los blogs
• Crear o modificar una página
• Ver otros artículos relacionados con productos
• Ver otros artículos relacionados con paginas
• Ver otros artículos relacionados con blogs