Streaming live at 10am (PST)

Control image position in slider


#1

Is it possible to control the vertical position of an image in the slider? I've tried endless to get this done but it doesn't seem to be an option in the slider.


#2

What exactly do you mean? Images as an object inside of the slider can be easily positioned with margins. If you mean background image of slide you can position it using those buttons in Adjust section smile


#3

I don't get to see that option when I add an image to the slider. I created the slider, then added 2 more slides, 3 in total. Then I added an image per slide. When I do it this way I don't see the position adjustment option that you refer to. Is there another way of doing this?


#4

I'll make a video once I get home okay? Give me an hour, I'll edit this post.


#5

Oh that would be so nice of you! Thanks for the offer!


#6

Hey, sorry I didn't post video yesterday. I had some guests over and didn't have a chance to work on it. I might need a more detailed explanation what do you want to achieve so my video will answer your question smile


#7

No worries! As of today I'm off for the rest of the week so no hurry! What I would like to achieve is the following:

Use the slider and have control over the way I position the images vertically and horizontal.
Also, is it possible to use different size images per device? For another website where I did not use the slider but standard image for a banner I was able to take an image, make 3 versions of it width and height wise and use these per device. That way every device shows the banner perfect. Would be great if there is such a solution for the slider as well!

Thanks so much for your help!
Daniel


#8

Hi @Daniel_Tiebor. If you would like an image to fill the background of the whole slide I would select the slide, give it a class and add a background image. You will need to create an additional class for each slide to have those classes have different background images.

If you don't want an image to fill the whole slide, then you can just drag and drop the image into the slide. You might want to drop a container in the slide first so the image is centered. Then if you want to move the image around you can either give the slide a class and give it padding on the top, or give the image a class and give it margin of the top.

Let me know if this helps.


#9

Thanks for your help, but when I add a class for a new page it just overwrites it for the other devices?! I don't get how to just simply have different banners for each page and make the combo to have it work per device. I have no issues to set up 1 banner for different devices, but as soon as I want to use another banner for another page everything screws up. I'm just running in circles right now.

What I've done:

  1. Create a page
  2. Create a section
  3. Drop a background image
  4. Adjust the background image per device so that it looks good, I use different images per device!

So far so good!

It goes wrong when I go to another page and do the same proces just with a new image. How can I fix this?

Thanks!
Daniel


#10

I'm a little confused as to what you're trying to do, Daniel. I think you're trying to have a slider on a different page that looks similar, but with different background images? What you'll have to do is create totally new classes on that other page if you don't want to override the classes on another page.

Classes and styles are the same across all pages. This makes web design faster and easier - because usually pages of a site have similar styles.

What you can do to make your slider look the same but with different classes is use a Global class for the sliders on every page and use Nested classes to make them look unique. Here's an example:

Silder on all pages can have this class:

.slider {
  height: 400px;
  background-color: black;
}

Slider on about page can have this nested class attached:

.slider.pink {
  background-color: pink;
}

The same concept you can use for slides. Just add a nested class to Slide and replace the styles.


#11

#12