GOBI – Adding Elements To Your Page

  1. Overview
  2. GOBI
  3. GOBI – Adding Elements To Your Page

Welcome to our step-by-step tutorial on building your webpage using our dynamic content management system. 

This guide will introduce you to adding text, images, videos, forms, countdown clocks, and more to your webpage. You’ll also learn how to structure your page with rows and sections. Even if you’re a beginner, don’t worry! 

By following these steps, you will gain the skills to create a visually appealing, functional webpage.

  1. Start by creating the basic structure of your page with rows and sections.
    • Add a section to your page.
    • Inside the section, add a row by clicking the “+Add Row” button.
    • Choose the number of rows you want from the popup options that appear on the right side of your screen.
  2. Begin adding elements to your rows:
    • Hover over the row and click “+Add Element”.
    • A popup with options will appear on the right side of your screen.
  3. Experiment with different types of elements. Here are a few examples:
    • Text-based elements: Headline, subhead, paragraph, bulleted list.
    • Media elements: Image, video.
    • Interactive elements: Button, form, survey, countdown clock.
    • Customized elements: Custom HTML, SVG images.
    • Calendar, map, reviews.
  4. Add your chosen element:
    • Select the desired element (e.g., headline).
    • The element will automatically be added to your page.
  5. To add more elements to a row:
    • Hover over the added element and click the small “+ Button”.
    • Select the next element you want to add.
  6. Enhance your page by adding more complex elements:
    • Navigate to the upper right side of the toolbar.
    • Find the “Elements” button and click to expand a dropdown menu.
    • Choose and add elements like a timer, navigation menu, order form, customer review section, or even a calendar.
  7. Adjust the settings of your elements to customize your page:
    • Click on an element to bring up the settings on the left side of your screen.
    • Experiment with different settings, including general, theme, and advanced.
    • Under “Theme,” you can add borders and shadows, and adjust spacing and margins.
  8. Preview and adjust your page design:
    • Don’t worry if your page doesn’t look perfect right away.
    • Play around with colors, spacing, and positioning of your elements.
    • Experiment to learn what works and improve your design skills.
  9. Save your changes and continue iterating on your page design.

And that wraps up our tutorial on how to add different elements to your webpage. Remember, building a webpage is a creative process that requires experimentation and learning. Don’t be discouraged if your design isn’t perfect at first. 

With time, you’ll improve and become more comfortable with different settings and customization options. Keep playing around with colors, spacing, and positioning; soon enough, you’ll be designing pages like a pro! 

Feel free to revisit this guide anytime you need a refresher. Happy designing!

Related Articles


Was this article helpful?