Horizontal line query

  • Unknown's avatar

    Good day.

    I need to ask….
    How to do I insert a horizontal solid line into a post?
    One that starts on the left and ends on the right of the page.
    I tried to Google it and all I found is being told to use the spacer option in the plus menu.
    That doesn’t work because it has two verticals lines in the middle.
    It’s like a horizontal line then 2 small vertical lines then another horizontal line.
    I need to enter a solid line in a block to fill the page horizontally.
    I have tried all of the option and have not found the right one.
    I also need to be able to adjust the thickness of it.

    I also want to ask….

    How do I enter a box around text? Or even a border around text?

    The only solution I can find is results on google that says to enter code.

    I wouldn’t even know where to enter the code in the first place. I mean in the code editor. It has so much code but where to put it.

    Or should I just highlight the text and go to the gear icon and change the background colour?
    It would be better to just put a boarder around it and make it bold then all sorted.

    Or else I should just check what colour code is my background, copy the code, add a button, change the background colour of the button to my website backround colour by pasting the code and leave my text Black so my boarder stays black.

    I would send a picture of what I need (the line) but I don’t seem to be able to add attachments

    Hope you can assist me.

    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • Hi there,

    If you would like to separate two blocks of content by a line, the Separator block is what you are looking for: https://wordpress.com/support/wordpress-editor/blocks/separator-block/

    It will add a horizontal line as you describe, and the block has a few different line styles to choose from:

    How do I enter a box around text? Or even a border around text?

    It’s possible to place an entire paragaph in a box by using the options built in to the paragraph block. This is difficult to explain in words, so I recorded a quick video to show you how to find the background color setting.

    You can view the at this link: https://d.pr/v/rrhOvl

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar

    Hi Jerry, the video you recorded is what I already know how to do. To create a background colour in a block. I wanted to put a boarder around a specific text, like an affiliate disclaimer, but I’ll have to use the background colour option to highlight that paragraph. Don’t worry about that now.

    The line I am talking about, some sites have a solid line above and below an h2 heading, making it look professional.

    Making it stand out.

    The kind of line I am talking about you can go to this website

    https://www.google.com/amp/s/www.businessinsider.com/how-to-screenshot-on-windows%3famp

    Look above the words….

    “If you need to capture a screenshot of something on your computer screen, Windows 10 offers a variety of methods for doing just that”.

    Also look above the words….

    “Print screen”

    That’s the kind of line I am talking about.

    The spacer is not what I want. It must be a solid line, not a short horizontal line then 2 small vertical lines in the middle then another short horizontal line. This is how the spacer line looks like. Which is so unprofessional.
    Imagine this is a solid line that I will show you, this is something I want to do.

    ———————————————
    Semrush Review – Overview
    ———————————————

    I hope you see what I’m asking now.

    The spacer block will look like this

    ——————–||———————–

    This is not what I want. I can’t use that.
    If I wanted to break two blocks up I would use that, but I want to give a professional look to my h2’s.
    So must be a solid line like the web page I sent you in the link

    Please let me know if it’s at all possible.

    I was searching for a way to add a brief bio and couldn’t find a block in the plus menu, but I did find a link bio style, I think that will work in order to add a bio block.

    Regards, donovan

  • Unknown's avatar

    If I could just get the line and make it bold so it stands out, that would be great. I just don’t know how to get the solid line and to make the line thicker or bolder.

  • Unknown's avatar

    Also if you look at that website I sent, scroll down to “quick tip” the quick tip is in a box with a border. Don’t know how they got that right. That website scroll further down and you will find exactly the line I am looking for.

    Look at

    “Dave Johnson
    Freelance Writer

    Dave Johnson is a technology journalist who writes about consumer tech and how the indust…
    Read more
    SEE ALSO: The best budget laptops you can buy this year”

    The dark thick bold lines between the paragraph is exactly what I am looking for. How did they do that???? How do I get those lines?

  • Unknown's avatar

    One last question, on that same site, right at the bottom, where it says, related articles, those blocks with images and text under, making it look professional, how do I do that setup?
    Is that done by using image and text block? Then just adjust it so the text is under the image?

    If you look at the bottom of that post,

    Sitemap Disclaimer Accessibility Commerce Policy Made in NYC Jobs

    How do I create those? Is that a widget or a few widgets?

    Thanks

  • The spacer is not what I want. It must be a solid line, not a short horizontal line then 2 small vertical lines in the middle then another short horizontal line. This is how the spacer line looks like. Which is so unprofessional.

    In the example that you’ve shown (which, to be clear is not a WordPress site but a custom developed site) that is a line that is coded directly into the theme that is used for that site. There is not really a way that you could do the same using blocks or block settings. There are a few options I can think of here:

    • Upgrade to the Premium plan, and then use CSS code to create a horizontal line under headings similar to what is shown in your example
    • Switch to a theme that has this kind of underline style already. You may need to look at demo sites for the various themes we offer to see if there is one that will work for this purpose.

    Also if you look at that website I sent, scroll down to “quick tip” the quick tip is in a box with a border. Don’t know how they got that right. That website scroll further down and you will find exactly the line I am looking for.

    This is also something that was designed into the theme used in your example. As with the horizontal line question from above, it seems like some custom CSS code would be the best way to create that style on your site, but there is not really another way to do it

    One suggestion you could try as a workaround is to use our “Pullquote block” which is a block that formats a quote within a box with a solid border: https://wordpress.com/support/wordpress-editor/blocks/pullquote-block/

    It has options for several border styles as well as border thickness in pixels.

    on that same site, right at the bottom, where it says, related articles, those blocks with images and text under, making it look professional, how do I do that setup?

    You can use the Related Posts block to set up something similar: https://wordpress.com/support/wordpress-editor/blocks/related-posts-block/

    If you look at the bottom of that post,

    Sitemap Disclaimer Accessibility Commerce Policy Made in NYC Jobs

    How do I create those? Is that a widget or a few widgets?

    On a WordPress site you would use widgets (in your site footer) to add extra info and page links like that, yes. Business Insider uses a custom bespoke site as I mentioned, so they had a designer create that style for them. On your site widgets added to the footer adopt the style of your theme however.

  • Unknown's avatar

    Thanks Jerry for trying to help.

    The pullquote button does not work. It only gives me a block solid or dotted. It is exactly what I need for the text box HOWEVER, there is a ” symbol at the top of the text in bold and it can’t be removed.
    The pullquote does not give me the option for the two lines without the sides, but again, it has the quote symbol which I don’t want.

    The link you sent regarding the pullquote does not show the quote symbol, but on my side it does.
    It might be the theme I am using, but this theme is the only one that displays my sub menus correctly in drop downs so I can’t change it. I spent a whole day looking for another theme that will give me a footer, side, primary widget area but then my sub menus don’t show a drop down, it either shows a single menu like…software, or shows the entire list in one menu. I have moved most of my posts into draft’s but I see it can still be accessible on my site, I thought if I move it to draft’s then it will become unavailable on my site. Anyway.

    The related posts block worked, thank you.

    Just a pitty I can’t choose which posts to add or atleast change the text or add more text.

    Thanks for your help.

    I appreciate it.

  • Hello!

    The pullquote button does not work. It only gives me a block solid or dotted. It is exactly what I need for the text box HOWEVER, there is a ” symbol at the top of the text in bold and it can’t be removed.
    The pullquote does not give me the option for the two lines without the sides, but again, it has the quote symbol which I don’t want.

    It would be possible to remove this symbol, but you would need CSS to be able to do this and this is available on the premium plan.

    The link you sent regarding the pullquote does not show the quote symbol, but on my side it does.

    The appearance of this block can vary from one theme to another.

    I hope this helps.

  • The topic ‘Horizontal line query’ is closed to new replies.