An Asset Card is an essential widget for a page where you want to present content.
Your content (assets) can be inserted within the page using this element. You can insert assets of any file type within the content card.
The + icon on the top left is the element palette that contains the asset card that you can use when you are building a page.
In this article, you’ll learn how to:
Add Asset cards to the page
Access Content Toolbar
Manage Content
Edit Content
Add Asset cards to the page
To add Asset cards to your page, go to the element palette and select Asset cards. By default, you’ll get three asset cards added to your page.
Once you add the asset cards to the page, hover over the card and click on the Choose Content option.
The content for Cleverstory can be added in two ways:
Your Device/Computer
External Links
Add your respective content and choose the content pieces you want to showcase using the Asset Card. Click on Add to Layout after selecting the content.
Here's how the asset card would appear after you've added it to the page:
Accessing the Content Toolbar
The Content Toolbar is available when you click on the Asset Card element that you dragged and dropped into the page.
The toolbar includes Layout Fields, Spacing, and Grid Options.
Layout Fields:
> The layout field option allows you to choose which details of the asset card you want to showcase on the page.
> The card includes Basic Fields and Custom Widgets.
> Basic Fields are the default fields available when you add the asset card to the page. The Basic fields in the card include:
Name
Description
Thumbnail
Type
> Custom widgets include the elements that you can add from the elements palette by dragging and dropping based on your asset card. In the default card, the custom widgets are:
Shape
Button
> If you don’t wish to have a basic field on the asset card, you can hide that field by clicking on the eye icon present alongside the respective field and vice-versa if you want to unhide a field.
Layout Spacing
> You can space out your cards in two ways: Column Spacing and Row Spacing.
> Column Spacing: You can space out the distance between your cards by increasing the Column space. You can insert the number in the box or move the slide bar to easily space out the cards and see what works for you. The arrows indicate the spacing between the columns.
> Row Spacing: When you have multiple asset cards that get split into various rows, that’s where you can use the Row Spacing to adjust the spacing between two rows.
The arrows indicate the spacing between the rows.
Grid Option
> The Grid option gives you two options for pagination.
> Pagination is basically dividing a large chunk of content into various sections using buttons like Load more or by infinite scrolling after a particular point for your next set of content to load.
> Before setting the pagination, No. of contents to load initially has to be determined.
Infinite Scrolling: When you choose Infinite Scroll, your content will load continuously as you scroll down. Upon scrolling, all the content will show up after the default set of content is shown.
Load More button: This button is present at the bottom of a your content section, which upon clicking allows you to load more content.
Managing Content
Once you’ve added the content, if you wish to add more assets or rearrange the content, click on the Asset card element and choose the Manage Content option.
Adding assets: Upon entering the Content Manager tab, on the top right corner you’ll see an Add Assets button. Click on the button, and it’ll take you to the Content Library, where you can upload the content that you want and Add it to Layout.
Rearranging assets: To rearrange assets, hover over the asset and click on the four club-spoked asterisk, then drag it as desired. Save & Close once you’ve set the order.
Removing an asset: Select the content within the Content Manager tab and click on the Remove button present on the top of the tab. Save & Close after removing the respective content.
Editing Content
There are two ways to edit the assets on Cleverstory.
1. Editing the asset within Manage content
To edit the original of the asset, click on Manage Content and choose the respective asset. Upon choosing, the asset will get highlighted on the right side of the screen, where you can make changes to the Asset Title, Thumbnail, and Description. Save & Close once changes are made.
Note: You can edit only these specific details through Manage Content.
If you want to shift back to the original asset name and details, click on the Reset button in the top right corner above the thumbnail.
2. Editing the asset for the page
The edits made to the assets on this page apply only to this particular page and not the asset itself.
Below are the elements that you can edit within the asset card:
Thumbnail
Title
Content-Type
Button
Pagination Button
Animation on all elements
Thumbnail
> Click on the asset card thumbnail and choose the Change image option. You will be redirected to the Media Library where you can either upload a new image or choose an image from the library.
Title
> Choose the asset and double-click on the Title of the asset, double-click on the title, and the Text box to edit will appear. Type the name as per your preference, and don’t forget to Save Changes.
Content-Type
> Choose the asset and double-click on the Content-Type section on the asset, double-click on the text, and make changes as per your preference.
> For any text formatting changes like font, size, alignment, Line and character spacing, and color, click on Change Text. Once you’re finished, click on Save Changes to ensure your latest updates are saved.
Button
> A button is commonly used for redirecting from one page to another. With a button on the asset card, you can Format the text, redirect the button to a URL/anchor it, and format the style.
Format Text
> To make any changes to the text within the button, click on the Format text option and you can add your text within the pop-up.
Redirecting a URL
> A button can be redirected to a Web address, Anchored to a section on the page, and redirected to the top or bottom part of the page.
> Choose the respective action and Save changes. Here’s where you can learn how to use the Anchor action.
Button Style
> To customize your button, click on the paintbrush icon. You can align your text and design your button like base color, border, text color, color upon Hover, line, and character spacing. Once you’re finished, click on Save Changes to ensure your latest updates are saved.
> Note: To learn how to customize a button, click here.
Pagination Button:
> The pagination button appears when you have more content to display than the default number of assets shown.
> The text on the button can be changed according to your preference like, View More, Load More, by clicking on the Change text and you can add your text within the pop-up.
> You can customize the button using the paintbrush icon.
Still got queries? Reach out to us at support@paperflite.com and we will assist you.