Wix Elements
The video gallery above shows you some of the many toys that are available on Wix. No one can expect you to watch all of these, for obvious reasons - there is simply too much of the good stuff! The idea is to take a quick look at the thumbnails to see what is available and then to go and watch what it is that you are specifically interested in.
For the same reason, I will not be showing you examples of all that the Wix Editor offers, but only concentrate on some of the nicer visual elements, such as the strips, the slideshows, the lightboxes, the hover elements and repeaters.
Strips
These are the key element of Wix design. Everything you place on your page - be it texts or images - should go inside a strip, and different sections of your content should be placed inside different strips that follow each other, so that your site can be organized very quickly and efficiently, especially when it comes to optimizing your site for the phone.
Strips do not have to stretch to the full site width, they can also be stretched to the "page" (the area denoted by the 2 dashed lines in the middle). And then strips can also be divided into columns, inside of which different types of content can be placed.
And finally, strips also have very nice scroll animations and various other effects which you can find under the settings. So, do not forget to look at all of those features as well.
Full width image or video strips are very good page starters and they also make for nice breaks on a long page.
Videos or images placed only to the page width strips can be very good section breaks on a long page as well. But then they can also be used very effectively as text dividers within a section.
Slideshows
“I like reality. It tastes like bread.”
—Jean Anouilh
Slideshows are excellent for home pages, especially when used full width, as I am doing on the home page of this website as well. However, just like strips they can also be used as section breaks on long pages, or to give further/multipart messages within a section, such as the one above.
My advice with slideshows is to first delete all of the slides, and then to duplicate the first slide after you design it. That way you will be carrying your design system with you instead of having to configure it over and over again.
Lists
What I am playing with above is actually called a "List" in the add tab of Wix. The way it works is that all the design decisions that you make stay the same on each module but the content changes. Their primary purpose are practical things such as listing company workers, class listings for schools and so on. And I have in fact used this gadget for such a practical purpose on the Resources page of this site. They can also be used to list different sections of the same content, such as a list of wines, or of travel locations. The way that I have used it here is as a page stopper with which you may want to give your information flow a break, or indeed as a home page element.
But, I have not been lazy and I also made a proper list of items here which is also designed with visuals, but still using the list gadget the way that it is actually meant to be used, and that one you can see right below.
Although this a very nice gadget there are some difficulties when you are working with it: First off, the images can only be placed on the background which means that you will have to do quite a bit of cropping to get them in place, exactly where you want them to be. And probably even more important is that they are very slippery when you try to place text on them, which also involves a lot of resizing of the boxes themselves and not just the text itself. Tip: Open the toolbar from the right top tools menu and enter the box sizes manually to get them back in position.
01
Tulip
Growing wild over much of the Near East and Central Asia, tulips were cultivated in Constantinople as early as 1055. By the 15th century, tulips were among the most prized flowers; becoming the symbol of the Ottomans. They were rapidly introduced into Europe and became a frenzied commodity during tulip mania.
02
Rose
A rose is a woody perennial flowering plant of the genus Rosa. Their flowers vary in size and shape and are usually large and showy, in colors ranging from white through yellows and reds. Most species are native to Asia, with smaller numbers native to Europe, North America, and northwestern Africa.
03
Orchid
Orchidaceae is a diverse and widespread family of flowering plants, with blooms that are often colourful and fragrant. Along with the Asteraceae, they are one of the two largest families of flowering plants. The Orchidaceae have about 28,000 currently accepted species, distributed in about 763 genera.
Hover Boxes
“To do good work one must eat well, be well housed, have one’s fling from time to time, smoke one’s pipe, and drink one’s coffee in peace.”
____ Vincent Van Gogh
Would you like to know what someone quite wonderful said about the essentials of an existence that would be conducive to good work?
Hover Boxes are among the nicest of Wix gadgets. The idea with the hover box is that your message has to have 2 parts, the first of which gets placed inside a container, underneath which is a second one that then holds the rest of the message.
What I said above for the list gadget, also holds true for the hover boxes, and especially for the hover repeaters which are coming up next here. They are difficult to work with in that they are slippery. Again, open up the toolbar from the right top, and enter values numerically.
Something that greatly adds to the slipperiness of the hover gadgets is that they have animations, such as the expand animations that I have used here. Make sure that these are disabled up to the point where you know that you are completely done with your design work and check them out only after that.
Hover Repeaters
Ohhh!
“Trying to define yourself is like...
___ Alan Watts
... trying to bite your own teeth.”
Hmmm!
"It is what it is...
___ Dan Flavin
... and it ain’t nothing else.”
Wowww!
"What you see is...
___ Frank Stella
... what you see."
Heyyy!
"You shouldn’t be a prisoner...
___ Sol LeWitt
... of your own ideas.”
Hover repeaters are design elements with which you can create a design system of containers that includes fonts, their sizes, spacings, placements, as well as the placement of visual material. While all of these repeat themselves exactly as you configured them, the actual messages of the texts and the visuals differ from box to box. Since the boxes have two layers, your message has to be made out of 2 parts - one for the upper and one for the lower container.
Again, these are not the easiest of gadgets to work with. Please go back and read my words of caution in the "Lists" entry and the single hover box entry above.
Lightboxes
These can be very powerful additions to your site - provided that you do not go for that well worn cliché "welcome to my site". Lightboxes can appear by default as soon as a page loads, or they can be triggered to open through a button placed somewhere on your site. A lightbox closes when you click anywhere outside of it, however it might still be a good idea to add a close button or a cross as well.
The message in a lightbox should be something special that relates to your site, or the page that it is actually on. It could be textual or purely visual. You could put a video, a slideshow or a piece of text that is appropriate, such as a quote. I have actually used a lightbox on this site that is accessible on all pages from the footer by clicking on a button, that introduces visitors to some basic graphic design tips.
I have put together a few examples that you can see by clicking on the buttons on the left. Scroll to the top of the page (don't click, just scroll, otherwise you will close it) to see how it looks at the top since that will be the place where it will appear if it loads automatically with the page.