Animations

[Rama Devi]

Hello Bill,

I have gone through the animations section in the link here “https://support.organizedthemes.com/elite/” . But how should I apply that to my website? I have added full size images in each Home Block Section. The code over there specifies that the Text should be Inserted in between the code. But where should I write this code? How should I do this? Can you please explain in detail

Thanks

[Bill Robbins]

You are correct that the animations are for “foreground” content vs. background images.

One way around that would be to insert the images into the content of a widget instead of using them as backgrounds.

Try installing the BlackStudio TinyMCE Widget plugin. It adds a visual editor widget that has the same editor that the page/post screens use. You can use that editor to insert the images into the content of the widget along with the shortcodes.

After it’s inserted there, we can restyle those sections of the home page so that the images there are full width like the background images are. Since you’d like to animate them, I think that would be the best way to go about it.

Once you’ve added the images via a widget, let me know and I’ll show you how to change the styling.

Thanks,
Bill

[Rama Devi]

Hello Bill, I installed the Plugin you suggested & tried adding one Image to Home 1. I didnt disturb the other Home sections inorder see how this works. The animation isnt working. Is this the code I should be using?

“[animate]
[animate-left]IMAGE.[/animate-left]
[/animate]”

Just have a look of my website.

Will be awaiting your response

[Rama Devi]

The animation is actually working. I added that image in Home 1. But Its getting Displayed in Home 2

[Bill Robbins]

I just took a look. It appears that there were some returns before the shortcodes. That scoots the content to be animated down which may be fine. Since we had set a height for the first home block though, it’s not able to stretch which made it appear on top of home two. If you end up liking this method better, you’ll want to remove the heights that are set in the custom CSS for these sections.

I added this to the CSS too:

.home .wrap {
	width: 100%;
	padding: 0;
}

.home .cbp-so-side {
	width: 100%;
	padding-bottom: 0;
}

.home .cbp-so-side-right,
.home .cbp-so-side-left {
	padding: 0;
}

.home .cbp-so-side-right img,
.home .cbp-so-side-left img {
	float: none;
}

It’ll let the content work better full width. See how that goes now.

Bill

[Rama Devi]

Good Morning Bill

1) The animations are working, but have the following issues

– The Animations are very fast. Can we reduce the speed of the movement? Its too fast to be barely noticeable. It will be great if we can control / arrange the speed of the animation

– The Images are not being expanded to Full Screen ( Have a Look )

– The Image in the 3rd & 5th Home Blocks are not animating

– I have added two images in the Home 6. I want one to come from left & the other from right.; How to do this?

– The Plugin derived animation looks very complex. Can you make some alterations in the code that will give a Direct Option for animation in the theme itself. It will be great if the customizer will have the direct option for the animation of Background images.

2) See this Product page ” http://stenzer.in/product/milanese-loop/ ”

I feel this looks very beautiful. It will be great if we can add a Slide Show of the Product Images as well. The Product thumbnails below the main image dont look good. I want to add a Product Image slide show. How should I do this? ( when the Page is set in Standard Mode? )

Apart from the above issues, the Desktop version is perfectly fine.

Thanks for Support,

[Bill Robbins]

Hello,

The built in animation is pretty simple and we may be attempting to stretch it beyond what it’s made to do. You might try an animation plugin like https://wordpress.org/plugins/animate-it/ which I would imagine is a bit more flexible. It’s not one I’ve tried, but if it works, that would be the way to go.

If we insert images directly inside the widgets instead of adding them as background images, we’ll have to manipulate them differently to make them full screen. That’s quick and simple though. Let’s wrap up the animation first and then we can change that.

---

For a slideshow, WooCommerce does not have a slider built into the core. If you’d like to replace the featured image/gallery with a slideshow you would need to use a plugin to do that. Woo has one at http://www.woothemes.com/products/product-gallery-slider/ that can do that. There’s probably a few at codecanyon.net that would also accomplish that.

You could also skip adding your images to the product gallery and instead use a free slider plugin like Meta Slider to add the images in a slideshow as part of the product short description. That’s an option that wouldn’t cost you anything.

Let me know when you have your animations shorted out and we’ll make the images full screen for you.

Have a great weekend,
Bill

[Rama Devi]

Hello Bill,

1) I have tried installing “Animate It” Plugin. But that is to animate images that are inside widgets. I didnt like how it turned out. Moreover, this whole process appears a bit complex. The Background images are perfectly aligned when they are directly added in the Home Block Section. Can you please give me a code that will add built in animations for the background images directly in the customizer ? That would make life simple 🙂

2) I also tired installing the Meta Slider Plugin. But that is giving a Slideshow only below Product Description or beside the Featured Image. This is looking very awkward. I need a SlideShow directly at the Featured Image Section. Just have a Look of this Product Page

“http://stenzer.in/product/milanese-loop/”

The Product Image is completely blended into the Background. I want to add 2 more images of the Product in different angles. I feel that a slide show of 3-4 images would make the page stunning. Please let me know how to do this?

Cheers,

[Rama Devi]

Bill, am awaiting your reply

[Bill Robbins]

Sorry I missed your reply there.

Building animations is very complicated. Creating something for an end user to add animations, is even more complicated than that. It would likely be a couple of week’s work for me to make what you’re requesting. It’s also the first time this has been requested out of several thousand purchases of the theme, so it’s not a widely requested feature. I can help with small customizations, but that’s well outside what I can offer.

If you want a slider to replace the featured image in your products, you’ll have to use this one: http://www.woothemes.com/products/product-gallery-slider/ . It’s the only one I have found that will replace the images in a WooCommerce product with a slider.

Take care,
Bill

[Author]

Posts