Welcome To Sitelium
Welcome to Sitelium is a content management system or CMS for short that allows you to create and build professional modern-looking websites. In no time today, there are dozens of online website creation platforms. and Sitelium offers you both a free and pro version to get you making websites as soon as now, with no coding and no experience.
Free vs PRO
In this lesson, we're going to take a look at some of the key differences between Sitelium Free and Sitelium PRO. You get a lot in the Free version, unlimited websites on a subdomain CDN and SSL certificates included, however, the PRO version is the way to go if want all the goodies unlocked: from custom fonts uploads and additional PRO elements to marketing integrations and global popups with triggers and conditions.
Dashboard Overview
In this lesson, we're going to take a look at the Sitelium dashboard. A bird's eye view of all the features and functionalities in the Sitelium dashboard.
Workspace
In this lesson, we're going to take a look at workspaces in Sitelium. This is a very important functionality when you are working with clients. Workspaces act like folders that let you separate clients from one another.
Team Members & Roles
In this lesson, we're going to take a look at team members & roles in Sitelium. This functionality lets you work in a team, invite clients and give everyone a role that has certain limitations built in.
Leads
In this video, we learn how to manage leads in Sitelium. The form builder in Sitelium allows for easy lead generation and collection.
Builder Overview
In this lesson, we're going to take a bird's eye view of the Sitelium builder in Sitelium CMS. This is the bread and butter of Sitelium and where the magic of creating your website fast & easily happens.
How You Build With Sitelium
In this lesson, we're going to take a look at all the building block elements that you use to create your first pages with Sitelium. We're going to look at Rows, Columns, the box model, and all the key elements to start building pages.
Preview, Publish & Update
In this lesson, we're going to take a look at how we can preview, publish and update our website and our page design. Important tools that you will be using a lot in your Sitelium journey.
Blocks & Layouts
In this lesson, we're going to take a look at getting started with blocks. Sitelium blocks are the key component to creating your layouts and pages in Sitelium.
Links
In this lesson, we're going to look at links in Sitelium. Links are the glue that holds the internet together, very important for your website and we'll show you the types of links we have in Sitelium and also how to use them.
Margins & Padding
In this lesson, we're going to look at margins and padding in Sitelium. Margins and padding are the tools that allow you to create a structure for your webpage. It's essential you understand how they work in order to design a professional-looking website.
Responsive Websites
In this lesson, we look at how to ensure your website is responsive. More than 50% of users nowadays interact with websites from their mobile devices, and it's important that you design your website in such a way that it'll look good not only on a desktop monitor but also on mobile and tablet devices.
Global Blocks & Display Conditions
The global blocks feature allows you to repeat blocks across your website that are linked. Change the content in one global block, and the linked blocks will automatically update to reflect the changes. Combine this with display conditions and take full control over the content on your web pages.
Membership Blocks
In this video, we learn how to activate blocks as membership blocks in Sitelium.
Colors & Global Styling
In this lesson, we're going to touch on colors & global styling in Sitelium. We'll look at the controls you have on colors and how you can make fast and efficient changes of colors across your website by using the built-in global colors functionality.
Typography & Global Styling
In this lesson, we're going to touch on fonts & global styling in Sitelium. We'll cover the quickest and easiest way to change typography in Sitelium, how to work with global styling when it comes to fonts, and how to be efficient and apply font changes across your website in seconds.
How To Add Google Fonts
In Sitelium you can add and use Google Fonts (over 950 fonts to choose from). The Google fonts import is available in Sitelium Free. Here is how to do it:
Adding a Google Font
Step 1. From any text element in the page, click on Add New Font in the options toolbar
Step 2. Select the Google Fonts option
Step 3. Input the name of the Google Font you want to add. You can browse the Google Fonts library here.
Step 4. Click Continue and you are done.
Step 5. The font will appear at the top of your fonts list on any text element.
Keep in mind that you can delete any font from the Fonts Tab after you press the Add New Font button.
How To Upload Your Custom Fonts
You can use your own custom fonts in Sitelium by uploading it in the builder. This functionality is available only in the PRO paid plans.
Uploading a Custom Font
Step 1. From any text element in the page, click on Add New Font in the options toolbar
Step 2. Select the Upload option. If the Upload option is not available, this means you need to Upgrade to a PRO paid account in order to use it.
Step 3. Give your Fonts a name. Can be anything, but usually the font name you'll upload.
Step 4. Add your first variation and upload your font. If you have a font family that has 3 variations: Light, Normal and Bold, you can upload them one by one.
Keep in mind that you don't have to upload all the files for the font, Usually and most common is .ttf and will do the job.
If your file has another extension like .otf, you can easily convert it to a .ttf online for free: https://convertio.co/otf-ttf/
Step 5. Once your 1st variation was added you can add another variation or Continue to install the font in Sitelium.
Keep in mind that for each variation (Light, Normal, Bold, etc) you'll need to repeat Step 4 and upload each font.
Step 6. Press Continue and you are done.
Step 7. The font will appear at the top of your fonts list on any text element.
Keep in mind that you can delete any font from the Fonts Tab after you press the Add New Font button.
Custom Styling & CSS
In this video learn how to add custom styling and CSS to your web pages in Sitelium.
Rows & Columns
In this lesson, we're going to take a look at Columns & Rows in Sitelium. These elements will help with building the structure of your pages and layouts.
Builder Elements
In this lesson, we're going to take a look at the elements panel in Sitelium. The elements are the bread and butter of your page creation process. You'll use them to create structure, and add images, buttons, text, and more on your pages.
Container Elements
In this lesson, we're going to take a look at container elements in Sitelium. Container elements are very special, smart elements that don't have a predefined content structure and they can contain other design elements inside them.
User Accounts
In this lesson, we look at how to create and manage user accounts in Sitelium.
Custom Domain (A Record Redirect)
Important: We don't sell custom domains. If you don't have a custom domain, buy one from any domain registrar out there. There are lots of domain registrars, you can find them by googling "buy a domain name". Please note that IDN domains (domains that contain special characters) are not yet supported in Sitelium.
This video shows you how to link/connect a custom domain with Sitelium and your domain registrar.
Or follow belew steps to link/connect your custom domain with your Sitelium project.
Step 1. Click the Publish link on your project
Step 2. Select Custom Domain in the popup
Step 3. Enter your custom domain name. Include the www. as well. Please note that IDN domains (domains that contain special characters) are not yet supported in Sitelium.
We'll use www.mydomain.com as an example.
Step 4. Click the Submit button.
After going through these first steps you need to operate some changes where you have registered your domain in order to create a CNAME Record and A Record redirects that points to your Sitelium project.
Step 5. Create a CNAME Redirect.
This is done outside Sitelium, where you've purchase the domain.
This is very simple, all companies that sell domains have these settings, you'll usually find them under NS/DNS Records.
Here is an example on how these options might look like on your end:
- Type needs to be CNAME
- Host (might be Alias) needs to be www
- Points to (might be Canonical Name or Redirect) needs to be your unique project name from Sitelium (in our example mysite.sitelium.site, yours will be different).
- Leave TTL with the default value
- IMPORTANT: you can't have two www CNAME redirects. If you already have one, replace that, instead of adding a second one.
Step 6. Creating an A Record Redirect
In the same DNS dashboard from Step 5.
- Type needs to be A
- Host (might be Alias) needs to be @
- Points to (might be Canonical Name or Redirect) needs to be 34.237.47.210
- Leave TTL with the default value
- IMPORTANT: you can't have two @ A redirects. If you already have one, replace that, instead of adding a second one.
Important: It takes up to 48 hours for these changes to propagate across the internet.
Keep in mind 1: This publishing option comes with free SSL from us. Takes up to 24 hours to be installed.
Keep in mind 2: If you've waited 48 hours and your Sitelium custom domain publishing screens show Not found on either records like this:
get in touch with the company you've purchased the domain from and tell them they need to help you connect custom DNS on your domain because you've made the changes and something must not work as it should on their side.
Custom Subdomain (CNAME Redirect)
Important: We don't sell custom domains. If you don't have a custom domain, buy one from any domain registrar out there.
Use this method when you want to link a sub domain with your Sitelium project. For example, if you want to create a landing page on your custom domain (landing.mydomain.com) but keep your current website and main domain (mydomain.com) where it is.
Follow these steps to link your custom sub domain with your Sitelium project.
Step 1. Click the Publish link on your project
Step 2. Select Custom Domain in the popup
Step 3. Enter your custom sub domain name. As an example, we've used the landing sub domain for mydomain main domain.
Important: remove any http:// or https:// from your entry.
Step 4. Click the Submit button.
After going through these first steps you need operate some changes where you have registered your domain in order to create a new CNAME Record that points to your Sitelium project.
Step 5. Create a CNAME Redirect.
This is very simple, all companies that sell domains have these settings, you'll usually find them under NS/DNS Records.
Here is an example on how these options might look like on your end:
- Type needs to be CNAME
- Host (might be Alias) needs to be the name of your sub domain, in our example landing, replace that with your own
- Points to (might be Canonical Name or Redirect) needs to be your unique project name from Sitelium (in our case mysite.sitelium.site, yours will be different).
- Leave TTL with the default value
- Important: It takes up to 48 hours for these changes to propagate across the internet.
- Keep in mind: This publishing option comes with free SSL from us. Takes up to 24 hours to be installed.
Sitelium Subdomain
Follow these steps to publish your project on a sitelium.site subdomain.
Important: You can use this publishing option for Free and your project will be securely hosted by us on our servers.
Step 1. Click the Publish link on your project
Step 2. Select Subdomain in the popup
Step 3. Choose a custom subdomain
Step 4. Done, access your project in the browser
Keep in mind: This publishing option comes with free SSL from us. Takes up to 24 hours to be installed.
Projects
In this lesson, we're going to learn all about the type of projects you can currently create in Sitelium. From multi-page websites and landing pages to external popups, alert bars, and web stories.
Publishing Options
In this lesson, we're going to take a look at publishing options in Sitelium. From custom domain & subdomain, Sitelium has a publishing option for every need.
Popup Builder
In this video, we focus on the popup builder within Sitelium. Create amazing, lead-driven popups with the Sitelium Builder.
Global Popups & Triggers
In this video, we will look at global popups and triggers. Automatic triggers and conditions give you control over global popups to actively engage your visitors.
How To Embed An External Popup On Your Website
The External Popup project will let you create a popup or alert bar to use on external websites. You create and edit the popup in Sitelium and embed it on your website no matter how your website was built.
Step 1. Add a new External Popup project
Step 2. Create and edit your popup
Step 3. Publish your Popup
Step 4. Include the Embed code in your <footer> tag
IMPORTANT: you need to have access to your <footer> tag and include the embed code there. Most of the scripts use the <header> tag, but our popup embed code needs to be pasted in the <footer> tag to work.
What Aare Sitelium Web Stories
Sitelium Stories are mobile visual narratives that follow a different content consumption experience. This visual format lets you explore content by sliding from one piece of content to the next.
No matter if you are a content creator, a marketer, or selling products web stories can help you either creatively present the news, create a mobile landing page (with a natural funnel) or appealingly showcase your products.
A couple of ideas on how Sitelium Web Stories can help marketers, content creators, or shop owners:
Marketers
– Present offers and promotions: engagingly presenting a promo will grab potential customers’ attention, generate more leads and increase conversion.
– Mobile landing pages: web stories are perfect for landing pages because they have the perfect natural funnel interaction from slide to slide. That lets you present and structure the information very deliberately, thus increasing leads and ultimately conversion.
Content Creators
– Posts as short web stories: deliver the news (or an excerpt) in a quick, easy-to-digest web story.
– Content previews: use web stories to capture interest for your larger-sized content or blog post. Bring your users over via a call to action button once they are interested to read the whole story 🙂
– How-to guides: web stories work great for how-to guides where you can present each step of the process in a separate slide in the story.
– Lists or Tops: anything that works great in lists or tops, will be a great fit for web stories.
Shop Owners
– Product previews/showcase: influence buying decisions with web stories by creating interactive, virtual, and clickable product showcases.
– Client follow-up: use the contact form to ask for testimonials or do follow-ups with your clients in a creative way via a nice web story.
How To Create A New Web Story In Sitelium
Stories are a great way to engage with your visitors, mobile-focused. In this video, we show you how to create and set up Instagram-style stories right within Sitelium.
How To Duplicate A Website In Sitelium
Here is how to duplicate a website in Sitelium:
Step 1. Login into your Sitelium Dashboard from here.
Step 2. Locate your Workspace and Website you want to duplicate
Step 3. Press the Duplicate link in the contextual menu of the website
Keep in mind
Important things to keep in mind regarding website duplication in Sitelium:
- Works with all projects. We say website because the majority of our customers and users create websites in Sitelium. But the duplication works across all our projects, websites, stories and popups.
Introduction to Blogging
In this video, we will learn how to prepare your site for blogging and create posts.
Dynamic Elements
Tied in with blogging and creating new assets, is dynamic content. In this video, we look at the elements that come with the Sitelium builder and built-in dynamic functionality.
Creating Dynamic Templates
Elevate your blogging and dynamic content by creating dynamic templates you can use. In this video, we'll show you how to create dynamic templates in Sitelium.
Advanced Custom Fields & Assets
In this video, we will look at how you can create your own assets with advanced custom fields in Sitelium. With this feature, you can create all kinds of custom post types.
Users & Roles
In this video, we look at how to create users and assign roles in Sitelium. Creating users allows you to add other contributors to your website with specific rights as to what they can edit.
How to enable the cloning link
The Cloning Link option can be found in any website in Sitelium in the Project Settings under the new General Tab we've added with this update.
After you turn on the Project Cloning option, you'll get a cloning link that comes with a Copy and Generate New link buttons.
Copy the link and share it. Note that whoever clicks this link, will get a one to one replica of your website in their Sitelium account (together with all the content, images, copy, blog posts, custom assets, etc).
Use the Generate New link button to generate a new clone link. Keep in mind that once you generated a new clone link the previous link will not work anymore.
Key benefits of website cloning in Sitelium
The Clone Website feature in Sitelium, offers numerous key benefits specifically tailored to web agencies & web professionals. Here's how this feature can significantly enhance your workflow and overall business:
- Time Efficiency - you can share website prototypes or finished projects with clients. You can instantly provide a copy of the website to clients, saving valuable time and effort.
- Client Showcase - you often need to showcase your portfolio to potential clients. With the "Clone Website with a link" feature, you can create sample websites, enable the clone link, and let your potential clients experience the website firsthand. This interactive approach can impress clients and increase the likelihood of landing new projects.
- Client Training & Support - you can use the clone link to provide training sessions to clients on how to use their newly built websites effectively. It's an excellent way to offer ongoing support and ensure clients are comfortable with managing their websites.
- Enhanced Reusability - certain websites may be used across multiple projects. The clone link feature allows you to duplicate these websites easily, reducing the need to recreate them partially or from scratch.
- Peace of mind - cloning can offer a secure way to share website copies, ensuring that the original website's data remains intact. Clients can have peace of mind knowing that their primary website won't be affected by any experiments or changes they make to the cloned version.
- Competitive Edge - adopting innovative features like "Clone a Website via a Link" can set your agency apart from competitors. This modern and user-friendly approach to collaboration and website sharing can impress clients and attract more business.
Cloning Free vs PRO websites
There are no limitations on who can use the Website Cloning feature. If you have a Sitelium website you can enable cloning no matter if your account is Free or PRO.
The same goes for anyone that clicks a clone link. Of course you will need a Sitelium account in order to clone a Sitelium website. The only limitation appears when you are trying to clone a website that has PRO functionality (like header blocks, elements, etc) in a Free Sitelium account.
We'll still let you clone the website, but all the PRO functionality will be locked (see image below for an example). From here you either remove the PRO content or upgrade to Sitelium PRO to unlock it.
SEO
Get your website ready to be discovered in online search engines, like Google. The SEO features in Sitelium allow you to set SEO for both your site and individual web pages.
How To Block Search Indexing With 'Noindex'
You can prevent a Sitelium project from appearing in Google Search by including a noindex meta tag in the header HTML code. When Googlebot next crawls that page and sees the tag or header, Googlebot will drop that page entirely from Google Search results, regardless of whether other sites link to it.
Implementing noindex
To prevent most search engine web crawlers from indexing your Sitelium project, place the following meta tag into the <head> section of your project using our Code Injection feature:
<meta name="robots" content="noindex">
To prevent only Google web crawlers from indexing a page:
<meta name="googlebot" content="noindex"> You should be aware that some search engine web crawlers might interpret the noindex directive differently. As a result, it is possible that your page might still appear in results from other search engines.
Social Sharing
Share your site and pages on social media platforms, like Facebook. In this video, we'll show you how to set up your site for social sharing.
Code Injection & 3rd Party Embed
In this video, we will show you how to inject code and set up 3rd party embeds within Sitelium.
How To Change The Language HTML Attribute To A Different Language
The default language attribute (lang) is English (en). If you are creating a website using Sitelium in another language you might want to change the HTML language declaration to your preferred language. Here is how to do it:
You'll use our feature that Code Injection lets you inject scripts in the header (or footer) of your website.
Step 1. Copy the following code
<script>const html = document.querySelector("html");if (html) {html.setAttribute("lang", "es");
}</script> Where "es" is the language parameter. You'll need to change that to your preferred language. Find all the language tags in the IANA Language Subtag Registry.
Step 2. Paste the code in the Header section in our Code Inject feature.
Step 3. Press the Save Changes button.
Redirects
In this video, we'll learn how to set up redirects in Sitelium.
System Pages
Set your site to "coming soon", or "under maintenance" or prepare a "404 error" page. In this video learn how to set system pages in Sitelium.
Shortcuts
Shortcuts are a great way to speed up your workflow. In this video, we'll show you the most important shortcuts around Sitelium, and where to access the guide on shortcuts.
Webhooks
Add webhooks to your Sitelium website.
Sitemap XML
An XML sitemap is a roadmap of your website that leads Google to all your important pages. XML sitemaps can be good for SEO, as they allow Google to quickly find your essential website pages.
Sitelium creates the sitemap XML file for every project automatically and you can access your project's sitemap anytime by going to /sitemap.xml in your project.
For example, if you have a custom domain linked to your Sitelium project mydomain.com, you would access your sitemap xml on mydomain.com/sitemap.xml in your browser.
How to make Google find your sitemap
You don't have to do anything for Google to find your sitemap. We placed it exactly where it needs to be in order for Google to find it when it visits your website.
That being said, there is a way to make Google find your XML sitemap quicker. What you'll need to do is add it to your Google Search Console account.
After you create an account, you need to add a website property and also verify ownership before you can add your sitemap xml.
In the ‘Sitemaps’ section, you can add your sitemap XML URL /sitemap.xml
Free SSL Included
SSL stands for Secure Sockets Layer and is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browser remains private.
In other words, your users will connect to your website securely and encrypted and any data they enter is safely shared with your Sitelium website.
All projects hosted on our servers be it with linked Custom Domains or on a Sitelium Subdomain take advantage of free SSL.
We install SSL automatically, there is nothing you need to do to take advantage of the free SSL certificate.
Keep in mind: It takes up to 24 hours for the SSL to install and propagate until your users will see the secure connection when they access your project.
Contact Form & Integrations
In this video, we will learn how to create a form within Sitelium and insert integrations. The form builder is a native feature within Sitelium that is a crucial tool in lead generation.
reCAPTCHA
The reCAPTCHA integration will let you set up the free service from Google that helps protect websites from spam and abuse.
A “CAPTCHA” is basically a test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out. And with the invisible reCAPTCHA V3 we've implemented, your users don't even need to solve any tests, it happens automatically in the background.
Here is how you can set it up.
Step 1. Access the Integration Apps on the button of any contact form element in the Sitelium builder
Step 2. Go to the RECAPTCHA tab and select reCAPTCHA.
Step 3. Here is where you'll need to input your reCAPTCHA Site Key and Secret Key.
Step 4. Go to Google reCAPTCHA and login into your Admin console in the top right. You'll need a Gmail account to be able to add reCAPTCHA on your website.
Step 5. Register a new site by filling in the form
The Label can be anything, it is used for internal use.
Step 6. The type needs to be reCAPTCHA v3. This is a must, other options will not work.
Important: If you don't select the v3, the reCAPTCHA will not work.
Step 7. Input your domain without any protocol, path, port, or query. For example: if the link to your website is https://www.domain.com/ you'll put www.domain.com in the domain field (no https://, no /).
If your website is on a subdomain, you need to include the subdomain as well like in the image below.
Step 8. Your gmail email will be a default Owner, you can add more if you want.
Step 9. Accept the terms and click Submit
Step 10. Once you press the Submit button you'll be redirected to your keys.
Step 11. Go to Settings, scroll down and turn OFF (deselect) this option:
Important: If you don't do it, reCAPTCHA will not work on your Sitelium website.
Step 12. Copy/Paste the Keys into your Sitelium integration window, check the box and press Continue.
Important: If you don't do Step 11, the reCAPTCHA will not work.
Step 13. Done, you've added reCAPTCHA on your website.
Keep in mind that you only need to set reCAPTCHA once, and you'll activate it globally on your domain. No matter how many contact forms you add from this point on, all will have reCAPTCHA by default.
Once someone will submit your contact form on the front end, Google's reCAPTCHA will work in the background analysing and protecting you from spam and abuse.
The reCAPTCHA badge will appear on the right hand side, near the form as you scroll.
How to enable AI Text Integration for one of your websites
AI Text generation comes with all our Sitelium PRO plans.
Access the AI toolbar in any text element by clicking the AI icon.
Key Benefits of using AI Text
Let's learn about some of the benefits of using AI text generation in Sitelium:
- Unleash Creativity with Prompted Text Generation
Generate new text effortlessly by simply instructing the AI. Experiment with styles, prompts, and languages to create unique and impactful content. Whether it's crafting a promotional heading or experimenting with different languages, Sitelium PRO makes the process intuitive and exciting.
- Improve Your Content with AI-Powered Text Editing
Imagine crafting compelling content effortlessly – just select a sentence and instruct the AI to work its magic. Need brevity? Choose 'Shorten.' Want to simplify a paragraph? Opt for 'Simplify.' Take your copy from formal to friendly with a click. Sitelium adapts to your needs, making content creation a seamless and dynamic process.
- Multilingual Magic at Your Fingertips
Select from a range of supported languages or instruct the AI to generate content in your desired language. Whether it's extending a tagline or creating a headline in Afrikaans, Sitelium PRO empowers you to communicate effectively with your audience, no matter the language preference.
- Effortless Text Extension for Richer Content
Experience the ease of extending your text elements with just a click. Sitelium PRO's 'Extend' feature allows you to elongate your taglines or copy, providing ample room for creating detailed and engaging narratives.
Take AI Text Integration for a spin
Upgrade to Sitelium PRO now and unlock the magic of AI Text generation. Effortless content creation, dynamic editing tools, multilingual capabilities – it's all within reach. Your website deserves the best, and Sitelium PRO delivers nothing short of extraordinary. Embrace the future of content creation today!
Copyright © 2022 - 2024 Sitelium.com All Rights Reserved.
Created with Sitelium