SiteOrigin vs Elementor

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

Start Your Website NOW! Get Elementor for FREE or Premium only for $49/year.

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:

  • Adjusting paddings or margins for columns and sections
  • Editing backgrounds
  • Choosing column gaps
  • Expand to full-width that works with sections
  • 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.

    SiteOrigin Elementor

    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 Widgets

    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

    SiteOrigins widgets count is 26, and they also allow you to create different carousels, buttons, texts, layouts, post loops, and others.

    SiteOrigin Elementor

    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.

    SiteOrigin Elementor

    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.

    SiteOrigin Elementor

    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.

    Responsive Design

    Both Elementor and SiteOrigin lets you access a preview of the design of your pages.

    SiteOrigin Elementor

    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.

    SiteOrigin Elementor

    With SiteOrigin you can very quickly access different previews for your page.

    SiteOrigin Elementor

    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.

    SiteOrigin Elementor

    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.

    Premium Pricing

    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.

    More Widgets

    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.

    Start Your Website NOW! Get Elementor for FREE or Premium only for $49/year.

    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.

    Also Read:
    How Do I Access Elementor In WordPress

    How Do I Use WordPress Elementor Editor

    How To Use Elementor Templates in WordPress

    What Is Wp Elementor and What It Is Used for?

    How To Use Elementor Plugin in WordPress

    Start Your Website NOW! Get SiteGround Managed WordPress Web Hosting. Only for 5.99 €/mo!

    Follow the steps below to create a website:

    1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

    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.

    1. Open your web browser and type "" as shown below. Then click "Web Hosting":

    2. Choose the hosting plan you prefer and click "GET PLAN".

    3. Type in the website name you wish and click "Proceed".

    4. Type in your account information and client information in the appropriate fields.

    5. Enter your purchase information and payment details.

    6. Review your total, tick the "I confirm" box and then click on "Pay Now" button.

    If you have done it successfully, this is what you should see:

    1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

    Step 2: Install WordPress and an appropriate visual theme for your website.

    1. Log in to your account and click the "Websites" tab. Then click the "COMPLETE" button as shown below.

    2. Select "Start a New Website" and then select "Wordpress". For an online store, select "WooCommerce"

    3. Type your new separate WordPress login e-mail and password and click "CONTINUE"

    4. Click on "FINISH" if you don't want to add any offered features.

    5. Type "" in your browser and log-in using the WordPress e-mail and password you created earlier.

    6. On the welcome screen, click on "START NOW".

    7. Choose a theme that suits your site type and your preferences and requirements and click "SELECT" as shown.

    8. To install the theme, click "CONFIRM" as shown.

    9. Add any free optional extras to your WordPress and click "COMPLETE" as shown.

    10. When you see the "Your site is ready" screen, click on "GO TO DASHBOARD".

    11. Congratulations on your new site! This is your WordPress dashboard! You can use it to customize your site and change media in it. If you want to change the theme again, click "Appearance->Themes" and click the "Add New" button, as shown.

    You can preview and switch to another theme by clickig "Preview" and "Install" buttons respectively.

    In this FAQ’s we are going to introduce you to the most common and frequently asked questions about websites and their creation. Let’s get started!

    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 that, you need to choose:
    The Best Hosting Provider.
    The Most Suitable Wordpress Theme.

    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:

    Jimbo, etc.

    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

    The <!DOCTYPE html> declaration defines that this document is an HTML5 document
    The <html> element is the root element of an HTML page
    The <head> element contains meta information about the HTML page
    The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
    The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
    The <h1> element defines a large heading
    The <p> element defines a paragraph
    The <br> element means a line passing.

    HTML Element Example

    <h1> This is Heading </h1>
    </br> - Line Passing
    <p> This is Paragraph </p>

    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)


    Leave a Comment

    Your email address will not be published. Required fields are marked *

    Time limit is exhausted. Please reload CAPTCHA.