When you create a new variant, most of the content is shared or Live-shared across all variants, but the size and position of that content is local to each variant.
When you create a new object - say a text area, photo or graphic, it's not initially shared between variants. If you want to share it use the "Utilities" > "Website variants" menu or just right click on it, and select "Website Variants" > "Share with all variants". Select "Stop sharing with variants" if you don't want an object to be shared across variants. This menu also gives you the option of deleting the object from all variants.
Similarly if you do not want an item on the page to be shared across all variants just un-select this same option.
This photo has a double line marker, top right, which indicates it's "Liveshared" on one or more variants. You can resize, crop and adjust the fill as required, and that will stay local to each variant. but if you swap the picture, say by dragging a new one on top, then all variants will change.
What's shared across variants, and what's not?
- If you edit the text it will be changed in all variants.
- If you change the size of objects the change will apply to one variant only (it's likely that you will want objects to have different positions and sizes on the different variants)
- If you drag and drop a photo onto an existing photo, it will be replaced in all variants.
- If you edited the shape of the photo or cropped it, or changed the fill (image size, rotation or position inside the picture frame) then these are local to each variant. This is useful because it means you can not only change the size and position of photos on the variants, but change their aspect ratio and image crop.
How do I change the text size within a particular variant?
It's often important that you use different sized text for small screen variants of your website because the screen it typically only two or three inches wide when held upright, the common way.
It's therefore possible to have the same content, but in a different Text Style for each variant. Just change the size of some text that's in a Style, say a section of the 'Normal' that is used on your body text. You can now update the Style definition of 'Normal' but just for this varaint. Do this by selecting the 'Update style in this variant' option from the Text Tool Style drop-down.
Are there any objects which cannot be shared accross variants?
Some effects like Extrusion, Bevel and widgets can't be shared for technical reasons; please see this list for all attributes that can't be shared:.
- Repeating objects
- LiveEffects (such as the Photoshop plugins)
- Navigation Bars
- Opacity mask groups
Technical note: If you have different variants of photos, say a different size, crop or fill position, then Xara has to create multiple versions of the photo for the published website. However this does not have a significant performance overhead (it doesn't slow down your website), as the web browser loads the correct version initially, and then, in the background, downloads the other variant images. So this means the initial version you're looking at (be in the mobile or desktop version) will always downloaded as fast as it can, but that if you do change your browser width or orientation, it will instantly switch to the other version.