Switching a live site/adding the Ethos -specific carousel

[brian_manning]

Hi guys,

I want to add the 3 boxes like this site at the top of this page (https://astratelli.com/)
But if I recall they are specific to the Ethos theme.

I believe I have to install the Ethos template site in order to have the option to add these 3 boxes.
Can you advise please?
My site is sunbeam.ie and Im planning on redesigning a lot of it this week on the live site. Id like to start with these boxes on the homepage and then the sitemap/menus. Hopefully the rest falls into place after that.

Kind regards.

[prakash_s]

Hello @brian_manning,

Thanks for writing to us.

You can use Revolution slider to add three boxes before the Header Menu. To add the Revolution slide before the Header menu. Go to the page —>Click on the Settings Icons—>Page settings–>Slider Settings: Above Masthead

In case if you want to add it below the header you can use our “Classic Revolution Slider” element or you can set if from the page settings as well.

In case if you have not seen Revolution slider documentation please have look at the documentation to learn more how to achieve your design.
https://www.themepunch.com/revslider-se-doc/slider-setup/

Revolution Slider | Themeco Docs

Thanks

[brian_manning]

Thanks a lot.
I spent hours trying REv Slider out and I still cant make 4 boxes side by side. I couldnt find any tutorials for my issue.
I tried a carousel and a slider and a scene. Carousel seems to work best but I cant keep the boxes on screen and not sliding left and right.
https://sunbeam.ie/homepage-2020 - this is where Im at right now.

I want 4 boxes that autosize and fill the screen from left to right. Not in a slideshow but static boxes that stay still. Like the 3 boxes on this site (https://astratelli.com/) just under the navbar.

Kind regards,
B

[prakash_s]

Hello @brian_manning

For creating a grid in Revolution slide, click on “Add Layer” -->Row. Please have a look at the given screenshot below.

From here you can set the number of columns that you want then add Image layer in each column and after that add a text layer on the image to achieve your layout.

For Carousel, You need to set the Carousel as Full-width
Screenshot

Set number of the slide to be visible

Hope it helps
Thanks

[brian_manning]

Thank you SO much, I really appreciate it. Its working now, you saved me so much time.

One last thing, I cant seem to make the image zoom in slightly on hover like in the example website.
(https://astratelli.com/)

Kind regards,

[tristup]

Hi @brian_manning,

Great that it works now, on the other question you need to work with the transition effect on the image element, please find the URL on how to add this effect.

1. http://jsfiddle.net/0qhv7bdp/
2. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
3. https://css-tricks.com/zooming-background-images/

Please remember that we don’t offer any support or investigation on custom codes or related issues.
Thanks