Atelier homepage design

[NiO]

Hi,
I would like to make a homepage and in order to explain it clearly I have added an image that comes close :-). Only thing really different is that my heading will be a normal white heading with logo (number 3 or 4 ). So I would like the body of the page to have the image, to have blocks (with links to pages of my website) on the bottom and text in the center. It needs to be screen filling (wide + row) and responsive. I tried with the SPB content, rows with rows, icon boxes, spacer etc. But I cannot seem to find the deal. Neither on swift slider. Also tried with Rev slider.
Is there any way I can get this? I have looked on your demos, cannot seem to find the same example, neither in fora or documentation. Sorry if the question has already been asked. Thanks.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

The closest you would get is by using the animated icon boxes on top of a row with an image background. Then set ‘remove element spacing’ in the row settings to yes

– Kyle

[NiO]

Hi Kyle, thanks for your answer.
I tried that but I cannot seem to get the icon boxes in the right place. If i remove element spacing from the row, they are nicely next to each other correct. But the icon boxes will be on top? here is a quick example: http://www.vosformation.ch/test-for-swiftideas/
I cannot seem to tell the icon box to go to the bottom of the image…..

[Kyle – SUPPORT]

I need to be logged in to see that page

– Kyle

[NiO]

This reply has been marked as private.

[Kyle – SUPPORT]

I don’t see the icon boxes?

– Kyle

[NiO]

Are you in the test page or homepage?? You should be in test-for-swiftideas… Homepage is a rev slider test. There is no menu assigned dot test-for-swiftideas page btw.

[Kyle – SUPPORT]

Can you please provide admin access to I can edit it for you

– Kyle

[NiO]

the one i gave you is the admin code

[Kyle – SUPPORT]

When you add content on top of the icon boxed (like the text on that image) the icon boxes will move down

– Kyle

[NiO]

Yes of course. But i want them to be on the bottom of the row. Always, not matter what size screen. So if I add spacers, it might be fine on my screen but not anymore when you size up or down. So there needs to be align at bottom indicator if this solution should work.

[Kyle – SUPPORT]

Will the row be the only thing on the page?

– Kyle

[NiO]

Yes, aside from header and maybe footer. Inside the body this will be the only thing.

[Kyle – SUPPORT]

Add this to your custom css:

.bottom-icon {
  position: relative;
  top: 90%;
  transform: translateY(-90%);
}

– Kyle

[NiO]

I thought it worked, and in terms of putting an icon box down it does, but the problem is that it only works on big screens. If you go into develop mode and look at a laptop screen around 1366×736 px it is actually not a window height but it becomes a “two page”. you need to scroll down to see the icon boxes. Which in my logic is not normal whilst i defines window height. Meaning it should adapt. It is not even the image that is giving the problem, whilst the image seems relatively fulls screen. It is really the icon boxes that move away from the window height.
If you like you can log in. If adapted the page, you can now see the icon boxes on the bottom, but set your screen to the px mentioned above you should see my concern.