How to create a business Website or iOS/Android app for free

Chapter 1: Choosing a Template.

To start, we go to the Admin Dashboard, located at admin.maxmedia.io. We click on 'Create Site', then 'Choose Template'. Here, we can select one of the starter templates provided for you. I'm going to choose the 'Portfolio' template. We then type a name for our site or mobile application - let's call it 'My Site' - and choose a password for our main user. After clicking 'Create Site', we are redirected back to the Admin Dashboard, where we can continue customising our website.

In Chapter 2, we'll take a look at the Admin Dashboard Overview. Here, we can see metrics about our clicks, traffic over time, users, sales, push notifications, and more. We can connect our custom domain, book a meeting with our account manager, check if we have running ad campaigns, attach analytics and custom scripts, and access the Builderly affiliate program.

Now, let's move on to the main event: the Site Builder. We click on 'Site Builder' from the menu on the left. Here, we can see all the features that make up a website or mobile application, such as menus, custom pages, page permissions, stores, products, services, bookings, and more.

In the Store section, we can view our orders, payment cards, bookings, subscriptions, and claims that users have made about any issues with our delivery or system. We can also add our delivery settings for online stores, as well as our payment settings.

You can add various tax settings, such as regional taxes, coupons, and vouchers, in the Business Tools section. You can also create price quotes, invoices, credit notes, and debit notes, and set up automatic invoicing. Additionally, you can create an inventory for your online store, view more site analytics, and add on-site ads and monetisation to your website.

The next section is Users and Customers, where you can view email lists, user accounts, admin management, newsletter contacts, and leads. Leads are people who have purchased something from you, such as a booking, product, or subscription service. You can also view unsubscribed users from your email list, send push notifications to mobile devices, and set up automatic emails from the Builderly system.

Finally, in the SEO and Analytics and External Scripts section, you can add Google Analytics scripts, Facebook pixels, Google Search Console scripts, tag managers, and custom scripts.

To access the patent-pending UI Builder, click the green button located on the right side of the page. This will redirect you to the home page, which consists of a header, body, and footer. The body is created out of custom pages, or partials, which do not appear in the mobile application menu.

To create a new custom page, click the menu in the left corner and choose 'Create New'. This will open the structure of row, column, and component.

First things first, we need to add a row. After clicking on 'Add Row', you have the option to add a component which will automatically create a first column. Before we do that, let's explore the row settings. On the right side of the screen, we have the layer menu. If we click on 'Row Settings' for this row, it will be highlighted in an orange-yellow colour.

By clicking on 'Row Settings', we can make modifications to the row. For instance, if we want the row to take the full width of any screen, we just have to click on 'Full Width' and then choose a minimum height which is relative to the resolution of the user's screen. We can also add a background colour or a background image. We can even add a background video from YouTube, as long as it is uploaded by you or is royalty free.

If we choose to add a background image, we can also choose to have the Parallax effect, which will scroll the background and foreground of the row at different speeds. For example, if we choose this background image and choose Parallax, then add a component, such as a custom component with a heading that reads 'Welcome to my website', we can make the heading bigger and centred, and make it white.

Now, if we add another row and choose a minimal height, and add a background image, we can see that the effect from the first row is a little bit nicer. It allows us to scroll the text without scrolling the background.

If I want to combine two images that are the same, I can simply click on the Parallax option in the Builderly Editor. This will recognise that the images are the same and treat them as one. For example, if I copy and paste a column and make some changes to the image, such as adding some minimal height, I can create a really cool changing effect.

To do this, I need to use a hierarchy of rows, columns, and components. For example, I have the "Hello to my website" component inside a column. In the column settings, I can adjust the size to be half the width of the screen. I can also add an image, such as the "Positive Man" image.

Once I save the page, I can add it to the navigation and log in to my website. When I click on the page, I can see the Parallax effect, the scroll into-view animation, and the same dimensions on any resolution. On a mobile device, the first column will be on top of the image.

I have added a grid system of rows and columns to enable automatic repositioning. This image is too large, so I'm going to click on the column settings and add some horizontal spacing. This looks better, so I'll save it. If I want to add another column, I need to make one of the columns smaller. For example, I'm going to make this one a bit smaller and add a map. When I preview this, the columns are arranged correctly, but if I view it on a vertically oriented device, the columns will rearrange. To prevent this, I can remove the map and make the columns smaller. Then, when I view it on a mobile device, they will stay in the same row. Finally, I'm going to add a contact form and some margins, then save it.

Now, let's say you want to create a landing page for booking services, collecting emails, or using forms. You can choose to show or hide the header and footer depending on whether you choose a partial or regular custom page. After making your selection, click save, reload, and you have your landing page. This could be a product, service, subscription, or any other type of landing page.

On the main page, you can choose what to have in the body. For example, you can delete a section and add a test you created. When you preview the page, you can see the body with the text you added. You can also have multiple partials inside the home page, such as a contact form.

Layout pages are also available, such as stores, products, services, booking, blog, posts, video, contact, partners, and price plans. You can control the layout of the predefined product pages, such as where to have the title, images, and additional information sections. You can also choose to display or not display options, descriptions, comments, and more.

Resetting this, you can customise the predefined pages in the Builderly. When you click on the 'Theme' option from the left side menu in the editor, you can choose the overall appearance of your website or mobile application. You can choose a different predefined swatch, custom colours, gradients for your backgrounds, headers, and footers. You can also choose a background image or video for your whole website, and decide whether to have the parallax effect or not. You can also choose the opacity, heading, and body fonts, and even import custom fonts from Google Fonts.

When you click on the 'Logo and Contacts' option from the left side menu, you can upload your logo images for the whole site, choose a name for your site, add your address, email, contact information, and working hours. This will automatically generate a contact page for you.

Finally, when you click on the 'Header and Footer Layouts' option from the main page in the editor, you can customise the way your header looks. You can choose a side menu layout, two-row or single row header, and decide whether to have the search functionality or not. You can also choose if you want the header to scroll with the page or stay on the top. You can choose the logo position (left, right, or center in certain configurations), logo size, font size, font margin, and font weight. With all these customisations, you can make your website look exactly the way you want it to!

I can further enhance my website by adding paint links, such as my LinkedIn and Facebook accounts. This way, I can have all my paint links on every page in the same position. Additionally, I can add custom content to my header, such as a custom section or partial, to create an entirely customised navigation. To create the footer layout, I have two options. I can either use predefined columns or create a custom page partial. I can also use a combination of the two to find what works best for me. Lastly, I can create a new menu by clicking on 'Create New Page' and adding a title for my page, such as ‘Contacts'.

I can add a custom drop-down to my menu by choosing the type of page I want. For example, I can choose a home page, contact page, partners page, store page, and so on. After selecting 'custom page', I click 'OK' and choose the custom page I have prepared for this menu. I click 'Save' and delete the test. When I go to the editor, I can see my contact form, home page, about page, and contacts page. I can also rearrange my navigation items by clicking on the two bars on the right and dragging them to reorder. When I go to the site preview, I can see that everything is reordered as it should be.

Section 5: Adding a Store

Adding a store to Builderly is easy. First, I go to 'Stores' from the side Builder section and create a store. I name my collection 'Pictures' and save. I can choose to add a navigation item with my picture store and do that. Then, I go to 'Products' and create a new product. I choose the collection I created, which is 'Pictures', and name it 'Dog'. I choose a few dog images and make it available for purchase and published. I set a price, add a brand name, and add a product weight. I have a preview right here and add a description. It is important to make the description as descriptive as possible.

Under this description, you can see a preview of your search engine results page and your social media shares. Now that I have my product somewhat created, I can see my description which will appear in the Google search page. This isn't really viable for getting clicks, so I might want to add more information to my main description. This is a bundle of high-quality dog pictures, maybe even drone shots. I can also add a ribbon, which is a sticker of some promotion, whether it's a new product or a sale item. I can add my old price if I'm doing a promotion, which will be struck through. I can also add some additional product information, such as colour schemes. I can also add product options, such as size. For example, 5x10 and 10x20. I can even add some price editions for the different options, such as the bigger size picture costing more since more materials have been used. I can add, let's say, 10 of the currency of my website or mobile application to my base price. Additionally, I can add custom sections or partials, make the product digital, add digital receipts that the customer will receive, or add additional fields that can be predefined according to our needs. Let's go to the site preview and check out my pictures store. Click on that and I have my dog!

If I choose the larger option, my price increases and I can add this to my cart. I have my additional information, so what about filters? Going back to the site builder, we can add store filters which are groups. Let's call this 'Animals'. We can add a group separator which is really useful when we have more filters and we can choose a parent collection which is not required, but if you need this filter to belong to some collection, it is very useful. Clicking 'Save', we can go to the side builder, choose products, edit my product, and in the filters, I'm going to choose and most and click 'Save'. Now, if we go to preview and go to pictures, we can see that now we have some filters and some sorting fields automatically generated for our store, making it easy and efficient to use. The grouping of the filters mentioned is this one right here. If you leave it empty, it will be a general filter, but it could be, for example, if you have a watch website and you want to sort the filters, you could have a case, MSRP, bracelets, cases, genders, movements, scopes, and sizes. Finally, we have digital products. If we go to digital content, we can create new digital content, give it a name, and upload a file that will be received by the user after they have made a payment. To create a payment for a digital product, you need to use online payments, which we will get to in section six, ‘Services'.

By creating a booking service, we can provide our customers with a convenient way to book appointments. To begin, we need to create a service category and add it to the navigation. Then, we can create a new service and choose our staff members. We can also choose an original address or redirect the user to our contact page. We can make the service bookable and add a picture, name, and header to describe the booking service. We can also set a price for the booking, either free or with online payments enabled. Lastly, we can choose the booking options, such as a recurring service with a session duration of 30 minutes and a buffer time of 15 minutes between sessions. This way, we can ensure that our customers have a smooth and efficient booking experience.

You can choose to have a maximum number of participants, which means that if you're making a webinar, you don't need to worry about how many people can book the same date and time - the more the better! If you're doing one-on-one consultations, you'll likely want to have one spot for booking, or if you're doing a group activity like Yoga, you'll need to have nine bookings of the same hour in the same day.

You can also set a bookable days offset, which is how many days beforehand a user can book a meeting. For example, if you don't want any surprises and don't want someone to book a meeting five minutes before the actual schedule, you can set the offset to one day.

You can also set your work time, choosing which days of the week you're working and adding breaks. You can also book holiday days, so if you're not working on the 30th or 31st, you can click on those days and they'll be fully booked.

You can also add additional content, such as a custom page or partial, and you can choose to only show the additional content if you need it. You can also add additional fields if you need them, and you can even make it a booking only page, which means it won't have a header or footer, giving it more of a landing page feel.

Finally, you can preview consultations, choose the date, hour, and name, and click "book now" to schedule the meeting. With all these options, you can easily customise your booking page to fit your needs.

You can add more staff members to your Builderly site by inviting users from the premium functionality section. We have already created a store of booking services, and now we can create a blog. To do this, we need to create a block category, so let's call it 'My Adventures'. After saving and adding it to the navigation, we can create a new blog post. We can choose whether to have it published or not, select the block collection, add an image, and give it a title, such as 'My World Travels - I Miss the Rains Down in Africa'. The description is the body of the post, and we can also add search engine optimisation, visualisation, and social media shares. We can also add custom content, which is a custom page partial.

Something interesting that we have are online programs. We begin by creating a program category, such as 'Drawing Courses'. We can even add some sub topics, which will be used as filters, just like the groupings inside the stores. We can then create a new program, select the category, add an image, and give it a title, such as 'Get Better at Drawing'. This program is suited for beginners, and we can add a description, pop-ups, and custom video content. We can also add additional content, such as a custom section or partial, as well as suitability and price plans. Finally, we can add our actual course, such as 'Week One', and add a title and description for each step. We can also upload our video content right here.

You can create a custom page for that lecture and attach it to the course. To do this, use the illustration collage and save it as Step Two. This page can contain a video, text, explanations, or whatever else you need. Once you mark it as completed, you can go to your homepage and see the percentage of completion of the course. You can also add a tracker for your programs, such as quizzes, tests, or other activities. This tracker will keep track of your progress and you can add video content for explanations. Additionally, you can add your score to the tracker and upload your progress. This will help you keep score of how you are doing over time.

Finally, you can set up online payments. Begin by going to the store and payment settings, and allow card payments. Create a merchant account by choosing an email to register with, selecting a country, and clicking on create merchant account. Read through the terms of views and services for merchant accounts and accept them. When the button turns yellow, click on setup merchant account and then onboard to the Stripe system.

You're almost done with your onboarding process for Stripe, so you can access your payment account and click the green button to be transferred to your Stripe connected account. You'll receive a single-use code on the phone you provided during registration. Then, you can set up your invoice settings to use features such as price plans or subscription services. You can upload a logo, choose a starting sequence for invoice numbers, and select your business name, responsible official, and language. You can also choose the country, IBAN, SWIFT contacts, and foreign tax IDs.

Once you've set up all the necessary requirements, you can create subscriptions. Go to the side Builder menu, select recurring payments, and choose a price class. You can give your subscription a name, price, additional features, and a description. Finally, select a billing period and you're ready to start generating recurring revenue!

Builderly makes it easy to create custom payment plans for your programs and services. You can choose to have a free trial period, collect billing information, and generate price plans with just a few clicks. Plus, you can set page permissions to require login and subscription for certain pages. That way, you can make sure that only those who have paid for your program can access it.

If you ever have any issues or questions while using Builderly, you can always book a free 15-minute meeting with our support team. Our team is here to help you with any difficulties you may have. Thank you for watching and goodbye!