Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #624029


    I’m using enfold on a right to left website, and i have 2 problems with the avia page builder :
    1) There no option like bootsrap’s PUSH-PULL for the columns. so when seen in mobile phones the side bar that i made with avia shows first and the content is shown below it as in this page :

    2) in some cases i want to create a row in a column and more columns in that row (used to do this alot with bootstrap) but this can’t be done with avia… is there a way to do this? it’s a very important feature in most pages

    All the best


    Hi kavehmovahedi,

    1. I’m not sure I understand what you are looking to do there, could you try to explain a bit further and/or post a screenshot highlighting what you are looking to achieve please?

    2. You can enable debug mode and copy/paste the shortcode you want inside of your containers:




    I used to use bootstrap before so it might be because i haven’t yet learnt how to use avia page builder…
    The old way, i usually designed the pages for Mobile then with screens getting bigger i replaced the columns to fit the bigger screen…
    and i had this css classes that could push or pull a column when moving them (rearrange them) it the sample page i sent you above i want the smaller column to go to the bottom on mobile phones and tablets… but the content in the left column always shows up first in the smaller screens… for right to left sites the main content is usually placed on the right side and side bar content is placed at the left side (which is supposed to be shown and the bottom of the main content in mobile devices)

    any help with that?

    Thanks and best regards



    1.) I see. You’re using columns to create a custom sidebar. Turn on the custom css class field then add a custom css class attribute to the “sidebar column”. Or use the color section’s id. Something like this in the functions.php file should work:

    function add_custom_script(){
    <script type="text/javascript">
        $(document).ready(function() {	
            function a() {
                if( !$.avia_utilities.isMobile ) return;
                var sidebar = $('#blogleftcol').find('.av_one_third'),
                    content = $('#blogleftcol').find('.av_two_third');
    add_action('wp_footer', 'add_custom_script');

    This will move the “sidebar column” below the “content column”

    2.) Use the grid row element in order to create stacked columns. If you’re familiar with the column shortcodes, you can also use the text block element or the code block element and stack the column shortcodes manually.

    Best regards,


    Thanks Ismael !
    With a little adjustment it worked perfectly.



    Great, glad we could help :-)

    Please open a new thread if you should have any further questions or problems.


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Right To Left Sites?’ is closed to new replies.