How to add "divider lines" such as shared example

  • Resolved rmrpereira

    (@rmrpereira)


    12 years, 1 month ago

    Hi,

    I’m using WordPress with the Optimizepress Theme to create Blog Pages (the webpage I am currently creating is https://www.rickyricardopereira.com)

    I believe my question is Not tied up to Optimizepress’s theme (if that is Not the case, please let me know), so here it goes: does anyone know how to create sort of “divider lines” such as the ones, both horizontal and vertical, present in the following webpage? htttp://www.brendonburchard.com

    My intention is to use WordPress’s content and sidebar areas to present content similar to the one in the above example, assuming that somehow there might be some ways of creating similar dividers such as the ones in the example given, for both the content and sidebar areas.

    Does anyone know of ways for achieving a similar effect?

    Thanks in advance,
    Ricardo Pereira

Viewing 3 replies - 1 through 3 (of 3 total)

  • The site you linked to uses a table-based layout — so the lines are from the table code. But that’s a really outdated and undesirable way to code, so it’s not what you want to do. Happily, you can still get those lines by using borders on page elements (usually divs). For horizontal lines you can also use horizontal rule element.

    Thread Starter rmrpereira

    (@rmrpereira)

    Thank you WPyogi for your prompt assistance, I appreciate it.

    After reading your post I was able to successfully create horizontal lines.

    I also tried creating vertical lines with the same horizontal rule element (as found here) and even though they showed up, they did Not seem suitable for the kind of need that I have, which includes creating the “sections” between those vertical lines to insert some content.
    The div page elements might do indeed the trick that I am looking for, nonetheless, after a brief search on Google, I realize that given that I am a newbie in creating pages with these kind of elements, as well as using html (so far I have been creating the pages mostly with WordPress’s visual editor features), I may end up hiring someone in Fiverr to do that specific piece of the coding.

    Thanks again!

    Cheers,
    Ricardo

    Thread Starter rmrpereira

    (@rmrpereira)

    After some more development, I’m wondering whether any of you can further assist me along this learning road.

    In this moment, my site (rickyricardopereira.com) is a bit more grown up (you can check it here) and closer to my original intention, which was to have a similar layout and design inspired by this site over here (brendonburchard.com).

    Given the site that I have currently built which is divided by main portion + sidebar, does anyone know of a simple way to create a vertical dashed divider line between the main section and the sidebar, to create a similar design such as the one on brendonburchard.com?

    Additionally, does anyone know a way of creating a single horizontal line that extends beyond the main section towards the sidebar area OR create 2 horizontal lines (one on the main area and the other on the sidebar area) that would be horizontally leveled?

    Thanks in advance,
    Cheers
    Ricardo

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to add "divider lines" such as shared example’ is closed to new replies.