Recreating Gym theme & homepage elements

Support
#1

Hi there,
I’m new to X Theme and Cornerstone, and after a few days of use, I’m still rather frustrated with my slow progress.
I’m familiar with coding sites, but struggling to start with even the basics using this UX.
I’ve set up a demo site and installed the Gym demo content. I usually find that’s a very quick way of learning how to use a WP theme, by looking at a demo site and seeing how it’s built.
However, after setting up the demo site, and looking at elements, on the homepage for instance, I’m still struggling to recreate elements from this demo site on my live site.
For instance, the ‘Classic Creative CTA’ element on the gym site with the parallax image background. Even after inspecting this in the demo site, I do not know how to recreate this on my site.

  1. If this is not the best way to learn Theme X and Cornerstone, what is? Unsure where to start.
  2. As an example, please explain how to recreate the below ‘Classic Creative CTA’ element:
    https://www.dropbox.com/s/1rpg3r6luol6q9j/Screenshot%202018-03-19%2018.56.08.png?dl=0
    Unsure how to recreate this element on my site. How do I create the parallax element? And the CTA with the transparent background? Seems like a basic thing, but my content is quite different:
    The demo site seems to have completely different settings to my live site, so there are some basics that I am clearly missing completely.
    On the demo site, when I click on the Column or Row level, the ‘Classic Element’ settings are visible, but not in my site. I get a different set of options. even though I’ve added the ‘Classic Creative CTA’ element.
  3. Are there any instructions anywhere that describes how to recreate any of your demo sites? As it’s not apparent how to build a demo theme from simply looking at the demo theme, that would be extremely useful!
    I originally included several more screenshots to explain the above in more detail, but unable to add more than one image as a New user?
    My live site:
    http://peakperformance365.com
#2

Hi there,

The demo items were released prior the the X 5 update so if you import them, in the most recent version of X and Cornerstone, you would be getting the Classic elements which has less options than the v2 elements.

For example the gym demo, if you try to import the demo locally, you will see that the section where the background is set have limit options compared to the sections that you will create manually in Cornerstone, thought replicating it in the v2 section element is still quite easy and straightforward.

You can simply create a new section, go to section settings, click on Advanced for the background options then set the background image to either the lower or upper layer then enable the parallax option to the layer where you set the background.

Once you had the section setup, you can then add a Classic Creative CTA element in the section. For the classic CTA element options, set 10% padding to all sides, set the text content and the text size of the CTA, select image as the graphic then set the image to it. Set the image width and set the background colors.

That should give you the same view as the CTA section in the demo content.

Normally, it is pretty easy to recreate the sections in the demo content as long as they are not heavily customized just like the CTA section of the gym demo but it would be a big plus if you know all the options in Cornerstone and you know how to inspect the code through the browser’s inspect element feature.

Also, if you want to replicate the demo contents but you do not want to import it on your live site, you can setup wordpress locally and have the import there. You can then explore in Cornerstone the settings of the elements.

As for learning Cornerstone more, it would be best go over our knowledge based as it has an ample of resources that for X and Cornerstone.


#3

Hi Jade, thanks for that.

Yes, I have actually set it up as you describe, but have a couple of sticking points.

In my example, the background to the element is red, not transparent, so I do not see the parallax image? Even though it is set on

Unsure where that red background is set? From the CSS, looks like it is set as the background-color on the CTA element? But I have only set it as the roll-over on the CTA element?

On the parallax image, how do you control the amount of parallax scroll? e.g. I want the image to remain static, like in the demo, as the page scrolls. My image scrolls with the page, so you do not see a lot of the image. Can not see where that setting is?

#4

Hi there,

Please kindly get back to us with the URL/User/Pass and the name of the page in question to check the case and see why there is a red background. You can give the information using the Secure Note.

I suggest that you check the Column, Row and Section settings and make sure there is no red background set in each section (Click on the magnifying glass icon):

Thank you.

#5

As a test, I added the same CTA element to another site and it also added the red background as soon as I added the element.

So you should be able to recreate the issue with any install.

#6

Also, how do you control the size of the parallax image? I want it 100% width, but at the moment, it is controlled (i.e. size varies) by the height of the browser window.

#7

Hi There,

To remove the red background please add the following CSS to Theme Options CSS

.x-creative-cta, .x-creative-cta:hover {
    background: none !Important;
}

You cannot control the size of parallax using a classic section, if you add a new section it will be a V2 Section which will offer certain range of control on parallax size.

Hope it helps

#8

Thanks for that.

  1. So, a ‘V2 Section’ is any of the ‘new’ types of element, which are listed above the ‘Classic Elements’? Such as the ‘Content Area’ element?

  2. It seems when I use a ‘Classic Section’ with a parallax background, the background image is fixed in position

but with the V2 elements, the image scrolls? Any way to fix the background image with a V2 element?

  1. Is there an equivalent ‘CTA element’ in the V2 elements?

  2. Where can I find a description of all these ‘V2 elements’ and how to use them?

#9

Hi,

  1. That’s correct

  2. Try to increase Lower Layer Size

  1. There is no V2 equivalent as of the moment.

  2. You can check under Elements in our KB - https://theme.co/apex/forum/t/knowledge-base-overview/287

Thanks

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.