Blog

New Builder Styling Feature: CSS Transform

New Builder Styling Feature: CSS Transform

We are excited to anncounce a new styling feature in the Themify Builder – Transform styling. The transform styling lets you rotate, scale, skew, or translate an element. The new styling feature gives you more control and possibilities for layout design. Now you can manipulate the appearance of any row, column, or module without having to use a graphic software or write any custom CSS code. You can move elements around, stretch them, flip them upside down, or spin them however you want it. With the easy to use Builder styling interface, applying transform styling is fun and quick. Go have fun and be creative with the new Builder transform styling feature!

Scale

In the old days, you would scale the font size and padding to make things smaller or larger. Now you can use the scale styling to reduce or enlarge the size of a module. The scale values can be applied horizontally, vertically, or both.

Transform: Scale

Translate

With the translate transformation, you can move the element horizontally and/or vertically. It is great for shifting an element without having to use margin or padding.

Transform: Translate

Rotate

The rotate transformation allows you to rotate an element in the X-axis, Y-axis, and/or Z-axis. To make an element rotate to 90 degree, simply enter 90 in the Z-axis.

Transform: Rotate

Skew

To make an element appear in a slant, you would use the skew styling. Again, you can enter skew values in horizontal and/or vertical direction.

Transform: Skew

Hover

Best of all, the transform styling is also available for the hover state. If you want to make a module pop up on hover, try to add the scale and translate values on the hover state.

Hover Transform Styling

21 Comments

  1. Lee
    Jun 03, 2021 @ 14:00

    This looks AMAZING!

    please, please, please, please test thoroughly before giving it to the public.

    that’s my only request. Thanks guys

    Reply

    • Nick @ Themify
      Jun 03, 2021 @ 15:19

      Which feature are you referring? Just double checked again. All features seem to be working. Could you provide more details if you are encountering any issue?

      Reply

  2. Rene
    Jun 03, 2021 @ 14:43

    To @Lee:

    Agreed! Very convenient! Especially that it’s respecting responsive breakpoints already.

    Only… It’s out there already! But then again, shouldn’t we all do the testing on a staging site before we update our live sites? Or at least hold our horses and watch the support forum for a while? ;-)

    Thanks, Themify!

    Reply

  3. Robert Saunders
    Jun 03, 2021 @ 15:00

    Where do you go to get this, is it part of the builder theme now or a plugin that needs to be added.

    I looked at my install and so far do not see anything and there was an update to my ultra theme that I am using.

    Thanks ahead of time

    Reply

    • Nick @ Themify
      Jun 03, 2021 @ 15:21

      It is part of the theme/builder framework. You just need to update the Themify theme that you are using.

      Reply

      • GaryDZ
        Jun 04, 2021 @ 23:28

        I am using Themify Ultra–current version. How do I get to this or add it?

        Reply

        • Nick @ Themify
          Jun 07, 2021 @ 20:49

          You just need to update to the latest version. You should see “Transform” styling on any module, column, and row.

          Reply

  4. Eric Gavrel
    Jun 03, 2021 @ 16:37

    Great job guys !

    Reply

  5. cchapman43
    Jun 03, 2021 @ 18:06

    Love it

    Reply

  6. Debo
    Jun 03, 2021 @ 19:09

    Thank you Nick & team for a great update!!!

    Reply

  7. Bruce Diller Verstandig
    Jun 03, 2021 @ 22:54

    Wow … you guys at Themify are the BEST … can’t wait to work with these new fabulous tools
    Thanks for being wonderful

    Reply

  8. Ahsan
    Jun 04, 2021 @ 01:37

    Wow. looks like we can do many great styling by the combinations.

    Reply

  9. joni0808
    Jun 04, 2021 @ 06:06

    Amazing!

    Reply

  10. Eugene
    Jun 04, 2021 @ 06:28

    thank you! cool feature!

    Reply

  11. Atif Rehmani
    Jun 04, 2021 @ 10:33

    Sounds Good!,
    Really it amazing because I have the other WordPress builders with a lifetime license included Themify but I mostly like to use this due to the very need & clean UI with easy-to-understand all the options.
    Hope to update the more advanced options in the future.
    Thanks, Themify.

    Reply

  12. Tony
    Jun 04, 2021 @ 10:45

    Awesome, very easy to customize. I updated and I must say, this is exactly what I was looking for. Thank you Nick and the Themify team.

    Reply

  13. Joel Rodriguez
    Jun 04, 2021 @ 14:47

    Thanks Guys for the cool update!

    Reply

  14. WorkTime
    Jun 08, 2021 @ 10:23

    Very convenient! Especially that it’s respecting responsive breakpoints already.
    Can’t wait to work with these new fabulous tools
    Thanks for being wonderful, Themify!

    Reply

  15. Eduardo
    Jun 08, 2021 @ 14:11

    This is a game changer!!!! Incredible update! I love you Themify!!!!

    Reply

  16. Clifford Brahman
    Jun 10, 2021 @ 10:48

    It’s a beautiful feature. I can’t quite believe I’m using it!

    Reply

  17. Okonkwo Obi
    Oct 14, 2021 @ 12:12

    This is really awesome stuff you guys develop.. Beautiful and wonderful new tool.
    Thank you

    Reply

Reply