Quill About Us widget layout


Is there a way of changing the layout of one row with About Us widget .

I want to have it the way that in the first row the picture is on the left side and the text on the right. In the widget below the picture would be on the right side and text on the left.

Possible to change with css code ?




Please follow this steps:

  1. Add a CSS class to the Page Builder Row with About Us widget which you want it to reverse the order: Edit page > Edit row > Row styles > Attributes > Row Class > set the class name to about-us-right

  2. Install and activate Custom Javascript plugin and put this snippet code into Appearance > Custom Javascript
    jQuery('.about-use-right .about-photo').css('animation-name', 'fadeInRight'); jQuery('.about-use-right .about-photo').css('float', 'right'); jQuery('.about-use-right .about-text').css('animation-name', 'fadeInLeft');

Hope it help.



I have done what You suggested.
It doesn’t change the row layout :frowning:

Maybe the problem is the plugin Custom Javascript is not tested with present theme version



I’ve tried it in my local and it’s work. I checked the second row on your homepage but I can’t find the about-us-right class for the widget. Did you follow the step in above?

To make sure if it’s working, please try to duplicate the first row then apply the steps in above for the duplicated row.




I have set up the the widget the way the row layout is divided for 3 sections.

That’s why the picture is on the right

hand side and the text is on the left.

Before I did that I have followed the code
It didn’t work


Ah, there… Please remove the SiteOrigin Image on the second row, and use the image from the About Us widget only because the steps in here already handle that (make the text in left and the image in right)