I would like to add black lines to my grid so they adjust responsively, how would I do this?

Ask the community
2

  1. Add your horizontal and vertical lines inside the grid –doesn’t matter where exactly for now, just inside the grid– dragging them from the Add Panel (+) . Make sure to add horizontal lines and vertical lines –for obvious as it may seem– instead of just one type and turning either of them 90° to switch (because results aren’t as easy).

  2. Dock your horizontal lines up and your vertical lines left .

  3. Resize them: you can do either

  4. Stretch them to dock them fully, or

  5. Set their width (for horizontal ) or height (for vertical ) to 100%

  6. Make sure they have zero margins to every dock direction.
    You’ll want your grid lines adjusted as follows:

GRID AREA
    COLUMN    ROW
    1    5    2    3    Horz Line 1
    1    5    3    4    Horz Line 2
    1    5    4    5    Horz Line 3
    
    2    3    1    4    Vert Line 1
    3    4    1    4    Vert Line 2
    4    5    1    4    Vert Line 3

*Note: this ain’t no Velo code –so don’t u dare even opening the DevMode for this– but a way I’ve came up to sort of write a table here

Listen, don’t… take this the wrong way, but this is very basic knowledge to have in order to start working with EditorX; so I’m assuming you’re new here (nvm me if i’m wrong). It’s alright, it can be a bit intimidating at first since it’s very different from the classic WiX editor’s structure; but I do recommend you to check the AcademyX first and check for some lessons as for to work with Grids and Dockings, for it’ll bump up your speed and your confindence when working with your responsive sites saving you considerable time.

Some considerations before finishing:

  • For the table above, I assumed the (2nd) image shows the entire grid but I’m afraid it only shows just the top part of it, so the vertical lines may show incomplete

  • I’m also not sure if you have set vertical GAPS for the grid or they are just additional smaller rows (tho gaps are most likely), nor do I know the dimensions of those gaps/rows, which –if on the 2nd case– will change your GRID AREA settings for your vertical lines to fill the grid

  • The pink border of your 2nd image drives me to think of a padding, yet your desired lines shown there go up and beyond this possible padding; if that’s so, then your lines’ margins’ll need to be the same module and unit as your padding but negative (p. ej. -20px or -5%)

so… pls try 2 b more specific on your next doubts

Oh, and pls insert images instead of uploading them as ordinary files next time tho (bcs i couldn’t download the 1st image and hence possibly my doubts)

Sorry for the so loong answer. Pardon my English as well.

3

Hi @ricardoherrera994

Thank you for your insight. I have built a few sites on the original Wix but because this will be a personal portfolio project I wanted to try something different on Editor X and I spoke to a Web Developer that we hire at my Advertising Agency and he told me what I want to do will need coding which I don’t know much about at all.

What I really want to do I saw an advert on youtube for Editor X but was informed by the people at Editor X that it is not available yet and I was trying to figure a way around it, as I really like and want the design. (I will attach a screenshot of what I saw, maybe you know a little bit about it and I would appreciate any help on it)

Here is the link to the video as well https://www.youtube.com/watch?v=sOugT0lv9LI
It starts around 32 seconds what I am trying to achieve.

Thank you again for replying and I look forward to any more knowledge you can offer me.

Sam

3396×1888 440 KB

4

Hi @ricardoherrera994

Thank you for your insight. I have built a few sites on the original Wix but because this will be a personal portfolio project I wanted to try something different on Editor X and I spoke to a Web Developer that we hire at my Advertising Agency and he told me what I want to do will need coding which I don’t know much about at all.

What I really want to do I saw an advert on youtube for Editor X but was informed by the people at Editor X that it is not available yet and I was trying to figure a way around it, as I really like and want the design. (I will attach a screenshot of what I saw, maybe you know a little bit about it and I would appreciate any help on it)

Here is the link to the video as well https://www.youtube.com/watch?v=sOugT0lv9LI
It starts around 32 seconds what I am trying to achieve.

Thank you again for replying and I look forward to any more knowledge you can offer me.

Sam

3396×1888 440 KB

5

Hi @amsacreative00
I think it’d be better if I try 2 clear some things out:

• If you’re trying 2 achieve the VISUAL ASPECT from 0:32 of the video –or, basically, the web example you attached on the image (hey thanx for dat)– you actually don’t need code ; there isn’t a single way to achieve –not that there are many either, I can think of 2 right now– but this can be achieved using Grids , Repeaters , Layouters or a combination of both.

• Interesting point: if you check at 0:36 , they are using the Content Manager in order for the Gallery (or the Repeater) to display text & image data from a custom database; that’s also very interesting since it has its advantages, for example the ability to tag items and the possibility to upload new images directly from the site’s manager (without opening the editor) and instantly on the live site.

• If what you’re trying 2 achieve is also the Interactive Animations from 0:45 of the same video then… that’s an OOPSIE bcs… errm, you’d need code there indeed, but lemme explain you with a Beautiful Fable (ok just kidding sorry)
You see, those are the so-called –and so-expected– Interactions : the functions of displaying certain animations and changes at the page triggered by the visitor’s actions (like mouse click or hover as seen in the video).

This video in fact was a Feature Presentation for the EditorX 's Unstoppable Event and its intention (of that fragment at least) was to give a preview of how Interactions would work; you can see more of it live if you watch the event.
UNFORTUNATELY Interactions, eventhough they ARE indeed in the roadmap (see Coming Soon ) AREN’T available yet –nor do it seems they will be in a near future although they were planned for this February moved on.

So it is currently possible but not manually as expected with future Interactions; currently the way to achieve this is through Velo , turning it on from Dev Mode menu within the EditorX. It’s actually simpler than you may think, although a little repetitive, but it does take some time. I am not describing the whole process here cuz I’m yet not sure that’s what you were looking for –nor the code bcs it must adapt to your needs and your special items– but if that is the case I could also help you there (not a Velo Expert here, but’ve made my way with the basic functions somehow).

But then again as I tell u the grid design is actually achievable manually through the composition tools EditorX already offers u from the Add Pannel (+).

Now, if you feel a bit lost around any of those and you feel like I could help u actually I’d be glad to. I’ve come up with some ideas of how we could drive that through:

  • You could describe me the design you need –based on the example you gave, bcs I don’t know if what you have in mind is identical or just similar– and in this post I could describe you the process through screenshots (although that’ll be looong i’m fearing, hehe); if that doesn’t work,

  • We might have a chat online through a messenger and I might guide you through while you’re in the EditorX and sending me screenshots of what and how’ve you’ve achieved so we can do the next move 'til you’re satisfied enough with the resulting layout, or even (althoug a bit more dared)

  • You might grant me the role of website designer from the Roles Panel, I could give you my e-mail adress and you’d send me there the invitation so I –as designer– would be able to do the changes myself. Of course, you’d be trusting me (a stranger for you) part of your project, but

  • I shall promiste to treat it with respect and reward your confidence

  • Roles are limited, so I could actually do no more than make changes to the design and layout; no content nor the site itself would be in danger and you always keep the control of the project

  • Roles aren’t permanent so, once I made the style changes you’d be happy with, you can deactivate my account role as part of the project (“kick me out”, so to speak)

  • …Or you could try out both the EditorX and the AcademyX and try by yourself while you ask me specific doubts if you prefer

Anyway, although I can’t –nor want to– compromise to design the whole project or accept an amount of graphic work I’m yet not sure I could accomplish, I let u know I do openly have the disposition to help and (no fees btw no worries) dunno, let me know what you decide from the above, or some other way I may help u that you have in mind.

I … I’m also sorry for the, heh (chale) I just re-read my first answer to your post and it may have sound a bit passive-agressive so, I apologize for that :’
Sorry also for the loooooongest posts; I’m this close to be known in this Community (if any) for my lithanies :"
Have a good day

6

Hi @ricardoherrera994

Again thank you for this in-depth response, it’s really appreciated.

To cut a long story short yeah, the Interactive Animations from 0:45 of the same video is exactly what I was attracted to and what I wanted to implement into my design as a sort of dropdown portfolio view.

So when it comes to Web it’s a little confusing for me, I know what I want, just not how to build it haha. If you’re a web developer and would know how to do this as you say in Velo then I would be more than happy to exchange emails and take it from there, now if this was something you could help me with, I wouldn’t allow you to do it for free because as a designer I know how valuable personal time is, even if it’s enough for a few coffees :slight_smile: I would pay something.

Sam

7

:flushed: well this is where’d do good to have a Wix private chat or somethn’, right?
heh :sweat_smile: email me at ricardoherrer@outlook.com or you can send me there an invitation to collaborate as web designer from your site’s Roles Panel

…or, could i ask for yours perhaps?

8