Projects Tech Stuff

New Work: Planet of Sound

Here’s how we went from this:

To this:
Planet of Sound Music, an independent music supervision and licensing company, needed a new web site that would reflect a modern feel. A “clean, simple, business-card like” look, but with attitude.

They also needed to project the fact loud and clear that they work with big-name clients and big-name talent. So the home page cuts right to that. Their logo (reformatted to fit horizontally) and a few links, then a full-width slider that shows their credits. Scrolling down you get the business-card pitch for what they do, followed by a clean portfolio grid, then capsule bios of the team. Lastly, a call-to-action with a little bit of “travel to the Planet” hinted at by the background.

The other pages break out these sections of the one-page into their various components — the team members and the portfolio — and add a client listing, a demo reel and a contact form.

The demo reel is behind a password, but it looks like this — a full-width HTML5 background video. We didn’t make the maximum use of a background video, we only put a headline over it.

The Tools

First, they needed something they could update and add to easily — something their flat-file site just didn’t offer — so we put it into WordPress. Then, we used the awesome Divi theme from Elegant Themes to build it.

Divi puts all the latest bells and whistles at your fingertips, and does so with a easy-to-use “builder” add-on to the usual WordPress editor. You simply select “Use Page Builder” and start adding rows, columns, and your choice of many ready-made modules for different kinds of content. Each is fully styled and ready for you to drop in a picture, gallery, icon, text, clip, chart, feed — 28 different options in all.

Each section operates independently, and can have its own custom background. Within, each row can have from one to four columns, in the Bootstrap way so it can be two equal, three equal, one-third and two-thirds, etc. Within the columns, you add the modules, stacking them and aligning them with an easy drag-and-drop method. Here’s what the “Projects” page looks like in the editor:

Animation Tip

Divi allows for the animation of some elements, so that when you scroll to that point in the page they appear, and slide into place from the sides, top or bottom. But, for some reason, not all. Here’s how you can change that behavior.

Each section or module has a configuration screen (accessed via the “hamburger”) that lets you add a CSS ID or class to that element. The classes that control animation are ‘et-waypoint’ and ‘et_pb_animation_xxxxx’ where xxxxx is top, left, bottom or right. If you add that class to a section, the et-waypoint kicks in and animates its content when the waypoint appears in the screen. At least, that’s my understanding. Or, you can apply them to individual modules and have them each behave a little differently. For example, on the home page the photos of the two team members come in from opposite sides.

But again, you only need this for items where it’s not built in already: portfolios, team members and a few others.

Is this what your web site is missing? Drop me a line and maybe we can work together.

Plug-Ins

Only a few other plugins were needed to make things go. The “Video Embed & Thumbnail Generator” was used in an earlier version, and isn’t needed now, but I mention it here because it’s great. You can point it at a video, and it will generate any number of stills from a video clip and offer them as choices for a thumbnail. Very cool. It’s also got some nice video gallery tools.

W3 Total Cache, because a site like this uses a lot of horsepower to generate a dynamic page. Even with that, we’re going to have to look into getting off of GoDaddy, because it’s so slow.

Other than that, it’s just the basic anti-spam, security and analytics packages. Social media and custom CSS are handled right out of the box. Divi also comes with a nice selection of Google fonts. It may not have exactly what you want, but it’s not hard to find a plugin that will give you more.

Customization

There is some simple customization support in the Divi Theme Options panel, such as logos, favicons, social media links etc. Others are in the Appearance::Customize panel — fonts, color schemes, background images. I tweaked a few CSS classes to give me rounded corners on the team photos and portfolio pieces, pulled in a few different icon sets, and changed some spacing.

The worst was trying to make WordPress’ built-in password page look like something other than an accident. Here’s the CSS I used, based on the background image:

article.post-password-required {
     background-color: #fff;
}
form.post-password-form p {
     color: #000;
    font-size: 24px;
    line-height: 1.7em;
    margin-top: 40px;
    padding-bottom: 1em;
    text-align: center;
    padding-top: 20px;
}

form.post-password-form p input[type="submit"], form.post-password-form p input[type="password"]  {
 background: none repeat scroll 0 0 transparent;
    border: 2px solid;
    border-radius: 3px;
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7em;
    margin: 15px auto 50px;
    padding: 6px 20px;
    position: relative;
    transition: all 0.2s ease 0s;

}


form.post-password-form p input:hover[type="submit"]  {
     color: #dd0000;
     border-color: #dd0000;
}
Tom

Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he’s also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

Leave a Reply

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