This month on the blog we’re showcasing some of our favorite new templates as part of our Reinvention Month contest. 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:

Rio De Janeiro Jimdo DesignHigh-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 images. If you don’t have the right images yet, try some of our recommendations for free 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.
  • 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

1. Studio 23

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
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

Ferme de la moissonniere

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 Moissonnière is a family business that makes three kinds of cheese and also allows travelers 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

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

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

Bob CasneufThis 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

Wedding VisualsThough 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

ugirajpanah This website 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

Bauernkate Klein-ThurowBeautiful 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

Alina AtzlerThis 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.