Login
Start Free Trial
Webifly - How to Use guide

Webifly Tutorial - Unlock Your Business Potential with the Best Website Builder

The Webifly Builder is a powerful page builder with front-end and back-end interfaces. Whether you prefer working on the live site or in the admin area, this comprehensive and user-friendly page builder allows you to create intricate layouts effortlessly, even without coding experience.
Let’s Start

Page Builder - Webifly Tutorial for Beginners

The builder remains unchanged in its core but operates on a different principle.This tool highlights real-time visual editing. Designing with this editor can be summarized in 3 words: Section, Wrap, and Element.

The first component, the section, serves as a container for Wraps. The section offers various options, including background customization and more. This versatile block provides nearly limitless possibilities for customization and management.

Sections options bar is always green in color and becomes visible when you hover over a particular section, wrap, or element within the interface.

  • +WRAP :- This button adds a WRAP element to the section.
  • +DIVIDER :- This option inserts a DIVIDER between rows.
  • +(Green Circle Icon) :- Clicking this icon adds another section, either before or after the current section.
  • +Drag :- This icon allows you to drag and drop the section to any desired position, including dragging it from another location.
  • Pencil Icon :- When clicked, it opens a window displaying all available options for the section.
  • Clone Icon :- Clicking this icon duplicates the specific section.
  • Three-Dots Icon :- Hovering over this icon reveals a dropdown menu with various actions and activities for the section, such as hiding the section, collapsing it, moving it up or down, or copying and pasting it.

Now, let’s turn our attention to Wrap. Wraps serve as containers within a section and feature a sleek grey color. Within a single section, you can utilize as many wraps as you desire, and it can customize to any size. With wraps, you can unlock a multitude of layout variations and take advantage of its diverse built-in options. But remember, the possibilities extend far beyond these initial offerings. The true potential of wraps is limited only by your imagination. The options on the Item bar are similar to those available for the wrap:

  • The icons "+" and "-" enable you to enlarge or reduce the size of the current wrap.
  • 1/1: actual wrap size
  • + To view all available elements, click on the item, and a popup will appear. You can use the drag feature to move the wrap and drop it wherever you prefer.
  • Clicking the pencil icon triggers the opening of a window displaying a comprehensive array of options dedicated to the selected wrap. Additionally, the wrap itself is double-clicked to initiate the edit action.
  • When the Clone icon clicks, it will close the corresponding wrap.
  • Clicking the trash icon will remove the particular wrap associated with it.
The final component is an Element distinguished by its consistently blue color in the options bar. Adding an Item is a straightforward process—locate the desired one in the left-sidebar and effortlessly drag and drop it into the editor wherever you prefer. It couldn’t be simpler. Each element has many options, providing virtually boundless possibilities for creating diverse layouts. With this wealth of choices, the potential for crafting unique designs knows no bounds. The options on the Item bar are similar to those available for the wrap:
  • + & - These icons allow you to enlarge or reduce the size of the present wrapping.
  • 1/1 this is the actual size of the wrap
  • Drag allows you to move and place wrap elements using drag-and-drop functionality conveniently.
  • When you click on the Pencil icon, a window displays all the options for the specific wrap. Additionally, you can perform the edit action by double-clicking on the wrap.
  • When you click on the Clone icon, it will close that exact wrap.
  • When you click on The trash icon, it will remove that exact wrap.
  • Three-Dots Icon :- Hovering over this icon reveals a dropdown menu with various actions and activities for the section, such as hiding the section, collapsing it, moving it up or down, or copying and pasting it.
Webifly: The All-In-One Website Builder for Stunning Sites. Intuitive Drag-and-Drop Editor, Customizable Templates & Powerful Features.
Privacy & Terms. | Refund Policy | Contact Us

Links :

Resources :

Newsletter

Join over 68,000 people getting our emails

Social_facebook Twitter Youtube Instagram

Copyright @2024 Webifly.com