Puede personalizar el visual de su sitio como editar las imágenes ya añadidas, ya sea para cambiar, redimensionar, ajustar la posición o aplicar efectos visuales de forma rápida.

A continuación, haga clic en la plataforma que utilizó para crear su sitio y consulte cómo hacerlo:

• Nuevo Creador de Sitios con IA
• Creador de Sitios Rápido (Descontinuado)

Nuevo Creador de Sitios con IA

1En Editor del Creador de Sitios con IA, haga clic en imagen que desea editar   

2En la barra que aparece debajo de la imagen seleccione la opción de edición y consulte cómo hacerlo:

• Cambiar la imagen
• Ajustar el enfoque de la imagen
• Filtros
• Agregar máscara
• Ajustes de destaque
• Agregar enlace
• Alinear
• Cambiar el tamaño
• Ajustar estilo
• Agregar efectos
• Duplicar
• Eliminar

Ajustar el enfoque de la imagen

1En la barra “Ajustes de la imagen”, haga clic en el icono de imagen

2En la sección “Imagen” se muestra la imagen actual, sobre ella tiene:

• Puntito azul en el centro - Para ajustar el enfoque de la imagen, muévalo - Principalmente útil para mantener el punto principal visible en diferentes tamaños de pantalla.

• Personalizado - Elija otros modos de visualización de la imagen

Filtros 

1En la barra “Ajustes de la imagen”, haga clic en el icono de imagen

2En la parte superior, haga clic en Filtros

3A continuación, haga clic en el efecto que desea:

• A) Icono de Matiz (Tonalidad de color) - Sirve para cambiar el color general de la imagen. Moviendo hacia los lados, puede dejar la imagen con tonos diferentes, como azulados, esverdeados o rojizos.
• B) Icono de gota (Saturación) - Controla la intensidad de los colores. Si disminuye, los colores se vuelven más débiles, casi en blanco y negro. Si aumenta, los colores se vuelven más vivos.
• C) Icono de sol (Brillo) - Ajusta qué tan clara u oscura queda la imagen - Úselo para aclarar imágenes oscuras u oscurecer imágenes muy claras.
• D) Icono de círculo dividido (Contraste) - Aumentar el contraste da más énfasis, disminuir lo hace que la imagen sea más "suave".

Agregar Máscara 

Para definir el molde de la imagen, que puede ser cuadrado, rectangular, circular, entre otros:

1En la barra “Ajustes de la imagen”, haga clic en el icono de imagen

2En la parte superior, haga clic en Máscara

3A continuación, en “Forma” haga clic en el efecto que desea

4En “Tamaño” controla si la foto cubre todo el espacio o se muestra entera, elija entre las opciones:

• En forma: La foto se ajusta sin cortes
• Rellenar: Rellena todo el espacio (puede cortar partes)
• Personalizado: elija cómo desea

5En “Posición” defina qué parte de la imagen aparece - útil si está cortada

Ajustes de destaque 

Para alterar los colores y aspecto de la imagen:

1En la barra “Ajustes de la imagen”, haga clic en el icono de cuadrado

2 A continuación, haga clic en el efecto que desea:

• A) Superposición (Fondo Extra) - para una capa de color sobre su imagen, elija:
  • Sólido - para un color único, elija el color que desea - Por ejemplo: negro transparente
  • Gradiente - para un efecto de colores mezclados
  • Si no desea, haga clic en Ninguno

• B) Borde - Si desea crear un borde alrededor de su imagen, seleccione grosor y color (el predeterminado es "Ninguno")
• C) Sombra - Si desea agregar profundidad, elija el color que desea y ajuste la dirección e intensidad

Agregar enlace

Para agregar un enlace sobre la imagen:

1En la barra “Ajustes de la imagen”, haga clic en el icono de enlace

2A continuación, haga clic en el tipo de enlace que desea:

• A) Página - Enlace a otra página de su sitio:
  • Tipo: Elija las opciones para vincular contenido en su sitio
    • Ninguno
    • Páginas - Enlace a otras páginas de su sitio - por ejemplo: Página "Sobre Nosotros"
    • Publicaciones - Enlace a artículos del blog (si tiene uno)
    • Historias - Enlace a contenido en formato de historias, como en Instagram
    • Categorías - Enlace a categorías específicas - por ejemplo: Todas las publicaciones sobre "Consejos"
  • Abrir en una nueva pestaña: Active esta opción (icono azul) - Si el botón está desactivado (gris), la imagen no se abrirá en otra pestaña

• B) URL - Enlace a otra página de su sitio:
  • Enlace a: Agregue el enlace externo - Por ejemplo: https://pedidos.com
  • Abrir en una nueva pestaña: Active esta opción (icono azul) - Si el botón está desactivado (gris), la imagen no se abrirá en otra pestaña
  • Convertir a NoFollow: para SEO, avisa a Google que no siga este enlace

• C) Popup - Abre una ventana flotante. Ideal si desea añadir en la imagen formularios de contacto, promociones especiales y avisos importantes

Si desea añadir en “Popup” haga clic en + y luego elija un modelo o cree su propio

• D) Archivo - Enlace para descargar un PDF o documento, si desea añadir, haga clic en + y elija el archivo

Alinear

Define la posición de la imagen en relación al espacio del modelo:

1En la barra “Ajustes de la imagen”, haga clic en el ícono de alinear:

• A) Alinear a la izquierda - la imagen se adhiere al margen izquierdo
• B) Alinear a la derecha - la imagen se adhiere al margen derecho
• C) Alinear al centro - la imagen se adhiere al centro

Cambiar el tamaño 

Para ajustar el tamaño de las imágenes en altura y ancho:

1En la barra “Ajustes de la imagen”, haga clic en el icono de engranaje

2A continuación, elija la opción:

• A) Ancho: Define el tamaño horizontal de la imagen - Ajuste como desee
• B) Alto: Controla el tamaño vertical de la imagen - Ajuste como desee

Ajustar Estilo 

Personalice el estilo de las imágenes de su sitio, como rotar, relleno de margen y opciones más avanzadas, consulte a continuación cómo hacerlo:

1En la barra “Ajustes de la imagen”, haga clic en el icono de engranaje

2A continuación, haga clic en Estilos

3En el panel “Estilo”, se presentan 3 opciones:

• A) Básico - opciones rápidas de ajuste fácil
  • Mostrar en escritorio - Controla si el elemento aparece (en azul) o se oculta (gris)
  • Padding (Relleno) - Espacio dentro del elemento
  • Margen - Espacio fuera del elemento (distancia hasta otros elementos) - Ajuste como desee para Izquierda, Superior, Derecha, Inferior
  • Esquina - Redondea los bordes
  • Modo de fusión - Cómo el elemento se mezcla con el fondo - Si no desea cambiar, deje en "Normal"
  • Posición - Fija el elemento en la pantalla al desplazarse

 

• B) Avanzado - opciones extras para quienes desean ajustes más precisos en el diseño - Esta sección es opcional y puede dejarse como predeterminada, si no tiene conocimiento en CSS:
  • Z-index (Capas): Controla qué elemento queda delante/detrás cuando hay superposición - Por ejemplo, si desea que la imagen quede encima de otro elemento del fondo, deje un número mayor - Por ejemplo 100
  • ID y clase CSS Nombres para personalizar con código - No lo modifique si no sabe
  • Atributos Personalizados: Configuraciones extras en formato clave:valor
  • CSS personalizados: Espacio para agregar códigos de estilo avanzados
  • Transición: Suaviza cambios - Por ejemplo: 50 = medio segundo de animación
  • Título Alternativo: Texto que aparece cuando el mouse se coloca sobre el elemento

 

• C) Transformar - girar, inclinar y ajustar imágenes
  • Girar: Rueda el elemento en sentido horario o anti-horario - Por ejemplo: 90° gira el elemento de lado
  • Desplazamiento: Mueve el elemento hacia los lados o verticalmente
  • Sesgo (Inclinación): Crea un efecto de “perspectiva” - Valores positivos inclinan hacia la derecha y negativos hacia la izquierda
  • Escalar: Aumente o disminuya el tamaño
  • Voltear: Crea un efecto espejo

Agregar efectos 

Para crear movimientos y transiciones en las imágenes del sitio:

1En la barra “Ajustes de la imagen”, haga clic en el ícono de engranaje

2Luego, haga clic en Efectos

3Elija el tipo de efecto en el menú superior:

• Entrada - Animación de la imagen (Ninguno, Salto, Desvanecer, Girar, Deslizar, Zoom, Atención) - Por ejemplo: Una imagen que "resbala" al cargar la página
• Hover - Efecto al pasar el mouse sobre el elemento (Ninguno, Balancear, Pulso, Zumbido, Inclinación, Escala, Mover, Girar) - Por ejemplo: imagen que cambia de color cuando el cursor está encima
• Scroll (Desplazamiento) - Animación que ocurre a medida que usted baja la página (Vertical, Horizontal, Transparente, Desenfoque, Girar, Escala, MouseTrack, Inclinación 3D) - Por ejemplo: Imagen que gira al llegar a la altura correcta

4Ahora, seleccione el efecto deseado - Por ejemplo: Salto

5Ajuste la duración (si es necesario)

Duplicar

1En la barra “Ajustes de la imagen”, haga clic en el icono de duplicar

2A continuación, arrastre la copia a la parte del sitio donde desea posicionarla

Eliminar 

Para eliminar la imagen:

1En el Editor del Creador de sitios con IA, haga clic en Imagen - Para seleccionarla

2En la barra “Ajustes de la imagen”, haga clic en el icono de papelera

Creador de sitios Rápido (Descontinuado)

Vea a continuación cómo editar y personalizar imágenes en el sitio: 

• Cambiar formato de la imagen
• Aumentar o disminuir el zoom de la imagen
• Adjuntar enlace a la imagen
• Cambiar imagen

Cambiar formato de la imagen

1Mueva el mouse sobre la imagen que desea editar y en la barra de acciones que se muestra, haga clic en el ícono de engranaje 

2Después, elija una de las opciones de formato y defina si desea que las esquinas sean arredondeadas, con borde o con sombra 

Aumentar o disminuir el zoom de la imagen

1Mueva el mouse sobre la imagen que desea acercar y en la barra de acciones que se muestra, haga clic en el ícono de imagen punteada 

2Después, en la herramienta de zoom, defina el nivel de aproximación - también es posible arrastrar la imagen para cambiar la posición dentro de la selección definida 

Adjuntar enlace a la imagen

1Mueva el mouse sobre la imagen que desea adjuntar el enlace y en la barra de acciones que se muestra, haga clic en el ícono de enlace 

2Después, elija una de las opciones para añadir un enlace – cuando el usuario de su sitio haga clic en la imagen, se le dirigirá a la opción definida