Submit a ticket My Tickets
Login  Sign up
Open navigation

How to Add Images/SVG and Icons Widgets to your Pages

Incorporating images, vector graphics, and icons into your webpage is crucial for enhancing visual appeal, improving communication, strengthening branding, enhancing user experience, ensuring accessibility, and boosting SEO

In this article, we will learn how to incorporate galleries, images, illustrations, screens, vector graphics (SVG), and icons into your school's pages. 

To add an Image type, Vector Graphic, or Icon Widget to any section of your pages:

1. Go to Website Design   Edit Website.

2. Choose the page you want to edit from the Pages Manager.

3. Click on the +icon/Widget and select your desired template.

4. After adding an image type widget, click on the Image and change the image via your Image Library. You can click on the added widget to adjust its settings via the sideform. 

Galleries Widget

Appearance: You can display and switch the widget's layout and choose among many templates.

Media Gallery: You can delete a media item, you can edit the screen options (change the image, screen type, screen size, and background), add captions to the images, or even re-order the Media items.

  • Click on the +Add Section if you want to add a Galleries Section. 
  • You can choose for a Popup slideshow to appear when the Media Gallery is clicked.

Image Widget

Image: Change the image by clicking on the change button.

Size: Change the width and height of the image.

Alt: Add an alternative text for your image. For more information about accessibility features, click here

Illustrations Widget

Image: Change the image by clicking on the change button.

Size: Change the width and height of the image.

Alt: Add an alternative text for your image. 

Popup: The image can be clicked and opened in a pop-up window enlarged. 

Screen Widget

General: Change the Screen Type and Size. Click on the change button to see a visual depiction, or select from the list of Screen Types. For Screen Size, you can select either Full, Large, Normal, or Small.

Background: Choose a background for the screen from Color, Image, Video, Embed, or SVG. This article provides detailed information on the background options.

Overlay: Choose to set an overlay color and its opacity.

Screen Caption: Add a Screen caption for catchy texts.

Vector Graphics (SVG) Widget

SVG Image: Click on the change button to change the image. You will then be able to access the SVG library, where you can choose among more SVG template widgets or add your own from your device. You can also change the Image position and background color.

Frame Appearance: Change the Size, Shape, and Opacity of the SVG image.

Alt: Add an alternative text for your SVG image.

Icons Widget

Add icons to your pages by adding an Icons widget or choosing an image from your Library. 

After adding a widget, you may want to edit the widgets' general settings, actions, and layout settings in the editing Sideform.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.