Campaign page templates

Transcription

1 Campaign Page

2 Campaign page templates The campaign page templates have been built for marketing campaigns which require a landing experience that cannot be supported by the Product Detail Page templates or other existing pages. Campaign page template has the flexibility to include various components in any order. The only component that is required is the Hero module (displayed on top of the page). All other components are optional and should be added based on a particular campaign needs. There are limitations to certain components: some components can only be placed into half-width column and some can be placed into full-width column, therefore there is a distinction between template versions: - Simple ( full-width column) - Complex ( half-width columns or a combination)

3 Campaign page templates - Simple Versions

4 Campaign page templates - Complex Versions 4

5 Campaign page - choosing a template Campaign template and theme can be configured within the page properties, on Campaign Properties tab.. Campaign page layout Choose Simple or Complex Depending on the selection the campaign would have or -column layout. Campaign page theme Choose the color (Blue, Green, Orange, Gray) that would affect the styles of the page headlines with h and some other elements: A: Headline within Hero module B: Column Title within the Text Columns component C: Image and Column Title within the Image and Text Columns component D: Form header background within the Form component E: h headers within the Text component F: Title within the Accordion Container component C B A E F D See the components descriptions for details. Add metatag Check the box if the page shouldn t be crawlable by the search engines (google) E 5

6 Allowed components Simple campaign template components Simple campaign template allows for the following components to be added: Accordion Accordion container Campaign Call To Action Image and text Columns Promo Share This Tabs (tabs content may allow Text, Text & Image, Video Container components) Text Text Columns Complex campaign template components The difference between the simple and complex campaign layouts are the columns that are displayed on top of the complex template. It s possible to change the layout of the existing campaign pages: - If the simple layout is changed to complex - columns would be added on top of the page and all simple campaign content would be pushed down below the columns - If a complex layout is changed to simple - the columns would be hidden. The only 4 components that can be added into the columns are: - Form Embed - Video - Text - Text & Image Other components allowed on the complex campaign (to be added outside of columns): - Accordion - Accordion container - Campaign Call To Action - Image and text Columns - Promo - Share This - Tabs (tabs content may allow Text, Text & Image, Video Container components) - Text Columns 6

7 Campaign page - simple template 7

8 Campaign page template - Simple version Simple version of the campaign page doesn t have any forms and is intended for the marketing use. Components that can be used on the simple template:. Hero Module. Share This. Text Columns component 4. Image and Text Columns 5. Campaign Call To Action 6. Text 7. Tabs and Text components 8. Promo modules

9 .. Simple Campaign page template - Hero module Can be used on: Campaign Page template Component includes:. Headline Color is affected by the campaign theme configured in page properties (see above) Optional (won t appear if not specified). Description Optional (won t appear if not specified). Share If checked - Share This component would appear (configured separately, see the following pages) Optional (won t appear if not specified) 9

10 .. Simple campaign page template - Hero module (continued) Image Campaign page is the only page that uses the text embedded into an image, therefore it s required to upload separate images for desktop/tablet and mobile. It s not required to use the text in an image. Image can have a call to action embedded within, however the entire image area would be clickable (not only CTA).. Desktop Image Insert an image for desktop/tablet Resolution - 80x78 (the height may be smaller) Recommended character count for the headline embedded within image - 46 Recommended character count for the sub-head embedded within image - 6. Mobile Image Insert an image for mobile Resolution - 640x40. Image call to action Specify the link that the image should direct users to (optional, if not provided - image won t be clickable) Specify the analytics event and URL type See the following page for the guidelines as to what hero design to use with what page theme. 0

11 .. Campaign page template - Hero module variations Version When using this gradient motif in the hero module, all header and subhead text on the page must be PB Medium blue. Hex: 008D5 Version When using this gradient motif in the hero module, all header and subhead text on the page must be PB Green. Hex: 7BF44 Version When using this gradient motif in the hero module, all header and subhead text on the page must be PB Medium blue. Hex: 008D5 Version 4 When using this gradient motif in the hero module, all header and subhead text on the page must be PB Dark Orange. Hex: EE6B0B Version 5 Alternate option. When using any of the gradient motifs in the hero module, all header and subhead text on the page can be PB Dark Gray. Hex: 4E4E4E

12 . Campaign page template - Share This component Share This component can be added to the page only if the related checkbox in the Hero module is checked (see Hero module component for reference).. Once the checkbox is checked - the Share This component would appear. Click Edit to configure it. Component includes:. Title Optional. Social networks Check all that apply All are selected by default 4 4. File download Optional If not specified - PDF icon won t appear 4

13 .. Simple Campaign page template - Text Columns component Can be used on: Campaign Page template Component configuration:. Layout Choose Two columns or Three columns (note: if the orientation is horizontal - the columns are displayed as lines, see variation A). Column Orientation Choose Vertical or Horizontal There s no limitation to the configuration - any layout can work with any orientation. The screenshots here are shown for reference - configurations: A - columns, horizontal orientation B - columns, vertical orientation A. Show Divider If checked - the divider line below the component would appear (e.g. see the line within the A configuration) B

14 .. Simple Campaign page template - Text Columns component continued Each column/line (outlined on the screenshot) within the component has the following elements:. Column Title Color is affected by the campaign theme configured in page properties (see above). Column Text Can include the plain text, bulleted list, links Specify these elements for each column/line using the other tabs (Column, Column, Column ) 4

15 4.. Simple Campaign page template - Image and Text Columns component Can be used on: Campaign Page template Component configuration:. Layout Choose Three columns or Four columns (note: if columns are chosen - the column widths would still be the same as with 4 columns, the columns would be centered on the page) See versions A (4 columns) and B ( columns) to the right. Show Divider If checked - the divider line below the component would appear A B 5

16 4.. Simple Campaign page template - Image and Text Columns component - continued Can be used on: Campaign Page template For each of the columns specify the following elements: Component includes:. Image Specify on the Image ///4 tab It s recommended to have the color aligned with the campaign theme color Recommended image width - no more than 5px; images can be any height as long as they are all the same across columns. Column title Specify on the Column ///4 tab Color is affected by the campaign theme configured in page properties (see above). Column Text Specify on the Image ///4 tab 6

17 5. Simple Campaign page template - Campaign Call to Action component Can be used on: Campaign Page template Component includes:. Link Specify the link where the CTA should direct user to 4. Text Specify the copy to appear on the button. Analytics event / Pick URL based on type Specify based on the CTA type 4. Order by phone text Specify the text and phone number to appear below the CTA, with the phone icon 4 7

18 6. Campaign page template - Text component If any legal messaging is needed on the campaign page - it can be added using the Text component. 8

19 7.. Campaign page template - Tabs component Can be used on: Campaign page Product Detail page Tabs component includes:. Tabs names Specify the titles to appear on the tabs **Note: there is no limit to the number of tabs as long as they fit within the section width that is fixed (the copy might have to be tweaked to fit into one line). Show divider If checked - the divider line below the component would appear 9

20 7... Campaign page template - Content within tabs To add content within the tabs use the following components: Text component Specify the text A A Text and Image component Specify the text and add an image (resolution - 58x57) B B Image component (use the built-in Image component) Add an image (resolution - 58x57) C C 0

21 7... Campaign page template - Content within tabs D. Image Gallery Use Image Slide component and Product Asset component (see details on Product Detail page) D D E. Videos Use Video Container component and Video component (see details on Product Detail page) E E

22 8.. Campaign page template - Promo versions Can be used on: Campaign page Component includes: Promo Configuration tab: Choose Layout and Theme These are available promo module versions:. Full width A. Full width B. Half width A 4. Half width B 5. Half width C 6. Half width D (image) 4 Note: If multiple half-width promos are added - they would stack next to each other, in a row (to see this go to Preview mode and refresh the page) 5 6

23 8.. Campaign page template - Promo component Call to Action and Image tabs: 8. Headline 9. Promo Text (optional). Link Specify link where the promo should redirect and whether it should open in a new browser tab 4. Link Text Specify the button text 5. Link Title Appears on hover over the CTA button Should be the same as the link text (this won t 6. Open in new tab Check if the promo should redirect to external site that should open in a new browser tab/window For the promos that promote the product suites: 7. Show Products in Suite If selected the products would be displayed 8. Specify text for the headline Choose products The product names would be automatically pulled in 0. Image Would appear only if Half width / Theme D (with image) layout is chosen) Image resolution: 505x60 8 9

24 Campaign page - complex template 4

25 Campaign page template - Complex version Components:. Hero Module *. Text *. Form 4. Accordion 5. Campaign Call To Action * 6. Text * 7. Text * 8. Video Product Resources Promo modules can be added here as well (not shown on the screenshots) * * Refer to the simple campaign template for details

26 . Complex campaign page template - Contact Form component Can be used on: Campaign page (complex version) The forms should be created in Silverpop using the same process as today - create the form, clean up the html and paste it into the component within AEM. Component includes:. Title. HTML content Clean HTML code to be pasted from Silverpop. ** Note: it s not a requirement to have a contact form within this spot. Instead, there can be just text (using Text component), or image (using Image component) 6

27 . Complex campaign page template - Accordion Can be used on: Campaign page (complex version) Accordion module is built up using multiple components:. Accordion Container Includes only Title for the accordion module Style is affected by the page theme. Accordion Includes only Title for the expandable sections within the accordion Multiple sections can be added (no limit). Product teaser Includes Title, Description and Image for the products Image can be clickable (specify the link in the Image Link field) Multiple product teasers can be added within the expandable section, they would stack in columns Other components allowed within the Accordion: - Text - Text & Image - Image & Resources 7

28 . Campaign page template - Video module Can be used on: Campaign page (complex version) Component includes: Video Component tab: 5. Title Title that appears below the video Optional. Description Description that appears below the title Optional. Video ID Can be either Youtube or Vidyard video: Youtube Video URL example: OV6D4 > Video ID is DDHx_0OV6D4 Vidyard Video URL example: Bn4YObZ6Q > Video ID is - pnao9vgpid-bn4yobz6q Vidyard Video Should be checked for Vidyard videos 5 Image tab: 5. Image Drag the placeholder image Image resolution - 40x60 (should be at least 40px wide in order to render correctly in different sizes) 8

29 4. Campaign page template - Product Resources component Can be used on: Campaign page (complex version) Product Detail Page Component includes:. Title Title for the component Optional, would not appear if left blank. Product Resources Enter URL or choose using Pick URL Specify the link text Specify the analytics event, based on the action If the PDF file is selected - the PDF icon would appear next to the link 9

30 Campaign page - Form confirmation page 0

31 Campaign Form Confirmation page (Thank You page) When user submits a form on the campaign page - they are redirected to the Thank You page. There s only one component that can be placed on this page - Thank You component. The component includes:. Headline. Sub Headline. Message (optional) 4. Bottom separator (optional, won t appear if not checked) 4 Additional components are available 4