✓ In this article, we'll look at how to use the Button item when starting a creation from scratch, and how to modify it if you import it from one of our pre-configured creations.
Step to add a Button
Step 1: Add button item
To get started, access the left-hand panel of your Kehio editor and select or add a Content. Once selected, add a button by clicking on "Add Item" and selecting the button option.
Step 2: Text fields and links
Once you've added the button item, you'll find two separate fields:
The first field lets you enter the text that will appear on your button.
The second field is for adding a link. You can add an internal link to your store or an external link.
You can also use a special function we've integrated that redirects the button from your sales page to its product block, making it easier for customers to add products to the shopping cart. To activate this feature, enter #product in the link field.
These steps enable you to configure a functional button tailored to your specific needs, improving user interaction with your site.
Edit button design
From the Settings section, select the Button tab.
Once open, you'll find several customization options:
Step 1 : Customization
First, you can choose to fully customize your button with Kehio Editor, or simply keep your store's default button.
**By default, the customization option is activated if you wish to keep the design of your theme, simply uncheck the box and make no changes in the settings .**
Step 2 : Link opening
You can choose to open the link in the same browser window or in a new one.
Step 3 : Top margins
Set the top margins of your button if you wish. This option is useful in specific cases, but in general, we recommend managing spaces from the gaps of all block content.
Step 4 : Text content
1 - Color:
You can choose the font color of your text and the hover color.
2 - Font style:
Click on the drop-down menu to choose from the following options: Light, Normal, Medium, Semi-bold, Bold, Extra-bold. This option lets you define the weight of the font to accentuate or attenuate the importance of certain texts.
3 - Font size:
Modify the font size by clicking on the arrows in the size box to increase or decrease it. Values are calculated in "rem", which ensures proportional scaling based on the document's base font size.
Note: That you can adjust text size differently for computers and mobiles, and also for all screen resolutions thanks to media queries management.
Step 5 : Background
Here you can customize the background color of your button. You can also configure the color that will appear when the mouse passes over the button (hover effect).
Step 6 : Button size
Button height: Choose the height of your button, you can adapt it differently on mobile and on computer, by default, it will be using the computer one on mobile.
Button width: Choose the width of your button, you can adapt it differently on mobile and on computer, by default it will be using the computer width on mobile.
Step 7 : Button alignment
Click on the alignment button, then choose from the following options: Align Left, Center or Right.
Alignment can also be adjusted separately for mobile devices and computers, and for all screen resolutions thanks to media queries.
You can also align the button across the entire screen width on mobile devices.
Step 8 : Border
You can add a border to your button, as well as a border color and a mouse-over border color.
Adjust the thickness of your border by clicking on the arrows of the "thickness" inserts, the value is in "rem" to add adjustment precision.
Adjust the angles, you can define a rounded corner to adapt your button to the style of your theme.
Step 9 : Shading
Adding a shadow behind a button can greatly enhance its visual impact by making it stand out.
Select the color: That best suits your page design and complements the image.
Shadow diffusion effects management: Several options are available to fine tune the appearance of the shading:
Blur: Adjust the intensity of the blur to soften or accentuate the shadow.
Stretch: Control the size of the shadow to make it wider or narrower in relation to the image, enhancing the shadow's dramatic or subtle effect.
Vertical offset: Move the shadow up or down in relation to the image to create a depth or elevation effect.
Horizontal offset: Move the shadow left or right to add a lateral dimension to the shadow effect.
Step 10 : Mouse-over shadow
Add a mouse-over shadow to make your button even more dynamic and increase click-through rates.
The mouse-over shadow has the same options as the shadow.
Edit shadow color
Shadow diffusion effects management.
If you need help understanding or modifying the Button item, please feel free to contact our support team at any time via e-mail or live chat .