Build landing page

Marketing teams are always looking for ways to reduce time to market. Often this comes to light when planning to launch a new campaign. Because of the inflexibility and complexity of the brand’s primary digital stack and CMS, this has historically driven many marketing teams to acquire their own martech stack for building landing pages and launch campaigns. While this is a short term fix to the time to launch problem, it creates a longer term set of challenges with silos of content, analytics and customer experiences.

Lets review a day in the life of the JavaDrip marketing team and how Uniform’s Visual Workspace helps reduce time-to-market and improve the self-sufficiency and flexibility of the digital team. JavaDrip is launching their first inhouse branded Coffee Machine, the JavaDrip Specialty. In this tutorial you will play the role of a member of the JavaDrip marketing team who is responsible for building a landing page.

The JavaDrip web site is built by the marketing team using component built by the development team. These components are the building blocks the marketers use. Marketers can select the components they want to use, and can specify the content that is displayed in those components.

home-page
JavaDrip home page

A composition represents a page in the JavaDrip web site. The Uniform project you use in this tutorial already has the composition created. You will go through the process of updating it to create a more engaging experience for your visitors.

  1. In Uniform, open the project JavaDrip.

  2. Click the composition JavaDrip Speciality Launch.

    About this step

    This composition should be in the draft state. The changes you make to the composition will not be available on the web site until the composition is published. You will publish the composition later in the tutorial.

Change the CMS entry for the Hero#

The Hero component is already assigned to the landing page. Some of the content this component displays comes from a CMS. The component is currently configured to use the content from a specific entry from the CMS. You will change the component to use a different entry.

What is a pattern?

The Hero component assigned to the landing page is a special type of component called a pattern. Patterns do many things. One of that is to make it easier to use components with a content source, like a headless CMS.

For example, an entry from a CMS may have a number of fields that need to be displayed in a component. A pattern allows a developer to configure the component so the parameters on the component are mapped to the fields from the CMS entry.

How does this make your life easier? It means all you have to do is select the entry from the CMS, and the component knows how to display the fields automatically.

  1. Click the Hero component. This is the first component beneath the header.

    hero-component-initial
    Hero component selected in the Preview Panel.

    About this step

    This is how you select a component.

  2. On the right-hand side of the screen is the Content Panel. Under the section Pattern Data, click Edit.

    pattern-data-edit
    Content Panel shows Pattern Data is already assigned to the component.
  3. Scroll down and select the entry Announcing the JavaDrip Speciality Coffee Maker!!!.

    pattern-data-new-entry-selected
    The entry from the CMS is selected.
  4. Click the button Save.

    hero-component-updated
    The component shows the content from the newly selected CMS entry.

    About this step

    The title and description parameters on the component are now populated with content from the entry you selected. This is how you change the pattern data on a pattern component.

  1. In the Content Panel, scroll down to the parameter Video.

    video-parameter
    The Video parameter is located at the bottom of the Content parameters section of the Content Panel.
  2. Click the button Change.

    cloudinary-open
    A view into the Cloudinary Media Library is displayed.

    About this step

    You may need to log into Cloudinary before you see the Cloudinary Media Library. A shared login for the tutorial site is available upon request. For more information, contact us.

  3. Double-click the folder coffee-marketing.

    cloudinary-folder-open
    Assets in the folder are displayed.
  4. Click the file Specialty_Animation_co3vth.

    cloudinary-file-selected
    The video asset is selected.
  5. Click the button Insert.

    hero-component-with-video
    The Video parameter value is set to the selected asset.

    About this step

    The background image for the Hero was replaced with the video you selected. This is how you set the value of a Cloudinary parameter on the component.

  1. In the Preview Panel, click the eyebrow text. This is the yellow text that reads EYEBROW TEXT GOES HERE.

    eyebrow-text-selected
    The Eyebrow text parameter is selected.
  2. Enter the following value:

    New JavaDrip Product
    eyebrow-text-changed
    The Eyebrow text parameter value is set.

    Why is the text all upper case?

    Due to the way the Hero component was built, the eyebrow text appears in all upper-case letters. This is a design decision made by the developers in order to align with the JavaDrip style guide. This is an example of the kind of styling a brand would want to be enforced automatically - and to prevent marketers from being able to override - to ensure consistency across the site.

  1. Click on the Hero component.

    hero-component-selected
    The Hero component is selected.
  2. Click the blue button at the bottom of the component.

    insert-component
    The Insert Component dialog is displayed.
  3. In the input field Keyword search, enter the following value:

    hero - product
    insert-component-with-component-name
    Search filters the components displayed.
  4. Click the component Hero - Product (uc).

    product-hero-component-selected
    The Product Hero component is added below the Hero component.

    About this step

    This is how you add a new component to a composition.

Select the CMS entry for the Product Hero#

Like the Hero component you modified at the start of this tutorial, the Product Hero component is also a pattern. And like the Hero component, the Product Hero component also has many of its parameters pre-mapped to an entry from a CMS. You need to select the entry from the CMS.

  1. In the Content Panel, under the section Pattern Data, click Select.

    edit-product-hero-pattern-data
    No entry from the CMS has been selected yet.
  2. In the search field, enter the following value:

    JavaDrip Specialty Overview
    search-for-product-hero-entry
    Entries from the CMS that match the search text are displayed.
  3. Click the entry JavaDrip Specialty Overview from the list.

    product-hero-entry-selected
    The entry from the CMS is selected.
  4. Click Save.

    About this step

    This is how you set the pattern data on a pattern component. The process is almost identical to how you change the pattern data on a pattern component.

  1. Click the product description.

    product-hero-description-parameter-selected
    The Description parameter value is too long.
  2. In the Content Panel, next to the parameter Description, click the Magic Wand button.

    prompt-selector-for-product-hero-description-parameter
    The AI prompts available for the Description parameter are displayed.
  3. Click the button Make text shorter.

    shortened-product-hero-description-parameter
    The shortened text is displayed.
  4. Click the button Accept.

    product-hero-component-finished
    The Description parameter is updated to the shortened text.

    About this step

    This is how you use AI to generate content for a component parameter.

  1. Scroll down to the Email Signup Form component and select the component.

    form-component-selected
    The Email Signup Form component is selected.
  2. Change Pattern Data to the entry Get Free Shipping on Specialty.

    form-showing-new-entry-selected
    The Title and Description parameters are updated.

    About this step

    You should follow the steps you used to change the pattern data for the Hero component.

  3. Set copy for the button to the following value:

    Get my free shipping
    form-button-copy-updated
    The Button Copy parameter is updated.

    About this step

    You should follow the steps you used to change the eyebrow text on the the Hero component.

If the visitor has already completed the form, you do not want to continue to show the form. Personalization can enable you to configure the composition so the form is only shown to visitors who have not yet completed the form. For visitors who have completed the form, you want to show a promotion.

  1. Select the component Email Signup Form.

    form-component-selected-for-personalization
    The Email Signup Form component is selected.
  2. In the Control Bar, click and select Insert before.

    form-dots-clicked
    The Component Control Bar Menu is displayed.

    About this step

    The reason you are inserting a component before the Email Signup Form is because the form is what the visitor will see by default. You will configure the new component to be displayed only in certain cases. Uniform runs the components in order. The first component that matches the personalization instructions will be displayed. Therefore, you want the personalized components to be added before the default component.

  3. Add the component Hero - Promotion.

    promotion-hero-component-search
    The Promotion Hero component in Insert Component dialog.
  4. On the new component, set Pattern Data to the entry Specialty Free shipping.

    promotion-entry-selected
    The Promotion Hero component after the Pattern Data is changed.
  5. On the right-hand side of the screen is the Content Panel. Click Context to switch to the Context Panel.

    promotion-context-panel-default
    The Context Panel is activated.
  6. Click Add Criteria.

    promotion-context-no-criteria-set
    The Personalization Criteria interface is displayed.

    About this step

    The criteria section allows you to specify the conditions when this component should be displayed.

  7. From the dropdown, select Registered for Newsletter.

    promotion-context-registered-criteria-set
    The Personalization Criteria is set.

    About this step

    The developers built the form in a way that, after it is submitted, the visitor will be marked as being registered for the newsletter. By selecting this value from the dropdown, you are telling Uniform to only display this component to visitors who are registered.

  8. Click the button Publish.

    About this step

    Publishing causes the JavaDrip web site to be updated with the changes you made to this composition.

  1. Visit your published landing page at https://[!!!YOUR HOST!!!]/JavaDrip-Specialty-Launch.

    About this step

    You must replace [!!! YOUR HOST !!!] with the host name of the training site you are using. This is a value that Uniform provided you when you were given access to the Uniform project. If you need help, contact us.

  2. If you have not yet submitted the form, you will see the landing page with the form.

    published-hero
    The Hero component displays the updated content.
    published-product-hero
    The Product Hero component displays the updated content.
    published-form
    The Email Signup Form component is displayed.
  3. Submit the form.

    published-promotion
    The Promotion Hero is displayed.

    About this step

    You will see the Promotion Hero component.

In the next lesson, you will customize the product detail page for the JavaDrip Specialty Coffee Machine.