Tech Stuff

Upgrade Project

Now that I know a little more about how the Divi theme works, I can knock out something like this in a couple of hours.

We started here, the blogs.shu.edu site as we originally set it up four years ago. It used the Atahualpa theme, with some variants and customizations.

This page needs to work harder. It’s responsible for selling the entire program, and it needs to show more about what we can do. But this is rather narrow, not responsive, limited and just not modern enough.

“Divi” is kind of fun the play with, and I’d worked with it on the Planet of Sound project, so I was up to speed on how to make things happen. I also didn’t want to spend a huge amount of time, because other projects were brewing as well.

I took the basic block of copy embedded in the old banner image and broke it out over three slider panels, with calls to action. Pulled in a trio of work offerings with their animated icons. Added a portfolio showcase section. Added more call-to-action blocks, and finally added a latest-post section. Put some spacers in and placed it all over a nice parallax image taken from the University’s image gallery.

Third slide with call to action and offerings.

As before, there are a couple of things that need work. The way logos are handled is just wrong. Even when I add whitespace around the live area of the logo image, it still gets cropped badly. This:

Bad logo, bad! Especially on the “E” in the last line, the bottom is chopped off.

Is wrong. By increasing the min-size of the image (a lot) I was able finally to make it stop:

Good logo, good!

Another thing is the way the full-width gallery works. Designed for photographers, it presumes that your images are going to have subjects in the center so that your eye will naturally be able to distinguish one from the next when they’re all tiled together seamlessly. This from their demo site:

Nice for photography

A giant sequoia, a stack of rocks, a skyline, a girl, a bridge.

But even alternating tonalities, a portfolio of web pages doesn’t work the same way. There’s too much visual distraction around the edges of each item to be able to clearly distinguish them.

It’s just too noisy. I wasn’t able to take the time (and didn’t feel inclined to do the necessary child theme anyway) to completely solve it, but by putting a border under each row now there’s at least a little clarity. It would have been better to box out each item individually, but the way they tile together and are sized is based on the viewport width, and when I tried adding space between the wrap wasn’t working. But a 4px black bottom border is easy to incorporate.

What took the longest was turning each featured portfolio item into a “project,” and developing the montage seen in the second slide. A little Photoshopping was necessary in the first slide to remove the heads of the two students (you can see them in the background parallax image, but it’s OK there). The third slide background image is just a solid color with a texture filter and a gradation.

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 *