Welcome to our guide on the Fixed Grid Design Element!
Fixed Grids are versatile elements for your app design. Incorporate images, videos, or gifs. They expand content vertically and can be used for various purposes like category boxes or collages. Showcase multiple collections effortlessly, enhancing user experience and engagement.
In this comprehensive guide, we'll explore how to utilize the Fixed Image Grid element to enhance the visual appeal and usability of your app. From its basic functionalities to creative applications, we'll provide insights and tips to help you make the most of this versatile tool. Join us as we uncover the potential of the Fixed Image Grid element and elevate your app design to the next level!
How to Utilise the Fixed Image Design Element?
Today, in this tutorial, we'll craft a Fixed Grid example to demonstrate the plethora of features within our dashboard, facilitating the creation of stunning designs. We will replicate the design below using our Design Editor, diving into the process of creating an awesome Fixed Grid design. Let's get started!
1: Add Fixed Grid to your Design.
You can do it just by simply dragging and Drop it into the design canvas, it is that simple.
Now that we've incorporated the Fixed Grid into our design, we can proceed to populate it with content. In our example design, there are 8 images. Click on the "Add Content" button to begin adding the content as shown in the image below.
2: Add Content to your Fixed Grid.
Clicking on the "Add Content" button allows you to begin adding images to your grid. Once added, they will appear on the design canvas. You have the option to add images, gifs, or videos. Ensure that the images you upload are of an appropriate resolution for mobile devices, neither too high nor too small.
3: Link Actions to the each Slide you just uploaded.
You can achieve the same by linking the element to any page, collection, product, or custom web URL. Here's a simple example: we are linking the first slide to a product.
4: Save the Content
Once you click on the save button on the design page, your design element is ready to be previewed. You can always preview it by clicking on the preview button on the design page or by using our mobile app.
By scanning the resulting QR code, you can view the design in your mobile app. Currently, it may not look exactly as intended, but further steps will guide you on adjusting a few values from your design's configuration to achieve the desired results.
For now, the current result resembles the screenshot below.
5: Adjusting Grid Element Width
You have the flexibility to determine how many elements appear in a single row by adjusting the "No. Of Columns" value in the right panel of the Fixed Grid Configuration. For our specific scenario, set it to 4 to display four elements side by side.
the result after adjusting number of columns can be seen simply by saving and taking preview.
6: Personalise the Background Colour of the Grid.
7: Enhance Your Grid by Adding a Background Image.
If you haven't already noticed, we also have a background image available for the grid. You can easily add it by simply clicking on "Background Image" below the background color option.
8: Final Touch - Adding Vertical Margin.
Vertical margin is an effective way to provide spacing between the top of the grid content and the baseline of the grid. We offer options for both horizontal and vertical margin adjustments. By default, the values are set to 16px, but you can customize them according to your preferences. In our case, we're setting the vertical margin to 35px, while keeping the horizontal margin at its default value of 16px. Voila! Our final polished grid is now ready to go live.
Once you've configured the Fixed Grid element, clicking the "Save Changes" button preserves the design element along with its configurations on the page.
Next, preview your design element by clicking the "Preview" button. If you encounter any difficulties during the preview process, we've provided a dedicated blog and tutorial video for your assistance—be sure to check them out.
Finally, publish your page by selecting the "Publish" button, and you're all set. Your Fixed Grid element is now ready to be viewed within your app.
What Transformations Await Your Mobile App?
In summary, mastering the Fixed Grid Design Element offers a seamless way to create visually engaging and informative app interfaces. Embrace the power of the Fixed Grid element to elevate your app design and captivate your audience effortlessly.
If you need further information or assistance, feel free to reach out to the Omniful Support Team. We're here to help! Don't hesitate to contact us with any questions or concerns; our support team is ready to assist you with anything you need!