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.