Getting Started with Wrap

Transcription

1 Getting Started with Wrap This Getting Started guide will show you how to build your first Wrap and highlight some of the major features in the Wrap authoring platform. You will learn how to: Create a Wrap from beginning to end Add Wrap cards of different types (imagery, textual, product gallery, end-ofwrap) Create covers which define how your Wrap appears on social media and on Web sites Publish and share a Wrap Your First Wrap This guide will show how to build a product lookbook Wrap for a fictitious company called Cascade. Cascade is a retailer of outdoor adventure gear. Cascade Product Lookbook the Sample Wrap you will create in this guide The narrative flow for this Wrap is as follows: Introduce the company (imagery card) A quick Who We Are company overview (imagery card) An engaging YouTube video about outdoor adventure (video card) A product gallery highlighting three products to sell (product gallery card) A statement of the company s product vision (textual card) Closing card with social share capabilities (end-of-wrap card) You can view the completed Wrap here: Let s get started! 1. Gathering Image Assets This wrap makes use of a set of image assets. You ll need them to build this Wrap. You can download them here:

2 Download the images using the link above. Then double-click the downloaded zip file to create an image folder on your computer. In a later step, you will upload these images to the platform when building your Wrap. 2. Log in to Wrap Authoring environment If you are not logged in, navigate to Wrap at: NOTE: The Wrap authoring environment works best using Google Chrome. Wrap has also been tested using Safari and Firefox. We recommend using and updated version of Chrome, either on a Mac or PC, when using Wrap. Log in using your username and password. You should then be at the overall Create screen: The Create screen 3. Create a New Wrap From the Create screen, click the New Wrap button on the upper-right side of the screen. In the New Wrap dialog that appears, enter the name Cascade Lookbook and click Create Wrap. New Wrap dialog

3 At this point, the platform creates a new Wrap along with an initial card, and shows the Configure screen. 1 You can see the initial card near the top-left of the Configure screen in the Wrap Card List area. The Configure Screen. This is the main screen to build a Wrap. Wrap creates your first card as an Imagery card. This initial card is setup as follows: In the Card Content area, the card shows one placeholder image (of a mountain) In the Card Layout area, the card is shown using the Full Bleed imagery layout In the Preview area, the card appears showing the single full-bleed image. Card Content Area Card Layout Area Preview Area From here, you add and customize cards to build the final Wrap. 1 The system may also show you an introductory set of Welcome to Wrap overlays when entering the Configure screen. If so, click X on the overlay screens to take you back to the Configure screen.

4 3. Uploading Assets, and Creating your First Card The next step is to customize your first card. Note that in the Card Layout area, the selected (and highlighted) layout is Full Bleed. By default, the first card is created using a Full Bleed Imagery layout. We will use this layout, but customize it to look like the following: Card 1: Imagery card The steps to complete the first Wrap card are the following: Upload imagery assets Update the main image with a new backround image Create a new imagery component for the company logo Create a new text component for the company s subhead Position each component on the card Let s get started. In the component toolbar, note that there is one component on the card, called Image. Component Toolbar. There is one image component (called Image ) associated with this card. Click on the Add Images button below the component toolbar to add images. The Add Images dialog appears.

5 Add Images dialog The easiest way to upload images is to simply drag and drop the images for the Wrap directly to the Add Images dialog. To do so, go to the folder you created earlier in this Guide when downloading the image assets for this sample Wrap. Select all the images, and drag them to the Add Images window. Dragging and dropping images directly to the Add Images dialog After Wrap uploads and processes the images, they will appear in the dialog:

6 Add Images dialog NOTE: alternatively, you could add images one at a time as needed. By adding all images at one time, you can select images for subsequent cards in this Wrap by directly choosing from this list. After the uploading is completed, all images will be selected (and highlighted in green). Click Add. The images will then be added to the image content area in the Configure screen. Card Content area. Images appear in the image content area for Image components. Now, select 01_image.jpg in the image content area. Doing so will change the image selection from the placeholder image to the new background image. Adding New Components The next step is to add a new image component, which will show the company s logo. In the Card Content area, click on Add Component +. It appears above the

7 component toolbar and just below the Card Type: Imagery label. The Add Component dialog appears: Add Component dialog In this dialog, click Image for the Component type. For the name, type Logo. Click Add Component to close the dialog. In the Card Content area, note that the Logo image component is added to the component toolbar and is shown in a selected state. The Logo image component will have a placeholder image. With the Logo image component selected, click on 01_logo_white.png. This action will change the image for the Logo component to the white logo. Finally, add a textbox component for the subhead. To do so, click Add Component from the Card Content area. Select TextBox as the component type. For the name, type Subhead. Click Add Component. The new Subhead text component is now added and selected in the component toolbar. Note that since Subhead is a text component, the content bin has changed from an Add Images configuration environment to a rich text editor. In the rich text editor, replace the text with the following: Preparing you for the outdoors. [NOTE: for all text updates in this guide, type the text directly into the rich text editor, instead of copying and pasting from this guide] To set the font for the text component, look at the bottom of the Preview area to find the TextBox Property Styling Toolbar. The current font face is set to OpenSans, at 40 point. In the Property Styling toolbar, click on the font face selector and set to Montserrat. Click on the font size selector and set to 28. TextBox Property Styling Toolbar for Subhead component

8 Repositioning Components To complete the card design, reposition each component to its correct location. To reposition a component, you can click on the component in the Preview area and simply drag-and-drop. You can also use keyboard controls for more fine-grained control, or you can also set specific location and size properties by selecting the component in the Component Toolbar, and specifying values directly in the Property Styling Toolbar. Using the Property Styling Toolbar, set each component position as follows: Image component. This component should fill the entire card. o Property Styling Toolbar settings: X: 0, Y:0, W: 640, H:910 Logo component: This component should be centered in the card o Property Styling Toolbar settings: X: 134, Y:256, W: 375, H:316 Subhead component: This component should be centered under the logo o Property Styling Toolbar settings: X: 150, Y: 600, W: 340 (note: textbox components auto-size so there is no height property) Congratulations! You have now finished your first card. 4. Add a Second Card From here, adding more cards should be a quick process. Your second card looks like this: Card 2: Imagery Card This is an Imagery card, using the Header Mask layout. To create it, click New Card. This button appears to the left of the Wrap card list.

9 New Card button The Add New Card dialog appears, as shown below: Add New Card screen The Add New Card screen prompts you to 1) enter a card name, and 2) select the type of card to create. Accept the default name for the first card, Card 2. For the card type, select Imagery. Then click Create to create the new card. In the Card Layout selector, note that the default selected layout is Full Bleed. Scroll down to the bottom of the list of layouts in this section, and click on the Header Image layout to select it. It is the last layout in the list.

10 Card Layout Area. Scroll down to find and select the Header Image layout Note that this layout has three components, shown in the component toolbar: Image (image component) Headline (text component) Body (text component) You will make the following changes to this card: Replace the header image Update the Headline and Body text and positioning Add a logo Change the card background In the component toolbar, select Image. In the image content area, click Add Images to open the Add Images dialog. Since you have previously uploaded all the images for this wrap, the images should already appear for you to select. Scroll down and select both 02_image.jpg and 02_logo_alt.png. Click Add to add the images to the image content area. Next, in the image content area, click on 02_image.jpg to change the header image. In the Preview area, resize the image until it fills the top portion of the screen. Alternatively, you can enter values directly into the Image Properties Styling Toolbar at the bottom of the Preview area, as follows: X: -1, Y:0, W: 642, H: 427. (Leave the mask value as-is, at Squared Corners )

11 Resizing the image in the Preview area. Next, select the Headline component. Replace the placeholder text with the following text: WHO WE ARE. In the TextBox Property Styling Toolbar in the Preview area, configure textbox properties as follows: Font face: Montserrat Font size: 40 Font color: Black on White (click the right arrow to cycle through values until Black on White is selected) X: 50, Y: 395, W: 540 Next, select the Body component and replace the placeholder text with the following: Founded in the mountains of northern California, Cascade strives to bring you the best apparel to prepare you for the adventures you plan on taking. [NOTE: type text directly into the rich text editor in Wrap Authoring, rather than copying and pasting from this guide.] In the TextBox Property Styling Toolbar for this component, configure textbox properties as follows: Font face: Anonymous Pro Font size: 24+ (NOTE: The + setting increases vertical spacing between lines) Font color: Black on White X: 70, Y: 480, W: 500 Next, add the logo image. Click Add Component from the Card Content area. Select Image as the component type. For the name, type Logo. Click Add Component. The Logo image should appear in the component toolbar. In the component toolbar, make sure the Logo component is selected. In the image content area, select 02_logo_alt.png. In the Preview area, drag the component so that it is centered and below the text. In the Property Styling Toolbar, set properties as follows: X: 219, Y: 728, W: 240, H: 89

12 Finally, change the background color. To do so, click anywhere in the Preview area outside the card. The Property Styling Toolbar will show properties for the card. Card Properties Styling Toolbar. Click in the Preview area outside the card boundary to have it appear. There is one property available for the card, which is the background color. Click on the right-arrow to cycle through values. Select White for the background color. 4. Preview and Save Your Work You now have two cards built! Before proceeding, you may want to preview your work to see how users will view your wrap. To do so, select Preview to the left of the Close and Publish buttons at top. = The Preview button, to the left of the Close button on the Configure screen. When done, click on the X while previewing the Wrap to get back to the Configure screen. At this point, you should save your work. Click Publish at the top right part of the screen. Clicking Publish saves your work. Although your Wrap is now viewable by anyone who has a Web URL to the Wrap, it is not actually published to any Web site or on any social media yet. It is advisable to save your Wrap often by clicking Publish often to make sure you don t lose your work. 4. Add a YouTube Video Card By now, you are probably getting the hang of it! Let s now add a video card. A video card lets you add a YouTube video that users can watch directly from within a Wrap. Your card will look like this: Card 3: YouTube video card

13 To create it, click New Card as you did before. The Add New Card dialog appears. For card type, select Video. Accept the default card name Card 3. Click Create to create the new card. In the Card Layout area, scroll down (as you did before) until you find the layout Headline & Body. Select that layout. Note that this layout has three components, shown in the component toolbar: Video Launcher (YouTube component) Headline (text component) Body (text component) You will make the following changes to this card: Specify the correct YouTube video Update the Headline and Body text and positioning In the component toolbar, select Video Launcher. Note that in the content bin, you can specify a URL to a YouTube video, and a window appears where you can preview the video. For this Wrap, specify the following URL to a YouTube video: (In practice, when entering YouTube video URLs you will navigate to the YouTube page containing the video you desire, and paste that Web URL into this box.) The video thumbnail should now appear, both in the content bin and on the card in the Preview area. In the content bin, click the Play button on the video thumbnail to ensure the selected video plays correctly. Next, complete the card. Select the Headline component in the component toolbar. Replace the text with the following: START YOUR ADVENTURE. Next, insert a carriage return between YOUR and ADVENTURE. In the TextBox Property Styling Toolbar for this component, configure textbox properties as follows: Font face: Montserrat Font size: 40 Font color: Black Justification: Centered X: 40, Y: 445, W: 560 Now select the Body component. Replace the text with the following: Cascade gives you everything you need to start your own adventure, letting you explore the

14 world around you. Are you ready to start your own adventure? In the TextBox Property Styling Toolbar, configure textbox properties as follows: Font face: Anonymous Pro Font size: 24+ Font color: Black Justification: Centered X: 40, Y: 591, W: 560 Now save your work by clicking Publish. 5. Add a Product Gallery Card You are halfway done! The next card you will add is a product gallery card. A gallery card, unlike the others, is a card that vertically scrolls. As a result, a gallery card has more functionality than other cards. The card you will create is shown below. However, this card will contain three product cards like the one below, which the user can scroll down to view. Card 4: Product Gallery Card To create this card, click New Card as before to bring up the Add New Card dialog. For card type, select Product Gallery. Accept the default card name Card 4. Click Create to create the new card. Note that some new things appear on the screen. In particular, note the new Gallery Items indicator on the right part of the Preview area:

15 Preview area for a gallery card, with the Gallery Items indicator The Gallery Items indicator lets you navigate among the gallery items that make up the gallery card. Each gallery item consists of one screen of information. By default, a newly-created gallery card contains three gallery items, for three screens of information. As users scroll up and down the card, the Wrap viewer navigates from one gallery item to the next. You can only work on one gallery item at a time. To create the first gallery item for this card, click the 1 icon under the Gallery Items indicator. In a gallery card, each gallery item contains the same default set of components. In the component toolbar, you can see under Gallery Item 1 the following default components: Image (image component) Headline (text component) Body (text component) Hyperlink (action component) Button (text component) You will make the following changes to this gallery item: Update the main image Update the Headline and Body text and positioning Add a hyperlink that points to an external product Web page In the Component toolbar select Image. In the image content area, click Add Images to open the Add Images dialog. In this dialog, scroll down and select all the images you will use for this card. They are: 04a_image.jpg, 04b_image.jpg, and 04c_image.jpg. Click Add to add the images to the image content area. Next, in the image content area, click on 04a_image.jpg to change the main image for this gallery item.

16 Next, select the Headline component. Replace the placeholder text with the following: STRIPED SWEATER. In the TextBox Property Styling Toolbar for this component, configure textbox properties as follows: Font face: Montserrat Font size: 60 Font color: White Justification: Centered X: 60, Y: 365, W: 540 Select the Body component and replace the placeholder text with the following: These pullover sweaters are perfect for any outdoor adventure. In the TextBox Property Styling Toolbar, configure textbox properties as follows: Font face: Anonymous Pro Font size: 24+ Font color: White Justification: Centered X: 60, Y: 785, W: 520 Select the Hyperlink component. Now look at the Preview area and observe the component that is selected. A hyperlink component is a hotspot that, when clicked, launches the specified Web URL in a new tab. You can reposition a Hyperlink component to appear over any part of a card you like, to make it clickable. The Hyperlink component in this example is placed over a textbox component ( Button ) to make it a clickable button. For the hyperlink component, enter the following URL. (In reality, you would normally take users to a more relevant Web page, like a product page on the Cascade Web site). In the Property Styling Toolbar, configure hyperlink properties as follows: X: 110, Y: 690, W: 420, H:68 Finally, click on the Button component in the component selector. In the Preview area, drag the button component lower in the card to fit over the Hyperlink component. The properties values are: X: 100, Y: 690, W: 400 (leave other values as-is) Creating the other gallery items You configure the other two gallery items the same way you configured the first one. To configure the second gallery item, click the 2 icon under the Gallery Items indicator. Note that in the component toolbar, the same components appear, but now under the heading Gallery Item 2.

17 Repeat the same steps as before, using the following information: Image component: select 04b_image.jpg Headline component: use the following text: LIGHTWEIGHT TRAVEL PACK. Properties: o Font face: Montserrat o Font size: 60 o Font color: White o Justification: Centered o X: 60, Y: 365, W: 540 Body component: use the following text: This hiking backpack will let you carry all the essentials.. Properties: o Font face: Anonymous Pro o Font size: 24+ o Font color: White o Justification: Centered o X: 60, Y: 785, W: 520 Hyperlink component: use the same URL as before ( Properties: o X: 110, Y: 690, W: 420, H:68 Button component: use the following properties: o X: 100, Y: 690, W: 400 (leave other values as-is) Finally, configure the third gallery item by clicking the 3 icon under the Gallery Items indicator. Configure the third gallery item, using the following information: Image component: select 04c_image.jpg Headline component: use the following text: SANDSTONE JACKET. Properties: o Font face: Montserrat o Font size: 60 o Font color: White o Justification: Centered o X: 60, Y: 365, W: 540 Body component: use the following text: Let this jacket protect you from the harshest of weather. Properties: o Font face: Anonymous Pro o Font size: 24+ o Font color: White o Justification: Centered o X: 60, Y: 785, W: 520 Hyperlink component: use the same URL as before ( Properties: o X: 110, Y: 690, W: 420, H:68 Button component: use the following properties: o X: 100, Y: 690, W: 400 (leave other values as-is)

18 Now, preview your work (if desired) and then save by clicking Publish. 6. Almost there add a Textual Card You are almost done! The next card is very simple to create. It is a textual card that looks like this: Card 5: Textual Card To create this card, click New Card as before to bring up the Add New Card dialog. For card type, select Textual. Accept the default card name Card 5. Click Create to create the new card. In the Card Layout area, note that the Headline layout is selected. The card will use this layout. Note that this layout has one component, shown in the component toolbar: Headline (text component) You will make the following changes to this gallery item: Configure the headline component Add and configure a body text component In the component toolbar select Headline. Replace the placeholder text with the following: SEE THE CLOTHES, SEE THE WORLD. In the TextBox Property Styling Toolbar, configure textbox properties as follows: Font face: Montserrat Font size: 40 Font color: Black Justification: Centered X: 50, Y: 220, W: 540 Next, create the Body component. Click Add Component from the Card Content area. Select TextBox as the component type. For the name, type Body. Click Add Component. The Body textbox component should appear in the component toolbar.

19 In the component toolbar, select the Body component (if not already selected). Replace the placeholder text with the following: Our apparel lines are sourced from nature. Letting you start your adventure before you even step out of the store. Cascade aims to be sustainable with all of its products. In the TextBox Property Styling Toolbar, configure textbox properties for Body as follows: Font face: Anonymous Pro Font size: 26+ Font color: Black Justification: Centered X: 60, Y: 430, W: The last card add an End-of-Wrap Card The last card is the simplest of them all. It is an end-of-wrap card that contains links to share and like on Facebook, and tweet on Twitter. It looks like this: Card 6: End-of-Wrap Card To create this card, click New Card as before to bring up the Add New Card dialog. For card type, select End of Wrap. Accept the default card name Card 6. Click Create to create the new card. Note that there is only one choice available in the Card Layout selector. Note that this layout has three components, shown in the component toolbar: Background Image (image component) End of Wrap (end of wrap component) Image (image component) There are only two changes to this card: Update the main image Specify the Wrap s author in the End of Wrap component Note that the first image component, Background Image, simply applies shading to the whole card. You can leave the placeholder value.

20 In the Component toolbar select Image. In the image content area, click Add Images to open the Add Images dialog. In this dialog, scroll down and select 06_image.jpg. Click Add. In the image content area, select 06_image.jpg to select the new image. Next, in the component toolbar, select End of Wrap. Note the placeholder text says Author. Replace this text with the following: Cascade. In the Preview area, note that this selection indicates that the Wrap is created by the author Cascade. Now save your changes by clicking Publish. Congratulations! You have successfully created your first Wrap! 7. Sharing Your Wrap via a Link (URL) Now that you ve created your Wrap, the next step is to share it with others on the Web. The easiest way to share a Wrap is to simply send someone a link to the Wrap. To do that, click the Share Wrap button. = The Share Wrap button on the Configure screen. The Share dialog then appears. Note that at the bottom of the dialog, you will see a Web page URL. This is the URL of your new Wrap. Click on the Copy Wrap button to the right of the URL. This action copies the Web page URL to your clipboard. From here, you can send the Wrap to others by pasting this link in any , SMS or other communications channel. To test that the Wrap URL works, open a new browser window. In the new window, click on the URL bar, select Paste, and click return. The Wrap should appear in the new window. 8. Wrapping things up In this guide, you have learned how to: Create a Wrap from beginning to end Add Wrap cards of different types (imagery, textual, product gallery, end-ofwrap) Create covers which define how your Wrap appears on social media and on Web sites Publish and share a Wrap In a subsequent tutorial, you will learn how to create Facebook and Twitter posts, share Wraps on social media, and embed Wraps as a widget on a Web page.

21 If you have any questions or feedback, we d love to hear from you! Please drop us a line at support@wrap.co and let us know what you think!