Creating a homepage similar to Outsystems

Creating a homepage similar to Outsystems

  

Hi there,

I want to build a landing page similar to the Outsystems homepage. In terms of being able to scroll down on one page and the how to make the custom layout. For instance how to make the background cover the whole page. Also how will I link certain parts of the screen with the menu...

Hello Werner,

1. Background cover the page: through CSS. (ex: https://www.w3schools.com/howto/howto_css_full_page.asp)

2. Menus linking to parts of the page.
This is more trick, as the normal would be to use ID, but the menu is a web block, usually in the Application's Theme module, and the pages are in the upward levels (in the canvas).

A way to do that would be to create input parameters in the menu and pass the ID's of the elements to where navigate (in the page, like the active menu) and in the menu link use the #id.

Another way would be using javascript, selecting the element through a class (defined in the element), and moving the page to this place.

From the top of my head those two ways are the ones I remember...

Cheers.

Hi Werner,

For the layout with images, I think the Silk UI landing pages are quite accurate.

Did you take a look here? They're downloadable.

For the anchors, as Eduardo say's, it's more tricky. Perhaps looking at the silk pattern Section Index can give you a glimpse on how it is achieved. It's that left area on this page and section index is available on WebPatterns

Cheers,

The section Index is nice, but I think the problem is the same if you pretend to put the section in the menu (in the Silk UI page it is in the page itself)

Cheers.

Yes, you're right. But the Id's won't be rendered yet to have an Id to pass to the input parameter on the menu (I think, didn't test it). You can always go to a simple javascript solution as Eduardo said, jQuery has functions to do that.

Or you could use anchors with the name attribute instead of the element Id, It seems that links don't have that attribute since HTML5, but hey're still applicable to any other element though.



Henrique Batista wrote:

Yes, you're right. But the Id's won't be rendered yet to have an Id to pass to the input parameter on the menu (I think, didn't test it). You can always go to a simple javascript solution as Eduardo said, jQuery has functions to do that.

Or you could use anchors with the name attribute instead of the element Id, It seems that links don't have that attribute since HTML5, but hey're still applicable to any other element though.



About the ID's. Duh!!!! Completely true :)
Unless you put the menu in the end of the page and use CSS to put it back to the top... (too fancy, no? rs)

And as you can add an Extended Property with a personalized Name, it is also a nice way to solve the problem :)