I wish I could move the logo image of my site to point 0,0 in the browser window. A priori, this is not possible !? It’s really amazing because I thought we could make webResponsive with Wix. However, it is not the case.
I’m really annoyed that we can’t move an image with a function like moveto (x, y). I read somewhere that you have to request a new feature !? it’s still strange that you have to ask for such a basic functionality.
What does the community think about this?
Does anyone have a solution?
Let me specify: I tested the image in a container box, the image in a strip, the box in the strip … Nothing works.
If you’re a designer, you might find EditorX just what you’re looking for - responsive sites, pixel control, stunning graphics, awesome effects. To learn more, see The Editor X site .
thank you very much Yisrael
If I understand I can not go further with the current editor?
But is it easy to switch to editorX knowing that I actually have a premium plan?
I found an alternative solution:
I have placed the same image 5 times on my site then I make them invisible. Then I analyze the width of the screen and then I make the best placed image visible.
Which gives me a code like this: (I would have preferred to use a ‘switch case’ but I did not succeed!?).
wixWindow . getBoundingRect ()
. then ( ( windowSizeInfo ) => {
let largeur = windowSizeInfo . document . width ; // ex 1621 pour une réso de 1920*1080
if ( largeur >= 800 && largeur < 1100 ){ $w ( ‘#slogan2’ ). show ();}
if ( largeur >= 1100 && largeur < 1300 ){ $w ( ‘#slogan2’ ). show ();}
if ( largeur >= 1300 && largeur < 1400 ){ $w ( ‘#slogan1b’ ). show ();}
if ( largeur >= 1400 && largeur < 1600 ){ $w ( ‘#slogan1’ ). show ();}
if ( largeur >= 1600 ){ $w ( ‘#slogan0’ ). show ();}
});
I tried EditorX but the change is drastic and at the moment I’m fumbling. So I’m not going to risk breaking my site for the moment. I will first take a look at what the EditorX can do.
It doesn’t seem really obvious.
Thank you
Beautiful. Nice solution, and I understand you 100% about not wanting to retool with EditorX.
You can put the logo in a custom element and set it to be at location 0,0 (if you have a premium site).
Oh yes,
I have a premium site but how do I do what you say?
What do you call a custom item?
I’m excited to read your advice
Go to add embed > add a custom element to your page.
The choose select source > velo
It’ll create a custom-elements folder in you public files (on the site files on you left)
Create a file there (let’s name it 'logo.js).
Put the following code in this file:
class Logo extends HTMLElement {
connectedCallback() {
const container = document.createElement('div');
container.innerHTML = `<image src="https://static.wixstatic.com/media/43987a_31dff65c9b86445rwer4554~mv2.png"
style="position:absolute;left:0px;top:0px;width:50px;height:50px"/>`;
document.body.appendChild(container);
}
}
customElements.define('site-logo', Logo);
//change the size in red as you wish
Now go back to the page click on the custom element select Sorce > Velo > logo.js and tag name: site-logo
And that’s it. But it will be displayed as expected on live site only.
Thank you very much for all the advice.
I followed the instructions but must have made a mistake because it doesn’t work.
I created the integration element on a blank page of the site.
I successfully created the logo.js file with the code shown
// Filename: public/Logo.js
class Logo extends HTMLElement {
connectedCallback() {
const container = document.createElement('div');
container.innerHTML = `<image src="https://static.wixstatic.com/media/5db838_c5fb00a18fed4bf9821857b042253e6a~mv2.png"
style="position:absolute;left:0px;top:0px;width:70px;height:50px"/>`;
document.body.appendChild(container);
}
}
customElements.define('site-logo', Logo);
I published the site,
But the image that appears in editing does not appear on the published site.
Sorry but where did I go wrong?
Thank you for your help because I feel this is the right track.
I used your code on my site and it works
So I can’t tell you why it does not work for you.
Did you put the custom elements in the header (so it’ll be global and show up on all the pages?
I have a premium plan but have not yet connected it to a domain; It seems like this is essential for it to work.
Yes. It must be connected to a domain.
By the way, instead of using custom element, you can also use the D ashborad > Settings > custom code
and put there:
<image src="https://static.wixstatic.com/media/your-image.png" style="position:absolute;left:0px;top:0px;width:70px;height:50px"/>
In the begging of the body apply to all pages.
But you may need a domain as well.
The difference is that custom element is better for SEO (I think).
Also that with custom element you can interact with the page velo code.
Thank you very much for this invaluable help.
I tested with a premium site connected to a domain name.
The image appears stealthily as if it were in the background of my header !? So I also tested on the body, but the image does not appear more?
Should I indicate the name of the image in the source or its url?
OR
thank you for your help
-
Image URL
-
If you’re using custom element as above, it’ll make more sense to move some of the image styling to the container div instead (even though it should work anyway). Like:
container.style.position = 'absolute';
container.style.left = '0px';
container.style.left = '0px';
Make sure to have the custom element in the header (if you wish it to be global).
Make sure the custom element is connected to the logo.js file.
And if you’re using Custom Code and not custom element, try to see if moving it to the end of the body solves the problem.
Yes indeed, when I move the Custom code to the end of the body it solves the problem and it works fine.
This allows me to place my logo in the header at point x, y 0,0. It’s perfect.
In the same vein, would it be possible to add an image to the left of the footer ?
Sure. You can try ( end of the body ):
<script>
(function() {
const img = document.createElement('image');
img.src = 'some-url.png';
img.style.position = 'absolute';
img.style.left = '0px';
img.style.bottom = '0px';//or add some pixels if you wish
try {
const footer = document.querySelector('footer');
if(footer){
footer.appendChild(img);
}
} catch(err){console.log(err);}
})();
</script>