Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    Adding Page Components

    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 its place in 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.

    tools_menu_with_components_highlighted.png

    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 better page layout. For example: you can add a text area and a map into a simple 1 column layout.

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

    CS-AddingComponents-Drag.png

    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:

    CS-AddingComponents-1.png

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

    Layout
    • 1 Column

      1_column.png

    • 2 Columns - 50% - 50%

      2_column.png

    • 3 Columns - 33% - 33% - 33%

      3_column.png

    • 2 Responsive Rows

      2_responsive_rows.png

    • 3 Responsive Rows

      3_responsive_rows.png

    • 4 Responsive Rows

      4_responsive_rows.png

    • Columns 30% - 70% - 2 columns

      column_30_70.png

    • Columns 70% - 30% - 2 columns

      column_70_30.png

    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 from 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.

      text_box.png

    • 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.

      link.png

    • 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,

      image.png

    • 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.

      video.png

    • Map - You can specify an address, map type, and zoom level

      map.png

    • 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.

      link_block.png

    • Quote - A text box preformatted for a quote. You can specify and ID and title.

      quote.png

    • Text section - Two text boxes, with the first one preformatted for a header. You can specify and ID and title.

      text_section.png

    • Divider - A very narrow line. You can specify and ID and title.

      divider.png

    • Header - A text box preformatted for a page-top. You can specify and ID and title.

      header.png

    • Footer - A text box preformatted for a page-bottom. Includes a link. You can specify and ID and title.

      footer.png

    • Icon - An image of a small star. You can specify and ID and title.

      icon.png

    Basic components are commonly used elements, including text, link, image, maps, videos, quotes, divider, footer, icons and more.

    When you are focused on a text box, a formatting menu appears at the top left of the box.

    edit_text_menu.png

    For more information, see Editing and Configuring Page Elements.

    Images
    • Image Caption - A block with an image box and a text box beneath.

      image_caption.png

    • Blog Card - A block with an image box and three text boxes preformatted for heading, description, and text

      blog_card.png

    • Titled Photo - A block with an image box and a text box superimposed on it (top left)

      titled_photo.png

    • 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

      circle_caption.png

    • Embedded Title - A block with an image box and a text box superimposed on it (bottom center)

      embedded_title.png

    • 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

      side_photo_card.png

    • 4 Images Card - A block with a text box for a title and boxes for four small square images

      4_images_card.png

    • 6 Images Card - Like the 4 Images Card, but smaller boxes for six images

      6_images_card.png

    • 8 Images Card - Like the 4 Images Card, but smaller boxes for eight images

      8_images_card.png

    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_square.png

    • List with Images - A block with boxes for a circular slices of images stacked vertically, as well as a header text box

      list_with_images_circle.png

    • List with Icons - A block with small images of stars (flush top) stacked vertically, as well as a header text box

      list_with_icons.png

    • List with Icons (Centered) - A block with small images of stars (flush center) stacked vertically, as well as a header text box

      list_with_icons_centered.png

    • Sections List - A block with a header text box, four text boxes stacked vertically beneath it, and a footer text box

      sections_list.png

    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.

      color_sections.png

    • Square sections - Sections stacked vertically. Each one has a header text box and several smaller text boxes underneath.

      square_sections_multiple.png

    • Square sections - Sections stacked vertically, with simple text boxes with centered text.

      square_sections.png

    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 linked, useful for an events calendar.

      list_with_links.png

    • 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_day.png

    Event components provide a great way to design pages for one or multiple days events. They provide the required layout including date, times in 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.

      2_columns_table.png

    • 3 Columns - A table of text boxes with three columns.

      3_columns_table.png

    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.

    insert_your_code.png

    The result appears on the page.

    custom_code.png

    For this element, an extra icon html_edit.png 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.

    • Was this article helpful?