Build Your Website – No Coding Required!
Do you dream of having your own website but coding feels like a hurdle?
Well, worry no more! Sitejet Builder is here to turn your website dreams into reality, even if you’ve never written a line of code in your life!
Here’s why Sitejet Builder is perfect for you:
Drag-and-drop magic: Building your website is as easy as arranging building blocks! No confusing code, just point, click, and drag to create your dream layout. ️
Ready-made designs: Feeling uninspired? No problem! Choose from a variety of beautiful templates designed for different industries and styles.
Mobile-friendly, always: No need to worry about your website looking good on different devices. Sitejet Builder automatically makes your website look fantastic on phones, tablets, and computers!
SEO boost built-in: Want your website to be found easily online? Sitejet Builder includes features to help search engines see your amazing work!
Sell like a pro: Have amazing products or services? Easily set up an online store with Sitejet Builder’s built-in features.
Whether you’re a complete beginner or a design whiz, Sitejet Builder empowers you to create a website that’s both beautiful and functional.
Ready to get started? Let’s first see how to find the SItejet Builder option in your cPanel and Plesk control panel!
From Cpanel
Step 1: You can get the “sitejet builder” option from the left side panel. As well as you can get the option from the “Domains” section > Sitejet Builder.
Step 2: On clicking on the “Sitejet Builder” option, you will get the below screen asking you to choose a domain for which you want to build the site.
Step 3: Once you click on the “Build With Sitejet” button, you will be redirected to the below page.
Step 4: Once you choose the template, it will redirect to Builder as seen below
From Plesk
- Choose the domain for which you want to build the site with Sitejet Builder.
- Go to Websites & Domains
- Under Files & Databases, click on “Sitejet Builder”. You will see the below screen.
- Choose the template as per your requirements.
- It will redirect you to Sitejet Builder as seen below.
Now, let’s work with a sitejet builder!
-
Change the logo.
Step 1: Click on “Elements” on the left side panel.
Step 2: Upload from files or drag and drop your “Logo” element to the desired location on your site.
Step 4: We have added an image here.
Step 5: You can also add “Headline” if you don’t have an image.
Step 6: Double-click the new heading or select the element and press [Enter] to edit the text.
-
Edit font and color scheme.
Now, let’s change the font or color scheme.
Step 1: First, we will change the font
Step 2: To change the font, click on the “More” tab from the top-right side corner. Click on “Font”.
Step 3: Here we will change the text font for “The How-To Podcast”. If you wish to change the H1 to uppercase, then go to Design and change the font size, line height, and font-weight globally.
Step 4: Then, scroll down to the “Headlines” section. And open the drop-down. This will open something as shown below
Step 5: Here, you need to navigate to “Text align” and select the “TT” symbol which indicates Uppercase
Step 6: This will automatically change your selected text to uppercase as seen for the text: “THE HOW-TO PODCAST”.
-
Changing color scheme.
Step 1: To change the color, you need to again go to the “Design” tab from the top menu. On clicking there, you will see various options as seen in the image on the right side panel. From here, click on “Colors”.
Step 2: Select the area in which you wish to change the color. Select the text. Then click on the Color which you wish to change. Here we have to change the font color of the selected text to Red. After selecting the color, click on the “Apply button”.
-
Edit the header
Step 1: Let’s adjust the menu’s background. Double-click on the menu bar and you will see the “Menu bar” panel on the left side of the screen. Click on Background. Click on Color/ Gradient. Choose the gradient color of your choice.
Step 2: Click on the box beside the “Color” select the color and click on the Apply button.
-
Navigation
Step 1: We will link our logo to the ‘Home’ page. For this, first, you need to double-click on your logo. In our case, the logo is the text: “Podcaster”. Once you double-click on the text, you will see a panel on the left side of the page.
Step 2: From the left side panel, click on the “Link” tab. Once you click on the “Link” tab, you will see below options.
Step 3: Here you need to select the “Page” to which you want to navigate the page. In “Link Target” you can choose whether you wish to redirect the page to a new tab or the same tab. In our case, we have directed it to the new tab as seen in the image.
-
Add a gallery
Step 1: You can choose from various presets to create different designs and arrangements for galleries. To add a gallery, simply click on the “Images” category located in the left sidebar.
Step 2: Now, choose “Gallery” and drag it to your desired location on the website. If you drag it normally, the preset will neatly align between parent containers.
Step 3: For more flexibility, hold down [Ctrl] while dragging the preset, allowing you to place it anywhere within the containers. Pay attention to the orange line indicating where the preset will be inserted.
Step 4: Managing or updating images follows the same process as in the header. Begin by double-clicking on one of the images to select the corresponding gallery element.
Step 5: This element stands alone, operating independently and subordinate to the gallery preset. The gallery element oversees the content – the images to be displayed – while the gallery preset determines the appearance.
Step 6: You can now add, modify, or remove images in the settings on the left. Deleting all images simultaneously is possible below the selection.
Step 7: If you wish to delete an individual thumbnail, click on the X-icon in the upper right corner. Click on the image icon below to replace an image.
Step 8: For adding new images, use the upper area marked with a dashed border.
Step 9: Accessing these options is simple: hover over the preset label and click the palette icon, or click on the container with the color palette icon in the breadcrumbs below.
Step 10: Within this section, you have the flexibility to choose different variants if you favor an alternative gallery style.
Step 11: This is where you control the gallery layout, allowing you to select the number of columns, adjust the gap between images, and choose your preferred alignment.
Step 12: Explore additional settings such as the hover style or how images are displayed within the gallery.
-
Edit contact section
Step 1: Within the Footer Fulla element settings, various design options await your customization
Step 2: you can upload your map markers as images, specifying their sizes. Opt for the “Info” checkbox to seamlessly display supplementary information directly on the map marker
-
Mastering Your Sitejet Pages
Congratulations on conquering your “Home” page! Now, let’s explore some handy features in page management:
Step 1: Change Your Title & Description
In the page manager, personalize each page with unique meta titles and descriptions. Search results and browser tabs will display these, so make them informative and catchy!’
Step 2: Rename with Ease
Simply click the “Name” field and type your desired name to rename any page. The URL updates automatically!
Step 3: Explore Subpages
Click on a page name to dive into its subpages. Think of them as chapters within your website’s story!
Step 4: Legal Stuff Made Easy
Look for the “Legal Notice” (or similar) subpage. Don’t worry, Sitejet already created it with essential information. Review and add your personal touch if needed.
Conclusion
High five! Your first website is created!
Building from a template and adding your personal touch, you’ve brought your online vision to life. Happy site building.
