Extreme Homepage Makeover: 5 easy steps

Giving your eCatholic website a makeover (without touching a piece of CSS code) is easier than you may think! Watch the video below for an in-depth demonstration of the five steps highlighted in this article.

Step 1: Analyze your homepage content

We've said it before: Don't put everything on your homepage! And we're serious. The first step to a successful homepage makeover is to analyze your content with a critical eye. Have too much content on your homepage? (e.g., more than 6-8 content modules) Here are some things you can do:

• Move content to a subpage. Mass & Confession times, contact info, or other types of content can often be moved to their own subpages to free up space on your homepage. Then, feature this content on the homepage using a button (Step 3) or Quick Link.
• Use the News module. Creating News items with this built-in tool allows you to have short snippets of info on your homepage.
• Enforce your priorities. You likely have content on your site that doesn't deserve valuable homepage real estate. Zap it from the homepage! (e.g., Don't go overboard with Catholic Content modules; use just one or two.)

Step 2: Evaluate your homepage slideshow

Blurry images. Too much Photoshopped text. Colors that clash. These are ways your slideshow can create a negative first impression for your visitors. Instead, use these tips to create a more effective slideshow:

• Use built-in features. Add titles and captions to your images with the built-in tools instead of creating something in Photoshop. This can benefit your SEO and help you avoid creating cluttered images that convey too much info.
• Limit the number of slides. Fight the temptation! As a rule of thumb, use no more than four slideshow images. In fact, don't be afraid to use just one.
• Invest in high quality images. Download photos from eCatholic's gallery of free Catholic stock photos, use other free image resources, or hire a local photographer to capture images for your site.

Step 3: Create beautiful buttons

Since you'll probably move quite a bit of content off the homepage (Step 1), buttons are the perfect way to feature important information in an attractive way. eCatholic's Buttons module allows you to easily create beautiful buttons on your site. When creating buttons, don't forget to:

• Choose the right homepage layout. You need to select the correct homepage layout in the Design Studio to access the Buttons module. Choose from layouts that can include up to six button regions.
• Upload high quality images. Again, having quality images to use throughout your website makes all the difference! It's worth the investment.
• Use built-in features. Similar to your slideshow, the Buttons module allows you to add a title and description to your images. Take advantage of this tool to create sharp buttons with consistent design.

Step 4: Optimize your navigation menu

A homepage makeover isn't complete until you take a closer look at your main navigation menu. Here are potential improvements you can make:

• Limit the number of main navigation items. Keep it clean and simple. Include no more than six items in your main navigation.
• Use Quick Links & Mega Menu Groups. These are built-in features that you can use to make things easier to find on your site. Take advantage of these tools!
• Choose user-friendly names. Keep your visitors in mind when naming your main navigation items. Avoid using jargon or terms that are unclear or confusing.

Step 5: Update your homepage design

Now, the fun part! Use the Design Studio to easily test different homepage designs using eCatholic's free themes.

• Experiment with different designs. Seamlessly convert your site to a new theme and color palette without losing any content. Just click Publish in the Design Studio once you're ready to show off your new design.
• Pick a new homepage layout. Choose between different slideshow formats, button regions, and content areas. Then, pick your favorite style.
• Test on a mobile device. Be sure to view your new design and layout on a mobile device to make sure there aren't any surprises.

Check out our Extreme Makeover before-and-after

We selected an actual customer's website, then applied the strategies listed above to give the site a total makeover without using any CSS code. Take a look at the possibilities: