Want to bring your website to life with images and videos? This guide will show you how to embed images and media inside your Grigora website in just a few clicks. Whether you're creating a blog, portfolio, or landing page, mastering media embedding is essential for engaging content.
Adding Images to Your Website
Finding and Adding Image Blocks
Open the Grigora editor and use the search option in the elements list to find "Image Block" and drag it into your editor where you want the image to appear in your content layout.
Uploading Your Images
Once added, click on "Upload an Image" to begin the upload process.
Select "Upload from Computer" to choose an image file from your device. Your image will now be added in Grigora and ready for customization.
Customizing Image Settings
You can customize your image settings with comprehensive control options:
Dimensions: Adjust width and height to resize the image for perfect fit within your layout
Alignment: Change alignment to left, center, or right for optimal positioning within your content
Accessibility: Add alternate text for screen readers and SEO optimization
Captions: Include caption text below the image to provide context or descriptions
Metadata: Set a title for the image for better organization and SEO benefits
Performance: Toggle lazy load to improve website performance by loading images only when needed
Adding Videos to Your Website
Finding and Adding Video Blocks
To add a video, search for "Video Block" in the elements list and drag it to your editor where you want video content to enhance your page engagement.
Uploading Video Files
Upload a video file directly to Grigora's system. Once uploaded, your video will be added to Grigora and ready for configuration with various playback options.
Configuring Video Settings
You'll have access to various video settings for optimal user experience:
Audio Control: Mute to start video without sound for non-intrusive autoplay
Playback Behavior: Autoplay to automatically start playing when visitors reach the video
User Interface: Show controls to display play/pause buttons for user interaction
Continuous Play: Loop to repeat video continuously for background or ambient content
Viewing Options: Disable picture-in-picture to control how users can view your content
Loading Settings: Control preload options for performance optimization
Layout: Alignment and dimensions settings for perfect integration with your page design
Performance Optimization Tips
For maximum website performance, follow these optimization best practices:
Image Format: Upload your images in WEBP format for superior compression and faster loading times
Video Format: Upload videos in WebM format for optimal web performance and compatibility
This ensures your media loads faster and provides better user experience across all devices and connection speeds, which is crucial for maintaining visitor engagement and SEO performance.
Professional Media Integration
This comprehensive media system allows you to create rich, engaging websites that combine text, images, and videos seamlessly. Use these media elements strategically to:
-
Enhance storytelling with relevant visuals
-
Demonstrate products or services through video content
-
Break up text-heavy sections with engaging imagery
-
Improve user engagement through multimedia experiences
-
Support your content with visual evidence and examples