Safe Port Financial Associates, LLC

Project Description

 

Safe Port Financial Associates, LLC is a very simple business website, but there were a few challenges in building it.

Your Safe Ports Photo Album

First and easiest to handle: the client wanted to be able to upload and display photos provided by clients. We decided against allowing clients to upload and post images directly, but instead added a photo upload field to the contact form using Gravity Forms. The photo gallery itself uses the free FooGallery plugin with the Polaroid Gallery Template and FooBox Free Image Lightbox. The albums extension for FooGallery is installed, but not yet in use. The client has been uploading photos to replace the demo images.

Safe Port Financial photo album with Polaroid effect.

Full-width Interior “Header” Images

Sridhar Katakam provides a handy tutorial for displaying full-width parallax sections posts and pages in Altitude Pro, and it works perfectly. (Because they are at the top of the page, these appear to be header images, but they are actually image backgrounds for a new parallax section before the site container.) The problem is that there are two options for insuring background images are full-width: background-size:cover and background-size:contain. Both can seriously distort the appearance of an image. The designer was not at all happy with the results of background-size:cover, so I changed the CSS for desktop display to background-size:contain and re-cropped the images.

Overlay

Then there was the transparent blue overlay on top of these parallax sections and just below the header. I first created a CSS gradient and then applied it to a new div at the top of the parallax section. Positioning that div appropriately on mobile devices required some tweaking in the media queries, and then re-tweaking when we changed the size of the header.

Interior page header with translucent blue overlay (CSS gradient)

Logo and Tagline

“Make the logo bigger” is a running joke in marketing, but that’s really what I had to do here. Trying to display a logo large enough to satisfy the client and the designer while keeping the height of the header/nav area to a minimum and including the tagline (site description) was a very nitpicky business. I ended up using a smaller logo for small screens, starting at 1024px.

Safe Port Financial header on desktop screens

Safe Port Financial Header at 1024px

Safe Port Financial Header at 768px

As you can see, I also scaled down the font size of the tagline on smaller screens to prevent it from wrapping too awkwardly and to keep the height of the header at a minimum.

Front Page Section 1: Positioning

One of the trickiest things about applying the design to the theme was the Front Page Section 1 widget area. All of the front page widget areas in Altitude Pro are designed to position widgets in the middle of the background, whether it’s an image background or a solid background. This design called for the widgets to be at the exact bottom of the section. Not beneath it, because they had to show on the first screen, and the front page sections all have full-height.js applied to them. Getting the blue bar positioned properly while still maintaining the scrolling navigation on the home page was a very fussy task. (Bonus: I used flexbox to position the buttons horizontally across the widget area.)

Front Page Section 2: Flexible Posts Widget

I wanted to display all of the staff bios in Front Page Section 2. While Altitude Pro has a nice widget count feature, the default layout for 6 widgets (5 staff members and the top-level About page) would not give me what I wanted.  I needed one full-length widget with five widgets in a row beneath it, but as the diagram shamelessly stolen from StudioPress shows you, the default layout for six widgets is three rows, with the first and sixth widget full width.

Six widgets would display in three columns with the first and sixth widgets at full width.

Instead of using six individual widgets, I used two widgets (which stack full-width according to the theme) and used the Flexible Posts Widget for the second one. (The Flexible Posts widget can display pages and custom post types as well as posts.) This necessitated some custom CSS, but worked out quite well:

Menus

If you click “Who We Are,” “Our Broker/Dealer”, What We Do, or Contact while on the home page, you’ll be taken to the corresponding section of the home page. The main menu uses the IDs of each section in custom links to accomplish this. On interior pages, if you click “Who We Are,” you’ll be taken to the Who We Are page. That means there are two menus, the Main Menu and the Page Menu, and some code to tell WordPress which one to display. The footer shows the Page Menu.

All in all, the site was more difficult to build than the straightforward content would suggest, but the important thing is that the client is happy with it.