✓ In this article, we'll look at how to use Image and Advanced Image items when starting a creation from scratch, and how to edit an advanced image if you import it from one of our pre-configured creations.
Add an Image or an Advanced Image to your creation from scratch
To begin, access the left-hand panel of your Kehio editor and select or add a Content. Once selected, a panel will open with a "text" item added by default. You can remove it and then add an image by clicking on "Add Item" and selecting what you need.
Image item setting
To set up an image in Kehio Editor, follow these detailed steps for optimal integration and customization:
1- Add your image URL :
In the "Image" item tab, enter your image URL.
To obtain the URL, use the link below the URL field, which redirects you to your store's file library. Import your image into this library, then select the URL of the imported file and paste it into the Kehio editor.
2- Change image size :
Adjust image size independently for computer and mobile displays, using the sliders provided.
3- Aligning your image :
Use the alignment insert to position your image left, center or right. Note that this option is only available for computer displays; on mobile devices, the image is always centered by default.
4- Optimize your SEO with the image description
Add a description to your image in the "Alt" field to improve your page's SEO optimization. This description helps search engines understand the image content.
5- Adding a link to your image
If you want the image to act as a link, add the target URL in the box provided. By default, the link opens in the same tab, but you can check the box to open it in a new browser window, which is often preferred to enhance the user experience.
By following these steps, you can efficiently integrate and customize images into your Kehio creations, enhancing your site's visual appeal while optimizing functional aspects related to user experience and SEO.
Advanced Image item setting
The advanced image in Kehio Editor shares the same basic functionality as the standard image, but also includes advanced options that almost completely eliminate the need for external graphic design software. Thanks to these integrated tools and the cover designs we offer, you can create sophisticated image montages directly in Kehio without the need for other design software.
Here are the advanced options available for the advanced image in addition to the five basic steps for editing an image:
1. Adding borders :
Customize corners: You can select and modify the borders of your main image. You'll find two rows of four numerical fields, each corresponding to one side of an angle. This configuration works in columns:
The first column corresponds to the top right-hand corner.
The second column corresponds to the top left-hand corner.
The third column corresponds to the bottom left-hand corner.
The fourth and last column corresponds to the bottom right-hand corner.
With this angle management, you can give your image any shape and play with their degrees. For example, by setting all angles to 90 degrees, you can create a circular image in just a few clicks, without the need for external tools. This feature offers creative freedom to create elegant, optimized image shapes.
2. Image padding
Inner space adjustment: Padding lets you adjust the space between the edge of the image and its inner content, which is useful for defining how the image cover visually positions itself with the main image. This adjustment can be crucial depending on the type of cover you're using.
3. Shading
Adding shading behind an image can greatly enhance its visual impact by making it stand out. Kehio Editor offers advanced shadow management options that allow you to customize this effect precisely:
Shadow color selection : Select the color that best suits your page design and complements the image.
Managing shadow diffusion effects : You have several options for refining the appearance of the shadow:
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.
Experiment with these different customizations to create a unique, professional look for your images. This adjustment can transform a simple image into an eye-catching design element, adding a touch of sophistication to your visual content. These settings are designed to be intuitive and accessible, even for those with no prior experience of advanced graphics tools.
4. Cover Image
This option has been specially designed to let you benefit from our high-quality photo montages without ever needing to use external editing software. We've created cover images on our templates that apply like a layer over your main image, allowing you to create high-quality images with exceptional shapes and colors without you having to touch a single option in any design software.
Our designers create these cover templates in SVG format via Photoshop, allowing you to modify the color to adapt this cover image to your graphic identity. Here's how you can use and customize these cover images:
Cover modification: You can easily change the color of SVG cover images imported into your creations to suit your specific needs, using SVG Color.
Import your own templates: If you have a basic understanding of design and are familiar with software such as Adobe Illustrator or Inkscape, you can import your own cover templates or SVG elements. This allows you to further personalize the appearance of your images. We recommend that you always import cover images in SVG format for optimal quality and flexibility.
By leveraging these features, you can create rich, customized images that reinforce your brand's visual identity and enhance your site's visual appeal without requiring advanced graphic design skills.
5. Cover image position
The position of the cover image can be adjusted to suit your exact graphic requirements. If you import an image or graphic element, you can position it differently on the main image by entering position values in the shaded numerical fields. This option is designed for users with a certain level of web design skills, enabling precise customization to suit specific needs.
ℹ️ Important note: If you are importing one of our pre-configured creations with an image cover, we recommend that you do not modify its position, as it has been optimized exclusively for this cover style. If you wish to make any modifications, simply change the color of the SVG using SVG Editor.
6. Extra Mobile option
This specific section gives you the option of importing an image and image coverage different from those used on desktop versions. This field is reserved for design experts who wish to create distinct visual presentations between mobile devices and desktops, which may be relevant in some cases to optimize user engagement and visual experience.
ℹ️ Please note: By default, images and main image covers are adapted and optimized for mobile devices, so you don't need to use this option if your intention is simply to set up an image on mobile - it will already be optimized. This function is specifically designed to enable the creation of designs differentiated between the two types of media.
In this section, you'll find the same customization options as those available for desktop versions, allowing continuity in the management of your graphic elements while offering the flexibility to specify unique styles for mobile.
Edit a cover image with SVG Color
When you import a creation and want to keep the cover image but change its color, you can use the free SVG Color tool.
Steps to change the color of the cover image:
Copy cover image URL: Access the Kehio Editor interface and copy the URL of the SVG cover image you wish to modify.
Access the SVG Color tool: Go to SVG Color.
Paste SVG URL: In the tool, paste the SVG URL and click on "Load SVG".
Change color: Once your SVG is displayed, you can change the colors to match your graphic identity.
Download cover image: After modification, download the modified SVG and import it into your Shopify store files.
Embed modified cover image: Copy the link to the uploaded cover image and paste it into Kehio Editor to update the cover image in your creation.
This method lets you customize your cover images to match your brand identity, while benefiting from the flexibility offered by the SVG format for precise, high-quality modifications.
If you need help understanding or modifying "Image" and "Advanced image" items, feel free to contact our support team at any time by e-mail or live chat.