Wix vs WordPress Builders: How I Created the Same Web Page in Both Tools

Wix vs WordPress builders

Or at least I tried…

 

Wix vs WordPress, place your bets!

 

True story: I wanted to play with the free versions of the Wix website builder and a WordPress builder and see the end results. I picked Colibri for the task because it lets users build everything in a single interface.

 

The hypothesis: creating the same portfolio page of a photography website (not intended to be pixel perfect).

 

Let’s see how things turned out in the Wix vs WordPress builders battle.

 

Template choosing – Colibri

This is how you can browse through Colibri’s templates:

choose WordPress theme

Not a hard one this one, only one photography template to play with.

choose Colibri WordPress template

Template choosing – Wix

Wix scores a point here, there are tons of templates to choose from.

I didn’t want to make my life hard, so I picked out a theme with a masonry grid, to resemble the one from the Colibri template.

pick wix template

Wix vs WordPress builders (Colibri): the setup

For Colibri, the left-hand side menu is the “mother of all features”.

 

Its structure goes as following:

  • Header
  • Content
  • Footer
  • General Settings – here you can state the global color scheme and typography for the site, so that you don’t need to take every element one by one and alter it, just the ones that need a different styling.
  • Menu
  • Widgets
  • Security
  • Performance

 

When you select a specific website element, in the right, the left-hand side menu will have the following items: Content, Style, and Advanced. Under advanced you have two states: normal and hover.

 

The submenu for “Advanced” is the same for every component. Once you get the hang of this menu, you’ll master many WordPress builders.

 

The left-hand size Wix menu serves a different purpose, mostly for adding new components.

Screen Recording 2020-08-06 at 06.38.12.57 PM.gif

What’s nice in Wix is the fact that you can edit each component while clicking on it. In the Colibri WordPress builder, you always need to work with the menu on the left-hand side.

 

On the other hand, I couldn’t find how I can alter in Wix the global color and typography schemes. 

 

Typography – Colibri

I’m naming my website LemonBlues. This is a combo stuck in my mind for years…I feel that it could be the name for a jazz band, don’t you think? But it would also do the trick for a photography website.

 

The builder allows me to play with tons of fonts (more than the ones available in Wix), colors, animations, spacing…

copy style in WordPress
Copy style, that’s a cool one! This copy-paste applies to columns as well, and any other components that need to be styled. I dug a bit and found the same feature in Wix.

 

Now, the thing I really really love is how Colibri deals with font sizes, we’ve got px, em, and rem. If you’re not familiar with these notions, here’s a good article on them.

 

Typography – Wix

For the brand name, I used the same font type, size, and color as for the Colibri built website.

text settings in Wix

This is a “nice to have”: Get Text Ideas.

get text ideas in Wix

typography in Wix

Wix has an extra touch here, with these very basic SEO settings.

SEO features in wixIn Colibri, for the SEO aspects, I totally recommend the Yoast SEO or Rank Math plugins. I think this is one of WordPress’ superpowers. These plugins can supercharge everything on a website. 

 

Layouts and grids – Colibri

In the builder, I could control the columns, rows, their width and height.

layout structure in WordPress

And the thing I really like is this “unlink” or “link” feature. 

 

When an element shows up as “linked” it means that all the elements that share the same style benefit from any change. Let’s say you want to change the opacity of a text box, and the text box appears in 5 places, it will change all 5 boxes! 

 

In my particular case, it spared me the trouble of changing 11 text boxes with their own opacity and font specs. 

linked styles

Layouts and grids – Wix

In Wix, you can drag components, pull their margins to the left, right, make them taller or shorter. Nice one!

drag Wix componentsIn both products, you can play with borders, opacity, size, animations.

 

What I couldn’t figure out is how to group certain elements. And that meant trouble for me when I wanted to make the web page responsive….

wix issues with grouping content

Dealing with images – Colibri

When you import images in Colibri you can provide the image with an Alt attribute (useful in SEO) and also gives you the possibility to crop the image.

 

If you want to alter the image in terms of border, spacing, effects, there’s always the left-hand side menu, the “advanced” section.

 

Under the style section there’s a feature that allows you to change the focus of the picture. I found this really helpful to center certain parts of the image. This also comes in handy on mobile devices.

choose focus in picture

Dealing with images – Wix

In Wix, you can import images from various sources (own computer, Google Drive, Dropbox, Facebook, and more).

drag and drop files in Wix

They also have a basic photo editor:

image enhancing in wix

In my particular project, the masonry grid got me in some trouble.

 

I found it difficult to arrange some pictures. After arranging them I wanted to make some images switch…From that moment on it was really difficult to go back to the previous state (without undo). The positioning of the images (as in first, second…) seems to be based on how high it positions itself on the website. This was tricky.

images positioning in Wix gallery
Wix gallery issues

Also, it wasn’t obvious how to change the dimensions of the images…I wanted to enlarge the landscape ones. 

 

Menu – Colibri

I wanted to align the menu for the Colibri built website with the one in Wix and get from

menu

to

website menu

but keep the “Hire me” button.

 

This was an easy task. All I had was to organize my pages.

working with wordpress menus

Menu: Wix

 

All crystal clear here, I just added a button with a “Hire me” text on it.

adding new menu items in Wix

The feature is similar in both tools.

 

Other components – Colibri

 

If the theme you’re working on does not quite fit your vision, you can always adapt and add new components or blocks.

 

The blocks are already-made sections that can be added (testimonials, galleries, headers, about us page…).

Screen Recording 2020-08-07 at 02.33.42.63 PM.gif

The components are tiny items such as headings, images, texts, videos, buttons, icons…you get the point. You just drag and drop the content and style them as you wish.

WordPress pre-designed blocks

A really cool feature is the one that allows you to save certain sections for later usage.

reusable blocks in WordPress builder
Other components – Wix

In Wix, you can also add various components.

 

They have something similar to the blocks in the WordPress builder, called “Strip”.

add a strip in wix

Contact forms – Colibri

At the end of the image gallery, I added a contact form so that people can get in touch.

I found the form inside the “Add component”.

working with forms in WordPress

In the advanced settings, I changed the styling of the fields and the “Send” button, and also adjusted the padding.

Contact forms – Wix

In Wix, I selected a contact form template and adjusted it to have the fields in a single column.

wix contact forms

No trouble here.

Mobile responsiveness – Colibri

That worked out well…

 

For tablets and iPads I only had to adjust the number of items in a row, refocus some images, and fix some padding issues for the contact form. Et voila!

Screen Recording 2020-08-07 at 03.26.10.11 PM.gif

For mobile devices, I switched to a one-column view.

Screen Recording 2020-08-07 at 03.42.15.81 PM.gif

 

 

 

Mobile responsiveness – Wix

Ok….this didn’t turn out very well.

 

The problem came from the fact that I couldn’t group some text boxes and their background images as I mentioned earlier.

Screen Recording 2020-08-07 at 03.29.53.49 PM.gif

https://share.getcloudapp.com/9ZuXWKlr

 

I felt like Sisif…and gave up. It was too much moving every text box, and adjusting each text (it needed smaller fonts).

 

Custom CSS – Colibri

For the picky ones: in Colibri, you can add your own CSS, assign classes to specific elements, and work with ids (for those more CSS-savvy).

WodPress builder add CSS

Didn’t manage to find the same feature in Wix…

 

Plugins, the app market

When you want to go beyond the functionalities provided by WordPress or Wix, you will need to insert some third-party apps.

In WordPress, there are thousands of such apps, called plugins.

 

You wanna boost your website performance, there’s a plugin for that.

 

Wanna optimize the images across all your websites, there’s a plugin for that.

 

Social media, forms, analytics, security, blogging features, marketing…you name it, there’s a plugin for everything. Some of them are free, some paid.

 

The Colibri WordPress builder integrates seamlessly with some of WPmu’s most popular plugins: Forminator (contact form plugin), Defender, Hummingbird, and Smush (optimization, security, and performance tools), or Hustle (marketing tools).

 

In Wix, you’ve got the Apps Marketplace, which has less than 300 apps available.

 

The end result: Colibri WordPress website

Screen Recording 2020-08-06 at 04.35.45.22 PM.gif

 

The end result: Wix website

Screen Recording 2020-08-06 at 05.11.17.99 PM.gif

Wix vs WordPress Builders (Colibri): Pros and Cons

 

Colibri cons Wix cons
  • Can’t change the width, height of an element by dragging it.
  • You need to take care of the website security and maintenance (there are plugins for that).
  • Almost impossible to get inside the code and make adjustments.
  • Below 300 apps to use
  • E-commerce functionalities are still in the “cocoon” mode
  • What’s built in Wix, stays in Wix: “Your Wix site and all of its content is hosted exclusively on Wix’s servers, and cannot be transferred elsewhere.”
  • Mobile responsiveness can be tricky.
  • Not a good fit for complex websites
Colibri pros Wix pros
  • Thousands of plugins and integrations available.
  • No code limitations, a developer can mess around easily and make custom changes
  • Great e-commerce functionality.
  • Data ownership: you can easily move your WordPress built website to another website builder, or download it.
  • It deals better with the mobile responsiveness
  • Huge WordPress community and resources at your disposal to fix anything you want.
  • Fit for both beginner and complex projects.
  • Blocks can be saved and used in future designs
  • Good native blogging features
  • Integration with WPmu’s most popular marketing and performance plugins.
  • No need to worry about security and maintenance, WiX has your back on this.
  • More templates to choose from
  • The width, height of an element can be changed by dragging it.
  • A good fit for non-technical users
  • Shorter learning curve

 

Wix vs WordPress Builders: Wrap Up

 

Blink if you’re still with me!

 

Let’s see.

 

It kinda took me the same amount of time for developing both pages.

 

Both tools give you a lot of control over the design. 

 

You can start with a template, but you can fully customize everything on the inside.

 

Both of them have their pros and cons, as seen above.

 

WordPress offers full flexibility and control, while Wix might have a shorter learning curve. In terms of pricing, they’re pretty close.

 

Now, the question is, what do you want from your website?

 

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

Leave a Reply

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

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE