Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #26185

    Hi Guys,

    We can create horizontal ruler in advance layout editor but how to create vertical ruler ?

    i want to create three vertical ruler in different sizes in one content element box ?

    any advice?



    Hi qamarqrsh,

    The horizontal ruler is a default html element so its a pretty easy element to add. There isn’t however any way to add a vertical ruler with the theme functions at this time so it would need to be done with custom css targeting the page and elements on that page specifically.




    Hi thanks for reply

    im new in this css etc..

    can you please send me instructions or show me how to add the vertical line or ruler ?




    If you can link us to an example page we can make a basic example but the fine tuning would need to be done by a freelance developer (ie, shadow effects, integrating images or re-doing spacing for mobile layouts).




    Hi Devin,

    Thanks for your time, here is the example site : http://citibikenyc.com/ .

    can you see after slider there is six boxes attached to the slider and vertical rulers after that?

    1- Need coding for six boxes and want to attached with slider and where to add the coding.

    2- Need vertical ruler coding and where to add them please, here http://www.123-tech.co.uk

    I really appropriate for your help here.





    Please help!!!



    The vertical rulers on that page is created using the css border. If you can give us a link to the actual page you’re working with, we can give you a css solution. What you can do is to insert 3 columns then add a border on each of them. Please give us a link to your website.

    The code use on the link: http://citibikenyc.com/

    border-right: 1px dotted #AFAFAF;




    Hi Ismael,

    Yes that’s the one.

    Here is my website home page ( http://www.123-tech.co.uk ), I want same layout as citibike have, like three vertical rulers and six boxes attached to slider.

    Would be great if you can do that layout for me with instructions how to?

    Very appreciated Ismael,

    P.s im new in this css, but happy to learn.


    You can do something like:

    .post-entry-734 .avia-builder-el-11 {
    border-right: 1px solid #333;

    For a very basic border but creating a layout like what you are describing is far beyond what we can do via support. You will need to have a freelance developer create that for you if you aren’t familiar with the needed css.

    Other options would be using the Icon box element inside columns or a border image inside a regular text block that is set to float right or left.

    Really the best option available is to just play with the various elements with the advanced layout builder and see if you can create a layout that works for you using those elements.




    Thanks Devin,

    Can you please tell me where to put above code? on Quick CSS or some where ?

    I will pay around with all elements and get back to you shortly.




    Yes, I’d recommend to insert it into the quick css field.




    I’ve managed to get it done!

    Thanks Team.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘How to create vertical ruler on advance layout editor Page!’ is closed to new replies.