This month on the blog we're showcasing some of our favorite new templates as part of our Reinvention Month
. Our Support Team member Aeramis made the case for beautiful Barcelona
...this week I'm
going to counter with the Rio de Janeiro template.
If you're on the hunt for a new Jimdo template, here's why I think you should give ravishing Rio a chance:
All about images: if you have some great photographs, Rio is the perfect template to show it off.
A simple, user-centered navigation bar: Rio's got nothing to hide, and that includes subpages and dropdowns. That's why it works best with a simple horizontal navigation (and websites that don't have a huge number of pages.)
Lots of room on each page: With Rio, the "sidebar" is actually on the bottom, so nothing gets in the way of the space for your images. You have a really wide content area to
work with, and any links or icons you need can go at the bottom of the page.
A flexible header and logo area: As you'll see in the examples below, websites use Rio's large header for a prominent logo, a tagline/slogan, or both...and then some websites
leave the area entirely empty. It's up to you.
Tips for getting along beautifully with Rio:
The Rio template certainly is striking, but there are some tricks to getting along well. Below I've compiled a list of 10 real-life Jimdo websites that are pulling it off really nicely. What do they
have in common? You'll notice a few best practices:
High-quality images: Rio de Janeiro is made for full-width background images, so it's best to take advantage. Other templates use background
images too, but they often show a smaller portion of the image, or have an overlay covering part of it. Not so with Rio—your image is there for everyone to see, flaws and all. For this
reason, we recommend that background images be at least 2000 pixels wide. If you're not sure what that means, check out this primer on optimizing your website images. If you don't have the right images yet, try some of
our recommendations for free stock image sites.
Background slideshows: Why settle on just one photo in the background when you can show off more? Many of these examples use a slideshow in the background. You can set one up yourself by selecting Background from the Style Editor and then choosing the Slideshow option.
Consistent coloring: Many successful websites pick one distinct accent color and use that throughout in headings, buttons, horizontal lines, icons, and links. The result is a
uniform, polished look that really pops, especially when the rest of the site is kept in simple shades of black, white, and gray. Learn how to implement a similar color scheme throughout your entire site in just a few steps.
A simple, one-line navigation: Rio de Janeiro looks its best when the horizontal navigation is short and sweet. If you need a lot of dropdowns, subpages, or if your navigation is breaking onto two lines, then you should probably seek a different template that can hold
more content, like Barcelona.
Using the Columns Element for body text: Because Rio has such a wide content area, it helps to break up your text into Columns rather than having it stretch all the way
across the screen (line lengths that are more than 60 characters long can be difficult for
people to read on screen.) To do this, add a Columns element, and then put a Text element in each column.
Real Jimdo websites using the Rio de Janeiro template
Click on the images below to tour the full websites.
1. Studio 23
Interior design firm Studio 23
has wisely chosen the background images for their slideshow—notice how each photo complements the beautiful light
blue color they’ve chosen for their menu, headings, and icons. They’ve also made sure that their logo, in white, is still clearly visible as each image rotates behind it. Consistent coloring
throughout plus some unexpected but easy-to-read fonts ("Text Me One" and "Exo 2") complete this lovely look.
2. Unger Music
The first glance at this website
, you see a striking logo on an orange background. Then it fades out into a beautiful black and white slideshow
of different musicians. How did they get this effect? Simple: their logo on an orange background is actually the first image they uploaded in their background slideshow. Very clever. Notice how
they’ve also made their headings, links, and horizontal lines match the orange of their logo, and clearly organized their pages with columns and a white background for an uncluttered, professional
look. This example goes to show that you can never go wrong with black text on a white background
and just a subtle pop of color.
3. Ferme de la Moissonnière
Now that I know it’s possible to stay at a real working cheese farm in France, I don’t want to go anywhere else. Ferme de la
is a family business that makes three kinds of cheese and also allows travellers to stay at the farm. Their welcoming website makes great use of Rio. The navigation bar is simple,
they don’t use a lot of text, and they use a charming font for headings ("Alex Brush") that complements their logo. I also love the little sketch of a milk pail that they've drawn over their
background photo before uploading it to their site. Bonus points for the cute cow favicon
4. Ella Don Photography
On this website, the photographer Ella Don
introduces a portfolio that makes a real impact. The slideshow of background images immediately gives
you a sense of the breadth of the work, from weddings to sporting events (to Steve Wozniak riding a Segway...who knew?) In this example the website has a navigation that’s entirely transparent, but
this works because the color of the links is easily visible over the background images.
5. Antonio Brown
This website for Pittsburgh Steelers player Antonio Brown
actually hides the navigation bar entirely, and builds out most of the content
right on the homepage. How does this work without looking cluttered or confusing? They keep the text to a minimum and use the Button Element
and graphics to guide visitors down the page. This website also uses strong
branding and color (love that Steelers yellow!) to make everything look clear and consistent.
6. Bob Casneuf
This website for landscape architect Bob Casneuf
starts on the right foot with a creative, playful logo
front and center. It’s interesting to me how he uses almost the same yellow as the
Antonio Brown website to equal effect. It’s a great color to highlight headings and give the site a consistent look. I also like the way he uses Columns on his homepage to break up his text. Great
finishing touches include the custom favicon and the leaf images he uses as as horizontal lines (to get this effect, he uploaded a simple graphic as a Photo Element). His website reflects everything
you would want from a landscape architect—a good eye and attention to even the little details.
7. Wedding Visuals
Though this website
may seem simple, on closer inspection you can see that it really has everything a photographer’s website needs:
galleries, testimonials, an About section, and an easy way to get in touch. The result is a minimalist, modern look, complemented by the choice of font (Advent Pro).
8. U.G. Irajpanah
looks so unique that you might need to look twice to recognize the Rio de Janeiro template. In this example, graphic designer
U.G. Irajpanah has used one striking, monochromatic image for the background. It gives a first impression that makes you want to know more. Normally you see header text center-aligned, but in this
case it’s offset to the left, which is an unexpected move that adds visual interest to an otherwise minimalist site. The use of font Courier New really completes this look.
9. Bauernkate Klein Thurow
Beautiful photos, consistent coloring, and picking just the right font—are you sensing a trend here? This bed and breakfast in Germany has created an inviting website
that makes you want to put your feet up and stay a while. Check out the way they’ve used a Columns element
, text, and photo elements to create a varied page with visual interest to describe their different offerings—much better than just one long, text-heavy
block! And it can be hard to choose from over 600 Google web fonts, but they’ve done a great job here. They’re using Doppio One, Diplomata SC, and IM Fell Double Pica.
10. Alina Atzler Photography
This example comes from Jimdo’s very own Alina Atzler, who works as our tireless Product Manager by day, but is actually an accomplished wedding photographer too! One thing I like about Alina’s website
is how carefully she’s chosen her background images. Notice how each one has its focal point to the side, so that her centered logo
never blocks out the photo’s subjects. It’s a nice trick that means her background images never distract or clash with the rest of her site. With such lovely photos to show off, she’s wisely kept
everything else simple. She keeps a white background with black text, and lets her photo galleries and collections speak for themselves.
Want to try Rio de Janeiro on your own website? Go to Templates in your Site Admin to open the Template
Selector, then choose Rio de Janeiro from the list. Don't have a Jimdo site yet? Start a free site with the Rio de
Janeiro template here.
If you have a wonderful Jimdo website (using Rio or any of our other new templates), don't forget to enter
it in our contest
before the end of September to win an Apple Watch Sport or other great prizes!