Introducing Flip Box and 3 Other New Pro Features

Today we are introducing 4 new Pro features: Flip Box, Masonry, Blog Pagination and Ken Burns Effect.

Interactive design is all the rage now. Here in Elementor we have always strived to offer you a wide range of features that add interactivity to your site. Hover and entrance animations, carousels, slides and toggles are just a few examples of widgets that involve visitor interaction. Now, comes a new widget, that adds another level of interactivity – the Flip Box widget.

Forget everything you thought you knew about flipboxes. Elementor Pro’s Flipbox gives you more design possibilities, as you will see in the examples below.

What is a Flip Box?

A flip box is a box that flips over when you hover over it. You can choose from different animations, and customize the look and behavior of each flip box. Flip boxes can help make your content more interesting, improves the user experience and also allow you to accentuate your business features, products and services.

flipbox effects

Flip Effects

With Elementor’s new Flip Box widget, you get all the basic flip effects, including flip, push, slide, fade, zoom in and zoom out. The flip animation effects work seamlessly, with no hiccups or stalls.

flipbox 3d

3D Effect

You can add a captivating 3D effect to your content boxes and make them truly unique. The 3D option is available for all the flip directions and can be used to make your flip boxes stand out even more.

flipbox banner-4

Content Alignment

The content can be separately aligned to the center, right or left for both the front and back of the flip box. The banner boxes above were created entirely using the Flip Box widget, and exemplify aligning the content to the left.

flipbox border

Flip Box Borders

Style your flip boxes with different border options: oval, round edges, rectangles, dotted edge or double edge. You can use borders to reach unique box designs like the ones in the image above.

flipbox bg

Background Options

Add a solid, gradient or image background to your flip boxes. Separate backgrounds can be added to each sides of the flip box, giving you the option to differentiate between the two sides completely.

flipbox element

Graphic Element

Make the flip box richer, by incorporating an image or an icon inside the flip box. This can be used to create visual and interactive boxes that link to your posts, or interesting team member boxes. The possibilities are yours to explore.

flipbox combo

Explore Other Creative Ideas

Experiment with flip boxes to create even more imaginative designs. We have tried to make this widget simple, yet more flexible and robust as to let you create sophisticated flip boxes.

Posts Widget Improvements

How long does it take you to design a blog page, top to bottom?

Today, we are happy to introduce you to a widget improvement that allows you to get the same results in minutes instead of hours. With this improvement, the blog design can be done in a fun, live and visual way.

One of the most amazing features included in Elementor Pro is the Posts widget. The ability to visually design of your blog page, without any coding, is a real game changer.  The problem with this widget was that you still couldn’t create blog masonry layouts, and the posts did not include pagination.

Now, we are introducing both Masonry layouts and pagination, making the Posts widget the ultimate visual blog maker for WordPress.

posts-masonry

Masonry layout for Elementor Posts widget

You can now display your posts in a masonry grid, using the Posts widget. This means you can showcase your posts with a Pinterest-like grid. In the next release we will be adding the Masonry feature to the Portfolio widget.

posts-pagination

Posts widget Pagination

The Pagination option makes it really easy to play around with your blog design. You now have control over the entire blog design, including pagination elements, such as the prev/next style.

We’ve also made sure our pagination is SEO friendly. Elementor’s pagination works just like the regular WordPress pagination in terms of URLs, so you still get the same SEO friendly links for every pagination link that gets created.

Slides Improvements

Slides is another very useful Pro features. This week we are adding two tweaks to this widget, that come directly from our user requests.

Slides Images Displayed in Full View

Until now, you had two options to display images in our Slides widget:

  1. Cover – This option makes the image ‘cover’ the entire slider. If you load a vertical image for example, the image’s top and bottom will be cut, and the image will be displayed in zoom.
  2. Auto – This option shows the actual size of the image.

Now, we are adding another display mode: Contain. This option displays the image contained within the limits of the slide. Let’s say you are using a narrow image on a wide slider, the narrow image will fill 100% of the height of the slider, and the left and right sides of the slider will show the background color.

If, on the other hand,  you are using a wide image on a narrow slider, the wide image will fill 100% of the width of the slider, and top and bottom sides of the slider will show the background color.

Ken Burns Effect

The Ken Burns effect, called after the American documentarian, allows you to add a panning and zooming effect to the still images that appear on your slider.

The Ken Burns effect is available only with the Pro Slides Widget. You have to add an image to a specific slide for the option will appear.

Conclusion

Be sure you update both the Elementor and Elementor Pro plugins, to make sure all the new features work properly.

The features added today, Flip box, Masonry, Pagination and Ken Burns effect, all add to our already visually rich page builder. I invite you to try each of them and share your new page creations with us.

If you still haven’t upgraded to Elementor Pro, this is a great chance to do so, and explore the new features we’ve just added to the plugin.

Liked This Article?

We have a lot more where that came from! Join 482,910 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

93 Responses

  1. Congratulations!!! These improvements are great.
    I have a question for you:
    My Image Gallery does not open properly unless I have another gallery plugin installed, which I have done.
    Please visit: mindfullinovationsllc.oabranding.com
    It opens the images, one at a time, as a new page, without any controls for the galley. What is the best way to have the Elementor Gallery widget open the way you guys have imagined?

  2. Thank you. You have a great product. But rather than innovate in new widgets I would like you to make the current widgets more versatile making them dynamic. It would be interesting to be able to put php (even the loop) on a page completely created with Elementor. This would make you distant from light years of your competitors.

    At the moment the only plugin that does something similar (creating dynamic templates) is Toolset, but it is not as visual as Elementor.

  3. Excellent new features and updates!!! Elementor is beyond amazing–it’s changed my life.

    I will be upgrading to Elementor Pro as soon as the Masonry Porfolio option is released 🙂

    I also have one other desperate need: custom font integration. Right now we don’t have the same control over custom fonts as we do with Google fonts (i.e., size, color, etc.).

    Are you planning on adding this option anytime soon? (Please say yes!)

    Thank you!
    Michael

  4. Great to see more and more creative additions to Elementor Pro without having to add WordPress plugins as in the days of old.
    Any chance of looking at the inclusion of ‘hover over a word’ effect to create popup text box or image?

      1. Is there a very lose/broad dev timeline we can check out, but not hold you accountable for?

        I noticed throughout al lot of comments on several of posts your reaction “will be released in the future”. I had half a mind to list them just to further enjoy my anticipation 😀

  5. Love this! You guys are awesome! You won me over from VC and I am so happy I made the switch! Thank you and keep up your amazing work! 🙂

  6. These are truly great additions. Functional, practical and useful. When the gradient feature was announced a few weeks ago, my eyes rolled so hard I thought I had reversed the earths rotation. Glad to see “useful” and “practical” UI/UX features rolling out. Pro user.

  7. A filter for blog post categories on the blog grid module just like the one on the portfolio module would be great if that’s possible? The portfolio module is a little restrictive if you want to have additional information on the main archive page, but if the blog grid module could have filterable categories, it’d give a great alternative for people!

  8. Thumbs up folks… Again! I wonder if it is possible to obtain templates for the flip box with the social media which you illustrate? Sincerely Stig

  9. Too true 🙂

    I was aware of Elementor for the last month or so, but I’ve just spent a couple of hours playing with it properly for the first time, and I’m actually blown away. It’s seriously good. No, I take that back – it’s actually excellent.

    I mainly still use and pay for Divi and Thrive, as well as Beaver and a couple of other page builders. You’re the first guys who seem to have thought hard about what people actually want and need. And you’ve delivered a super fast page building experience that allows me to concentrate on content and design, not the framework. No dictating either what features people shall or shall not have (cough cough Sliders/Thrive, ahem!).

    I will be shifting to Elementor for all new work. That is until Google release their hotly awaited AI powered web designer/builder/content generator!

    Oh, and if I never see or hear of Visual Composer ever again, I’ll be so so happy 🙂

  10. Looks like another great update to Elementor Pro.
    I’ll soon play around with the added features and see how it interacts with Mobile Touch

    Keep up the great work. ?

  11. Actually, that’s easy. Loads of “hooks” with an integration/conditions UI for global items (ala Beaver Tunnels). It is literally the only thing keeping me from using Elementor for nearly everything we do for WP.

  12. Sweet! Any chance the flipboxes will work with posts? So that way the content of the flip box will be the post image and text, and when flipped it can show the link (or whatever we decided, but it will work with pulling blog post content).

  13. I think elementor pro will be light years ahead if it includes Schema Markup for every “element” it creates. This will differentiate the basic elementor from the pro. Just my 2 cents.

  14. Dear friend, this is a great update I really like.

    Friend, I learned to do kraisvye sites through your designer.
    1) I have a question, how can I implement this kind of blog?
    http://tilda.education/internet-marketing-course
    it is very nice when on the verge of minimalism. and a nice big picture the beginning of Lent.

    2 question, how to make your constructor, so that the information loaded only when scrolling down. check the first link there so realized.

    If you give me help, I will be very grateful

  15. Many thanks. I hope soon to explore more when, can make training videos creating a site using your Elementor.

  16. Dear friend, I am very grateful to you for your help and advice! Boxing is very nice, but how can you implement?
    https://www.aman.com/resorts/aman-tokyo/spa

    I am interested in, sort the order, the website above which show correctly in the mobile view:
    picture
    text
    picture
    text

    Picture
    text

    And after elementor unfortunately it did not work in the mobile view
    picture
    text
    text
    picture

    You know what the problem is ?? How can I make the order?
    Thank you very much in advance

  17. I’m using Thrive for the majority of pages on my site mekkit.com. I also originally built the site with visual composer and there are still some vc pages in there too.

    I’ve installed elementor pro and everything seems to be hanging together as far as I can tell, but I intend to move everything to one builder eventually.

    I intend to rebuild the home page from its current thrive built:

    https://www.mekkit.com

    to something more ‘agency’ wow factor with much more imagery (and sliders!) while making it less salesy, with Elementor. Not got very far after an hour of playing, trying to take elements of the existing page and one of the elementor supplied templates:

    https://www.mekkit.com/elementor-test/

    I am missing the rich typography options and more direct text editing features of thrive to be honest. But also want full width abilities which my current thrive theme stops me doing.

  18. Hey guys! First of all I have to say that you are doing perfect job with Elementor and I am planning to buy PRO version!

    I have one little problem. I am not really sure but it looks like after installing Elementor it somehow disabled sticky menu in my theme, is there any chance that elementor is the reason? I am using Generate Press 1.3.44. Website is platinumbd.co.uk

    Thanks

  19. Hi Ben,

    I just bought the Pro version. It’s working on one site. It’s not working on another site.
    Your support page says to use the form below to contact support.
    I don’t see a form below on that page. I can’t find a support form anywhere.

    Can you tell me how to contact support please.
    Thanks.

  20. How does Flip Boxes work with mobile sites? There was no mention in the video or article on how it responds with a tablet or smartphone interface. Hovering would be difficult I would imagine.

  21. I am looking for a pop-up tool so that whenever I click a text/image/link, a pop-up can come up (so that I can share more details). It’s like a read-more button that doesnt take user to another page. Instead a pou-up opens and user can read it therein.

  22. I absolutely love Elementor and have created a landing page that looks pretty awesome. Like almost really awesome. I wish the company can run some promotions or discounts for people like me to upgrade to the Pro version. It’s still expensive. I will replicate my entire site using it!

    But love it, love it, love it! Pretty excited for all the progress!

    1. Thanks for the feedback. We have no plans of making it cheaper, though. I think it is great value for money as it is, and becomes more so every new release.

  23. Is it possible to make a few posts sticky in post widget Masonry layouts? I want to use it for ads. What I mean is that as I add posts, they will move downward and finally go to the next page but the sticky ones won’t move.

Leave a Reply