I am using WordPress editor to make a page on my website.

On the main page of my website, I want to keep pointers to at least ten other pages.

I can see only some types of blocks in word press such as paragraph block, pre-formatted text block, code block, etc., although I can do my task, all the references appear sequentially one after another. But, I want to keep those pointers using blocks of geometric shapes.

I found no interface yet that shows custom geometric shaped blocks such as rectangle, square, circle, etc., to keep my text with an attached hyperlink to the pages. You can check here for the shapes of blocks I am asking for. If available, I can arrange 4 blocks in a row (as you can see here, at least in the case of rectangle/square) and link to all the pages I need to with a link per block.

As a beginner, I don't know the coding part of the websites in detail. I only know to use the interface given by WordPress.

  • I've read this a few times and I'm not sure what you're asking, are you asking how to insert shapes inline the same way you would insert emoji or inline images? Or are you asking how to create a block that shows a shape? Your second link shows a grid of items, but there are no shapes. Your first link shows a screenshot of the google docs vector image insert, but your second link shows blocks with borders. Also, the phrase "to keep my text and hyperlink the pages to those blocks" doesn't make sense in english, can you try using different words?
    – Tom J Nowell
    Sep 19 at 18:15
  • Also please embed the images on your question instead of linking offsite. Use the edit link under the tags on your question to make the changes
    – Tom J Nowell
    Sep 19 at 18:16
  • @TomJNowell custom shapes only. Keeping link for the text that I want to place in custom shapes.
    – hanugm
    Sep 19 at 22:14
  • So you want star/circle/triangle shaped blocks? You're not asking how to insert vector shapes as graphics/images? That's going to be very difficult for things that are not squares/rectangles. The example you linked to was not HTML, but vector graphics
    – Tom J Nowell
    Sep 20 at 10:48
  • 1
    You can work around it with background images to fool the user, or 100% border radius for circles, but the text inside would still be rectangular, otherwise your options are extremely limited
    – Tom J Nowell
    Sep 20 at 10:58

I don't believe this is really possible, save maybe to the extent you are talking about rectangles/squares.

I posit thst this is not a Wordpress thing as much as a limitation of HTML. HTML was designed to abstract content from formatting. Having non-rectangular shapes breaks the model.

I further posit it is theoretically possible to overcome this using custom javascript - but this is out of the league of even more powerful Wordpress editors (Like Divi and Beaver Builder). Beaver Builder/Divi/Elementor will likely give you more control of your formatting, but still limiting you to rectangles.

  • FYI since about 2017, HTML/CSS text flow works great with non-rectangular shapes, no JS required. But it's one thing to have a CSS directive for it, it's another entirely to have a WYSIWYG Wordpress editor. Sep 19 at 3:31
  • @MaximillianLaumeister Interesting link. CanIUseIt shows extremely limited support for shape-outside and limited support for clip-path though.
    – davidgo
    Sep 19 at 4:00
  • I believe you may be misreading the CanIUse chart. The shape-outside directive is supported by Chrome since 2014, Safari since 2017, Firefox since 2018, and Edge since 2020. Likewise clip-path has excellent browser support as long as you prefix and stay away from external SVGs. Sep 19 at 4:17
  • @davidgo So, is it possible as in the website link I update?
    – hanugm
    Sep 19 at 8:32
  • @hanugm Having 4 blocks in a row as per the ostermiller.org site us trivial in beaver builder if thats what you are asking.
    – davidgo
    Sep 19 at 9:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.