Element in Grigora

Want to make your website truly your own? This guide will break down the features and settings of individual elements in Grigora—text, buttons, images, forms, and more. Learn how to get pixel-perfect results and optimize every block on your site, whether you're a beginner or advanced user.

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

image.png

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

image.png

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

image.png

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

image.png

 

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

This systematic approach to element settings ensures you can tweak every detail without code while maintaining professional standards. Whether you're working with text, buttons, images, forms, or any other element, these core settings provide the foundation for sophisticated, responsive web design.


Was this article helpful?