Customizable cards
The "Customizable cards" section in the website builder is designed for those who want to easily and quickly present key information about their products, services, or customer reviews. These blocks allow you to add visually appealing cards to the site page, which can be customized to meet the needs of your business.
Regardless of whether you want to provide a detailed description of the course, feedback from satisfied customers, or recommendations for using your services, "Customizable cards" and "Course Cards" will help highlight information and make it more accessible and convenient for site visitors.
How to add block?
To add the "Customizable cards" section, click on the "+" in the editing mode of your website:
Next, find the "Customizable cards" section in the menu that opens and click on it to add the section to the site. The section will be added to the site, and the content settings menu will open for you:
How to add card?
In the edit menu of the "Customizable cards" section of the content, you will see various sections for settings: the style of the cards, images, buttons, etc.
For your convenience, you can add cards first to see how the style settings apply to the cards.
To do this, scroll down in the content settings menu and find the "Add Card" button:
By clicking on the "Add card" button, you see the settings for a card with an empty text field, a bar for uploading an image for the card and for the button icon, as well as for the text of the button itself:
The card's settings fields are optional: that means, you can skip, for example, uploading an image for the card itself or for the button icon, without inserting text - everything is at your discretion.
If, for example, you do not need a button with a link in the card, leave the "Button name" and "Link" fields empty: then the buttons will not be displayed in the card.
There are various settings for the card text, similar to any text editor, where you can adjust the font size, font outline, color, highlighting, as well as add a link and more.
To do this, select the text (part of the text) and apply the necessary settings to the text:
After you have fully configured the first card, add the following: to do this, click on the "Add Card" button, which is located below the settings bar of the first added card:
Cards settings
Cards Style
There are two styles for cards in the Mavibot website builder: simple and in the form of a slider.
During using a simple style, all the cards will be immediately displayed on one page of the site section:
During using the "Slider" style, the cards will be in the form of a carousel, thereby adding more dynamism to the site:
For the slider style, you can choose where the arrows and dots of the card will be located:
The arrows can be located inside the slider, outside, or hidden (for example, if you set a timer to automatically flip through the cards):
The dots can also be located inside the slider, outside, or hidden:
To scroll through the cards automatically, set the time interval for displaying one page:
If the timer value is set to 0, the cards will not be automatically scrolled through.
Pay attention!
The time is set in milliseconds, where one millisecond is equal to 0.001 seconds. This means that if you need to set 7 seconds, then enter the value in the 7000 field.
You can also choose the type of card:
а) the standard view without a header inside the card:
б) view with the title inside the card:
Color settings for card elements
To customize the cards to your style, use the color settings:
The color settings are applied to all cards at the same time. If you need the text color to be different in each card, then use the settings in the text field.
An extensive color palette is available for color customization:
And you can apply the color settings to any element of the card:
Setting borders and paddings
Number of cards per row - a text field that will help you set the required number of cards in one row (page):
Paddings - are fields for entering numeric values that will help increase or decrease the horizontal/vertical margins between cards, as well as the margins inside the cards,
You can set a common numeric value for the indentation inside the cards, or by clicking on the gear in the right corner of the line, set a separate value for the upper, lower, left and right borders:
Card orientation
The orientation of the card can be horizontal:
And also vertical:
Alignment
а) in the center:
б) on the left edge:
в) on the right edge:
Shadow Settings
It will help to add depth to the cards and highlight them against the background of the section/page.
а) Without a shadow:
б) a light shadow:
в) a strong shadow:
Image Settings
The image settings are also applied to all images that you have added to the card:
In the image settings, you need to set:
а) picture width:
The field takes a numeric value in pixels, if not specified, it is displayed automatically according to the actual width of the image in pixels.
б) image height:
The field takes a numeric value in pixels, if not specified, it is displayed automatically in proportion to the actual height of the image.
в) rounding:
The field, which takes a numeric value in pixels, helps to round the corners of the image:
г) image size:
The setting is applied if it is necessary to fill/stretch/position the image relative to the specified width and height for the image.
д) the "Picture after text" checkbox
If you check the box, the image will be located under the text in the card:
Setting up Buttons
The text, as well as the link to the page that your site visitor should click on, is configured in the card itself:
Also, in addition to the text and link, you can set an icon for the button by uploading an image in the card:
To set the color of the text and the background of the button, use the settings here:
Next, you can adjust the size, width, and paddings for the button:
The width of the button - is a field that takes a numeric value in both pixels and percentages:
Button alignment - helps to set the button in the card relative to the right or left edge, as well as the center:
а) in the center:
б) on the left edge:
в) on the right edge:
Button rounding - is a field that takes a numeric value in pixels to round the corners of the button:
Outline width - is a field that takes a numeric value in pixels to set the width of the button outline:
Paddings on the outside
It helps you to adjust the paddings for the button in the card relative to the top, bottom, left and right edges:
Paddings inside the button
It helps you to adjust the paddings inside the button:
Icon
If you have uploaded an icon to a button in the card, then the icon can be adjusted to fit:
And also set the position of the icon relative to the text on the left or right:
Shadow for the button
The shadow can be set not only for the card, but also separately for the button. To do this, it is enough to find a drop-down field with the name "Shadow" in the settings of the button and select the degree of shadow intensity: light or strong:
Button animation
It helps to attract the attention of clients (site users) to the targeted action on the button and add dynamics to the site:
1) flash button animation:
2) ripper button animation:
Done! Now you know how to create and customize cards on your website from scratch.
Last updated