Adding a Card via Page Editor
A card is a flexible, visually appealing UI element used to organise content into compact, easily digestible units. You can add cards to your webpage to display things like product info, blog posts, or services, and align them with text and buttons.
Follow the steps below to add a card on your page.
Finding the Page Editor
Step 1: On the Dealership Dashboard, select Websites
Step 2: Select the desired website to edit
Step 3: Once on the Website Dashboard, select Pages
Step 4: Select the website you want to edit
How to Add a Card
- Navigate to the desired area of the page. Hover your mouse over the left-hand side until the + icon appears. Click on the icon, then scroll down and select the Cards button.
- When adding a card, you'll first need to choose a template.
You can select one of the following options from a dropdown menu:
- Empty: Start with a blank slate and design your card from scratch.
- Demo: A pre-designed card with placeholder content. This is useful for quickly getting started or testing different card layouts.
- BlogCta: A specialised card design for promoting blog posts or content with a call to action (CTA) button.
You can preview each option by clicking on each drop-down option before selecting Get Started:
How to Design a Card
When selecting Demo or BlogCta options, a template will appear pre-filled which can be adjusted to your needs. When selecting Empty, you will be directed to a blank template to complete.
Before editing or adding a card, you will be asked to design your cards with the following:
You may then be directed to Add Card via the green button:
A Card will appear below:
Under the Content tab:
- Card Heading: the title or headline of your card
- Card Text: short description that provides additional context for the user
- Image: the image assigned to this card
- Image Alt: a short description of the image - important for accessibility reasons and also helps with SEO
- Link URL: enter the full URL or relative path where users should be directed when they click the card
- Link Text: text that will appear on the card's button or link
Under the Colours tab, you can select colours for the heading, description and background.
Further Cards can be added via the Green + button.