• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

Safe Port Financial Associates, LLC

Filed Under: BusinessTagged With: Genesis

Safe Port Financial Associates home page (detail)

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.

Your Safe Ports photo album with Polaroid effect
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.

Safe Port Financial What We Do page header with overlay
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 on desktop screens

Safe Port Financial Header at 1024px
Safe Port Financial Header at 1024px

Safe Port Financial Header at 768px
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.)

Safe Port Financial LLC Home Section 1 with overlay

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.

Altitude Pro home page widget layouts
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:

Safe Port Financial Home Section 2 with 6 widgets

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.

Colophon

Project Details

Client Name

Mike Buxbaum

Client Company

Safe Port Financial Associates, LLC

Project URL

http://safeportfinancial.com

Base Theme

Altitude Pro

Project Fonts

  • Trajan (headings)
  • Ek Mukta (body)

Premium Plugins

  • BackupBuddy
  • Gravity Forms
  • WP 101 Video Tutorials (Supplied by GoDaddy)

Free Plugins

  • Add Featured Image Column
  • Black Studio TinyMCE Widget
  • Display Posts Shortcode
  • Enable Media Replace
  • EWWW Image Optimizer
  • Flexible Posts Widget
  • Foo Gallery
  • FooBox Free Image Lightbox
  • Genesis Custom Footer
  • Genesis Featured Page Advanced
  • Imsanity
  • iThemes Security
  • Mail on Update
  • Regenerate Thumbnails
  • Rich Text Excerpts
  • Simple Custom CSS
  • Simple Page Ordering
  • WP Rollback
  • WP-Sweep
  • Yoast SEO

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email
« Your Mental Health First
Knurld »

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact