How to create custom blog page in Astra Pro?

frizzel said:

It would help to have a link to your example.

For the 'broken line' you should look into the possibilities of svg vector graphics and the stroke-dasharray attribute as explained here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

A live editor is here: https://gigacore.github.io/demos/svg-stroke-dasharray-generator/

Click to expand...

frizzel said:

Working with an svg is not difficult at all. Consider this svg code:

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
    <line stroke-dasharray="50%, 4%, 10%, 4%, 2%" x1="0" y1="5" x2="70%" y2="5" stroke="#d35145" stroke-width="5" stroke-linecap="round"></line>
</svg>

(Copy this in a text-editor like Notepad++ and save with extension .svg)

• stroke-dasharray is line with a color followed by white space, followed by line with a color etc., so in this case the colored lines are 50%, 10% and 2% with two whitespaces of 4%.
• x1 and x2 are the left and right positions of the svg line. I've set the right at 70% to prevent the dashes repeating.
• stroke="#d35145" speaks for itself: it's the color you want your line to be.
• stroke-width is of course how 'thick' you want your line. Make sure the y1 and y2 values are set to the same value.

And then in your CSS:

CSS:

.elementor-posts-container .elementor-post__thumbnail__link::before {
    content: url(images/test2.svg);
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    z-index: 99;
}

The above code was put in the style.css of an astra-child theme where the svg was uploaded to a folder under the child theme called 'images'.

With an svg as content in a pseudo-element like '::before' makes it impossible to adjust any svg attributes such as stroke width, stroke color etc., which is possible when an svg is an inline element.

Click to expand...