What's in it for you
Atom is an immersive, easy-to-build experience you can create for your users. Use this Showpad Experiences template to quickly translate your existing Showpad folder structure into a beautiful and flexible mind map. Atom lets you contextualize your offer in a branded and logical way. This is the simplest way to turn your Showpad folder structure into an impacting and more focused presentation.
To help you designing this experience, we added a Photoshop file you can use as a design template.
See how it works
Key features
- Let your users analyze the needs of their prospects
- Show your products and services in an easy and interactive way
- Perfect for getting started with Showpad Experiences
You need this to succeed
- Showpad Plus or Ultimate plan
- Showpad Experiences activated
- A well-thought-out idea of how to structure your content
- You can use the attached PSD file as a design template
- Content in the content library
- If needed, contact your Customer Success Coach for more information
The quick way to awesomeness
- Start with building a structure by adding Nodes in the Experience Builder
- Build a path your users can follow by creating other nodes within a node
- Add a Detail page that shows detailed information about a particular topic
- Add Image Galleries and associated content in columns on your detail pages
- Customize your design with icons, logos, and colors to match your company's branding
- Start sharing content with Showpad Experiences
Do this step by step
Nodes
Navigation in the Atom experience is done by clicking or tapping on nodes. You can see these nodes as folders and pages that guide your user during their sales conversations. We'll start by creating these nodes in the Experience Builder.
- Open the Channel Builder and create a new channel by selecting Advanced Experience.
- Select the Atom template and click Create.
- The Experience Builder will open. You'll see two tabs: Navigation and Design.
Navigation: Here's where you create the nodes, detail pages, and links to your content.
Design: Here's where you can change the look & feel of the Atom template. - Start with creating your nodes in the Navigation Layout window. Click the + icon and give your node a logical name.
- When creating your node, you'll notice a second Node Configuration window appears. Here, you can change the background color of the icon, and upload your custom (transparent) .png file. This means that the node color will change depending on the node the user visits.
It's not mandatory to use an icon. You can simply work with a background color to visualize a node.
When a user opens the node, a new page will be visible. You can select to make this node a Detail page.
Detail pages and associated content(s)
You can give all related information about a certain topic on a Detail page. These pages can show columns of associated assets, links, and one Image gallery of your products. Clicking the Detail page opens the Detail Page Layout screen. In the Experience Builder, it looks like this:
Users will see a Detail page like this:
Let's see the configuration part in detail:
- When enabling the Detail page, the Page Layout screen appears. By default, an Image gallery and three Columns are added.
- An Image gallery shows a list of images, related to the topic of the Detail page. You can use up to 100 characters in the title.
- Clicking Add lets you upload an image. You have the options to link to an existing asset in your Content Library or to link to an external webpage. You can filter your assets on Documents, Photos, Audio & Video, and HTML Content. Select the suitable asset.
- In the columns screen, you can select Text, Assets, Tags, Cross-links, and URLs:
Text lets you add a custom text for that specific column.
Assets let you add selected assets from the Content Library. If you want to add multiple assets, you'll need to add them one by one.
With Tags, you can add all content with your defined tags. If adding more tags, assets will only be displayed when having all those tags.
Cross-links refer to another Detail page. It's a link to a destination node and it takes you instantly to that node. Your users need to close the destination node when navigating back.
URL links to an external page.
- Click Save and create other columns for this node if necessary. If you create more than three columns, they will appear below the first three.
Design
Clicking the Design tab opens a window where you can change the global design settings for the selected experience. You will see a live Preview at the right side of the screen.
We'll start with the Navigation section.
- In the Logos section, you can upload a Header logo. This logo is displayed on all nodes, except for the Home node. The Home logo is the logo displayed in the center circle of the home node.
- Page Style. The color background stays the same no matter which node was visited. You can choose one or two colors to mix in the background. When mixing two colors, both colors are applied following a radiant. One color is used for the middle and the other is used for the surroundings.
There is also a principle of inheritance of the background. The background of a parent node is applied to all child node unless a specific background is uploaded in a given child node. As soon as a child node becomes the parent, the same principle applies again.
- The breadcrumbs are reminders of the sections and subsections the user is currently visiting. The user can navigate back to the current and previous sections by clicking or tapping a breadcrumb. Here you can change the background and font colors.
This is how your user will see it:
Next up, the Detail pages.
- Change the colors for all Detail pages in the Page Style section. The Header section changes the background for the subtitle and description. The Content section changes the background for the columns.
- You can define the color of the Buttons. The Primary button is the color of the Menu button, and the Secondary button stands for the X icon to close a Detail page.
This is how your users will see it:
Start sharing content
Your users can start sharing content when opening this Showpad Experiences channel.
- Navigating back can be made in two ways. Click the X button on the left-hand side of the center node or use the breadcrumb and click on the previous navigation section.
- There is a fullscreen button in the top right corner of the application that can also be used to exit fullscreen mode.
- On a smartphone, this Showpad Experiences channel looks different but it's still using the same color scheme. There is no breadcrumb but a back button on the left side of the current section name takes you back to the previous node.
You can use the attached PSD file as a design template: