Button layers

The content of a button is made up of multiple “layers.” To add a layer, click one of the inactive layers in the “Editing context” menu. This will turn the layer on and by default set it to be a text layer. Below, in “Layer display“, you can change it to be an image layer, or turn it back off.wp38_buttons new layer

Text layers

Like the “Button general” context, editing a text layer also gives you two customization sub-groups: “general options” and “text-shadow”.

wp38_buttons text layer customize

General options” gives you most of the customization options you need. First, and most importantly, set the text itself for the text layer. Once you have your desired text, you can modify it’s appearance, and then set it’s position within the button.

"General" customization options for a text layer.

“General” customization options for a text layer.

You can also choose to rotate your text within the button, provided you are aware that a small percentage of your viewers using the oldest versions of Internet Explorer will see the text unrotated.

By selecting the “text-shadow” customization sub group, you can also enable and apply text-shadow to your text layer, optionally modifying it for the hover state as well.

wp38_buttons text layer shadow options

“Text-shadow” customization options for a text layer.

wp38_buttons layer text hover

Notice the difference in text shadow between the two states?

Image Layers

To enable an image layer, select “image” as your layer display type. wp38_buttons image layer displayOnce you’ve selected for a layer to be an image, you’ll see a button allowing you to set the image. This button brings up the same upload screen you use in other ProPhoto image customization areas. Upload a new image to your server, or select to choose from existing and already uploaded images.wp38_buttons layer set image

Once you’ve selected your image, you’ll see it previewed in the customization area and in the preview area along with some additional customization options.

wp38_buttons image layer options

Image layer customization options

The image label is sort of like the “Button title.” It doesn’t affect the final display of your button at all, but rather is meant to help differentiate the layers when editing a Button.

Use the position controls to move the chosen image around within the Button.  If, while moving your image around you see that it is on top of a text layer, but you want it underneath, simply select the “Layer order” context and change the layer order. If you have multiple image layers, the “labels” you give to the images can really come in handy when re-ordering. Text layers titles consist of their actual text, to help you remember which layer is which.wp38_buttons layer order

The last customization option for the image layer allows you to create image layer hover effects.  If you want your image layer to look the same for both states, regular and hovered, then leave this option in it’s default state (“entire image for both states“).  If, however, you want your image layer to have a modified rollover state, see the tutorial below for instructions on setting up your image correctly.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us