Adding and Editing Components #

In Webfluss, you have the flexibility to add and edit various components to build and customize your website exactly as you envision. Components refer to the individual elements that make up the structure and content of your pages, such as text, images, buttons, forms, and more. This section will guide you through the process of adding new components, including pre-defined sections, and editing existing ones within the Drag-and-Drop Editor.

Adding Pre-Defined Sections #

Webfluss provides several pre-defined sections that are ready to use, saving you time on design and ensuring a consistent layout. These sections include Hero, Features, FAQs, Testimonials, Team, and more.

Follow these steps to add a pre-defined section to your page:

1. Open the Drag-and-Drop Editor
   Start by launching the Page Builder from your website's Website Workspace.

2. Access the Pre-Defined Sections
   On the left-hand sidebar of the Drag-and-Drop Editor, you will find a section labeled Pre-Designed Sections. This includes layouts such as Hero, Features, FAQs, Testimonials, and Team.

3. Choose the Section You Need
   Scroll through the available options and select the section that fits your needs. Each section comes with a ready-made layout, optimized for mobile and desktop.

4. Drag and Drop the Section
   Simply drag the pre-defined section from the sidebar and drop it onto the desired location on your page. The section will automatically integrate with the existing content on your page.

5. Customize the Content
   Once the pre-defined section is added to your page, you can customize it:

   • Text: Edit the text within the section to match your message.
   • Images: Replace any placeholder images with your own visuals.
   • Buttons and Links: Adjust the call-to-action buttons and links to align with your goals.
   • Colors and Layout: Modify colors, fonts, and spacing to fit your brand's look and feel.

6. Rearrange or Remove Sections
   You can also reposition the section by dragging it to a different part of the page, or remove it entirely if needed.

Adding Individual Components #

To add a new component, simply drag the desired element from the sidebar and drop it onto your page. Webfluss offers a wide range of components that can be added to any section of your website, including:

• Text: Add text blocks to provide information, tell stories, or introduce products. You can easily format your text by changing font size, color, and alignment.
• Images: Upload and insert images to make your website visually engaging.
• Buttons: Add call-to-action buttons that guide your visitors toward specific actions, such as signing up or making a purchase.
• Forms: Integrate forms to collect visitor information, inquiries, or feedback.
• Videos: Embed videos to enhance the interactivity and appeal of your content.
• Icons: Insert icons to highlight features, services, or social media links.

Each component is fully customizable, allowing you to match them with your overall design and brand identity.

Editing Components #

Editing existing components in Webfluss is simple and intuitive. Once a component is added to your page, you can click on it to access the editing options.

• Text Components: You can change the content by directly typing into the text block. Additionally, the right sidebar allows you to adjust formatting options like font size, color, alignment, and more.
• Images and Videos: Click on an image or video to replace it, resize it, or adjust alignment and spacing. You can also add alt text for SEO optimization.
• Buttons: Edit the button text, link destination, and style, including colors, shapes, and hover effects, all from the editing panel.
• Forms: Modify form fields, labels, and settings to ensure you're collecting the right information from your visitors.
• Icons: Change the icon style, size, and color to fit seamlessly into your website’s design.

Repositioning and Customizing Components #

Once you have added or edited a component, you can easily move it around by dragging and dropping it to a new position on the page. This allows you to create custom layouts without any coding knowledge.

You can also access additional customization options, such as:

• Spacing and Padding: Adjust the space around components to create clean, organized sections.
• Visibility Settings: Choose to show or hide certain components on mobile or desktop views to ensure an optimized experience across devices.