Adding Page Components

Last updated
Save as PDF
Share
1. Share
2. Tweet
3. Share

Creative Studio includes an extensive set of components that enable you to build your page in a matter of minutes. You can simply drag-and-drop components into their place on the page using the WYSIWYG display. A single component can include one or more elements.

You can add components to template-based pages or blank pages (pages that begin from the blank template).

Components Overview

To view the components menu:

Select the tiles icon from the tools menu.

To add components to the page:

Drag-and-drop them into their relevant position, as shown in the screenshot below.

Creative Studio's WYSIWYG display uses nested elements, enabling you to add components and elements into existing ones for a better page layout. For example, you can add a text area and a map into a simple one-column layout.

The green highlighted line indicates the drop position of your component.

If you select any element on the page (and not the contents of the element), an edit menu appears. See Editing and Configuring Page Elements.

Component Types

Components are organized into types:

The types are as follows (select an image icon to see an example):

Layout	1 Column 2 Columns - 50% - 50% 3 Columns - 33% - 33% - 33% 2 Responsive Rows 3 Responsive Rows 4 Responsive Rows Columns 30% - 70% - 2 columns Columns 70% - 30% - 2 columns	Responsive elements used to set the overall page design. These can be used at the start of the page design as they provide the overarching layout for the page. Note that you can start with a simple 3-row layout for example and use Duplicate to extend the page layout as explained here. For all components, you can specify an ID and title.
Basic	Text - A text box. You can specify and ID and title. Link - A text link. Enter the text and target window for the link. Enter a URL or select the link icon to enter or select an app URL. See Working with App URLs. Image - An image; when you add this element, the Asset Manager opens, enabling you to select a previously uploaded image. You can specify the Alt text, Video - By default, a video is wider than the average phone width, so you will need to resize it for phones. You can select an HTML5, Youtube, or Vimeo source for the video. You can also specify the still image to appear, whether the video autoplays or loops, and whether video controls appear to the end-user. Map - You can specify an address, map type, and zoom level Link block - A linked square. Useful to make any area of the page a link. You can specify a title, link target, and whether to open a new window. Quote - A text box preformatted for a quote. You can specify and ID and title. Text section - Two text boxes, with the first one preformatted for a header. You can specify and ID and title. Divider - A very narrow line. You can specify and ID and title. Header - A text box preformatted for a page-top. You can specify and ID and title. Footer - A text box preformatted for a page-bottom. Includes a link. You can specify and ID and title. Icon - An image of a small star. You can specify and ID and title.	Basic components are commonly used elements, including text, links, images, maps, videos, quotes, dividers, footers, icons, and more. When you are focused on a text box, a formatting menu appears at the top left of the box. For more information, see Editing and Configuring Page Elements.
Images	Image Caption - A block with an image box and a text box beneath. Blog Card - A block with an image box and three text boxes preformatted for heading, description, and text Titled Photo - A block with an image box and a text box superimposed on it (top left) Circle Caption - A block with a box for a circular slice of an image, as well as three text boxes preformatted for name, description, and additional text; useful for indexing names, places, recipes, and so forth Embedded Title - A block with an image box and a text box superimposed on it (bottom center) Side Photo Card - A block with a box for a circular slice of an image to the left, as well as two text boxes preformatted for name and title; useful for convention badges and so forth 4 Images Card - A block with a text box for a title and boxes for four small square images 6 Images Card - Like the 4 Images Card, but with smaller boxes for six images 8 Images Card - Like the 4 Images Card, but smaller boxes for eight images	Image components enable you to leverage defined layouts of image and text, for example, a blog card or an image with a caption. In addition, image cards can be found in this section. These components are premade combinations of components from the first two sections (Layout and Basic). For all components, you can specify an ID and title.
Lists	List with Images - A block with boxes for small square images stacked vertically, as well as a header text box List with Images - A block with boxes for a circular slice of images stacked vertically, as well as a header text box List with Icons - A block with small images of stars (flush top) stacked vertically, as well as a header text box List with Icons (Centered) - A block with small images of stars (flush center) stacked vertically, as well as a header text box Sections List - A block with a header text box, four text boxes stacked vertically beneath it, and a footer text box	List components are prepackaged components for various uses. This section offers several types of lists, including lists with images, lists with icons, and more. These components are premade combinations of components from the first two sections (Layout and Basic). For all components, you can specify an ID and title.
Sections	Color sections - Colored sections with text boxes, stacked vertically. Square sections - Sections stacked vertically. Each one has a header text box and several smaller text boxes underneath. Square sections - Sections stacked vertically, with simple text boxes with centered text.	Section components can be used for information pages with multiple topics, enabling you to easily segment the page between the different sections. These components are premade combinations of components from the first two sections (Layout and Basic). For all components, you can specify an ID and title.
Events	List (With Links) - A series of vertical text boxes with links, useful for an events calendar. List (No Links) - The same as List (With Links), but no links. Event Day - An image with text boxes that looks like a calendar day.	Event components provide a great way to design pages for one or multiple days' events. They provide the required layout including date, times of the day, and more. These components are premade combinations of components from the first two sections (Layout and Basic). For all components, you can specify an ID and title.
Tables	2 Columns - A series of text boxes, arranged like an itinerary. 3 Columns - A table of text boxes with three columns.	Table components provide a designed layout for all purposes. These components are premade combinations of components from the first two sections (Layout and Basic). For all components, you can specify an ID and title.
Advanced	Custom Code - A freeform element that enables you to enter any HTML code that you like. When you add this element, a pane enters to enter your code. The result appears on the page. For this element, an extra icon appears in the element edit menu. Select to open the HTML editing pane. You can also double-click in the element to open the HTML editing pane.	Custom code can be added to a page. You can specify an ID and title. For some Creative Studio custom code examples, refer to the developer network blog section.