wiki.triwus.com - Contribuciones del usuario [es]

Configurar un cliente de correo electrónico

2025-10-20T10:00:43Z

Mingo s8fapm65: /* Conceptos previos. Protocolos de servidor de correo. */

Un cliente de correo electrónico es un programa de software instalado en tu ordenador o dispositivo móvil que te permite acceder, leer y enviar emails, gestionarlos y organizarlos. [https://es.wikipedia.org/wiki/Cliente_de_correo_electr%C3%B3nico (Ver más)]
Existen diferentes clientes de correo, tanto para equipos de escritorio como para dispositivos móviles. En esta guía, explicaremos cómo configurar nuestra cuenta de correo electrónico en los principales clientes de email a día de hoy

== Conceptos previos. Protocolos de servidor de correo. ==
 
'''Protocolos de servidor de correo'''
Esta propiedad define si usted desea conservar copias de los mensajes en el servidor o no. Para conservar las copias en el servidor, seleccione la opción IMAP. Si de lo contrario no desea conservarlos en el servidor, seleccione POP3. Si selecciona IMAP, también podrá formar al filtro antispam [http://spamassassin.apache.org/ SpamAssassin] basándose en los mensajes recibidos.
 
# '''Servidor de correo entrante (POP3 / IMAP)'''
#*'''POP3''' (Post Office Protocol version 3). Es un protocolo standard usado para la recepción de correo desde un servidor remoto a un cliente de correo local(Thunderbird, Outlook,...). POP3 permite descargar los mensajes de correo en el equipo local y poder leerlos incluso sin tener una conexión a Internet. Se debe tener en cuenta que, cuando utilizamos POP3, los mensajes se descargarán localmente en el equipo y estos '''se eliminan del servidor de correo''', a menos que tengamos habilitado en nuestro gestor de correo la opción de '''''Mantener copia de los mensajes en el servidor'''''. Al guardar los correos en el dispositivo local, reducimos el espacio que los correos ocupan en el servidor web. Debemos tener en cuenta que, si nuestra intención es acceder al correo desde diferentes localizaciones y/o dispositivos, puede que POP3 no sea la mejor opción. El '''puerto para POP3 es 995'''. Este es el puerto que necesitamos para conectarnos mediante POP3 de forma segura. [https://es.wikipedia.org/wiki/Protocolo_de_oficina_de_correo Maś información.]
#:
#*'''IMAP''' (Internet Message Access Protocol). Esta opción sincronizará su correo entre los diferentes dispositivos donde se encuentre instalada la/s cuenta/s. A diferencia del protocolo POP3 que descarga los correos electrónicos en su equipo y los elimina del servidor, IMAP lee los mensajes de correo directamente del servidor sin eliminarlos de éste, permitiendo de esta manera el acceso desde diferentes localizaciones y/o clientes de correo electrónico. Tenga en cuenta que utilizando el protocolo IMAP, '''sus mensajes de correo electrónico ocuparán espacio en el servidor que tenga contratado'''. '''El puerto IMAP es 993'''. Este es el puerto que necesitamos para conectarnos mediante IMAP de forma segura. [https://es.wikipedia.org/wiki/Protocolo_de_acceso_a_mensajes_de_Internet Más información.]
#:
#'''Servidor de correo saliente (SMTP)''': Simple Mail Transfer Protocol o su sigla en español, Protocolo simple de transferencia de correo (SMTP), es el protocolo estándar para el envío de correos electrónicos a través de Internet. El puerto 465 es el puerto utilizado si deseamos enviar mensajes a través de SMTP de manera segura. [https://es.wikipedia.org/wiki/Protocolo_para_transferencia_simple_de_correo Más información]

== Aplicación Correo de Windows 10 ==

Si utilizamos como sistema operativo de nuestro equipo, Windows 10, éste incluye un cliente de correo al que vamos poder agregar nuestra cuenta de email.
 

Abrimos la aplicación '''''Correo''''' y hacemos click en '''cuentas'''. A la derecha de nuestra pantalla aparece un panel en el cual seleccionaremos la opción, '''agregar cuenta'''.

 [[Archivo:w10-2.png|500px]] 
 

Seguidamente se nos muestra una ventana donde podremos escoger qué tipo de cuenta de correo queremos agregar. Seleccionamos la opción '''Otra cuenta'''.

 [[Archivo:w10_2.png]] 
 

A continuación rellenamos con nuestros datos de los campos que nos solicita la aplicación, tal y como vemos en la imagen. Una vez cubertos, pulsamos en '''iniciar sesión'''. 
 
 [[Archivo:w10_3.png]] 
 
Si todo ha ido bien, a aplicación Correo de windows ya nos detecta la configuración de nuestro servidor de correo, por defecto como IMAP. Ya podemos consultar y enviar correos desde la aplicación de Correo de Windows. 

Si deseamos cambiar la configuración de nuestra cuenta, podemos hacerlo pulsando en el icono de ajustes (1) y luego en el panel lateral de opciones, escoger administrar cuentas (2)

[[Archivo:w10_4.png|350px]]
[[Archivo:w10_5.png|350px]]

== Mozilla Thunderbird ==
Thunderbird es un gestor de código libre multiplataforma el cual podemos utilizar tanto para sistemas operativos Windows, Mac o Linux. Es recomendable, a ser posible, tener actualizado y/o utilizar Thunderbird en su última versión disponible.

*[https://www.thunderbird.net/es-ES/ Descargar Thunderbird]
*[https://support.mozilla.org/es/products/thunderbird Ayuda de Thunderbird ]

A continuación mostramos los pasos a seguir para agregar una cuenta de correo electrónico en la aplicación Thunderbird versión 91.5.0. Es probable que en versiones anteriores, estas mismas indicaciones difieran en algunos de los pasos.
 

Si es la primera vez que abrimos la aplicación Thunderbird, probablemente se nos muestre una ventana la cual nos dará la opción de si queremos, crear una nueva cuenta de correo, pulsamos en la opción, '''''Saltarse esto y usar mi cuenta de correo existente.'''''
 

[[Archivo:Tb1.png]]
 
De no mostrarse esta ventana inicial, debemos pulsar en el icono superior derecha [[Archivo:icono.png]] para abrir las opciónes de menú e ir a, '''Nuevo > cuenta de correo existente...'''

En la siguiente ventana, cubra los campos de texto con sus datos, y continuar.
* Nombre completo. Este va a ser el nombre que se mostrará como remitente cuando enviemos un correo.
* Dirección de correo electrónico.
* Contraseña.
 
[[Archivo:74025.png]]
 
 

Una vez pulsemos en continuar, si los datos introducidos son correctos, Thunderbird automáticamente detectará la configuración del servidor de correo y nos lo mostrará en la siguiente ventana. Por defecto nos selecciona como protocolo de correo entrante, '''IMAP''', pero si lo deseásemos, podríamos en este momento seleccionar '''POP3'''. Tenga en cuenta las ventajas y/o inconvenientes de cada protocolo como se indicaron brevemente en [conceptos previos]. IMAP conserva los mensajes en el servidor y los podria consultarlos si accede a su correo desde otras aplicaciones como webmail por ejemplo. POP3 descarga los mensajes a su equipo local y por defecto los elimina del servidor de correo, con lo que no podría volver a ver los mensajes si accediese a su correo desde otro otro cliente o webmail.
 
[[Archivo:Tb3.png]]
 

Si todo ha ido bien, pulsamos en 'Listo' en la siguiente ventana se nos muestra que nuestra cuenta de correo se creo correctamente, pulsamos en 'Finalizar' y ya tenemos nuestra cuenta de correo electrónico preparada para utilizar con el gestor de correo Thunderbird.

 
[[Archivo:Tb4.png]]
 

== Acceso mediante Apple Mail ==
Las indicaciones proporcionadas en esta sección han sido verificadas en Apple Mail 8.2. Puede que estas no funcionen con versiones anteriores o posteriores de Apple Mail.
Para configurar Apple Mail:
<ol>
<li>Abra Apple Mail y seleccione la opción Añadir otra cuenta de correo en la lista.</li>

[[Archivo:74215.png|777px]]

<li>Haga clic en Continuar.</li>

[[Archivo:74216.png|777px]]

<li>Especifique su nombre completo, su dirección de email y su contraseña y haga clic en Crear. Cuando se le pida que configure la cuenta de forma manual, haga clic en Siguiente.</li>

[[Archivo:74217.png|777px]]

<li>Especifique lo siguiente:<ul>
<li>
Correo electrónico. Indique su dirección de email completa.</li>
<li>
Nombre de usuario. Indique su dirección de email completa.</li>
<li>
Tipo de cuenta. Seleccione IMAP si desea conservar copias de los emails recibidos en el servidor. De lo contrario, seleccione POP.</li>
<li>
Servidor de correo entrante y saliente. En ambos casos indique su dominio p.ej. sudominio.com</li>

</ul>
</li>
<li>Haga clic en Iniciar sesión.</li>

</ol>

== Acceso desde un iPhone ==

Las indicaciones proporcionadas en esta sección han sido verificadas en un iPhone 7. 
Para configurar una cuenta de correo en un iPhone:
<ol>
<li>Vaya a Ajustes> Contraseñas y cuentas y seleccione Añadir cuenta.</li>

[[File:75206.png]]

<li>En la lista de proveedores de email que aparecerá, seleccione Otra. A continuación, toque en Añadir cuenta de correo.</li>

[[File:75207.png]]

<li>En la pantalla Nueva cuenta, introduzca la siguiente información:<ul>
<li>
Nombre. Indique el nombre que desee que aparezca en sus emails.</li>
<li>
Email. Especifique su dirección de email completa. Ejemplo: admin1@example.com.</li>
<li>
Contraseña. Indique la contraseña de su cuenta de email.</li>
<li>
Descripción. Incluya una descripción de la cuenta (opcional).</li>

[[File:75208.png]]

</ul>
</li>
<li>Toque en Siguiente. En la parte superior de la siguiente pantalla, seleccione IMAP (si desea guardar copias de los mensajes recibidos en el servidor) o POP. A continuación, indique los detalles de sus servidores de correo entrante y saliente. En ambos casos, deberá incluir lo siguiente:<ul>
<li>
Nombre del host. Tanto en el campo Servidor de Entrada como en Servidor de Salida, indicar el nombre de su dominio p.ej. sudominio.com.</li>
<li>
Nombre de usuario. Indique el nombre de su cuenta de correo, por ejemplo admin@example.com. </li>
<li>
Contraseña. La contraseña de su cuenta de email.</li>

[[File:75209.png]]

</ul>
</li>
<li>Una vez se haya añadido la configuración de email, toque en Guardar para continuar. Se verificará la conexión al servidor especificado. Si se ha podido establecer conexión, aparecerá una pantalla en la que podrá elegir la información que desea sincronizar con su teléfono.
</li>

[[File:75210.png]]

<li>Una vez facilitada toda la información, toque en Guardar para almacenar los datos introducidos. A continuación, su iPhone verificará la información de su cuenta (este paso puede tardar varios minutos donde aparecerá el estado "Verificando"). Una vez completado correctamente este proceso, aparecerá la pantalla de Correo. Ahora, su cuenta aparecerá en la lista de la sección Cuentas.</li>
</ol>
Nota: si experimenta problemas para sincronizar sus mensajes, puede configurar la correspondencia de las carpetas manualmente. Para ello, seleccione la cuenta recién creada y acceda a la sección Ajustes avanzados. Aquí puede escoger un buzón (Borradores, Enviados, Eliminados, Buzón archivo) y seleccionar la carpeta correspondiente en el servidor. De esta forma, sus carpetas estarán sincronizadas, sin importar desde dónde o cómo accede a su correo. 

== Acceso desde Android ==

En esta sección vamos a indicar cómo podemos agregar nuestra cuenta de correo electrónico en un dispositivo Android utilizando como cliente de correo, Gmail.

Para esta guía utilizaremos de ejemplo, un teléfono con sistema operativo Android 10 con capa de personalización de Android stock o nativo.

En nuestro teléfono debemos ir a '''Ajustes > Agregar otra cuenta de correo'''.
 
[[Archivo:Android_1.png|500px]]
 
Si entre las opciones en Ajustes de nuestro teléfono, no encontramos la opción 'Agregar otra cuenta de correo', podemos ayudarnos de la caja de búsqueda dentro de ajustes y buscar por términos como 'cuenta' o 'cuentas', de esta forma probablemente nos topemos con opciones como 'cuentas y sincronización' a partir de la cual podremos agregar nuevas cuentas en el dispositivo, entre ellas nuestra cuenta de correo electrónico.

 
 
[[Archivo:Android_2.png|500px]]
 
 

Una vez dentro de la opción de Cuentas, nuestro teléfono nos mostrará varios tipos de cuentas de correo que podemos agregar. En nuestro caso seleccionaremos la opción '''Otra'''.

 
 
[[Archivo:Android_3.png|500px]]
 
 

<li>Indique el tipo de cuenta. Para conservar las copias de los mensajes en el servidor, seleccione la opción IMAP. Si de lo contrario no desea conservarlos en el servidor, seleccione POP3.</li>
 
 
[[Archivo:Android_4.png|500px]]
 
 

<li>Indique la contraseña de su cuenta de email.</li>

 
 
[[Archivo:Android_5.png|500px]]
 
 

Una vez haya especificado toda la información, su dispositivo Android comprobará la conexión al servidor y creará su cuenta de correo. La nueva cuenta aparecerá en la lista de cuentas de la aplicación de Gmail.

 
 
[[Archivo:Android_6.png|500px]]
 
 

== Artículos relacionados ==

<ol>
<li>[[Gestión de las cuentas de correo electrónico de un dominio]]</li>
<li>[[El webmail de Triwus]]</li>
</ol>

== Referencias ==

Artículo original: [https://docs.plesk.com/es-ES/12.5/administrator-guide/administración-de-sitios-web/primeros-pasos-en-plesk/creación-de-cuentas-de-correo/2-acceda-a-su-buzón-de-correo.65691/]

Facturascripts

2025-07-08T08:18:30Z

Mingo s8fapm65:

El plugin triwus para FacturaScripts, sincroniza automáticamente el stock de productos del almacén de tu tienda online creada con la plataforma Triwus, asegurando que tus inventarios estén siempre actualizados en tiempo real.

También te permite crear los albaranes y/o facturas de las ventas realizadas en tu tienda online.

[[Archivo:Triwus-pcontrol-APIs-FS-1.png|700px|sinmarco]]

Facturascripts

2025-07-08T08:18:08Z

Mingo s8fapm65:

Archivo:Triwus-pcontrol-APIs-FS-1.png

2025-07-08T08:15:08Z

Mingo s8fapm65:

Facturascripts

2025-07-08T08:13:43Z

Mingo s8fapm65:

Facturascripts

2025-07-08T08:09:15Z

Mingo s8fapm65: Página creada con « El plugin triwus para FacturaScripts, sincroniza automáticamente el stock de productos del almacén de tu tienda online creada con la plataforma Triwus, asegurando que tu…»

El plugin triwus para FacturaScripts, sincroniza automáticamente el stock de productos del almacén de tu tienda online creada con la plataforma Triwus, asegurando que tus inventarios estén siempre actualizados en tiempo real.

Tambié te permite crear los albaranes y/o facturas de las ventas realizadas en tu tienda online.

Este plugin facilita la gestión eficiente de tus existencias al evitar discrepancias y pérdidas, garantizando una administración fluida de tu negocio.

Página principal

2025-07-08T08:01:46Z

Mingo s8fapm65:

Estamos incorporando nuevos artículos para convertirla en el sitio de ayuda para el software de triwus.com [https://triwus.com].

[[Archivo:Logo-wiki.png|no|Logotipo de Triwus]]

== Introducción ==

El software de Triwus está diseñado para facilitar tu presencia en internet.

== Las páginas web de Triwus ==

Explicación sobre la parte externa de las web de triwus.

# [[Introducción]]
# [[Páginas comunes]]
## [[Páginas comunes#Dise.C3.B1o_libre|Páginas de diseño libre]]
## [[Páginas comunes#Noticias|Páginas de noticias]]
## [[Páginas comunes#P.C3.A1ginas_de_Venta|Páginas de venta]]
# [[Páginas reservadas]]
## [[Página buscador]]
## [[Página confirmar]]
## [[Página legal]]
## [[Página login / registro]]
## [[Página pago]]
## [[Página perfil]]

== El panel de control ==

# [[Accediendo al panel de control]]
# [[Tu perfil de usuario]]
## [[Tu_perfil_de_usuario#Tu cuenta Triwus|Tu cuenta Triwus ]]
## [[Tu_perfil_de_usuario#Tus datos de contacto y preferencias de pago|Tus datos de contacto y preferencias de pago]]
## [[Tu_perfil_de_usuario#Tus servicios contratados / Facturas|Tus servicios contratados / Facturas]]
# [[El correo electrónico]]
## [[Gestión de las cuentas de correo electrónico de un dominio]]
## [[El webmail de Triwus]]
## [[Configurar un cliente de correo electrónico]]
# [[Configuraciones básicas de tu web]]
# [[Configura los idiomas de tu web]]
# [[Las secciones de tu web]]
## [[Lista de secciones#Lista de secciones|Lista de secciones]]
## [[Propiedades de una sección#Propiedades de una sección|Propiedades de una sección]]
# [[Configura tus redes sociales]]
# [[Los avisos legales de tu web]]
# [[Gestión de los usuarios de tu web]]
## [[Gestión de los usuarios de tu web#Activar componentes de login y registro|Activar componentes de login y registro]]
## [[Gestión de los usuarios de tu web#Modalidades de registro|Modalidades de registro]]
## [[Gestión de los usuarios de tu web#Los permisos de usuarios|Los permisos de usuarios]]
## [[Gestión de los usuarios de tu web#Enviar invitaciones|Enviar invitaciones]]
# [[Estadísticas web]]
# [[Mis Documentos Triwus]]
#[[Registro de accesos]]
##[[Registro de accesos#Registro Triwus|Registro Triwus]]
##[[Registro de accesos#Regsitro Apache|Registro Apache]]
# [[APIs]]
## [[La API de triwus]]
## [[Facturascripts]]
## [[Configuración cliente SMTP]]
## [[PWA]]
# [[Gestión de tu tienda en internet]]
## [[Gestión de productos]]
## [[Gestión de categorías de producto]]
## [[Gestión de perfiles de producto]]
## [[Gestión de clientes]]
## [[Gestión de ventas]]
## [[Gestión de almacenes y gastos de envío]]
## [[Gestión de formas de pago]]
## [[Gestión de promociones]]
## [[Otras configuraciones]]

== El gestor de contenidos ==

# [[Accediendo al panel de edición]]
# [[Las páginas web de Triwus]]
## [[Las_páginas_web_de_Triwus#El_modelo_de_página|El modelo de página]]
## [[Las_páginas_web_de_Triwus#Tipos_de_párrafo|Tipos de párrafo]]
## [[Las_páginas_web_de_Triwus#Componentes|Componentes]]
# [[Editando los contenidos de tu sitio web]]
## [[Editando los contenidos de tu sitio web#Descripción general del panel de edición|Descripción general del panel de edición]]
## [[Editando los contenidos de tu sitio web#Párrafos|Párrafos]]
## [[Editando los contenidos de tu sitio web#Textos|Textos]]
## [[Editando los contenidos de tu sitio web#Imágenes|Imágenes]]
## [[Editando los contenidos de tu sitio web#Galerías de imágenes|Galería de imágenes]]
## [[Editando los contenidos de tu sitio web#Carruseles|Carruseles]]
## [[Editando los contenidos de tu sitio web#Enlaces de contenidos. Vínculo|Enlaces de contenidos. Vínculo]]
## [[Editando los contenidos de tu sitio web#Separadores|Separadores]]
## [[Editando los contenidos de tu sitio web#Formularios de contacto|Formularios de contacto]]
## [[Editando los contenidos de tu sitio web#VCard|VCard]]
## [[Editando los contenidos de tu sitio web#Compartir en redes sociales|Compartir en Redes Sociales]]
## [[Editando los contenidos de tu sitio web#Índice|Índice]]
## [[Editando los contenidos de tu sitio web#Migas de pan|Migas de pan]]
## [[Editando los contenidos de tu sitio web#Panoramix|Panoramix]]

== Miscelánea ==

# [[Reglamento General de Protección de Datos 2018 (RGPD)]]
# [[Duplicando un producto con campos cústom (CC)]]

Configuración cliente SMTP

2025-07-08T07:59:36Z

Mingo s8fapm65: Página creada con «El protocolo SMTP (Simple Mail Transfer Protocol) es un estándar de Internet para el envío de correos electrónicos. Al configurar correctamente el servidor SMTP en el pa…»

El protocolo SMTP (Simple Mail Transfer Protocol) es un estándar de Internet para el envío de correos electrónicos. Al configurar correctamente el servidor SMTP en el panel de control, podrás enviar correos electrónicos desde tu sitio web de manera más eficiente y segura.

Por ejemplo, si utilizas un formulario de contacto en tu sitio web, los mensajes enviados a través de este formulario pueden ser enviados a la dirección de correo electrónico que elijas utilizando el servidor SMTP que hayas configurado.

Podrás configurar el envío de correo electrónico con SMTP desde '''APIs > Cliente SMTP'''

[[Archivo:SMTP_1_b.jpg|700px|sinmarco]]

Una vez dentro del panel cliente SMTP, se mostrarán los siguientes campos:

* '''Servidor:''' En este campo, los usuarios deben ingresar la dirección del servidor SMTP proporcionado por su proveedor de servicios de correo electrónico, que desean utilizar para enviar correos electrónicos. Por ejemplo, "smtp.ejemplo.com".

* '''Seguridad:''' Aquí los usuarios pueden especificar el tipo de seguridad que desean utilizar para la conexión SMTP. Las opciones comunes incluyen "SSL/TLS", "STARTTLS" o "Ninguna", dependiendo de las políticas de seguridad del proveedor de correo electrónico.

* '''Puerto:''' Permite a los usuarios definir el puerto SMTP que utilizará el servidor para la comunicación. Por lo general, los puertos más comunes son 25, 465 (SSL) y 587 (TLS).

* '''Usuario:''' En este campo, los usuarios deben ingresar el nombre de usuario necesario para autenticarse en el servidor SMTP. Generalmente, la cuenta de correo electrónico desde la que se quiere enviar los emails o un nombre de usuario específico proporcionado por el proveedor de servicios de correo electrónico.

* '''Contraseña:''' Aquí los usuarios deben ingresar la contraseña correspondiente al nombre de usuario proporcionado anteriormente. Esta información es crucial para autenticar la conexión con el servidor SMTP.

* '''Nombre (Opcional):''' Este campo permite a los usuarios asignar un nombre identificativo al correo electrónico enviado. Esta información es opcional y se utiliza para mostrar un nombre reconocible junto al correo electrónico enviado.

[[Archivo:SMTP 2.jpg|700px|sinmarco]]

APIs

2025-07-08T07:59:28Z

Mingo s8fapm65:

Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 

# [[La API de triwus]]
# [[Facturascripts]]
# [[Configuración cliente SMTP]]
# [[PWA]]

 

[[Archivo:Triwus-pcontrol-APIs.png|border|800px]]]

APIs

2025-07-08T07:58:36Z

Mingo s8fapm65:

Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 

# [[La API de triwus]]
# [[Facturascripts]]
# [[Configuración correo SMTP]]
# [[PWA]]

 

[[Archivo:Triwus-pcontrol-APIs.png|border|800px]]]

APIs

2025-07-08T07:58:16Z

Mingo s8fapm65:

PWA

2025-07-08T07:56:48Z

Mingo s8fapm65: /* Configura tu PWA. */

Todas las webs creadas con la plataforma triwus pueden configurarse como PWA (Progressive Web App).

Una PWA es una aplicación web que se puede instalar en móviles y ordenadores, como una app nativa, pero sin la necesidad de pasar por tiendas como Google Play o App Store.

'''¿ Que ventajas tiene para tu proyecto web ?.'''

* Icono de acceso directo en el móvil, como cualquier otra app.
* Instalación sencilla directamente desde el navegador web.
* Mejora la presencia móvil de tú web.
* Acceso rápido para usuarios habituales.

== Configura tu PWA. ==

[[Archivo:Triwus-pcontrol-APIs-pwa.png|700px|sinmarco]]

Podrás configurar tu web PWA desde '''APIs > PWA'''. Una vez dentro del panel de configuración PWA, se mostrarán los siguientes campos:

* '''Nombre:''' Este nombre se mostrará en el diálogo de instalación y en la lista de aplicaciones del dispositivo.

* '''Alias:''' Una versión breve del nombre (máx. 12 caracteres) que aparecerá debajo del icono de la app en la pantalla de inicio del móvil.

* '''Descripción:''' Un resumen breve (máx. 255 caracteres) que describe el propósito de tu app. Aparecerá en el diálogo de instalación para informar al usuario sobre qué va a instalar.

* '''Color principal:''' Se usará en la barra de título de la app.

* '''Color de fondo:''' Se mostrará brevemente mientras se inicia la app.

* '''Icono principal:''' Se mostrará en la lista de aplicaciones y en los avisos de instalación. '''Consejo:''' Asegúrate de que sea una imagen nítida y cuadrada de exactamente 512×512 píxeles para una visualización perfecta.

* '''Icono adaptable:''' Está pensado para que los sistemas modernos (como Android 8+ o algunos navegadores) puedan recortarlo automáticamente y mostrarlo en distintas formas: redondo, cuadrado con bordes redondeados, gota, etc. '''Consejo''': Para que funcione correctamente, asegúrate de que tu logo o elemento principal ocupe solo el 75% central de la imagen,dejando los bordes como un margen de seguridad.

[[Archivo:Triwus-pcontrol-APIs-pwa-1.png|700px|sinmarco]]

PWA

2025-07-08T07:49:28Z

Mingo s8fapm65:

Todas las webs creadas con la plataforma triwus pueden configurarse como PWA (Progressive Web App).

Una PWA es una aplicación web que se puede instalar en móviles y ordenadores, como una app nativa, pero sin la necesidad de pasar por tiendas como Google Play o App Store.

'''¿ Que ventajas tiene para tu proyecto web ?.'''

* Icono de acceso directo en el móvil, como cualquier otra app.
* Instalación sencilla directamente desde el navegador web.
* Mejora la presencia móvil de tú web.
* Acceso rápido para usuarios habituales.

== Configura tu PWA. ==

[[Archivo:Triwus-pcontrol-APIs-pwa.png|700px|sinmarco]]

Podrás configurar tu web PWA desde '''APIs > PWA'''. Una vez dentro del panel de configuración PWA, se mostrarán los siguientes campos:

* '''Servidor:''' En este campo, los usuarios deben ingresar la dirección del servidor SMTP proporcionado por su proveedor de servicios de correo electrónico, que desean utilizar para enviar correos electrónicos. Por ejemplo, "smtp.ejemplo.com".

* '''Seguridad:''' Aquí los usuarios pueden especificar el tipo de seguridad que desean utilizar para la conexión SMTP. Las opciones comunes incluyen "SSL/TLS", "STARTTLS" o "Ninguna", dependiendo de las políticas de seguridad del proveedor de correo electrónico.

* '''Puerto:''' Permite a los usuarios definir el puerto SMTP que utilizará el servidor para la comunicación. Por lo general, los puertos más comunes son 25, 465 (SSL) y 587 (TLS).

* '''Usuario:''' En este campo, los usuarios deben ingresar el nombre de usuario necesario para autenticarse en el servidor SMTP. Generalmente, la cuenta de correo electrónico desde la que se quiere enviar los emails o un nombre de usuario específico proporcionado por el proveedor de servicios de correo electrónico.

* '''Contraseña:''' Aquí los usuarios deben ingresar la contraseña correspondiente al nombre de usuario proporcionado anteriormente. Esta información es crucial para autenticar la conexión con el servidor SMTP.

* '''Nombre (Opcional):''' Este campo permite a los usuarios asignar un nombre identificativo al correo electrónico enviado. Esta información es opcional y se utiliza para mostrar un nombre reconocible junto al correo electrónico enviado.

[[Archivo:Triwus-pcontrol-APIs-pwa-1.png|700px|sinmarco]]

PWA

2025-07-08T07:48:28Z

Mingo s8fapm65:

Todas las webs creadas con la plataforma triwus pueden configurarse como PWA (Progressive Web App).

Una PWA es una aplicación web que se puede instalar en móviles y ordenadores, como una app nativa, pero sin la necesidad de pasar por tiendas como Google Play o App Store.

[[Archivo:Triwus-pcontrol-APIs-pwa.png|700px|sinmarco]]

'''¿ Que ventajas tiene para tu proyecto web ?.'''

* Icono de acceso directo en el móvil, como cualquier otra app.
* Instalación sencilla directamente desde el navegador web.
* Mejora la presencia móvil de tú web.
* Acceso rápido para usuarios habituales.

== Configura tu PWA. ==

Podrás configurar tu web PWA desde '''APIs > PWA'''. Una vez dentro del panel de configuración PWA, se mostrarán los siguientes campos:

* '''Servidor:''' En este campo, los usuarios deben ingresar la dirección del servidor SMTP proporcionado por su proveedor de servicios de correo electrónico, que desean utilizar para enviar correos electrónicos. Por ejemplo, "smtp.ejemplo.com".

* '''Seguridad:''' Aquí los usuarios pueden especificar el tipo de seguridad que desean utilizar para la conexión SMTP. Las opciones comunes incluyen "SSL/TLS", "STARTTLS" o "Ninguna", dependiendo de las políticas de seguridad del proveedor de correo electrónico.

* '''Puerto:''' Permite a los usuarios definir el puerto SMTP que utilizará el servidor para la comunicación. Por lo general, los puertos más comunes son 25, 465 (SSL) y 587 (TLS).

* '''Usuario:''' En este campo, los usuarios deben ingresar el nombre de usuario necesario para autenticarse en el servidor SMTP. Generalmente, la cuenta de correo electrónico desde la que se quiere enviar los emails o un nombre de usuario específico proporcionado por el proveedor de servicios de correo electrónico.

* '''Contraseña:''' Aquí los usuarios deben ingresar la contraseña correspondiente al nombre de usuario proporcionado anteriormente. Esta información es crucial para autenticar la conexión con el servidor SMTP.

* '''Nombre (Opcional):''' Este campo permite a los usuarios asignar un nombre identificativo al correo electrónico enviado. Esta información es opcional y se utiliza para mostrar un nombre reconocible junto al correo electrónico enviado.

[[Archivo:Triwus-pcontrol-APIs-pwa-1.png|700px|sinmarco]]

PWA

2025-07-08T07:46:01Z

Mingo s8fapm65:

Todas las webs creadas con la plataforma triwus pueden configurarse como PWA (Progressive Web App).

Una PWA es una aplicación web que se puede instalar en móviles y ordenadores, como una app nativa, pero sin la necesidad de pasar por tiendas como Google Play o App Store.

[[Archivo:Triwus-pcontrol-APIs-pwa.png|700px|sinmarco]]

'''¿ Que ventajas tiene para tu proyecto web ?.'''

* Icono de acceso directo en el móvil, como cualquier otra app.
* Instalación sencilla directamente desde el navegador web.
* Mejora la presencia móvil de tú web.
* Acceso rápido para usuarios habituales.

Podrás configurar tu web PWA desde '''APIs > PWA'''

Una vez dentro del panel de configuración PWA, se mostrarán los siguientes campos:

* '''Servidor:''' En este campo, los usuarios deben ingresar la dirección del servidor SMTP proporcionado por su proveedor de servicios de correo electrónico, que desean utilizar para enviar correos electrónicos. Por ejemplo, "smtp.ejemplo.com".

* '''Seguridad:''' Aquí los usuarios pueden especificar el tipo de seguridad que desean utilizar para la conexión SMTP. Las opciones comunes incluyen "SSL/TLS", "STARTTLS" o "Ninguna", dependiendo de las políticas de seguridad del proveedor de correo electrónico.

* '''Puerto:''' Permite a los usuarios definir el puerto SMTP que utilizará el servidor para la comunicación. Por lo general, los puertos más comunes son 25, 465 (SSL) y 587 (TLS).

* '''Usuario:''' En este campo, los usuarios deben ingresar el nombre de usuario necesario para autenticarse en el servidor SMTP. Generalmente, la cuenta de correo electrónico desde la que se quiere enviar los emails o un nombre de usuario específico proporcionado por el proveedor de servicios de correo electrónico.

* '''Contraseña:''' Aquí los usuarios deben ingresar la contraseña correspondiente al nombre de usuario proporcionado anteriormente. Esta información es crucial para autenticar la conexión con el servidor SMTP.

* '''Nombre (Opcional):''' Este campo permite a los usuarios asignar un nombre identificativo al correo electrónico enviado. Esta información es opcional y se utiliza para mostrar un nombre reconocible junto al correo electrónico enviado.

[[Archivo:Triwus-pcontrol-APIs-pwa-1.png|700px|sinmarco]]

PWA

2025-07-08T07:33:48Z

Mingo s8fapm65:

El protocolo SMTP (Simple Mail Transfer Protocol) es un estándar de Internet para el envío de correos electrónicos. Al configurar correctamente el servidor SMTP en el panel de control, podrás enviar correos electrónicos desde tu sitio web de manera más eficiente y segura.

Por ejemplo, si utilizas un formulario de contacto en tu sitio web, los mensajes enviados a través de este formulario pueden ser enviados a la dirección de correo electrónico que elijas utilizando el servidor SMTP que hayas configurado.

Podrás configurar el envío de correo electrónico con SMTP desde '''APIs > Cliente SMTP'''

[[Archivo:Triwus-pcontrol-APIs-pwa.png|700px|sinmarco]]

Una vez dentro del panel cliente SMTP, se mostrarán los siguientes campos:

* '''Servidor:''' En este campo, los usuarios deben ingresar la dirección del servidor SMTP proporcionado por su proveedor de servicios de correo electrónico, que desean utilizar para enviar correos electrónicos. Por ejemplo, "smtp.ejemplo.com".

* '''Seguridad:''' Aquí los usuarios pueden especificar el tipo de seguridad que desean utilizar para la conexión SMTP. Las opciones comunes incluyen "SSL/TLS", "STARTTLS" o "Ninguna", dependiendo de las políticas de seguridad del proveedor de correo electrónico.

* '''Puerto:''' Permite a los usuarios definir el puerto SMTP que utilizará el servidor para la comunicación. Por lo general, los puertos más comunes son 25, 465 (SSL) y 587 (TLS).

* '''Usuario:''' En este campo, los usuarios deben ingresar el nombre de usuario necesario para autenticarse en el servidor SMTP. Generalmente, la cuenta de correo electrónico desde la que se quiere enviar los emails o un nombre de usuario específico proporcionado por el proveedor de servicios de correo electrónico.

* '''Contraseña:''' Aquí los usuarios deben ingresar la contraseña correspondiente al nombre de usuario proporcionado anteriormente. Esta información es crucial para autenticar la conexión con el servidor SMTP.

* '''Nombre (Opcional):''' Este campo permite a los usuarios asignar un nombre identificativo al correo electrónico enviado. Esta información es opcional y se utiliza para mostrar un nombre reconocible junto al correo electrónico enviado.

[[Archivo:Triwus-pcontrol-APIs-pwa-1.png|700px|sinmarco]]

Archivo:Triwus-pcontrol-APIs-pwa-1.png

2025-07-08T07:33:19Z

Mingo s8fapm65:

PWA

2025-07-08T07:00:31Z

Mingo s8fapm65:

El protocolo SMTP (Simple Mail Transfer Protocol) es un estándar de Internet para el envío de correos electrónicos. Al configurar correctamente el servidor SMTP en el panel de control, podrás enviar correos electrónicos desde tu sitio web de manera más eficiente y segura.

Por ejemplo, si utilizas un formulario de contacto en tu sitio web, los mensajes enviados a través de este formulario pueden ser enviados a la dirección de correo electrónico que elijas utilizando el servidor SMTP que hayas configurado.

Podrás configurar el envío de correo electrónico con SMTP desde '''APIs > Cliente SMTP'''

[[Archivo:Triwus-pcontrol-APIs-pwa.png|700px|sinmarco]]

Una vez dentro del panel cliente SMTP, se mostrarán los siguientes campos:

* '''Servidor:''' En este campo, los usuarios deben ingresar la dirección del servidor SMTP proporcionado por su proveedor de servicios de correo electrónico, que desean utilizar para enviar correos electrónicos. Por ejemplo, "smtp.ejemplo.com".

* '''Seguridad:''' Aquí los usuarios pueden especificar el tipo de seguridad que desean utilizar para la conexión SMTP. Las opciones comunes incluyen "SSL/TLS", "STARTTLS" o "Ninguna", dependiendo de las políticas de seguridad del proveedor de correo electrónico.

* '''Puerto:''' Permite a los usuarios definir el puerto SMTP que utilizará el servidor para la comunicación. Por lo general, los puertos más comunes son 25, 465 (SSL) y 587 (TLS).

* '''Usuario:''' En este campo, los usuarios deben ingresar el nombre de usuario necesario para autenticarse en el servidor SMTP. Generalmente, la cuenta de correo electrónico desde la que se quiere enviar los emails o un nombre de usuario específico proporcionado por el proveedor de servicios de correo electrónico.

* '''Contraseña:''' Aquí los usuarios deben ingresar la contraseña correspondiente al nombre de usuario proporcionado anteriormente. Esta información es crucial para autenticar la conexión con el servidor SMTP.

* '''Nombre (Opcional):''' Este campo permite a los usuarios asignar un nombre identificativo al correo electrónico enviado. Esta información es opcional y se utiliza para mostrar un nombre reconocible junto al correo electrónico enviado.

[[Archivo:SMTP 2.jpg|700px|sinmarco]]

La API de triwus

2025-07-08T06:49:12Z

Mingo s8fapm65: /* Cómo empezar */

'''¿Qué es la API de Triwus?''' 

La API de Triwus es una interfaz de programación de aplicaciones (API) que permite la comunicación fluida entre sistemas externos y nuestra plataforma. Con esta interfaz REST, proporcionamos a desarrolladores y usuarios la capacidad de acceder a diversas funcionalidades de Triwus, ampliando así las posibilidades de personalización y optimización de procesos. 
 

 

== Cómo empezar ==

Para empezar a utilizar nuestra API REST, debes proporcionar un nombre de usuario y contraseña en la '''sección API''' de tu panel de control en Triwus. 

[[Archivo:Triwus-pcontrol-APIs-trw-1.png|border|800px]]] 

Una vez que hayas guardado un nombre de usuario y contraseña, estarás listo para utilizar la API de Triwus. Para verificar su correcto funcionamiento, puedes realizar una solicitud a la siguiente dirección:

'''https://[tu-sitio-web]/rpc/api/cliente.php?op=get'''

Utiliza el nombre de usuario y la contraseña que hayas habilitado. Si todo sale bien, la API devolverá un objeto JSON con tus datos de cliente de Triwus.

 

== Documentación de la API de Triwus ==

=== Obtener datos del cliente ===
'''Descripción'''

Recuperar los datos del cliente de Triwus.

'''Método HTTP'''

GET

'''URL'''

https://[tu-sitio-web]/rpc/api/cliente.php?op=get

 

=== Obtener y actualizar datos de productos ===

'''Descripción'''

Recuperar la información detallada de productos disponibles en tu espacio de venta Triwus.

'''Método HTTP'''

GET / obtener información un producto(s).

PUT / actualizar stock de un producto.

'''URL'''

https://[tu-sitio-web]/rpc/api/producto.php?op=get

https://[tu-sitio-web]/rpc/api/producto.php?op=put

'''Parámetros de consulta'''

* id (opcional): Recupera los datos de un producto filtrando por su id.
* data (opcional): Filtra por productos modificados a partir de la fecha proporcionada.

'''Parámetros de actualización'''
* id (obligatorio): Identificador del producto que se desea actualizar.
* ud (obligatorio): Nuevo número total de unidades en stock para el producto.

 

=== Obtener datos de pedidos ===

'''Descripción'''

Recuperar la información de pedidos realizados.

'''Método HTTP'''

GET

'''URL'''

https://[tu-sitio-web]/rpc/api/pedido.php?op=get

'''Parámetros de consulta'''

* a (opcional): Filtra los pedidos por año.
* n (opcional): Filtra los pedidos por número de pedido.
* data (opcional): Filtra los pedidos realizados a partir de la fecha proporcionada.

Archivo:Triwus-pcontrol-APIs-trw-1.png

2025-07-08T06:48:53Z

Mingo s8fapm65:

La API de triwus

2025-07-08T06:43:57Z

Mingo s8fapm65:

'''¿Qué es la API de Triwus?''' 

La API de Triwus es una interfaz de programación de aplicaciones (API) que permite la comunicación fluida entre sistemas externos y nuestra plataforma. Con esta interfaz REST, proporcionamos a desarrolladores y usuarios la capacidad de acceder a diversas funcionalidades de Triwus, ampliando así las posibilidades de personalización y optimización de procesos. 
 

 

== Cómo empezar ==

Para empezar a utilizar nuestra API REST, debes proporcionar un nombre de usuario y contraseña en la '''sección API''' de tu panel de control en Triwus. 

[[Archivo:Triwus-pcontrol-APIs-trw.png|border|800px]]] 

Una vez que hayas guardado un nombre de usuario y contraseña, estarás listo para utilizar la API de Triwus. Para verificar su correcto funcionamiento, puedes realizar una solicitud a la siguiente dirección:

'''https://[tu-sitio-web]/rpc/api/cliente.php?op=get'''

Utiliza el nombre de usuario y la contraseña que hayas habilitado. Si todo sale bien, la API devolverá un objeto JSON con tus datos de cliente de Triwus.

 

== Documentación de la API de Triwus ==

=== Obtener datos del cliente ===
'''Descripción'''

Recuperar los datos del cliente de Triwus.

'''Método HTTP'''

GET

'''URL'''

https://[tu-sitio-web]/rpc/api/cliente.php?op=get

 

=== Obtener y actualizar datos de productos ===

'''Descripción'''

Recuperar la información detallada de productos disponibles en tu espacio de venta Triwus.

'''Método HTTP'''

GET / obtener información un producto(s).

PUT / actualizar stock de un producto.

'''URL'''

https://[tu-sitio-web]/rpc/api/producto.php?op=get

https://[tu-sitio-web]/rpc/api/producto.php?op=put

'''Parámetros de consulta'''

* id (opcional): Recupera los datos de un producto filtrando por su id.
* data (opcional): Filtra por productos modificados a partir de la fecha proporcionada.

'''Parámetros de actualización'''
* id (obligatorio): Identificador del producto que se desea actualizar.
* ud (obligatorio): Nuevo número total de unidades en stock para el producto.

 

=== Obtener datos de pedidos ===

'''Descripción'''

Recuperar la información de pedidos realizados.

'''Método HTTP'''

GET

'''URL'''

https://[tu-sitio-web]/rpc/api/pedido.php?op=get

'''Parámetros de consulta'''

* a (opcional): Filtra los pedidos por año.
* n (opcional): Filtra los pedidos por número de pedido.
* data (opcional): Filtra los pedidos realizados a partir de la fecha proporcionada.

Archivo:Triwus-pcontrol-APIs-pwa.png

2025-07-08T06:42:10Z

Mingo s8fapm65:

Archivo:Triwus-pcontrol-APIs-smtp.png

2025-07-08T06:41:55Z

Mingo s8fapm65:

Archivo:Triwus-pcontrol-APIs-FS.png

2025-07-08T06:41:37Z

Mingo s8fapm65:

Archivo:Triwus-pcontrol-APIs-trw.png

2025-07-08T06:41:05Z

Mingo s8fapm65:

APIs

2025-07-08T06:33:55Z

Mingo s8fapm65:

Archivo:Triwus-pcontrol-APIs.png

2025-07-08T06:33:25Z

Mingo s8fapm65:

PWA

2025-07-07T14:47:53Z

Archivo:SMTP 1 b.jpg

2025-07-07T12:54:40Z

Mingo s8fapm65: Mingo s8fapm65 subió una nueva versión de Archivo:SMTP 1 b.jpg

Configuración SMTP

Archivo:SMTP 1 b.jpg

2025-07-07T12:46:33Z

Mingo s8fapm65: Mingo s8fapm65 subió una nueva versión de Archivo:SMTP 1 b.jpg

Configuración SMTP

APIs

2025-07-07T12:34:01Z

Mingo s8fapm65:

APIs

2025-07-07T12:33:31Z

Mingo s8fapm65:

Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 

## [[La API de triwus]]
## [[Facturascripts]]
## [[Configuración correo SMTP]]
## [[PWA]]

[[Archivo:Triwus-Panel_de_control-APIs.png|border|800px]]]

Página principal

2025-07-07T12:33:14Z

Mingo s8fapm65: /* El panel de control */

Estamos incorporando nuevos artículos para convertirla en el sitio de ayuda para el software de triwus.com [https://triwus.com].

[[Archivo:Logo-wiki.png|no|Logotipo de Triwus]]

== Introducción ==

El software de Triwus está diseñado para facilitar tu presencia en internet.

== Las páginas web de Triwus ==

Explicación sobre la parte externa de las web de triwus.

# [[Introducción]]
# [[Páginas comunes]]
## [[Páginas comunes#Dise.C3.B1o_libre|Páginas de diseño libre]]
## [[Páginas comunes#Noticias|Páginas de noticias]]
## [[Páginas comunes#P.C3.A1ginas_de_Venta|Páginas de venta]]
# [[Páginas reservadas]]
## [[Página buscador]]
## [[Página confirmar]]
## [[Página legal]]
## [[Página login / registro]]
## [[Página pago]]
## [[Página perfil]]

== El panel de control ==

# [[Accediendo al panel de control]]
# [[Tu perfil de usuario]]
## [[Tu_perfil_de_usuario#Tu cuenta Triwus|Tu cuenta Triwus ]]
## [[Tu_perfil_de_usuario#Tus datos de contacto y preferencias de pago|Tus datos de contacto y preferencias de pago]]
## [[Tu_perfil_de_usuario#Tus servicios contratados / Facturas|Tus servicios contratados / Facturas]]
# [[El correo electrónico]]
## [[Gestión de las cuentas de correo electrónico de un dominio]]
## [[El webmail de Triwus]]
## [[Configurar un cliente de correo electrónico]]
# [[Configuraciones básicas de tu web]]
# [[Configura los idiomas de tu web]]
# [[Las secciones de tu web]]
## [[Lista de secciones#Lista de secciones|Lista de secciones]]
## [[Propiedades de una sección#Propiedades de una sección|Propiedades de una sección]]
# [[Configura tus redes sociales]]
# [[Los avisos legales de tu web]]
# [[Gestión de los usuarios de tu web]]
## [[Gestión de los usuarios de tu web#Activar componentes de login y registro|Activar componentes de login y registro]]
## [[Gestión de los usuarios de tu web#Modalidades de registro|Modalidades de registro]]
## [[Gestión de los usuarios de tu web#Los permisos de usuarios|Los permisos de usuarios]]
## [[Gestión de los usuarios de tu web#Enviar invitaciones|Enviar invitaciones]]
# [[Estadísticas web]]
# [[Mis Documentos Triwus]]
#[[Registro de accesos]]
##[[Registro de accesos#Registro Triwus|Registro Triwus]]
##[[Registro de accesos#Regsitro Apache|Registro Apache]]
# [[APIs]]
## [[La API de triwus]]
## [[Facturascripts]]
## [[Configuración correo SMTP]]
## [[PWA]]
# [[Gestión de tu tienda en internet]]
## [[Gestión de productos]]
## [[Gestión de categorías de producto]]
## [[Gestión de perfiles de producto]]
## [[Gestión de clientes]]
## [[Gestión de ventas]]
## [[Gestión de almacenes y gastos de envío]]
## [[Gestión de formas de pago]]
## [[Gestión de promociones]]
## [[Otras configuraciones]]

== El gestor de contenidos ==

# [[Accediendo al panel de edición]]
# [[Las páginas web de Triwus]]
## [[Las_páginas_web_de_Triwus#El_modelo_de_página|El modelo de página]]
## [[Las_páginas_web_de_Triwus#Tipos_de_párrafo|Tipos de párrafo]]
## [[Las_páginas_web_de_Triwus#Componentes|Componentes]]
# [[Editando los contenidos de tu sitio web]]
## [[Editando los contenidos de tu sitio web#Descripción general del panel de edición|Descripción general del panel de edición]]
## [[Editando los contenidos de tu sitio web#Párrafos|Párrafos]]
## [[Editando los contenidos de tu sitio web#Textos|Textos]]
## [[Editando los contenidos de tu sitio web#Imágenes|Imágenes]]
## [[Editando los contenidos de tu sitio web#Galerías de imágenes|Galería de imágenes]]
## [[Editando los contenidos de tu sitio web#Carruseles|Carruseles]]
## [[Editando los contenidos de tu sitio web#Enlaces de contenidos. Vínculo|Enlaces de contenidos. Vínculo]]
## [[Editando los contenidos de tu sitio web#Separadores|Separadores]]
## [[Editando los contenidos de tu sitio web#Formularios de contacto|Formularios de contacto]]
## [[Editando los contenidos de tu sitio web#VCard|VCard]]
## [[Editando los contenidos de tu sitio web#Compartir en redes sociales|Compartir en Redes Sociales]]
## [[Editando los contenidos de tu sitio web#Índice|Índice]]
## [[Editando los contenidos de tu sitio web#Migas de pan|Migas de pan]]
## [[Editando los contenidos de tu sitio web#Panoramix|Panoramix]]

== Miscelánea ==

# [[Reglamento General de Protección de Datos 2018 (RGPD)]]
# [[Duplicando un producto con campos cústom (CC)]]

APIs

2025-07-07T12:26:40Z

Mingo s8fapm65:

Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 

[[Archivo:Triwus-Panel_de_control-APIs.png|border|800px]]]

APIs

2025-07-07T12:26:09Z

Mingo s8fapm65: /* APIs */

== APIs ==

Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 

[[Archivo:Triwus-Panel_de_control-APIs.png|border|800px]]]

APIs

2025-07-07T12:16:53Z

Mingo s8fapm65: Página creada con «== APIs == Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 800px] »

== APIs ==

Triwus implementa algunas APIs que permitirán interactuar con outros sistemas. 

[[Archivo:Api 1.jpg|border|800px]]]

Página principal

2025-07-07T12:07:33Z

Mingo s8fapm65: /* El panel de control */

Estamos incorporando nuevos artículos para convertirla en el sitio de ayuda para el software de triwus.com [https://triwus.com].

[[Archivo:Logo-wiki.png|no|Logotipo de Triwus]]

== Introducción ==

El software de Triwus está diseñado para facilitar tu presencia en internet.

== Las páginas web de Triwus ==

Explicación sobre la parte externa de las web de triwus.

# [[Introducción]]
# [[Páginas comunes]]
## [[Páginas comunes#Dise.C3.B1o_libre|Páginas de diseño libre]]
## [[Páginas comunes#Noticias|Páginas de noticias]]
## [[Páginas comunes#P.C3.A1ginas_de_Venta|Páginas de venta]]
# [[Páginas reservadas]]
## [[Página buscador]]
## [[Página confirmar]]
## [[Página legal]]
## [[Página login / registro]]
## [[Página pago]]
## [[Página perfil]]

== El panel de control ==

# [[Accediendo al panel de control]]
# [[Tu perfil de usuario]]
## [[Tu_perfil_de_usuario#Tu cuenta Triwus|Tu cuenta Triwus ]]
## [[Tu_perfil_de_usuario#Tus datos de contacto y preferencias de pago|Tus datos de contacto y preferencias de pago]]
## [[Tu_perfil_de_usuario#Tus servicios contratados / Facturas|Tus servicios contratados / Facturas]]
# [[El correo electrónico]]
## [[Gestión de las cuentas de correo electrónico de un dominio]]
## [[El webmail de Triwus]]
## [[Configurar un cliente de correo electrónico]]
# [[Configuraciones básicas de tu web]]
# [[Configura los idiomas de tu web]]
# [[Las secciones de tu web]]
## [[Lista de secciones#Lista de secciones|Lista de secciones]]
## [[Propiedades de una sección#Propiedades de una sección|Propiedades de una sección]]
# [[Configura tus redes sociales]]
# [[Los avisos legales de tu web]]
# [[Gestión de los usuarios de tu web]]
## [[Gestión de los usuarios de tu web#Activar componentes de login y registro|Activar componentes de login y registro]]
## [[Gestión de los usuarios de tu web#Modalidades de registro|Modalidades de registro]]
## [[Gestión de los usuarios de tu web#Los permisos de usuarios|Los permisos de usuarios]]
## [[Gestión de los usuarios de tu web#Enviar invitaciones|Enviar invitaciones]]
# [[Estadísticas web]]
# [[Mis Documentos Triwus]]
#[[Registro de accesos]]
##[[Registro de accesos#Registro Triwus|Registro Triwus]]
##[[Registro de accesos#Regsitro Apache|Registro Apache]]
# [[APIs]]
## [[La API de triwus]]
## [[Configuración correo SMTP]]
# [[Gestión de tu tienda en internet]]
## [[Gestión de productos]]
## [[Gestión de categorías de producto]]
## [[Gestión de perfiles de producto]]
## [[Gestión de clientes]]
## [[Gestión de ventas]]
## [[Gestión de almacenes y gastos de envío]]
## [[Gestión de formas de pago]]
## [[Gestión de promociones]]
## [[Otras configuraciones]]

== El gestor de contenidos ==

# [[Accediendo al panel de edición]]
# [[Las páginas web de Triwus]]
## [[Las_páginas_web_de_Triwus#El_modelo_de_página|El modelo de página]]
## [[Las_páginas_web_de_Triwus#Tipos_de_párrafo|Tipos de párrafo]]
## [[Las_páginas_web_de_Triwus#Componentes|Componentes]]
# [[Editando los contenidos de tu sitio web]]
## [[Editando los contenidos de tu sitio web#Descripción general del panel de edición|Descripción general del panel de edición]]
## [[Editando los contenidos de tu sitio web#Párrafos|Párrafos]]
## [[Editando los contenidos de tu sitio web#Textos|Textos]]
## [[Editando los contenidos de tu sitio web#Imágenes|Imágenes]]
## [[Editando los contenidos de tu sitio web#Galerías de imágenes|Galería de imágenes]]
## [[Editando los contenidos de tu sitio web#Carruseles|Carruseles]]
## [[Editando los contenidos de tu sitio web#Enlaces de contenidos. Vínculo|Enlaces de contenidos. Vínculo]]
## [[Editando los contenidos de tu sitio web#Separadores|Separadores]]
## [[Editando los contenidos de tu sitio web#Formularios de contacto|Formularios de contacto]]
## [[Editando los contenidos de tu sitio web#VCard|VCard]]
## [[Editando los contenidos de tu sitio web#Compartir en redes sociales|Compartir en Redes Sociales]]
## [[Editando los contenidos de tu sitio web#Índice|Índice]]
## [[Editando los contenidos de tu sitio web#Migas de pan|Migas de pan]]
## [[Editando los contenidos de tu sitio web#Panoramix|Panoramix]]

== Miscelánea ==

# [[Reglamento General de Protección de Datos 2018 (RGPD)]]
# [[Duplicando un producto con campos cústom (CC)]]

Página principal

2025-07-07T12:06:57Z

Mingo s8fapm65: /* El panel de control */

Estamos incorporando nuevos artículos para convertirla en el sitio de ayuda para el software de triwus.com [https://triwus.com].

[[Archivo:Logo-wiki.png|no|Logotipo de Triwus]]

== Introducción ==

El software de Triwus está diseñado para facilitar tu presencia en internet.

== Las páginas web de Triwus ==

Explicación sobre la parte externa de las web de triwus.

# [[Introducción]]
# [[Páginas comunes]]
## [[Páginas comunes#Dise.C3.B1o_libre|Páginas de diseño libre]]
## [[Páginas comunes#Noticias|Páginas de noticias]]
## [[Páginas comunes#P.C3.A1ginas_de_Venta|Páginas de venta]]
# [[Páginas reservadas]]
## [[Página buscador]]
## [[Página confirmar]]
## [[Página legal]]
## [[Página login / registro]]
## [[Página pago]]
## [[Página perfil]]

== El panel de control ==

# [[Accediendo al panel de control]]
# [[Tu perfil de usuario]]
## [[Tu_perfil_de_usuario#Tu cuenta Triwus|Tu cuenta Triwus ]]
## [[Tu_perfil_de_usuario#Tus datos de contacto y preferencias de pago|Tus datos de contacto y preferencias de pago]]
## [[Tu_perfil_de_usuario#Tus servicios contratados / Facturas|Tus servicios contratados / Facturas]]
# [[El correo electrónico]]
## [[Gestión de las cuentas de correo electrónico de un dominio]]
## [[El webmail de Triwus]]
## [[Configurar un cliente de correo electrónico]]
# [[Configuraciones básicas de tu web]]
# [[Configura los idiomas de tu web]]
# [[Las secciones de tu web]]
## [[Lista de secciones#Lista de secciones|Lista de secciones]]
## [[Propiedades de una sección#Propiedades de una sección|Propiedades de una sección]]
# [[Configura tus redes sociales]]
# [[Los avisos legales de tu web]]
# [[Gestión de los usuarios de tu web]]
## [[Gestión de los usuarios de tu web#Activar componentes de login y registro|Activar componentes de login y registro]]
## [[Gestión de los usuarios de tu web#Modalidades de registro|Modalidades de registro]]
## [[Gestión de los usuarios de tu web#Los permisos de usuarios|Los permisos de usuarios]]
## [[Gestión de los usuarios de tu web#Enviar invitaciones|Enviar invitaciones]]
# [[Estadísticas web]]
# [[Mis Documentos Triwus]]
#[[Registro de accesos]]
##[[Registro de accesos#Registro Triwus|Registro Triwus]]
##[[Registro de accesos#Regsitro Apache|Registro Apache]]
# [APIs]
## [[La API de triwus]]
## [[Configuración correo SMTP]]
# [[Gestión de tu tienda en internet]]
## [[Gestión de productos]]
## [[Gestión de categorías de producto]]
## [[Gestión de perfiles de producto]]
## [[Gestión de clientes]]
## [[Gestión de ventas]]
## [[Gestión de almacenes y gastos de envío]]
## [[Gestión de formas de pago]]
## [[Gestión de promociones]]
## [[Otras configuraciones]]

== El gestor de contenidos ==

# [[Accediendo al panel de edición]]
# [[Las páginas web de Triwus]]
## [[Las_páginas_web_de_Triwus#El_modelo_de_página|El modelo de página]]
## [[Las_páginas_web_de_Triwus#Tipos_de_párrafo|Tipos de párrafo]]
## [[Las_páginas_web_de_Triwus#Componentes|Componentes]]
# [[Editando los contenidos de tu sitio web]]
## [[Editando los contenidos de tu sitio web#Descripción general del panel de edición|Descripción general del panel de edición]]
## [[Editando los contenidos de tu sitio web#Párrafos|Párrafos]]
## [[Editando los contenidos de tu sitio web#Textos|Textos]]
## [[Editando los contenidos de tu sitio web#Imágenes|Imágenes]]
## [[Editando los contenidos de tu sitio web#Galerías de imágenes|Galería de imágenes]]
## [[Editando los contenidos de tu sitio web#Carruseles|Carruseles]]
## [[Editando los contenidos de tu sitio web#Enlaces de contenidos. Vínculo|Enlaces de contenidos. Vínculo]]
## [[Editando los contenidos de tu sitio web#Separadores|Separadores]]
## [[Editando los contenidos de tu sitio web#Formularios de contacto|Formularios de contacto]]
## [[Editando los contenidos de tu sitio web#VCard|VCard]]
## [[Editando los contenidos de tu sitio web#Compartir en redes sociales|Compartir en Redes Sociales]]
## [[Editando los contenidos de tu sitio web#Índice|Índice]]
## [[Editando los contenidos de tu sitio web#Migas de pan|Migas de pan]]
## [[Editando los contenidos de tu sitio web#Panoramix|Panoramix]]

== Miscelánea ==

# [[Reglamento General de Protección de Datos 2018 (RGPD)]]
# [[Duplicando un producto con campos cústom (CC)]]

Página principal

2025-07-07T12:04:21Z

Mingo s8fapm65: /* El panel de control */

Estamos incorporando nuevos artículos para convertirla en el sitio de ayuda para el software de triwus.com [https://triwus.com].

[[Archivo:Logo-wiki.png|no|Logotipo de Triwus]]

== Introducción ==

El software de Triwus está diseñado para facilitar tu presencia en internet.

== Las páginas web de Triwus ==

Explicación sobre la parte externa de las web de triwus.

# [[Introducción]]
# [[Páginas comunes]]
## [[Páginas comunes#Dise.C3.B1o_libre|Páginas de diseño libre]]
## [[Páginas comunes#Noticias|Páginas de noticias]]
## [[Páginas comunes#P.C3.A1ginas_de_Venta|Páginas de venta]]
# [[Páginas reservadas]]
## [[Página buscador]]
## [[Página confirmar]]
## [[Página legal]]
## [[Página login / registro]]
## [[Página pago]]
## [[Página perfil]]

== El panel de control ==

# [[Accediendo al panel de control]]
# [[Tu perfil de usuario]]
## [[Tu_perfil_de_usuario#Tu cuenta Triwus|Tu cuenta Triwus ]]
## [[Tu_perfil_de_usuario#Tus datos de contacto y preferencias de pago|Tus datos de contacto y preferencias de pago]]
## [[Tu_perfil_de_usuario#Tus servicios contratados / Facturas|Tus servicios contratados / Facturas]]
# [[El correo electrónico]]
## [[Gestión de las cuentas de correo electrónico de un dominio]]
## [[El webmail de Triwus]]
## [[Configurar un cliente de correo electrónico]]
# [[Configuraciones básicas de tu web]]
# [[Configura los idiomas de tu web]]
# [[Las secciones de tu web]]
## [[Lista de secciones#Lista de secciones|Lista de secciones]]
## [[Propiedades de una sección#Propiedades de una sección|Propiedades de una sección]]
# [[Configura tus redes sociales]]
# [[Los avisos legales de tu web]]
# [[Gestión de los usuarios de tu web]]
## [[Gestión de los usuarios de tu web#Activar componentes de login y registro|Activar componentes de login y registro]]
## [[Gestión de los usuarios de tu web#Modalidades de registro|Modalidades de registro]]
## [[Gestión de los usuarios de tu web#Los permisos de usuarios|Los permisos de usuarios]]
## [[Gestión de los usuarios de tu web#Enviar invitaciones|Enviar invitaciones]]
# [[Estadísticas web]]
# [[Mis Documentos Triwus]]
#[[Registro de accesos]]
##[[Registro de accesos#Registro Triwus|Registro Triwus]]
##[[Registro de accesos#Regsitro Apache|Registro Apache]]
# [[La API de triwus]]
## [[La API de triwus#Cómo empezar|Cómo empezar]]
## [[La API de triwus#Documentación de la API de Triwus|Documentación de la API de Triwus]]
## [[Configuración correo SMTP]]
# [[Gestión de tu tienda en internet]]
## [[Gestión de productos]]
## [[Gestión de categorías de producto]]
## [[Gestión de perfiles de producto]]
## [[Gestión de clientes]]
## [[Gestión de ventas]]
## [[Gestión de almacenes y gastos de envío]]
## [[Gestión de formas de pago]]
## [[Gestión de promociones]]
## [[Otras configuraciones]]

== El gestor de contenidos ==

# [[Accediendo al panel de edición]]
# [[Las páginas web de Triwus]]
## [[Las_páginas_web_de_Triwus#El_modelo_de_página|El modelo de página]]
## [[Las_páginas_web_de_Triwus#Tipos_de_párrafo|Tipos de párrafo]]
## [[Las_páginas_web_de_Triwus#Componentes|Componentes]]
# [[Editando los contenidos de tu sitio web]]
## [[Editando los contenidos de tu sitio web#Descripción general del panel de edición|Descripción general del panel de edición]]
## [[Editando los contenidos de tu sitio web#Párrafos|Párrafos]]
## [[Editando los contenidos de tu sitio web#Textos|Textos]]
## [[Editando los contenidos de tu sitio web#Imágenes|Imágenes]]
## [[Editando los contenidos de tu sitio web#Galerías de imágenes|Galería de imágenes]]
## [[Editando los contenidos de tu sitio web#Carruseles|Carruseles]]
## [[Editando los contenidos de tu sitio web#Enlaces de contenidos. Vínculo|Enlaces de contenidos. Vínculo]]
## [[Editando los contenidos de tu sitio web#Separadores|Separadores]]
## [[Editando los contenidos de tu sitio web#Formularios de contacto|Formularios de contacto]]
## [[Editando los contenidos de tu sitio web#VCard|VCard]]
## [[Editando los contenidos de tu sitio web#Compartir en redes sociales|Compartir en Redes Sociales]]
## [[Editando los contenidos de tu sitio web#Índice|Índice]]
## [[Editando los contenidos de tu sitio web#Migas de pan|Migas de pan]]
## [[Editando los contenidos de tu sitio web#Panoramix|Panoramix]]

== Miscelánea ==

# [[Reglamento General de Protección de Datos 2018 (RGPD)]]
# [[Duplicando un producto con campos cústom (CC)]]

Archivo:Editar imagen de galeria.png

2024-12-31T13:31:25Z

Mingo s8fapm65: Mingo s8fapm65 subió una nueva versión de Archivo:Editar imagen de galeria.png

Editando imagen de la galeria

Editando los contenidos de tu sitio web

2024-12-31T13:25:02Z

Mingo s8fapm65: /* Galerías de imágenes */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se ajustarán al número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

[[Archivo:Elmt galeria lista.png]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T13:23:42Z

Mingo s8fapm65: /* Edición y personalización de la galería de imágenes */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

[[Archivo:Elmt galeria lista.png]]

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se ajustarán al número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T13:22:17Z

Mingo s8fapm65: /* Añadir y configurar una galería de imágenes */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

[[Archivo:Elmt galeria lista.png]]

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se ajustarán al número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T13:21:54Z

Mingo s8fapm65: /* Galerías de imágenes */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

[[Archivo:Elmt galeria lista.png]]

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se ajustarán al número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Archivo:Elmt galeria lista.png

2024-12-31T13:21:21Z

Mingo s8fapm65:

Editando los contenidos de tu sitio web

2024-12-31T13:18:12Z

Mingo s8fapm65: /* Galerías de imágenes */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

[[Archivo:Galeria.png|500px]]

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se ajustarán al número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T13:15:48Z

Mingo s8fapm65: /* Edición y personalización de la galería de imágenes */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se ajustarán al número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

[[Archivo:Galeria.png|500px]]

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T10:34:30Z

Mingo s8fapm65: /* Las comunicaciones recibidas */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se colocan en el número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

*'''Número de columnas:''' Si has seleccionado la galería tipo mosaico, puedes ajustar el número de columnas para determinar cómo se distribuirán las imágenes.

*'''Movimiento:''' Si habilitas esta opción, las imágenes de la galería pasarán automáticamente una tras otra cuando se abra una imagen de la galería.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

[[Archivo:Galeria.png|500px]]

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
** Si el usuario aportó algún campo de tipo '''email''', también recibirá una copia del correo electrónico generado.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T10:30:07Z

Mingo s8fapm65: /* Añadir y configurar un formulario de contacto */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se colocan en el número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

*'''Número de columnas:''' Si has seleccionado la galería tipo mosaico, puedes ajustar el número de columnas para determinar cómo se distribuirán las imágenes.

*'''Movimiento:''' Si habilitas esta opción, las imágenes de la galería pasarán automáticamente una tras otra cuando se abra una imagen de la galería.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

[[Archivo:Galeria.png|500px]]

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]

Editando los contenidos de tu sitio web

2024-12-31T10:27:34Z

Mingo s8fapm65: /* Añadir y configurar un formulario de contacto */

En este apartado, detallaremos el uso básico del editor de contenidos triwus para comenzar a crear contenido en las páginas de tu sitio web.

Explicaremos los componentes disponibles, cómo insertarlos, editarlos, eliminarlos y modificarlos, entre otros aspectos.

== Descripción general del panel de edición ==

En este artículo se mostrará la operativa básica del panel de edición de Triwus.

El panel de edición permite la edición visual de las secciones o páginas web de tu sitio web. Independientemente del tipo web, básicamente existen 5 operaciones: '''añadir''', '''editar''', '''mover''', '''copiar''' y '''eliminar'''.

En la siguiente ilustración veremos una vista general del panel de edición.

[[File:Editor-0.png]]

1. La '''barra de navegación superior''' del editor triwus proporciona acceso rápido a varias funciones y opciones. A continuación, se describen los elementos de la barra superior:
* '''Página:''' Al pulsar sobre esta opción, se abre una ventana lateral que muestra los datos de la página que estás editando en ese momento. Estos datos son solo informativos. Si necesitas modificar algún dato, como programar la publicación de la página, debes salir del editor y hacerlo desde el panel de control. Para más información, consulta la sección
* '''Insertar:''' Abre un menú con los componentes disponibles que podemos añadir a nuestra página web.
* '''Panoramix:''' Es un componente especial que permite colocar una o varias imágenes panorámicas en la parte superior de tu página web. Puedes añadir un pequeño texto que se superpondrá sobre el Panoramix. Si decides incluir varias imágenes panorámicas, puedes configurar si deseas que roten automáticamente o no.
* '''Panel de Control:''' Cierra la vista de Edición y regresa al Panel de Control.
* '''Cerrar sesión:''' Cierra la sesión del Panel de Control de triwus.

Dependiendo del [[Páginas comunes|tipo de página]] que estemos editando, las opciones en la barra de navegación pueden variar, como en el caso de las páginas de tipo 'noticias'. Aquí, disponemos de dos opciones especiales para publicar o filtrar noticias ya publicadas.

[[Archivo:Barra nav noticias.png]]

2. '''Barra menú lateral''': En la siguiente imagen vemos para qué son cada una de las opciones mostradas en el menú lateral.

[[Archivo:Editor barra lateral.png|400px]]

[[File:Editor-videos-0.png|thumb|none|Vídeo: editando una página web Triwus|link=https://wiki.triwus.com/images/f/fd/Exemplo_editor.webm]]

== Párrafos ==

Los párrafos en nuestro editor de contenidos triwus, son un '''componente esencial que permite estructurar y organizar el contenido''' de una página web. Funcionan como bloques de construcción sobre los que añadir y personalizar otros componentes como, textos, imágenes, galerías, formularios de contacto, etc.

=== Añadir y configurar un párrafo ===

Para añadir un párrafo a nuestro sitio web utilizando el editor triwus, tenemos dos opciones:

* Desde la barra de navegación superior
** Navega a, '''Insertar > Párrafo'''.
** Con el botón izquierdo del ratón pulsado, arrastramos para colocar el párrafo en la ubicación deseada de la página.

* Desde la barra de menú lateral del editor
** Haz clic en el icono de '''Añadir párrafo''' y arrastra a la ubicación deseada.

Observarás que, al arrastrar un párrafo a una página, los párrafos existentes se vuelven de un tono más claro cuando pasas sobre ellos. Esto te ayuda a identificar debajo de cuál párrafo se colocará el nuevo párrafo.

Una vez que hayas colocado el párrafo en tu página, podrás editar varias opciones propias del componente párrafo. Estas opciones te permiten personalizar cómo se va a mostrar y comportar el párrafo en tu página:

[[Archivo:Parrafo opciones.png|border|600px]]

* '''Título del párrafo''' Puedes dar un nombre específico a un párrafo, para identificarlo rápidamente.
* '''Número de Columnas:''' Especifica el número de columnas que tendrá el párrafo. Las opciones disponibles son:
** De 1 a 4 columnas.
** Configuraciones de columnas desiguales como '1 + 2' (dos columnas, siendo la segunda el doble de la primera) o '2 + 1' (dos columnas, siendo la primera el doble de la segunda).
* '''Márgenes:''' Ajusta los márgenes del párrafo en relación con otros párrafos para controlar el espaciado vertical (norte/sur) y horizontal (este/oeste).
* '''Relleno:''' Modifica el espaciado interno del párrafo para definir la distancia entre su contenido y sus bordes.
* '''Color de fondo:''' Personaliza el color de fondo del párrafo para que se adapte al estilo de tu sitio web.

Al pasar el ratón por un párrafo, verás resaltado su nombre y junto a él, dos iconos: uno para editar las propiedades del párrafo y otro para eliminarlo. Ten en cuenta que tanto si editas como si eliminas un párrafo, estos cambios no se efectuarán hasta que hagas clic en el icono de guardar de la barra lateral. Si eliminamos un párrafo por error, podemos deshacerlo pulsando sobre el icono correspondiente en la barra lateral.

[[Archivo:Editar borrar parrafo.png]]

===Párrafos página de tipo noticias===

Al editar una página de tipo noticias, encontraremos un párrafo especial dedicado exclusivamente a la publicación de noticias. Este párrafo es único y no puede eliminarse. Además, puedes añadir más párrafos a esta página, al igual que en una página normal.

En el caso del párrafo especial de noticias, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Formato de las imágenes:''' En este párrafo, podemos definir el formato de las imágenes que acompañarán las noticias, incluyendo la relación entre el ancho y el alto que tendrán al agregar una noticia.
#'''Selector de buscador:''' Ofrece la opción de elegir un buscador para las noticias o desactivar esta función.
#'''Etiquetado:''' Es posible habilitar hasta ''tres niveles de etiquetado'' que permiten categorizar las noticias mediante etiquetas. Cada nivel tiene un campo correspondiente donde puedes asignarles un nombre. Esto se reflejará posteriormente en la página web y en el buscador de noticias, permitiendo filtrar la búsqueda por categorías agrupadas en cada nivel.

[[Archivo:Parrafo noticias.jpg]]

 

===Párrafos página tipo ventas===

Al editar una página de tipo ventas, encontrarás un párrafo especial dedicado exclusivamente al catálogo de productos disponibles. Este párrafo es único y no puede eliminarse.

En el caso del párrafo especial de ventas, además de las opciones estándar de un componente de párrafo normal, disponemos de las siguientes opciones de configuración:

#'''Selecciona un buscador:''' Permite elegir un buscador para los productos o desactivar esta función.
#'''Selecciona una categoría:''' Permite elegir una categoría específica para que en este párrafo o catálogo de ventas se muestren únicamente los productos de esa categoría. Por ejemplo, podríamos tener en nuestro sitio web secciones de ventas diferentes que muestren productos de distintas categorías.
#'''Ordenar por:''' Selector que permite ordenar la presentación de los productos en esta página de ventas de las siguientes maneras:
#*Los más recientes primero
#*Los más recientes al final
#*Ordenar por nombre
#*Aleatorio

[[Archivo:Parrafo ventas.jpg]]

 

== Textos ==

Los textos son un componente importante dentro de los párrafos en nuestro editor de contenidos. Este componente permite añadir y personalizar bloques de texto para estructurar el contenido de tu sitio web.

===Añadir un texto===

Para añadir un bloque de texto a un párrafo utilizando el editor triwus, sigue estos pasos:

* Desde la barra de navegación superior:
** Navega a '''Insertar > Texto'''.
** Con el botón izquierdo del ratón pulsado, arrastra el bloque de texto a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
** Haz clic en el icono de Añadir texto y arrastra el bloque a la ubicación deseada dentro del párrafo.

Observarás que, al '''arrastrar''' un texto sobre un párrafo vacío, la zona del párrafo se vuelve de un tono azulado, indicando el lugar donde podrás '''"soltar"''' el texto que deseas insertar. En un mismo párrafo, puedes apilar diferentes componentes de texto según sea necesario para estructurar el contenido de tu página.

===Edición y eliminación de textos===

Una vez que hayas arrastrado el componente de texto dentro de un párrafo o una de sus columnas, aparecerá por defecto un pequeño borrador de texto "lorem ipsum". Al pasar el ratón por encima, verás que el componente se resalta con una línea punteada, y aparecerá una pequeña barra con iconos con diferentes acciones que podremos hacer sobre este componente que en este caso son, '''editar, mover, duplicar o eliminar'''.

Esta barra de acciones estará presente en la mayoría de los componentes y siempre incluirá las opciones de editar y eliminar. Dependiendo del tipo de componente, puede incluir otras acciones específicas.

Al hacer clic en el icono de editar, se mostrará un editor con las opciones más comunes para la edición de texto. Estas opciones incluyen cambiar la fuente, el tamaño del texto, el color, la alineación, aplicar estilos como negrita, cursiva, subrayado, y añadir enlaces, entre otras.

[[Archivo:Texto 1.png|600px]] [[Archivo:Componente texto.png]]

Ten en cuenta que, tanto si editas como si eliminas un bloque de texto, '''estos cambios NO se efectuarán hasta que hagas clic en el icono de guardar''' de la barra lateral. Si eliminas un bloque de texto por error, puedes deshacer la acción pulsando el icono correspondiente en la barra lateral

== Imágenes ==

Al igual que los componentes de texto, las imágenes desempeñan un papel importante al añadir contenido visual a tu sitio web. En el editor triwus, contamos con un componente dedicado para facilitar la carga e inserción de imágenes en tus páginas (con un tamaño máximo de 3 megabytes).

=== Añadir y configurar imágenes ===

Si deseas añadir una imagen a tu contenido, simplemente sigue estos pasos para subirla desde tu dispositivo:

* Desde la barra de navegación superior:
**Navega a '''Insertar > Imagen'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Imagen a la ubicación deseada dentro del párrafo.

* Desde la barra de menú lateral del editor:
**Haz clic en el icono de añadir imagen y arrastra a la ubicación deseada dentro del párrafo. Al igual que al añadir un texto, la zona donde se va a insertar la imagen se resalta con un tono azul claro, facilitando la identificación del lugar donde deseamos colocar el componente.

=== Edición y eliminación de imágenes ===

Una vez que hayas insertado un componente de imagen en tu página, al pasar el ratón por encima, el componente se resaltará con una línea punteada y aparecerá una pequeña barra con iconos que ofrecen varias acciones, tales como '''editar, mover, duplicar, recortar imagen y eliminar'''.

Al seleccionar la opción de recortar imagen, aparecerá un área de recorte sobre la imagen. Podrás mover esta área de recorte y ajustarla con unos tiradores ubicados en las esquinas y a lo largo de los bordes. Estos tiradores te permitirán modificar el tamaño del área de recorte, seleccionando así la parte específica de la imagen que deseas conservar antes de confirmar el recorte.

[[Archivo:Imagen barra opciones.png|500px]] [[Archivo:Recortar imagen.png|500px]]

----

Al insertar por primera vez o editar una imagen ya publicada, aparecerá una ventana lateral a la derecha con las opciones disponibles para la imagen:

# '''Información del archivo:''' Se mostrará una miniatura de la imagen e información del archivo subido.
# '''Cambiar la imagen:''' En caso de editar la imagen, se puede cambiar por otra.
# '''Ancho:''' Es posible configurar el porcentaje del ancho para modificar su tamaño.
# '''Alineación:''' La imagen se puede posicionar horizontalmente a la izquierda, al centro o a la derecha.
# '''Texto en pie de foto:''' Se puede añadir un texto al pie de la imagen.
# '''Etiqueta (alt):''' Permite añadir un texto descriptivo para el atributo [https://es.wikipedia.org/wiki/Wikipedia:Texto_alternativo_para_las_im%C3%A1genes alt] de la etiqueta HTML img.
# '''Enlace:''' Se puede asignar un enlace a la imagen e indicar si este debe '''abrir en''' en la misma ventana o en una nueva del navegador.

[[Archivo:Opciones imagen.png|500px]]

== Galerías de imágenes ==

En el editor triwus, contamos con el componente ''Galería'', dedicado para crear y gestionar galerías de imágenes de manera sencilla.

===Añadir y configurar una galería de imágenes===

Si deseas añadir una galería de imágenes a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > Galería'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente Galería a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente de galería de imágenes, se abrirá una ventana emergente que te permitirá seleccionar y cargar múltiples imágenes desde tu dispositivo

===Edición y personalización de la galería de imágenes===

Una vez que hayas insertado una galería, puedes personalizarla y editarla con las siguientes opciones:

*'''Tipo de galería:'''
**Galería tipo '''producto''': En esta disposición, una imagen se muestra en grande y las demás aparecen en miniatura debajo. Al hacer clic en una miniatura, esta pasa a ser la imagen grande, similar a como son presentadas las imágenes de un producto en una página de tipo ventas.
**Galería tipo '''mosaico''': Las imágenes se colocan en el número de columnas que indiques. Esta disposición permite una presentación más compacta y visualmente diversa.

*'''Número de columnas:''' Si has seleccionado la galería tipo mosaico, puedes ajustar el número de columnas para determinar cómo se distribuirán las imágenes.

*'''Movimiento:''' Si habilitas esta opción, las imágenes de la galería pasarán automáticamente una tras otra cuando se abra una imagen de la galería.

[[Archivo:Galeria imagenes.png|450px]]

Si hacemos clic sobre una imagen, tendremos la opción de añadirle un texto a modo de etiqueta, el cual se mostrará al pie de la página cuando se visualice desde una galería. También podemos eliminar la imagen pulsando sobre el botón 'eliminar'.

[[Archivo:Editar imagen de galeria.png]]

Otra manera de eliminar imágenes de la galería es pulsar directamente sobre el icono [[Archivo:Imagen galeria eliminar.png]] que aparece sobre la imagen. Las imágenes se pueden recolocar arrastrándolas al nuevo lugar utilizando el icono [[Archivo:Imagen galeria mover.png]].

[[Archivo:Galeria.png|500px]]

== Carruseles ==

El carrusel es una herramienta visual que permite rotar elementos, como imágenes y textos, de manera cíclica. Ideal para destacar contenido de forma dinámica y organizada, el carrusel puede contener enlaces a secciones de nuestro sitio web o a otros sitios externos.

Por ejemplo, si tenemos una página de noticias en nuestro sitio, podríamos usar un carrusel en la página de inicio para resaltar las últimas noticias publicadas. Así, iremos agregando los enlaces a las noticias que deseamos destacar.

===Añadir y configurar un carrusel===

Para agregar un carrusel, ve a la barra de navegación superior, selecciona '''Insertar > Carrusel''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento. Una vez colocado el carrusel ya podremos editarlo y configurar sus características:

# '''Número de columnas''': Esta opción permite especificar el número de elementos visibles simultáneamente en el carrusel.
# '''Formato de las imágenes''': Define la relación de aspecto de las imágenes en el carrusel.
# '''Movimiento''': Permite seleccionar si el carrousel se desplazará automáticamente.
# '''Navegador''': La opción ''"Mostrar puntos de navegación"'' permite habilitar o deshabilitar los indicadores visuales que muestran el progreso o la posición actual dentro del carrusel.
# '''Lista de entradas del carrusel''':
#* En esta sección, se presenta la lista de elementos que actualmente componen el carrusel. Desde aquí, podemos editarlos, marcarlos como publicados o no, o eliminarlos definitivamente.
#* El botón "''Nueva entrada''" permite añadir nuevos elementos manualmente.
#* El botón ''“Escanear URL”'' facilita agregar contenido de otras webs al analizar la URL de estas páginas. A través de sus metadatos, completa el contenido del elemento con la imagen, título y descripción de la página analizada.

[[Archivo:Carrusel 1.jpg]]

=== Añadir/editar entradas al carrusel ===

Una vez pulsemos sobre el botón "Nueva Entrada", se nos mostrará una nueva ventana como la siguiente, donde añadiremos los datos de la entrada que vamos a publicar.
 

[[Archivo:Carrosel 0.jpg|500px]]

#'''Imagen:''' Haz clic en "Cambiar imagen" para seleccionar y cargar una imagen que representará la entrada en el carrusel. Una vez cargada la imagen la recortaremos al formato de imagen que hayamos asignado en la configuración del carrusel.
#'''URL:''' Podemos asignar un enlace al que redirigir cuando se haga clic en la entrada. A su lado disponemos de un menú desplegable para decidir si el enlace se abrirá en la misma ventana o en una nueva.
#'''Titular:''' Este campo permite introducir el título o encabezado que se mostrará bajo la imagen en la entrada del carrusel.
#'''Entradilla:''' Un campo de texto para incluir una breve descripción o resumen de la entrada del carrusel. Esta información se mostrará debajo del titular.

 
<hr>
 
Otra opción para agregar entradas al carrusel es la de "escanear la URL" de una página web. Esta funcionalidad analiza los metadatos de la página, como el título y la descripción, y automáticamente los utiliza para rellenar los campos. Para ello, sigue estos pasos:

#'''Introducir la URL:''' Escribe la URL de la página web en el campo proporcionado, como se muestra en la imagen:
#'''Probar la URL:''' Pulsa el botón "Probar". El sistema comenzará a escanear la URL para extraer metadatos.
#'''Ventana de Información:''' Una vez completado el escaneo, se mostrará en una tabla, la información encontrada. Si estamos de acuerda, pulsamos "Aceptar" y la entrada queda creada. Esta entrada la podremos editar luego.

[[Archivo:Probar url.jpg|800px]]

Para '''editar una entrada''' existente en el carrusel, sigue estos pasos:

#Seleccionar la Entrada a Editar: En la ventana de edición del carrusel, busca la entrada que deseas editar y haz clic en el botón de edición ( [[Archivo:Icono editar.png]] ).
#Modificar la Información: Se abrirá una ventana similar a la de creación de nuevas entradas. Aquí podrás modificar cualquier campo: cambiar o recortar la imagen, actualizar la URL, editar el titular o ajustar la entradilla.

[[Archivo:Carrusel 2.jpg|400px]][[Archivo:Carrosel 3.jpg|400px]]

== Enlaces de contenidos. Vínculo ==

El componente ‘Vínculo’ facilita la inserción de contenido externo en tu página web. Por ejemplo, puedes embeber códigos de iframes para agregar videos, mapas, encuestas o widgets de redes sociales sin alojarlos en tu sitio.

Para insertar un Vínculo podemos hacerlo bien desde la barra de navegación superior, '''insertar > Vínculo''', o bien desde el icono habilitado para ello en el menú lateral como vemos en la imagen.

[[Archivo:Vinculo menu lateral.jpg|200px]]

Cuando hayamos arrastrado y soltado un componente de vínculo a nuestra página, o queramos editar uno previamente añadido, se nos muestra una ventana con un área de texto donde debemos colocar el código que deseamos insertar en nuestra página web.

En la siguiente imagen, vemos un ejemplo de cómo insertar un vídeo de YouTube en tu página web utilizando el componente de vínculo.

[[Archivo:Vinculo.jpg]]

== Separadores ==

El componente '''Separador''' es un elemento visual utilizado para dividir o separar secciones de contenido.

Para agregar un separado, ve a la barra de navegación superior, selecciona '''Insertar > Separador''' y simplemente arrastra y suelta el componente sobre el lugar deseado de la página que estemos editando en ese momento.

A continuación, se detallan las opciones de configuración disponibles para este componente:

* '''Ancho:''' Define el ancho del separador como un porcentaje relativo a su contenedor.
* '''Alto:''' Establece la altura del separador hasta un máximo de 15 píxeles.
* '''Margen:''' Ajusta el margen alrededor del separador en píxeles.
* '''Borde Redondeado:''' Si habilitamos esta opción, los bordes del separador se redondean.
* '''Alineación:''' podremos seleccionar la alineación horizontal del separador dentro de su contenedor.
* '''Color:''' Permite seleccionar el color del separador.

[[Archivo:Separador.jpg]]

== Formularios de contacto ==

El componente '''Contacto''', permite configurar un formulario para que los usuarios o visitantes de tu sitio web puedan enviar sus consultas, incidencias o cualquier otro asunto que podremos configurar como veremos más adelante Tener un formulario de contacto en tu página web, es una herramienta muy útil para interactuar con los usuarios y gestionar sus comunicaciones.

=== Añadir y configurar un formulario de contacto ===

Para incluir un formulario en nuestra página web, seguiremos el mismo procedimiento que hemos utilizado para los demás componentes.

*Desde la barra de navegación superior:
**Navega a '''Insertar > Contacto'''. Con el botón izquierdo del ratón pulsado, arrastra el componente Contacto al párrafo o columna de un párrafo donde quieras mostrar el formulario.

[[Archivo:Componente contacto.jpg|500px]]

'''1 Lista de campos:''' Permite configurar los distintos campos (voluntarios y obligatorios) que los usuarios deben completar en un formulario de contacto. Cada campo dispone de las siguientes características:
* '''Etiqueta''': El nombre del campo.
* '''Tipo''': En función del tipo de campo, el formulario podrá realizar validaciones específicas para cada tipo.
* '''Obligatorio''': No se puede enviar una comunicación si el valor de este campo.
* '''Ayuda''': Para definir un mensaje de ayuda al usuario.

[[Archivo:Contacto campos.jpg|300px]]

'''2. Lista de asuntos:''' Permite configurar los distintos asuntos (temas o categorías), bajo los cuales los usuarios pueden enviar sus emails a través del formulario de contacto. Cada asunto puede estar asociado a una dirección de correo electrónico específica, permitiendo así una mejor gestión y organización de las consultas.
* '''Agregar Asunto''': Para añadir un nuevo asunto, se debe hacer clic en el botón ''"+ Añadir asunto"''. Esto abrirá un nuevo panel donde se debe ingresar el nombre del asunto y la dirección de correo electrónico asociada.
* '''Editar Asunto''': Para modificar un asunto existente, se selecciona el asunto de la lista, lo que abrirá un formulario editable con el nombre del asunto y el correo electrónico asociado.
* '''Eliminar Asunto''': Si deseamos eliminar un asunto, pulsamos sobre el icono de eliminación [[Archivo:Icono eliminar.png]] y éste desaparecerá de la lista de asuntos. Si eliminamos algún asunto por error, podemos cancelar la edición del componente, y los cambios no se guardarán.

[[Archivo:Contacto 2.jpg]]

'''3 Remitente:''' En esta sección, se puede especificar la dirección de correo electrónico que se utilizará como remitente para los mensajes enviados a través del formulario de contacto. Este correo de remitente generalmente se configura como una dirección de ''"no-responder(no-reply)"'' para evitar respuestas directas a este correo.

=== Las comunicaciones recibidas ===

Cuando un usuario utiliza el formulario de contacto de tu web:
* Se crea un '''id_ticket''' y se asigna a la comunicación. Esto nos permitirá identificar la comunicación fácilmente.
* Se envia un correo electrónico al email asociado al asunto, con la información que se solicita en el formulario.
* Se registra la comunicación en la [[Mis Documentos Triwus|carpeta privada]] del panel de control.

 

== VCard ==

[https://es.wikipedia.org/wiki/VCard vCard] es un formato estándar para el intercambio de información personal, específicamente tarjetas personales electrónicas (electronic business cards). Un código QR de una vCard es una versión codificada de estas tarjetas. Cuando se escanea con un dispositivo móvil, este código proporciona toda la información de contacto almacenada, permitiendo al usuario guardar fácilmente los datos en su lista de contactos. Es una forma eficiente y moderna de compartir información de contacto sin necesidad de intercambiar tarjetas físicas.

En el gestor de contenidos de triwus, facilitamos la creación de vCards para tu sitio web. Con nuestro componente VCard, podemos generar rápidamente una tarjeta de visita digital y publicar el código QR de la tarjeta en cualquiera de nuestras páginas web.

=== Añadir y configurar una vCard ===

Si deseas añadir un componente VCard a tu página, sigue estos pasos para crearla:

*Desde la barra de navegación superior:
**Navega a '''Insertar > VCard'''.
**Con el botón izquierdo del ratón pulsado, arrastra el componente VCard a la ubicación deseada dentro del párrafo.

Una vez que has añadido el componente VCard, se abrirá una ventana emergente que te permitirá introducir la información de contacto y personalizar el código QR que se va a generar con la vCard.

Puedes personalizarla y editarla con las siguientes opciones:

'''1. Tus datos de contacto:'''

*Nombre
*Razón social
*Teléfono
*Email
*Dirección postal
*Código postal
*Localidad
*País
*URL

'''2. Genera el código QR:'''

*Tamaño: Puedes seleccionar el tamaño del código QR mediante un selector con las opciones, S(pequeño), M(mediano), L(grande).
*Alineación: Elige entre izquierda, centro o derecha para posicionar el código QR.

[[Archivo:Vcard.jpg|500px]]

== Compartir en redes sociales ==

El componente "Compartir en Redes Sociales" añade iconos de redes sociales (Facebook, Twitter, LinkedIn y WhatsApp) a tu página web. Los usuarios pueden hacer clic en estos iconos para compartir la página actual en la red social correspondiente.

Para agregar el componente de compartir en redes sociales, ve a la barra de navegación superior, selecciona '''Insertar > R. Sociales''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

La configuración del componente permite seleccionar qué iconos de redes sociales se mostrarán y seleccionar su alineación horizontal respecto al párrafo donde se vaya a publicar el componente.

[[Archivo:Redes sociales.jpg|border]]

 

== Índice ==

La función de este componente es construir un índice con los nombres de las secciones de tu sition web, proporcionando a los usuarios una manera rápida y fácil de acceder a diferentes partes del contenido.

El componente analiza la estructura de secciones de tu sitio web, y las dispone a modo de indice con enlaces a las mismas.

== Migas de pan ==

Las [https://es.wikipedia.org/wiki/Miga_de_pan_(informática) migas de pan] nos muestran el camino hasta la sección sobre la que estemos editando en ese momento.

Para agregar "migas de pan", ve a la barra de navegación superior, selecciona '''Insertar > Migas''' y simplemente arrastra y suelta el componente sobre el párrafo deseado de la página que estemos editando en ese momento.

== Panoramix ==
El componente '''Panoramix''' es un componente especial del gestor de contenidos triwus, diseñado para mejorar la presentación visual de las páginas web al permitir la inserción de una imagen panorámica justo debajo de la cabecera de la página que estés editando.

Para insertar imágenes panorámicas en la página web que estés editando en ese momento, sigue estos pasos:

#Pulsa sobre la opción '''Panoramix''' en la '''barra de navegación superior''' del editor.
#Se abrirá la ventana de configuración de imágenes panorámicas. Desde aquí, podrás insertar o editar imágenes panorámicas y marcar o desmarcar cada imagen para decidir si se mostrará en la página web.
#Si deseas mostrar más de una imagen panorámica, puedes configurar el movimiento entre ellas. Puedes decidir si se mostrarán en bucle y ajustar la velocidad del movimiento: rápido, normal o lento.

[[Archivo:Ventana panoramix.png]]

Al agregar una nueva imagen al Panoramix o editar una ya existente, se abrirá la siguiente ventana con las opciones de configuración:

*'''Cambiar la imagen:''' Opción para seleccionar una imagen nueva o diferente para el Panoramix.
*'''Texto sobre la imagen:''' Campo para introducir texto que aparecerá sobre la imagen panorámica.
*'''Asignar H1:''' Opción para asignar una etiqueta H1 al texto insertado en el campo anterior, lo que le dará mayor relevancia en términos de SEO y estilo.
*'''Color de texto:''' Selección del color del texto que aparecerá sobre la imagen. El color predeterminado es blanco (#FFF).
*'''Enlace:''' Campo para agregar un enlace que se abrirá al hacer clic en la imagen panorámica, con la opción de decidir si el enlace se abre en la misma ventana o en una nueva ventana.

[[Archivo:Panoramix editor.png]]