May 6, 2014 at 9:26 am #12122GuiLoisCustomer
Ive tried so many times to make this happen and have had no luck, but today, I have something I hope will be of use to others.
Whether or not you choose to have a single illustrative image within your slider widget for loading performance purposes you can still benefit from an image or slide show with real keyword rich text that both customers AND search engines can see.
However with most themes strangely this doesn’t come as standard so theres some thinking to do. If you are like me and ‘dabble’ because you run a business and its not your core skill you may end up pleading on forums or pleading for paid help to get this done but its quite simple once you know what to do where.
Firstly, your image needs to sit contained within a given widget you know that will be used within the pages you want the image to appear. For me, I wanted the image to sit high up on the top page as part of an introduction so the Epik SLider Wide widget was the right place for me to land this image. Whilst you can attempt to add an image as the background and make it not repeat, it appears on all of your pages and so is inappropriate.
The widget code for slider wide appears in the style.css file.
/* Slider Wide
and add below it:
/*Hey! Ive ADDED BACKGROUND TO SLIDER WIDE WIDGET*/
background:transparent url(‘http://www.YOURDOMAIN.com/images/YOURIMAGE.png’)no-repeat bottom center;
Heigh requires a bit of adjusting, and the background color is optional of course.
Go into your widget of choice in Appearance/Widgets in your wordpress admin and add a text widget to your theme widget (in my case I chose Slider wide as mentioned earlier).
Save and then check for alignment, font color etc. You may need to adjust the boarder for where the text starts, where it sits on the page and the colour since it is overlaying an image. For me I added a table with some cells defining left and top boarders along with a white font so the text stood out.
Then check against tablet and smartphone as well as stretching and squashing the browser window in your big screen view.
I hope this helps someone as it has taken me literally months to find this out 🙂May 9, 2014 at 7:17 pm #12208mponziCustomer
Thank you for posting this. It’s something I’ve been wanting to do also.
I can’t get the image to display in the slider wide area. I’ve uploaded 1920x450px image. I pasted the code you provided in the style.css, inserting the url to my image in the first line. I also changed the height to 450px to match my image.
I then added text with a text widget to in the slider wide widget area.
If I leave your last line of code (background-color:#293F5E;), I see my widget text over a dark blue background. If I remove that last line, I see the widget text over whatever background (color or image) is set up in the theme.
But my background image never shows up.
Do I need to set up the genesis slider to show the image, even if I only want one static image?
MarshallMay 10, 2014 at 1:59 am #12213GuiLoisCustomer
Can you enter the code as you have entered it into style.css here.
- You must be logged in to reply to this topic.