A Rare Beast

[Acorn]

Xara, actually publishing a site using Web Designer Plus: https://webdesigner.xara.com/.
It is fairly pleasing to see Xara using its own products.

Following the associated product link, we go into a non-XDA design. I automatically adopted a compare & contrast mode:

• I was especially intrigued with this section: https://www.xara.com/webdesigner-plu...html#c-3-26271.
  I'd love a detailed explanation as it suggests the XaraAPI is available for all (image) & we can readily animate with GIFs.
  I am confused with the prior page's assertion, "Website made using only Xara Web Designer+, and no other graphics or software tools."
  It is not clear that this is a sleight of hand.
• The other is the Slick Slider: https://www.xara.com/webdesigner-plu...html#c-6-26271.
  I've never seen a features list activating a slider image before so I have to assume this is not an XDA feature either.

Most might not notice the transition and the page should come with an appropriate caveat.

Acorn

[Chris M]

The site also says that Web Blocks are fully customisable. I tried two different blocks, failed miserably, and gave up.

I also tried the video backgrounds for the first time...didn't work on iPhones.

I'm becoming more disillusioned as time goes by.

[Chris M]

Just in case anyone wants the video background to work on iPhones...and I'm presuming all the backgrounds have the same code.

Unlock the Pasteboard, select the misspelled Video Container placeholder and: Utilities > Web Properties > Placeholder (tab) > HTML code (body) and add the word 'playsinline' anywhere between <video and id= (top line should look like - <video autoplay loop muted preload playsinline id="bgvid">

Credit to my new friend ChatGPT.

[Acorn]

Just in case anyone wants the video background to work on iPhones...and I'm presuming all the backgrounds have the same code.

Unlock the Pasteboard, select the misspelled Video Container placeholder and: Utilities > Web Properties > Placeholder (tab) > HTML code (body) and add the word 'playsinline' anywhere between <video and id= (top line should look like - <video autoplay loop muted preload playsinline id="bgvid">

Credit to my new friend ChatGPT.

Chris, don't be so nit-picky, that's my job.

The typo's a hoot but try and add the video background into your Variant, that's a whole different level of fun.

Do be careful when editing the VC as it has a Group, a Text line and a rectangle, all with the Placeholder code separate for each component.
In the past, with this set-up, I have mistakenly selected only one, made a change and then spent ages trying to unpick my goof.

When I added into a Variant, the CSS fails to detect the page width is actually no longer Main's so it is no longer centred.

Ah well.

Acorn

[Acorn]

I did cover (pun) a 'better' method in https://www.talkgraphics.com/showthr...dth-of-Webpage for Hero images.

Easy to alter for full page cover, to:

<style>
video#bgvid {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: 50% 50%;
}
.hide { visibility: hidden; z-index: -20; }
</style>

With no vendor prefix, you still get 96% browser coverage; with is just over 97%.
If using in a Variant (please don't), add back in the terser transform: translate(-50%);.

@Xara - Still looking for the explanation for and use of the ClassName hide.

Acorn

[handrawn]

trouble is acorn, for quite a while now xara have majored on letting people 'create' stuff without having to think about it; would they, the users, even notice; are you just expecting too much

[Acorn]

trouble is acorn, for quite a while now xara have majored on letting people 'create' stuff without having to think about it; would they, the users, even notice; are you just expecting too much

but if a job is worth doing, know all about it, explain it and implement it. Not much to ask.

Acorn

[handrawn]

have you looked at the rough edges of the programs lately, all the bugs and stuff?; yes, I know you have: rhetoric

so really, what do we expect ?

[Initiostar]

I had a play with the Xara Video Container - loaded it to a Desktop 1280px, created a mobile variant 640px (and the placeholder was SHARED), set Export Scale-to-Fit-Width. All looks OK with the video centred through the transition from Desktop to Mobile.

https://initiostar.co.uk/demo/Vid-Container/ I too did not see an immediate need for the Class Name "hide"

A point maybe worth a mention, is where a designer wants an initial full page video to scroll with other content, "fixed" can be replaced "absolute" >> e.g. https://initiostar.co.uk/demo/Video/fullwidthscroll.htm

On the made with Xara website, the horizontal feature is I assume coded, something like this? https://webmadewell.com/background-i...-as-scrolling/ - would be great to have a Xara equivalent.

[Acorn]

I had a play with the Xara Video Container - loaded it to a Desktop 1280px, created a mobile variant 640px (and the placeholder was SHARED), set Export Scale-to-Fit-Width. All looks OK with the video centred through the transition from Desktop to Mobile.

https://initiostar.co.uk/demo/Vid-Container/ I too did not see an immediate need for the Class Name "hide"

A point maybe worth a mention, is where a designer wants an initial full page video to scroll with other content, "fixed" can be replaced "absolute" >> e.g. https://initiostar.co.uk/demo/Video/fullwidthscroll.htm

On the made with Xara website, the horizontal feature is I assume coded, something like this? https://webmadewell.com/background-i...-as-scrolling/ - would be great to have a Xara equivalent.

Thank you Gary, I was trying within a Blocks design. It just seems a shame we have to deconstruct Xara offerings to understand what's happening and to then mod them to work.

Acorn