What Good is Text if no one Reads it … Besides Google?

At the top of the home page of my new site, I have added a MetaSlider. The images represent small business owners with captions that are web development planning tips. If I switch them out occasionally, Google will give me credit for changing the content on my home page. But the default slider plugin’s words are not easy to notice, much less read … for a human.

This is a User Experience (UX) problem that can be solved with design decisions, an understanding of the structure of a WordPress website, and CSS coding skills. The tools involved are 1) Firefox Inspector to find the layers to change, 2) Sublime to make coding changes, 3) WinSCP to upload the code files to the server.

After acquiring the skills and tools needed for the job, let’s look at the design options:
Option 1: MetaSlider puts the text in an overlay in the bottom of the slider. The overlay isn’t 100% opaque, but lets some of the photo behind it show through. The text and overlay can be manipulated with CSS.

Option 2:  The location of the text in the slider can be manipulated. One drawback to putting the text over another part of the slider is that it could cover up a face or other important feature of the image. Because of my experience with sliders and text issues, I choose all photos with the face on the right hand, leaving the bottom or the left side free for text. But, the text could also be moved below the slider image altogether.

3. Find out if the pro version has more text positioning options.

4. Choose a different slider plugin that has options that don’t have to be coded.

WHAT I DID TO FIX THIS UI/UX PROBLEM

I’m always for taking the easy route first, so let’s see what happens if I just make the text larger and bolder. The text is in an overlay layer, so there is some color from the photo behind it showing through the dark background. The extra color and lines obscure the text, a bit. And, while I’m at it, I think the text will be more noticeable if I center it.

Using Firefox Inspector, I know that the layers for the slider are in the .lp-slider layer. But, I also know that I will have to go inward a few layers to find the overlay.

From the screenshot of the code at the right, you can see that the layers for the slider are:

1. .lp-slider
2. .lp-dynamic-slider
3. .mo-slider-3-8-1
4. #metaslider_container_120
5. #metaslider_120
6. .slides
7. From here, we will skip the layers for the images and just get to the caption
8. .caption-wrap
9. .caption

.caption is the layer that holds the text, but is it the layer that also controls the overlay? If I increase the size of the font, will the overlay grow, or is the height set in a rule? These are things we can check in the code and test by changing the code.

Looking at .caption-wrap, it looks like it controls the opacity of the caption area. There is no height rule, so I can assume that the height is controlled by the contents. I will start by changing the opacity to .8 and setting the text-align to center.