Image move-in animation

How does one animate an image to make it slide it from the left or right like on the Integrity 1 demo? I know a lot of things have changed since the big Cornerstone update. I was wondering if this feature is still supported and where to find it? Cheers!

Hi,

Thanks for writing in!

Yes it is still supported.

Kindly note that the slide in animation is available in your column element and not in image element.

See screenshot

Thanks

1 Like

Got it, thanks!

Totally off topic, but is there a way I can set up the default font styles I want to use? I’ve seen the Font Manager under the Typography option, but I don’t see any way, for example, to choose a sans serif font for paragraphs but keep a serif font for headings.

Hi Brian,

Please open up your builder and click on the cog icon in the left bar to open up the Settings Modal that includes the Font Manager.

Kindly check this article for more information:

Hope this helps.

That helps very much, thank you.

Before I make any changes, though, could you tell me what the default typeface is for Integrity? I’d like to keep the default for some things…

Actually, I just chose Candara for the Body Copy and saved it but nothing has changed on my site…how do I make a particular text use the font that I’ve chosen?

One more. I apologize for all the questions…

Can you tell me where the settings are located for me to remove the margins/padding/space I’ve highlighted in red in this picture?

Thanks!

Hi Brian,

Those spaces are added by the theme’s default CSS.

To remove those, please add this code in the Global CSS:

.x-container.offset {
    margin: 0 auto;
}

.entry-wrap {
    padding: 60px 0;
}

Hope this helps.

Thanks, and my question about font management?

I know where I can set up different fonts but when I have text in a text box or something, how can I select the fonts I’ve chosen in the font manager if I want something different than the default?

Hey @brianfsanford,

You can choose the Font Family of the Text Element under the Font Format group.

If you mean changing the font of a specific text in a Text element, that is not possible and is not recommended if you want your page to be fast. That is because, you’ll load the font adding up to your page load time so you’re basically sacrificing page load for a small design purpose.

But, if you still want to continue, you can write HTML in a text element like this:

You can then target that HTML or tag with your custom class and that class will be styled with CSS with the font-family of your choice. You need to load the font through third party plugins or custom function. Please note that this requires an understanding of web development and you or a developer is responsible of doing this.

Thanks.

My columns are not displaying a fade in effect option.

Hi Joshua,

I understand that the symptoms of your problem might be the same but it is important that we check the case on your installation. We want to ask you to give us the URL/User/Pass using a Secure Note. But the secure note is visible to the original poster of the post, and as you are not the original poster please open up a separate thread and give us the information there.

Also, please get back to us in the new thread that you will open with the result of the troubleshooting steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  4. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

Thank you.

Thanks again for your assistance. I’d like to ask a follow-up on the topic of removing margins. On my main page (jollygolferrr.com) I need a marginless setup so that, for example, the paralax image I have there goes all the way across the page. However, the solution given above makes the blog posts page look less than ideal. Is there a way to turn off the container margin for pages but keep it on for posts?

Cheers!

Hi There,

Please change your page template to Blank - No Container | Header, Footer:

Hope it helps :slight_smile:

1 Like

I actually want to keep the container. In other words, I’m fine having the site be a fixed size, but I want the content on the main page to stretch to the edge. However, the CSS I was told to add removes the margin / padding from everywhere on the entire site. If I delete it, then keeping the page at a fixed size means that there is a white margin on all sides. I need that margin on blog posts, for example, but I don’t need or want it on the main page. Is there any modification to the CSS I can make that will do that?

For reference, this is what I’m talking about:

.x-container.offset {
margin: 0 auto;
}

.entry-wrap {
padding: 60px 0;
}

Hi There,

Could you please try with this custom CSS instead?

.home .x-container.offset {
margin: 0 auto;
}

.home .entry-wrap {
padding: 60px 0;
}

Let us know how it goes!

Thank you, that does work.

If I wanted to specifically target other pages, like (https://www.jollygolferrr.com/store/), how could I code that?

Hello There,

The code may only work in the home page. If you want to apply it to other pages, you can update the code and use this:

.home .x-container.offset,
.page-id-906 .x-container.offset {
  margin: 0 auto;
}

.home .entry-wrap,
.page-id-906  .entry-wrap{
  padding: 60px 0;
}

Please take note that I added .page-id-{123}. This is the custom class for each specific page. To get the page ID, you can check this out: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps.

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