It’s plain to see you’ve caught the site-building bug, and your next quest to conquer – banner images.
At this point you’re beyond familiar with Style Designer and its capabilities in customization. You know that uploading a banner image is a cinch, but your creativity is bursting at its seams.
Here’s the sitch: you have a five-page website, and you’d like to put a different banner image on each page. Your only problem – Style Designer prides itself on consistency, opting for one banner width per site, but your creative mind is begging for banner images in different sizes. How do you accomplish this?
Three small words: Custom Panel Widgets.
Getting your canvas ready
Before we start dragging and dropping Custom Panel Widgets, let’s first hop into Style Designer to lay the groundwork for our new custom banner images.
In order for your Custom Panel Widget to act as a banner image, you will need to remove the Content Padding on each side allowing your Widget to extend the entire length of your content area. Once done, hit “Save” and let’s get to building!
Putting your creativity on the page
Next up, drag and drop your Custom Panel widget to the top of your content area.
Once your Custom Panel properties open, go ahead and click over to “Background” to upload the image of your choice. Once you’ve uploaded your image, choose whether you’d like the background to repeat (this is good for patterns), and from which direction you’d like your image to stem from.
Next up, hop over to the “Border” tab, and choose your border width, color or you can even remove it entirely.
Finally, jump to the “Spacing” tab and remove your Margin from each side, allowing your panel to extend the entire width of your content area. If you plan on adding a text overlay, use the Padding to customize how much you’d like from your text to the edge of your image.
Once done, hit “Save.”
Next, drag and drop the Text Widget within your Custom Panel Widget.
If you wish to have a text overlay, go ahead and add that here, using creative headers to your liking. If you don’t care to have text, simple line breaks will suffice to make your image extend as far down the page as you’d like.
Once your banner suits your fancy, go ahead and repeat the process on the rest of your pages!
Keeping up with our 5-minute website fixes series? Which tips have you found most helpful?