WebSite X5Help Center

 
Mandar V.
Mandar V.
User

Different layout required by client.  en

Auteur : Mandar V.
Visité 1312, Followers 1, Partagé 0  

My client is an architect firm, active since last 30 years in India. Client has suggested me following website;

Please visit : https://coffeyarchitects.com/

On Home page, only slideshow or video is required. At the bottom, there should be a scroll down button, then onwards menu and the entire website should appear on screen. 

Please suggest me how to to it using WX5 V20.3.

Regards

Mandar

Posté le
28 RéPONSES - 11 UTILE
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

WSX5 has no dynamic responsive design!

It has only fixed breakpoints where the objects are placed below when a width is reached.

Lire plus
Posté le de Andreas S.
Mandar V.
Mandar V.
User
Auteur

Thank you Andreas S.

Lets wait for the openion of the other experts as well. Last time, they suggested my a proper way to build a website as per requirement of client. 

Regards

Mandar

Lire plus
Posté le de Mandar V.
John S.
John S.
User

Hello Mandar

I have an old X5 example here: http://eksempelsite.dk/sparta02/index.html

The background image could as well be a video. The background could also be "full" and with a text or an image like in this example: http://eksempelsite.dk/sparta/index.html

If the background is covered with a full transparent png-image the the scaling for the image/video would be seamless.

You make it with a menu on the page and then make this menu sticky by code.

Lire plus
Posté le de John S.
Axel  
Axel  
User

@ John,

Can you share your project... ?? smile This idea is very interesting for new design

Enjoy!
Axel

Lire plus
Posté le de Axel  
John S.
John S.
User

On this page : https://www.bramminginfo.dk/ribe-vikingecenter.html much the same is made.

Look in the upper right corner. Here you will see a hamburger that is not in top of the page. As the page is scrolled the hamburger scrolls up until it reaches the top where it gets sticky.

The menu object is #imCell_7 

So the code to make it sticky is this:

#imCell_7 {
position: sticky;
width: 100%;
height: 50px;
top: 0px;
z-index: 10400;
}

I need the other settings but only the "position: sticky;"  is required to do the job.

If you place objects above the menu, then you will see the objects scroll up and then disappear - except the menu (#imCell_7 ) as it is made sticky when it reaches the top.

Lire plus
Posté le de John S.
Mandar V.
Mandar V.
User
Auteur

Thanks John S.

I'll surely follow you.

And as Axel's request, it will be really a great pleasure if you could share a project. So that we could learn a bit from it; and not to copy it as it is. 

Thanks with regards

Mandar

Lire plus
Posté le de Mandar V.
John S.
John S.
User

I am not sure I still have the project. But I could rather easy make a new example. I think it will be easier than digging in old computers/backups - only to find it is not there.

But - if you think Andreas's realestate example is better, then I will not spend time on a new example.

Lire plus
Posté le de John S.
John S.
John S.
User

I will then start a new example. I will then post a link here in the thread and if someone think the result could be useful, I will make it available for download.

Stay tuned.

Lire plus
Posté le de John S.
Axel  
Axel  
User

awesome John ! wink

thks

Lire plus
Posté le de Axel  
Mandar V.
Mandar V.
User
Auteur

Thanks Axel, John S. & Andreas S.

Please visit my older issue :

https://helpcenter.websitex5.com/fr/post/227885

Thanks to Antal Z., who provided a proper solution to my problem. Without Antal's guidance this task was as good as impossible to me. And using his guidance, I created this website : https://studioculus.in/

Client is very much happy with the result. I accepted it as a challenge and not a profit making project. because of this happy client, I received more inquiries from that segment. 

Looking forward for Axel's helping hand. 

Thank you once again. 

Mandar Vaidya

https://www.mandarvaidya.com

Lire plus
Posté le de Mandar V.
John S.
John S.
User

Here is a new example made with the newest version of X5 PRO.

If it is of interest I will make it available for download.

Lire plus
Posté le de John S.
Mandar V.
Mandar V.
User
Auteur

Thanks John S.

I'm using WX5 2020.3 at present. Sorry for your inconvenience and thank you once again for your helping hand. 

Regards

Mandar

Lire plus
Posté le de Mandar V.
Mandar V.
Mandar V.
User
Auteur

Oh my... 

In your design, I'm appearing as a part of nature. Thank you once again. 

Thanks John S.

How to download this project? 

Regards

Mandar

Lire plus
Posté le de Mandar V.
Axel  
Axel  
User

Yes John agree also to get it

Lire plus
Posté le de Axel  
Axel  
Axel  
User

Nice John, I wil check later because I am into v2021.3.3 and not .4 yet wink

thks

Lire plus
Posté le de Axel  
John S.
John S.
User

I had to go to .4 - the search did not function for bigger projects in .3

Lire plus
Posté le de John S.
Axel  
Axel  
User

which search in step 3... in 2021.3.3 no search ?

Lire plus
Posté le de Axel  
John S.
John S.
User

It was the site-search. For larger projects it simply was working on it - and then it always showed a blank search result.

It was solved in v. 2021.3.4.

But even if INCO tells that the search is now quicker, I am not impressed. Google search millions and millions of sites in fractions of seconds. X5 searches ONE site in more seconds. OK - I know Google uses more than one serverlaughing

Lire plus
Posté le de John S.
Mandar V.
Mandar V.
User
Auteur

Thanks John S.

At present I'm using WX5 V2020.3, so unable to open & use it. 

Is there any solution to save this project to a lower version?

Thanks again.

Mandar

Lire plus
Posté le de Mandar V.
John S.
John S.
User

I cannot save in lower version - I would then have to make it again in a previous version, and I don't want to make it again again.

I will not have the time for it today, but for those that are interested and is unable to go to the latest version, or does not have a PRO version, I will on one or more pages in the project, tell in details how to do.

The only special thing that is made, is this: position: sticky;

Lire plus
Posté le de John S.
Mandar V.
Mandar V.
User
Auteur

Thank you dear John S.

Whatever you have done is a great pleasure for me. Don't want to trouble you any more. 

Regards

Mandar

Lire plus
Posté le de Mandar V.
Axel  
Axel  
User

@John,

Just tested with 2021.3.4.

Great job to understand mecanism.

Thanks

Enjoy!
Axel

Lire plus
Posté le de Axel  
Axel  
Axel  
User

@John,

I try to other website, and the png picture over the background is not displayed like a png !!!!! and it is yours png file

Any idea... I cannot find the setting 

Thanks for your help

Axel

Lire plus
Posté le de Axel  
Axel  
Axel  
User

Found... wink

Lire plus
Posté le de Axel