[intro]In this Guide, you’ll learn how to add and customise the Text With Image section on your EKM online shop.[/intro]

Before you begin, it’s a good idea to prepare the images you would like to use in the Text With Image Section. This size of the images depends on the Design and Section Height you select:

  • Design 1: 400px x 400px square, .jpeg/.png image type:
  • Design 2: 900px x 400px, either .jpeg/.png image type;
  • Design 3: 900px x 400px, either .jpeg/.png image type;
  • Design 4: 900px x 400px, either .jpeg/.png image type;
  • Section Height Small: 1920px x 300px, either .jpeg/.png image type;
  • Section Height Medium: 1920px x 400px, either .jpeg/.png image type;
  • Section Height Large: 1920px x 500px, either .jpeg/.png image type.

If you have ticked the box to use the Parallax effect on the image within this section, you must remember to double the height of the image you use in this area. You only need to create one image for this section, so it might be worth scrolling down and deciding on the Design, Section Height and whether or not you would like to use Parallax to help you choose what work out what size your image needs to be. 

These images can be either .jpeg or.png image types and should be uploaded to Tiny Png/Tiny Jpeg (according to which file type you’ve chosen) to ensure that they have been optimised and will load quickly for visitors to your EKM online shop. 

These images will 'flex' and change shape, according to the device being used to view the content. With this in mind, it's important that you do not include any text within the images themselves, but instead use the text fields to ensure that the text can be read, regardless of the size of the browser being used to view your EKM online shop. 

1. Ensure you have the Sections tab highlighted, scroll to the bottom of the Sections and click Add Section:

2. From the list, click Text With Image:

3. Now this section has been added to your EKM online shop, click the Edit symbol:

4. Click the down arrow to edit each different element:


5. In this element, you can customise how you would like the Text With Image section to display. Begin by selecting which design you would like to apply:

6. Currently, you can choose from:

Design One

Design Two

Design Three

Design Four

7. When you have selected your Design, use the drop-down menu underneath to select the Height of the Section:


8. To begin, customise the Heading Text by amending the text in the field provided. Below that, you need to follow the same process for the Title Tagline and the Content Text:

9. Now you need to select the Alignment of the text using the drop-down menu, and you can amend the text colour by clicking the Colour Picker window:

10. You can drag the circle in the larger window to select your shade, use the slider below that to select the colour, click one of the primary colours below to use one of those, or if you have a hex code for a specific colour, paste it into the field and press Enter on your keyboard:


11. Now you need to configure the Button. If you wish to use the Button, ensure that the switch is turned on, and you have amended the text in the field accordingly:

12. Click the Edit symbol to set where you want the Button to link to within your EKM online shop:

13. In the menu that appears, each folder symbol represents a different area of your EKM online shop. Click the green cross symbol to expand a folder:

14. Select the Category, Product or Webpage you want to link to the Button:

[remember]The Category, Product or Webpage that you want to link to must be visible and not hidden on your EKM online shop, otherwise, it won’t be visible in the link menu when you are creating the link.[/remember]

15. Scroll further down and you can customise the appearance of the Primary Button by clicking the squares to open the Colour Picker windows:


16. Click the Select Image button:

17. In the window that appears, click the Upload Image button in the top right-hand corner:

18. In the second window, click the Select File button:

19. When you have located the image on your computer, you’ll see a preview in the window. Click the green Upload File button:

20. In the remaining window, click the file name and the image will be applied:

21. Now you’ve added the Background Image, scroll further down and you can amend the Overlay Colour using the Colour Picker window as before and the slider to select the Overlay Opacity. Your final steps are to click the switch if you want your image to display with a Parallax effect, and to select the Alignment of the image:

22. When you have finished editing this section, click the green Save button in the bottom left-hand corner:



[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions Board. If you have a non-account specific question to ask the EKM Team, join us in EKM Community. If you need some inspiration for your EKM online shop, listen to our podcast on iTunes and Spotify.[/contact]