Updated tutorial on Cornerstone basics

[iamwithU]

Do you have any tutorial & video on using your new Cornerstone workspace?

In the past, I see a dotted box on the Preview pane, & I can just drag an element & drop into the box. Now when I click a new section, row or column, the dotted box doesn’t appear, but a blue box does. Then when I go to the left Editor pane (say, to choose an image Element), the blue box disappears. When I drag the image Element onto the empty preview area, I don’t see any result. I’m not sure if the image has landed onto the column, row or section. I don’t know if this is because my Preview pane is black.

So my difficulty is the disconnect each time my cursor moves from the right Preview pane to the left Editor pane. And not being able to see where my new Elements are in the Preview pane.

Any help or tips will be appreciated.

[Prasant]

Hello @iamwithU,

Thanks for asking.

You can take a look at the following KB article for Cornerstone tutorial. Article was last updated on 25 April 2018. I you are looking for most recent Cornerstone, then I can forward the request to concern department for them to take a look. However, please note that the fundamental concepts remains same. For more in-depth tutorials you can also take a look at videos published on YouTube. That being said please make sure that you are using the most recent version of Cornerstone and X Theme to avoid any potential conflicts.

Adding Elements | Themeco Docs

https://www.youtube.com/results?search_query=themeco+cornerstone

Thanks.

[iamwithU]

I take it that the answer is no then. Yes, I’d appreciate it if you could ask the concerned department if my difficulty is because of the black background on my screen. I have a black Preview area. Is this why I experience the disconnect each time I move from the Preview to the Editor pane?

[mldarshana]

Hi There @iamwithU

Could you please provide us with a screenshot of your issue, so that we can assist you accordingly.

We have a separate guide on troubleshooting builder preview issues which you can see it from here.

Let us know with more details.
Thanks!

[iamwithU]

Hi, as prudently suggested, I enclose my screenshots as follows:

Screenshot A: I add a new Section.

Screenshot B: My cursor moves to the Preview pane & I select the Section, because I like to say, add an Image element into the Section. A blue box appears. No dotted box, which I used to see in the old Cornerstone. (Same thing if I were to choose a row or column - no dotted box).

Screenshot C: My cursor moves to the Editor pane as I intend to choose an Element. The blue box disappears. Still no dotted box.

Screenshot D: I have chosen & dragged an Element and dropped into the Preview pane. Nothing shows up. I don’t know where my Element has landed - is it in the column, row or section?

Screenshot E: I click the Editor pane and the Editor pane shows I’m inspecting the Image element which I’ve dropped into the Preview pane. But I don’t see anything on the Editor pane.

As you can see, there is a disconnect when I move from the Preview to the Editor pane. Is it because my Preview pane has a black background, thus blocking me from seeing what I’m editing?

After adding a few more Elements into the Preview pane, I now can’t find the Image element, which I had earlier dropped.

By the way, if i made a mistake, and want to remove an Element, say the “Learn More” Button, how do I do it?

[ruenel]

Hello There,

The dotted box is not visible because you have a black background color. Try changing the background color to white and see how it goes.

By the way, I would highly recommend that you use the skeleton mode when editing for faster response and easy access of all the elements in the preview area. This is also helpful especially if one of the sections or elements is not visible or hidden in selected screen size or you may have applied visibility options to a section of element.

And to delete your learn more button or any element that you have added on the page, simply select the element and find the “Erase” button in the element settings on the left side pane.

Hope this helps.

[iamwithU]

Thanks ReuNel. Yes, the skeleton mode is really helpful.

I reversed my screen color to get a white color but I still can’t get the dotted box to be visible

Anyway, i have designed several web pages with the old Cornerstone and it’s too laborious to change my background color at this stage. Could you kindly convey to the relevant department that their new Cornerstone look is creating a big problem for people who have a black background?

[Prasant]

Hello @iamwithU,

Thanks for updating the thread.

I tested what you have communicated on my local setup and dotted box is showing up on my end. Please see the screenshot.

Can you please share your login details in a secure note for us to test the problem you are facing?

Thanks.