Choosing the right page builder to work with is crucial to the long-term success of your website. There are hundreds of different page builders and SiteOrigin and Elementor are the most popular of all of them and they are available on WordPress.org.
You must take your time to review and properly decide which page builder you want to use because this will affect your website through all of its existence. We are going to review the details about SiteOrigin and Elementor and help you make your decision based on the important information that we share.
SiteOrigin vs Elementor – What Are the Features?
Both SiteOrigin and Elementor offer free versions that you can optionally extend with some additional premium functionalities.
Elementor only offers front-end visual editor, while SiteOrigin has a back-end editor as well. The widgets that Elementor goes with are 28, while the SiteOrigin’s are 26. Both of them offer responsive previews, Custom CSS, Free Templates (38+ for Elementor, and 26+ for SiteOrigin).
How To Create Pages & Designs With Elementor?
Elementor is a front-end visual page builder that allows you to simply edit your designs while you can preview the final results without the need for publishing. Its elements are positioned on the left side of your screen in the Elementor sidebar.
All of these elements are called Widgets and can be dragged and dropped into the right sections of your page and then edited.
The right screen represents your page and its design. This is where you build your layout and you see the final results in the live preview.
On the bottom left part of your screen, you can see some additional settings for your page.
How To Add Widgets To Elementor
If you want to add an element or a widget straight to your page, simply drag the element from the left section and drop it into the right side of your screen. Then, by clicking on the specified element you can edit its content and options.
Differently from SiteOrigin, Elementor offers inline editing, which allows you to click on the live preview and start typing. This is a very handy feature and is loved by most Elementor users because it is much faster and saves time.
How To Create Pages & Designs With SiteOrigin?
SiteOrigin Page Builder offers both back-end and front end editors, and you can choose which one you like more.
If you use the back-end editor, you build your page with the help of different boxes, that you can drag and drop where it is needed.
You can also click on them to edit their settings.
SiteOrigin offers a front-end editor that is quite different than Elementors. However, you will still need to drag and drop different boxes from side to side to be able to build your website, and you will see a real-time preview of your website. An important thing to note is that you cannot drag and drop elements while you are in a preview mode.
Elementor’s Layout and Design Options
The two basic elements that you use in Elementor are the sections and the columns. The sections represent the element on the lowest level, and columns go inside them.
You can adjust widths of your columns by drag and drop. On top of that, Elementor also grants you access to additional options that allow you to do different things including:
Siteorigin’s Layout and Design Options
Similar to Elementor, SiteOrigin also gives you access to two elements that you can use to build your pages. These elements are the Rows and the Columns. The rows are the same as Elementor’s sections, and each of the rows can have one or more columns inside.
SiteOrigin Page Builder lets you adjust the widths of your elements by drag and drop.
However, differently from Elementor, SiteOrigin’s page builder does not give you options for customization of individual columns, but you can still customize your rows and edit their margins/paddings, backgrounds, and spacings.
Elementor lets you use all of its core widgets in your designs and it also offers 28 more widgets, including testimonials, tabs, galleries, carousels, and many others.
SiteOrigins widgets count is 26, and they also allow you to create different carousels, buttons, texts, layouts, post loops, and others.
Elementor Styling Widgets
When it comes to styling, both Elementor and SiteOrigin allow their users to create and style beautiful elements and pages.
Elementor gives you three different tabs that you can use to edit your elements or widgets. These three tabs are the content tab, the style tab, and the advanced tab.
To use them simply click on any element and you can explore all of their features. You can pretty much edit everything you want when it comes to stylings, content, and positioning.
SiteOrigin Styling Widgets
SiteOrigin works a bit differently. With it, you get two areas that you can use to customize each of your widgets.
The first screen is your main editor, where you get the options that you use to modify the core functionality of your widgets.
The second screen, positioned in the right sidebar is where you can get more advanced stylings and customizations including margins, paddings, background colors, adding some custom CSS classes if needed, and even more.
Both Elementor and SiteOrigin lets you access a preview of the design of your pages.
With Elementor you simply click on the mini icon for Desktop, Tablet, or Mobile in the bottom left corner of your sidebar and you will be able to see how your specified page looks like on that device.
From the advanced tab, you can choose even more advanced options and also hide a specified element when it is open on certain devices.
With SiteOrigin you can very quickly access different previews for your page.
SiteOrigin also lets you write custom CSS for mobile styles in case you need to hide something or do some additional adjustments to your visual part of the page.
Custom CSS Functionalities
If you are a beginner you will probably not know how to add additional CSS code to your website, but in case you know what you are doing and you need to make some visual changes, the custom CSS is what you should use. Have in mind, that the free version of Elementor lets you add custom CSS for sections, columns, and widgets.
SiteOrigin is a bit superior when it comes to custom CSS because it lets you add CSS directly into your rows and widgets and mobile styles.
You can get pretty similar functionality of Elementor, but it will require the premium version.
Templates help you speed the process of building your website. They enable you to import pre-built designs that you can edit and use for your own pages.
Elementor includes a large built-in library of templates and they are two types. There are Pages and Blocks. The pages include the entire design for the pages and the blocks represent designs for different page sections. For example a block for your contact details or contact form.
A great thing about that is that you can save and use your templates later.
SiteOrigin Page Builder includes 26 different pre-built templates, that you can import with a few clicks. To be honest, SiteOrigin’s templates look a little bit more simple than Elementor’s but this does not mean that they are bad. You can still edit them very easily and achieve the desired design.
Last but not least, we should cover the prices of both Elementor and SiteOrigin page builders.
Elementor’s pro version costs 49$, while the SiteOrigin’s Premium price is 29$, which is a bit less expensive.
Elementor Premium Versions
If you decide to go for the premium versions of the builders, you will get tons of new and professional features applied to your website.
Elementor Pro lets go even further in the creation process of your website. You can use it to build additional custom Headers, footers, single post templates, blog post templates, and custom post type templates that you can later use anywhere you want.
The Pro version grants access to over 30+ more widgets, which include WooCommerce widgets that can help you display posts and custom post types, as well as over 100 pre-built templates.
The premium version of Elementor also adds Global Widgets that are a very helpful feature that you can use to customize all elements of a certain type at once. This is very handy and can save you much time and effort.
The Embed anywhere feature gives users the ability to use shortcodes and widgets to embed templates in sidebars, footers, or anywhere else.
SiteOrigin Premium Version
SiteOrigin’s premium version includes modules that can be enabled or disabled when needed.
Custom Post Type Builder
It includes Custom Post Type builder, that lets you create different custom post types and configure their basic settings and display them on the front-end.
The premium version includes additional widgets, that can enhance the functionality of your website. These widgets include row and widget animation options, social widgets, ajax comments, accordions, contact form stylings, call to actions, parallax effects, testimonials, and many more.
Pricing: Elementor Pro vs SiteOrigin Premium
The Pro version of Elementor offers 3 different plans.
49$ for 1 website
99$ for 3 websites
199$ for unlimited websites.
30-day money-back guarantee.
Elementor Pro does not offer lifetime licenses, but you get a 50% discount on renewal.
SiteOrigin’s Premium Plans:
29$ for 1 website
49$ for 5 websites
99$ for unlimited websites
With SiteOrigin’s premium plans you don’t get a 50% discount on renewal and there is no lifetime license as well.
SiteOrigin or Elementor – Which One To Choose?
It all depends on your specific website and your personal preferences. We highly recommend that you check the documentation and some videos about both of the builders before making your choice.
Both of them are great and you will not go wrong with any of them.
How Do I Access Elementor In WordPress
Follow the steps below to create a website:
What do you need before starting a website.
Before starting site setup process, we strongly advise that you complete the following preparation steps:
- Have a clear idea for the site's domain name. For example, good tip is to make it short and with focused keywords.
- Make sure to have an active credit or debit card so that you can make online purchases with it.
- Make sure you prepare a computer that has stable internet connection.
Step 1: Purchase a domain name and web hosting type.
Step 2: Install WordPress and an appropriate visual theme for your website.
FAQ’s How to Create a Website
What is a Website?
A website is mainly made from web pages that contain related content all classified by a unique domain name (A domain name is your website name. It is the address where Internet users can access your website). On a website, you can post contrasting content connected with the sphere of your website.
There are different types of websites, which you can find on the networking space like:
Interesting Fact: The first website uploaded on the internet went live on August 6, 1991.
How Much Does It Cost to Create a Website?
To find out how much it will cost to create a website, firstly you need to have a clear idea about the type of your website. What it is going to be: e-commerce, blog, educational, etc.
After choosing the best hosting provider, it's time for the right theme for your site, and the plugins, then you can estimate how much it will cost to start your website.
Have in mind that if there are FREE web hosting and free WordPress themes available out there.
Do I Need Any Programing Knowledge for Creating a Website?
Probably yes. Creating a website is not an easy task, and it is good to have some programming knowledge if you are considering creating one, BUT there are also alternatives that you can use for creating your website without having any programming knowledge.
One very popular alternative that you can use is to install a responsive multi-purpose WordPress theme like Avada and set drag & drop page buider, which will help you to customize your website at ease.
Can I Create a Website for FREE?
Once upon a time, it was said that everything is possible, so creating a website for free is possible, although it's hard to achieve without any expense.
To start your free website creation you need to find a free WordPress theme like Astra and to install it on free hosting service like OOOWebHost. After you have already hosted your website on the internet you need to install free plugins, which is the most difficult part. It is problematic to find reliable free plugins. There are some free available like Yoast SEO that can do pretty nice work, but most reliable plugins like WPRocket, which are required for the success of your website are not free.
How Long Does It Take to Create a Website?
This is a question that concerns everyone who is considering making a website. The truth is that there is no specific answer to this question and everything depends on the height of your goal. If you are thinking off creating a small blog you can make your website in a day. But if you are considering making a big online shop or something similar you will need to spend a lot more time.
Which Are the Best Platforms for Creating a Website?
The easiest way to create a website is to use a CMS(Content Management System) website builder platforms like WordPress or Joomla. The CMS platforms can help you create and customize your website without having much coding knowledge.
The Most Popular CMS Platforms:
What Is HTML? - Quick Tutorial.
HTML is the standard markup language used in the web pages, with which you can create your own website. Using the base of the HTML and CSS(Cascading Style Sheets - another web language with which you can put style over the HTML fundamental) languages can be very helpful for making little customization changes to your website.
HTML Code Examle
HTML Element Example
What Is Web Hosting
A web hosting service is a type of Internet hosting service that allows individuals and organizations to upload their websites on the internet. There are different types of hosting services like:
- Shared Hosting (Server shared between many users)
- Dedicated Hosting (A dedicated server only for you)
- VPS Hosting (Virtual Private Server)
- Cloud Hosting (Hosting services that are provided to customers via multiple connected servers that comprise a cloud)