At least once a year I try to update my portfolio and website For this new blog page, I ran into a weebly blog template problem. Most of the blog headers had an image as the background and then options for building text, buttons, etc. atop the image. Problem was, I'm a bit OCD when it comes to text placement in relation to any accompanying artwork. Good trait for a book cover designer; not so good if the blog template adjusts the background image dimensions based on the screen it's being viewed on. I'd get the text just right on my laptop just to have the background image shift the minute I opened the page on one of my other two screens, putting words and my slideshow over key element of the artwork. Not acceptable. Here was my workaround ...
Replaced header layout to LESS IS MORE
Edited background color to BLACK, scrolling effect to NONE, advanced setting set to CONTENT ALIGN BOTTOM
Removed all text elements from header (all text boxes and buttons)
Add one IMAGE element
This next part took the most work, but isn't hard. Weebly IMAGES can also be animated GIFs.
First, I built my slideshow layers in Photoshop.
In a separate file, I placed the title text & quote atop my background art and a box as GIF spacer.
Then I placed a copy of the designed background art into the layered slideshow file, bottom layer.
I scaled up the 'canvas' and background layer so the slideshow would fit where I wanted it
Exported the slideshow design as a GIF
Uploaded GIF file to Weebly blog header IMAGE element
Now, I have a blog header that both showcases my work and doesn't rearrange text elements bases on screen size or resolution. If you have any questions or would like a video tutorial on how I did all that, let me know in the comments.
Let me know when something I posted benefits or inspires you. Thanks for spending some time with me :) Until next time...