Big huge single, full-width image on Epik home page (instead of slider)

Tagged: full width image, Home page, slider widget

This topic has 12 replies, 5 voices, and was last updated 10 years, 2 months ago by Kim.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
October 11, 2013 at 1:33 pm #8043
Greg P
Customer
I’m wondering if anybody has done something similar to this website (you may have heard of this company):

https://www.google.com/partners/

Epik would be the right theme if I can figure out the full-width image set up. I guess it’s like a part Minimum theme part Epik?

Thanks,

Greg
October 11, 2013 at 1:36 pm #8044
Wes
Moderator
Yes you can already do this by default if you have the latest version of Epik. Instead of adding your image in the “Slider” widget area, you can add it in the “Slider Wide” widget area right above it. The “Slider Wide” widget will give you the full width option, but you’ll have to create the code in order for the text to align in the center at a fixed width if you want it to look like the link you posted.
October 11, 2013 at 2:26 pm #8045
Greg P
Customer
Thanks for the quick reply Wes. I actually tried that just pulling the image in and came close, but gotta have the image in the background up top, plus include the button and text “layered” over it. I’m still digging but no luck (yet).
October 12, 2013 at 11:42 am #8084
Wes
Moderator
It can still be done, I remember doing something similar a while ago. You just have to add a div with the background image you want in your css, then add another div (or whatever you want to use) with the text inside of that. The result would be exactly like the google link you posted. If you used the slider widget, you could easily just add a background image to it, and then add the text inside the widget area and it would also appear just like the google link.
October 13, 2013 at 1:25 pm #8109
Greg P
Customer
Thanks Wes. It seems to fairly simple so hopefully I can get it cranking.
October 13, 2013 at 1:53 pm #8112
Wes
Moderator
You’re Welcome!

Just let me know if you run into an issue.
October 14, 2013 at 5:59 pm #8134
lisab
Customer
Greg P, I am interested in whether or not you were successful with this. If so, how? I want to add the same feature (full width transitional images) to a site I’m building, except that the images will contain their own text, so there is no need to assign text and position as mentioned above. Thanks.
October 14, 2013 at 7:33 pm #8138
Greg P
Customer
It sounds like what you’d like to do is actually more straight-forward than what I’m doing. What I have so far for a single image background is this:

/* Slider Wide
——————————————— */

.slider-wide {
clear: both;
width: 100%;
background: url(‘/wp-content/uploads/2013/10/wideimagetest.jpg’) no-repeat fixed center;
height: 400px;
}

But I want a single image and real text. (I’m not 100% there yet, by the way. A couple of things not jiving.)

However…

If you’re not worried about real text, then it sounds like you just need a slider that lets you go wide enough. The problem with super wide sliders is the larger file size.

What Wes does on his theme demo is a nice way to go…a “normal” size slider image that uses the same background colors rather than having an “edge” or key line on your featured images. This way it appears to be a full-width slider. But it’s really not. (If that makes sense?)

But that might not be an option for you.

I’ve recently started using Soliloquy (lite version is free but limited…paid is only $19.) It seems to be very good. Plus it works with shortcode, which is just plain easy. So you just set it up and add the shortcode to your wide slider widget. You can go as wide as you want but, again, large files aren’t good.

By the way, to add shortcut to widgets I found I had to add this to functions:

add_filter( ‘widget_text’, ‘do_shortcode’ );

===

I don’t know if I gave you the answer you’re looking for but hopefully helped a little 🙂
October 14, 2013 at 8:13 pm #8139
lisab
Customer
Thanks for the reply. I actually started playing with Soliloquy today, but was still struggling to get the slider image the full width of the page. Unfortunately, my slider images won’t have the option of “blending in to the background” like Wes’ did in the demo, so the larger file size will be a must. Thanks for the help though. Would love to see the final product when you do get everything to “jive”!
December 17, 2013 at 9:37 pm #9537
socialspark
Customer
Wondering if either of you got this working with Soliloquy? I recently bought Soliloquy and would like to use it with Epik. I want to use a full width picture with text overlay. I don’t have Epik yet, so I can’t play around with it myself, and I don’t want to pay for it until I know it can do what I want.

Any advice/tips on how to get it to work would be greatly appreciated!
December 17, 2013 at 9:45 pm #9538
lisab
Customer
Hi there!

Although I did like Soliloquy, I was not able to manipulate it as needed for the full width slider/affects I wanted. Instead, I purchased http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246 (Layer Slider), thanks to Wes’ advice, and it was the best $15 I’ve spent yet. Very cool plugin and lots of possibilities with Epik and many other themes. Looks great on mobile devices as well.

You can see it in action here: http://brnonline.org.

Good luck!
December 17, 2013 at 10:08 pm #9539
socialspark
Customer
Thanks for the quick reply, Lisab! Your site looks great! I’ve got the license for layerslider already because I have the Ally theme, and I used it on my own site: http://socialsparkmedia.com. I had some problems with it, though, so I splurged over Thanksgiving and bought Soliloquy (when it was on sale). I’m hopeful that it will be more stable and have better support for the price. I don’t want to take up too much of your time, but can you tell me what didn’t work about Soliloquy? Was it the fade out at the bottom, or going behind the menu? Because I don’t need those features, or was it the full width aspect? Because I have to have that.

Thanks again for your time!
Fran
February 6, 2014 at 11:56 am #10456
Kim
Customer
Hey,

I’m using the Slider Wide Widget that is set to 2560 x 500 in my Slider Settings. My test image is exactly that size. I don’t know why, but when I view it for some reason my image is not showing at full height on the homepage and there is white space underneath it (I assume because it is set for the 500px height). I’ve regenerated my image and still it won’t show full height. Here are my slider wide settings below. Thank you for any help. http://www.lifecommunitychurch.net
```
/* Slider Wide
--------------------------------------------- */

.slider-wide {	
    clear: both;
    width: 100%;
height: 500px;
}

.slider-wide .wrap {
    margin: 0 auto 0;
    padding: 0;
    max-width: 100%;	
}

.slider-wide .widget {
	line-height: 0;	
	margin: 0 0 0;
}
```
Kim Pahl
True Vine Web Creations
http://www.truevinewebcreations.com
Author

Posts