Text, buttons, images, forms, and other elements share a set of controls in Grigora. This guide explains spacing, device visibility, colors, backgrounds, and other element settings.
Understanding Common Element Settings
Most elements in Grigora share common settings like margins, padding, colors, backgrounds, and visibility. This consistent approach makes it easy to master element customization once you understand the core principles that apply across all design components.
Accessing Element Settings
To access element settings, right-click on any element and select "Settings" from the context menu. You can also press Ctrl + E as a shortcut to open the settings panel on the right side of the screen, providing quick access to all customization options.
Margin and Padding Control
Finding Size & Space Settings
The Margin and Padding settings are available under the Size & Space section in the settings panel. These controls allow you to adjust the spacing around and within your element for better layout and alignment.
Flexible Spacing Options
You can adjust Margin and Padding individually for the top, bottom, left, and right sides, or apply the same value to all sides for consistent spacing.
Device-Specific Visibility Control
Right-click the element you want to hide and select Hide on from the context menu. Choose Desktop, Tablet, or Mobile to hide the element on the selected device.
This option allows you to control the visibility of individual elements across different devices, making it easy to create device-specific layouts and tailor your content for different screen sizes..
Colors and Background Customization
Accessing Color Settings
You can customize your element’s visual appearance from the Style section in the settings panel. Under Background, choose either Color or Image. When using a color background, you can select a Solid color or a Gradient to achieve the desired look.
Color Customization Options
You can customize the element’s background color by selecting the Color option and choosing a color from the color picker or from your saved project colors for consistent branding.
Background Styling
The background can be customized in the same way, allowing you to choose the desired color, gradient, or image to create a visually appealing and consistent design.
Professional Element Mastery
Understanding these common settings allows you to customize design, spacing, alignment, and behavior of every element on your site. Practice these settings to bring your website design to life by:
Creating consistent spacing with margin and padding controls
Optimizing for all devices with visibility settings
Maintaining brand consistency with color palette integration
Achieving pixel-perfect results through precise control over every design aspect
Advanced Customization Benefits
These settings apply to text, buttons, images, forms, and other elements. Use them to adjust each element's appearance and behavior.