Introducción: Creative Studio

Al crear y editar páginas en ion, verás el área de edición del Creative Studio en el lado derecho de la página. Aquí es donde agregas o editas el contenido de tu página.

Barra superior

En la parte superior de tu Creative Studio, verás una barra de botones con funciones clave para navegar, editar y probar tu creative.

En el lado izquierdo de la barra superior, encontrarás enlaces de navegación que se pueden utilizar para volver rápidamente a la infografía, campaña o portafolio en el que fue creado el contenido.

El lado derecho de la barra superior nos informa el estado de la página actual y acceso rápido a operaciones comunes.

De izquierda a derecha, el primer icono es el indicador de Live. Si le agregas una URL a tu publicación, verás el indicador LIVE. Si no se ha agregado ninguna URL, no verás ese indicador.

El siguiente icono te permite alternar entre mostrar y ocultar tus contenedores.

Los siguientes cuatro íconos te permiten ver y publicar tu página dentro de las ventanas gráficas LG, MD, SM y XS. Esto es especialmente útil al publicar páginas que recibirán tráfico de muchos tipos diferentes de dispositivos. Estas ventanas gráficas están representadas por iconos de monitor, tablet, teléfono horizontal y teléfono vertical, respectivamente.

A continuación, verás los botones de Undo y Redo que puedes utilizar para deshacer y rehacer los cambios realizados en la página.

Tu barra de estado también te permite abrir una prueba (Proof) y una vista previa (Preview) en vivo de la página en otra pestaña.

Traffic

La pestaña Traffic se puede utilizar para mostrar qué URLs se agregaron a tu creative. Simplemente haz clic en el botón Traffic para ver las URLs de tu creative. También puedes hacer clic en los enlaces dentro del botón Traffic para ir directamente a la pantalla de administración de la URL correspondiente.

Palette

Tu pestaña Palette es donde encontrarás iconos para agregarle contenidos a tu página. Estos iconos están organizados en categorías fácilmente identificables para su edición. Encontrarás los iconos de edición colocando el cursor sobre una categoría determinada. También encontrarás una flecha en la esquina inferior derecha de cada icono de categoría cuando estés pasando el mouse, que se puede usar para fijar los íconos en la pestaña Palette para un acceso más rápido. ¡Simplemente busca el icono con el que deseas trabajar y arrástralo a tu página para comenzar a editar! 

Layout

La categoría Layout incluye iconos para actualizar la estructura de tu página. Aquí es donde encontrarás la cuadrícula receptiva que se puede agregar a cualquier contenedor. Las cuadrículas se utilizan para agregar una estructura de columnas a tu página en la que puedes publicar contenidos. La categoría Layout también incluye iconos que se pueden usar para agregar filas o columnas adicionales a las cuadrículas. También encontrarás un icono de contenedor en la parte inferior de la categoría Layout en caso de que necesites agregar un contenedor para comenzar con las cuadrículas.

Básico

La categoría Basics contiene iconos para agregar texto, imágenes, enlaces, formularios, un bloque de código HTML y un iFrame.

Interactive

La categoría Interactive incluye componentes que se crearon debido a las solicitudes de funciones comunes para la plataforma de ion, incluido contenidos con cuadrículas, en forma de acordeón, imágenes/contenido rotativos, capas de contenidos, lightboxes, videos, widgets personalizados (de tu biblioteca de widgets) y Flash (de tu biblioteca Flash).

Social

La categoría Social es donde encontrarás componentes comunes de marketing social como un botón de Me gusta de Facebook, un botón de Tweet de Twitter y mucho más.

Edit

La pestaña Edit es donde editas tus elementos. Cuando haces clic en un elemento de tu página, la pestaña Edit te mostrará opciones para editar dicho elemento. Al hacer doble clic en un determinado elemento, se abrirá un editor desplegable para editarlo directamente. También puedes eliminar un elemento o guardar toda el creative directamente desde la pestaña Edit.

Texto: simplemente haz clic y edita

Para editar texto, haz doble clic en el texto para abrir el editor desplegable, realiza la actualización y el cambio se reflejará inmediatamente en la página. Al hacer clic en el botón CSS en la pestaña Edit, opcionalmente también puedes agregar CSS en línea.

Imágenes: cárgalas directamente desde tu página

Después de hacer doble clic en una imagen, verás la biblioteca de imágenes. Desde ahí, puedes buscar una imagen determinada o explorar categorías para elegir una imagen de una categoría de imagen específica.

Para agregar una nueva imagen, ¡puedes cargarla directamente dentro del editor de imágenes! Simplemente arrastra y suelta tus imágenes desde tu desktop en el editor de imágenes desplegable para usar esa imagen en tu página.

Una vez que tu imagen se coloca en la página, también puedes usar las acciones disponibles, las reglas avanzadas y los editores CSS en línea que están disponibles dentro de la pestaña Edit para hacer que se pueda hacer clic en tu imagen, aplicar lógica condicional y/o anular los atributos de estilo predeterminados usando inline CSS.

Enlaces

Cuando hagas doble clic en un enlace para abrir el editor, el editor de etiquetas de enlaces se desplegará. Desde ahí, ingresa el texto que desees usar para tu enlace y haz clic en OK. A continuación, podrás utilizar los editores adicionales en la pestaña Edit para aplicar la acción de enlace, las reglas avanzadas y el inline CSS.

List

La pestaña List te mostrará todos los elementos que se utilizan en tu página. Los elementos enumerados en la pestaña List están agrupados por los contenedores en los que se han publicado. Al mover el mouse por la lista de elementos, verás un resaltado azul alrededor de los elementos dentro de un contenedor determinado.

Puedes hacer doble clic en un elemento dado en la List para editar dicho elemento en la pestaña Edit. También puedes hacer clic y arrastrar elementos dentro de la pestaña List para moverlos en tu página.

También notarás iconos a la derecha de cada uno de tus elementos en la pestaña List. Estos iconos se utilizan para identificar qué se ha aplicado a un elemento determinado, así como el tipo de elemento. Por ejemplo, un fragmento de texto al que se le haya aplicado un microtema tendrá un círculo púrpura y un icono A junto a él. Puedes ver una llave de color para los círculos colocando el cursor sobre cada uno de ellos.

Page

La pestaña Page muestra información clave como el título de la página que estás viendo actualmente, así como el estado de la página (aprobada o no aprobada). La pestaña Page también muestra todas las reglas y scripts de nivel de página. Simplemente haz clic en el botón RULES para abrir el editor de reglas de la página donde puedes agregar o editar las reglas que se ejecutan al cargar la página. También puedes agregar scripts en la página haciendo clic en el botón + SCRIPTS.

 Las meta tags también se agregan en la pestaña Page, que se puede configurar haciendo clic en la sección + META TAGS. También encontrarás información sobre el layout y el tema en la parte inferior de la pestaña Page.

Creative

La pestaña Creative te muestra una miniatura de cada página dentro de tu creative. Para editar una página diferente simplemente haz clic en la miniatura de esa otra página para comenzar a editarla. También puedes agregar otra página al creative haciendo clic en el signo + en la base de las miniaturas.

---

Si tiene alguna pregunta, póngase en contacto con nosotros en help@rockcontent.com. 😀