This is a ECE 49595 Open Source Senior Design Project Vebly is a powerful and user-friendly no-code website builder that allows you to create professional-looking websites without writing a single line of code. With its intuitive drag-and-drop interface and ability to use pre-designed templates, Vebly empowers anyone, regardless of their technical background, to build and launch a website with ease.
Vebly's drag-and-drop interface is the heart of its no-code approach. Using components from VvvebJS, users can effortlessly add, arrange, and customize various elements like text, images, videos, forms, and more by simply dragging and dropping them onto the canvas. This visual approach makes website building a breeze, even for those with no coding experience.
In today's mobile-centric world, having a responsive website is crucial. Vebly ensures that your website looks great and functions seamlessly across different devices and screen sizes. Every element you add to your website is automatically optimized for desktop, tablet, and mobile viewing, providing a consistent and engaging experience for your visitors.
Vebly offers pre-designed templates that cater to various industries and niches. Whether you're building a website for a small business, an online portfolio, or a blog, you'll find a template that perfectly aligns with your brand and requirements. These templates serve as starting points, allowing you to customize them further to match your unique style and preferences.
See the Developers Wiki to get more information on how to contribure to our website!
To use the application, please first visit our website at https://vebly.netlify.app/
Our editor is broken into three components to help you build your dream website:
This toolbar contains the following tools:
- Toggle controls: You can toggle the left and right panels by clicking this button
- Undo/Redo: This helps you undo/redo your edits
- Preview: This toggles both panels and let's you get a better view of your website
- FullScreen: Makes the website fullscreen
- Download: Allows you to download your modified website as a zip file.
- Deploy: Deploys your modified website to Netlify.
- Viewport Functions: Changes the view to preview what your website would look like on a tablet, phone, or laptop.
- Login: This logs you into the website and makes available the login button.
- Find Templates: This takes you to the template marketplace where you can search for new templates.
The left panel contains the following tools to help you modify your website:
The website pages in Vebly are broken up into different sections. Sections such as a Footers, Pricing Tables, and Testimonials.The section handler allows you to view these built in templates and add them into your website to make your website editing process smoother.
There is a second tab in the website handler that allows you to manage all of the sections that you currently have on your webpage, customizing or deleting them as you see fit.
These tools allow you to add individual components or blocks into your page.
This tab allows you to set different bootstrap variables such as fonts to further modify your website.
The right panel contains the following tools to help you modify your website:
When a component is selected, the right panel is filled with different changes you can make to the content of the component such as changing text/font through all three of the above tabs.
After you are done building your website, you can either download it as a zip file or deploy it to the web using Netlify.
To get more familiar with Netlify, please read through their documentation.
To deploy through Netlify, you need to provide us with your Netlify Token that you can access token.
If you would like to modify an existing website that you have through Netlify, you can provide us the WebsiteID.
If you would like to create a new website, leave the prompt asking for WebsiteID blank.
With that, you should have your new website!
If you have any questions, feel free to contact us at the following email: ayushprjaharaj@gmail.com