W I D G E T ย  T U T O R I A L S

Image Frame Styler (tutorial)

OPEN Image Frame Styler

Introducing the Image Frame Styler for Google Sites

When building websites, we often need to style images with borders, frames, and other visual enhancements. While tools like Canva are great for this, the exporting and uploading process can sometimes be time-consuming. To streamline our workflow and reduce the number of steps needed to style images, weโ€™ve developed the Image Frame Styler specifically for the Google Sites community!

Hereโ€™s How to Use It:

1. Drag and Drop Your Photo

Simply drag or upload a photo into the Image Frame Styler tool. Itโ€™s as easy as selecting the image from your device and dropping it into the editor.

2. Customize to Your Liking

Use the customization options provided to add corners and borders to your image. You can adjust colors, thickness, and more, allowing for full creative control to match your website's design.

3. Save Your Styled Image

Once youโ€™ve finished customizing, save the image to your device. You can then easily upload the styled image to your Google Sites by dragging it directly into your google sites editor.Thatโ€™s It!You now have a beautifully styled image on your Google Site without any hassle. Simply repeat the process for any images you need to enhance.

Image Frame Styler Settings Explained:

Users can click the โ€œCLICK TO UPLOADโ€ area or drag and drop an image to begin the customization process.
    • Slider: Adjust the roundness of the image corners. The more you slide to the right, the rounder the corners become.
    • Corner Selection: Users can choose to apply the radius to specific corners by checking or unchecking options like Top Left, Top Right, Bottom Right, and Bottom Left.

    • Users can specify how thick the border around the image should be by entering a value in the Border Width box.
    • The border can range from 0 pixels (no border) to a desired width.

    • Clicking the color box allows users to pick a custom color for the image border.

    • The Transparency Level slider adjusts the opacity of the image. Sliding to the left makes the image more transparent, while sliding to the right makes it fully opaque.

    • Once all customizations are complete, users can click the Download Image button to save the styled image to their device.

Use Beyond Google Sites

Although this tool is built with the Google Sites community in mind, feel free to use it to style images for other platforms as well!If you find the Image Frame Styler helpful, donโ€™t hesitate to share it with others in the community!

Want More Widgets And Tools Like This?

Explore more widgets developed by our team to enhance your Google Sites experience. From share buttons maker to google form styler to countdown timers, our growing library of tools is designed to help you build beautiful, functional websites with ease! Explore More Widgets Here