Getting Started w X

I think I overestimated my ability, because I’m having trouble accomplishing even the basics with X theme. Thought it would be easy to mimic the X theme demo, but I can even get my first image to be full screen. I’ve ended up with
.

Where do I go in my dashboard to get rid of all the circles, make the image full screen, and have the caption, “You are invested…” float on the image?

Thanks for help getting me rolling!
David

Hello @2communicate,

Thanks for asking. :slight_smile:

Actually the image is using all the available space on the canvas. If you would like the image to be fullscreen, you will have to change the layout either of the section or the page depending on the requirement. This is the current layout.

You might have to change to this layout.

However, please note that it will break the flow of layout and things won’t look good. My suggestion would be to use the current layout and play with the style to see which layout meets your requirement.

To learn more about X Theme and Cornerstone, please take a look at KB resources.

Thanks.

Thanks for your reply, Prasant. I couldn’t find any place that resembled your screenshots of where to change the layout.

How do I get there?

Thanks.
David

Found it! The layout currently has two side by side elements. Is there a way for me to have just one element (the photo), by removing the text element, or superimposing the text element on a full screen image of the photo?
Thanks.
David

Hello @2communicate,

Thanks for updating the thread.

Yes, you can change the layout. I suggest you to add a new section and more one of the element to new section and change the layout of previous section accordingly. To help you get started, I have recorded a screencast, please take a look. To move the elements, I have used the Skeleton mode as it’s quite easy to move elements in Skeleton mode.

Thanks.

Prasant, I’m afraid I need a little more hand holding. Using Cornerstone, I am looking at Row 1, which is currently “Timeline: Image Right”. What I want is one full screen image (the photo of the city) with the caption super imposed on it.

Am I best off, outside of WP, (Photoshop) making the caption actually part of the image, or would be be better to keep the caption a separate element (for example, so it can resize more effectively on different devices), and superimpose it on top of the full screen image?

Once we answer that question, then I need help understanding how to edit the row. Thank you for taking the time to make the screencast, but it was still hard for me to follow. You also mention “Skeleton mode”, but I have no idea how to access that.

Thanks.
David

Hello David,

Do you want something like this?

You will need to do this:

  • Please click your right column and remove the image element.
    http://prntscr.com/kri1uz

  • Click section and find the section settings in the left side panel of the Cornerstone editor. In the section settings, you can insert a background image for your section because this is the only way you can have a fullwidth image.
    http://prntscr.com/kri2a9

  • To make the image display as fullscreen, the section must be fullscreen as well. To do that, you must click the column and find the column settings. In the column settings, find the style field and insert min-height: 100vh;
    http://prntscr.com/kri3df

For further information how you can start working with Cornerstone, please check out this thread: https://theme.co/apex/forum/t/cornerstone-content-builder-introduction/118/1

or you can make use of this video tutorial:
https://www.youtube.com/watch?v=dtbUnpSkS-4, https://www.youtube.com/watch?v=vjqg0DxEK0E

Hope this helps.

Thanks for your helpful reply. I’m going to check out those links. Before I saw your reply, I noticed that there was a full screen image down below labeled “Feature”. I moved that to the top. Used by image and text, then duplicated it, and changed the image and text again. Now I’m wondering how to move the position of the text on the image?

Thank you!
David

Hello David,

In the column settings, there is an option that you can align the column contents to left, center and right. If you want it to have some equal space around the column contents, you may add a % padding as well.

Hope this helps.

Thanks, RueNel. I couldn’t find a Cornerstone page that was subheaded “columns” like your screenshot, but still made some progress. However, I still need to move some text blocks slightly.

On the homepage, rossfg.com, the text, “Invest with us”, sits just at the top of the city. I would like it just slightly higher, so all the type is over the sky, without using the slider.

The next image down is OK.

On the third image (smiley face), the text reads much better if it is still below the yelllow smily face when the image is scrolled down to full screen, so it needs to be lowered.

How do I adjust the vertical location of these text blocks?

Thanks.
David.

Hello David,

Thanks for updating in!

Please edit your page and in the section setting, adjust your top padding because at the moment, you are using 15%. Setting it to 5% or less would make the texts go up the section.

Hope this helps.

I must be in the wrong place, because I had already lowered the top padding to 0% in the place I thought I should be.

Thanks.

Hi,

Based on your screenshot I can see you are in column element.

Please select your section element and adjust padding.

When I check the code your section’s padding is still 15%

Paul: how do I navigate to Section element?

Hi There,

Simply head over to Layout tab and click on the inspect tab.

Then you can set margins or padding from the options below.

Hope that helps.

I see my mistake. I assumed the padding needed to be added to the section element holding the text, not the background photo. It looks perfect now.

Another question, how can I add a logo image to the header?

Thanks.
David

Two more questions! First, what are the options for a Contact Us section?

Second, what are my options with this theme if I wanted to stream a high resolution video feed to my site?

Thanks.
David

Hi @2communicate,

Do you mean replacing your existing text logo with an image logo? If yes, then you can go to Theme Options > Header > LOGO – IMAGE and add your preferred logo.

As for Contact Us, you can install a 3rd party plugin like Contact Form 7 and add its shortcode to your preferred section. CF7 is supported by theme’s styling so it will look part of the design.

As for the video, I recommend using a video hosting site like Youtube, Vimeo and similar. Then just add the embed code of that video within the builder’s video element. Please note that the theme has no streaming feature, it only wraps the video to match it with the design and it also uses Wordpres’ builtin video player (for self hosted videos).

Thanks!

Is it possible to add an image logo to the right of the current type, rather than replacing the existing header altogether?

Hi @2communicate,

It’s not currently possible, but doable in Pro custom header or template customization.

But how about adding the text directly to the logo image? It’s more recommended since the logo should respond to each device, and image responds well than a text. Or if there are text and logo, they will respond differently.

Thanks!