Pagination Styling

Hi Ivaylo,

Why not use a Block Element - Post Navigation instead?: https://docs.generatepress.com/article/block-element-post-navigation/

This should allow you to easily modify the post navigation.

Isn't the first option ( just with CSS ) lighter and faster? Trying to keep GenerateBlocks usage to minimum.

In terms of performance, I’d say GenerateBlocks has its upside over custom CSS added through Additional CSS or style.css.

For one, GenerateBlocks CSS is added dynamically. That is, CSS for the blocks is only added if the Block itself is in the page. Otherwise, it wont be loaded. On the other hand, if you add custom CSS in Additional CSS, or style.css, it’s usually loaded in all pages even if the block isn’t in that page - bulking up a page unnecessarily.

More importantly, it’s easier to modify and it's what we would recommend now.

OK, thanks, let me try it.

You’re welcome Ivaylo!

I managed to reach something similar but still need help.

1. How to put an arrow on each side of the post title? How to style the arrow ( bigger, thinner )?

2. How to make the link color of the title black and not the default blue?

3. Arrow shows on the left instead of right when Left Alignment is used

Hi there,

save that Element as a draft for now.
Create a new Block Element and choose the Element Type: Post Navigation.

Then instead of adding a Template. Change the editor to the Code Editor ( 3 dot menu in Top Bar ).

And paste in this code:

<!-- wp:generateblocks/container {"uniqueId":"d1dd99b1","paddingTop":"20","paddingRight":"0","paddingBottom":"20","paddingLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"a4b97d6a","columns":2,"horizontalGap":30,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"9c89f761","isGrid":true,"gridId":"a4b97d6a","width":50,"widthMobile":100,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","marginBottomMobile":"10","isDynamic":true,"blockVersion":2,"gpRemoveContainerCondition":"no-previous-post"} -->
<!-- wp:generateblocks/grid {"uniqueId":"c04126aa","columns":2,"horizontalGap":15,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"9cf413a8","isGrid":true,"gridId":"c04126aa","width":15,"widthTablet":25,"widthMobile":15,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"38a2c075","fillHorizontalSpace":true,"fillHorizontalSpaceTablet":true,"fillHorizontalSpaceMobile":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"bec8d56e","hasUrl":true,"hasIcon":true,"removeText":true,"backgroundColor":"","backgroundColorHover":"","textColor":"var(\u002d\u002dcontrast)","textColorHover":"","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","iconSize":1.5,"blockVersion":2,"gpDynamicLinkType":"single-post","gpDynamicSource":"previous-post"} -->
<a class="gb-button gb-button-bec8d56e" href="#"><span class="gb-icon"><svg aria-hidden="true" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"625f3305","isGrid":true,"gridId":"c04126aa","width":85,"widthTablet":75,"widthMobile":85,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"3d262c0b","element":"p","fontSize":14,"marginBottom":"0","className":"","gpDynamicTextReplace":"Date","gpDynamicSource":"previous-post","gpDynamicDateUpdated":true} -->
<p class="gb-headline gb-headline-3d262c0b gb-headline-text">Previous Post</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a6f36397","element":"p","linkColor":"var(\u002d\u002dcontrast)","marginBottom":"0","gpDynamicTextType":"title","gpDynamicLinkType":"single-post","gpDynamicTextReplace":"Previous post title","gpDynamicSource":"previous-post"} -->
<p class="gb-headline gb-headline-a6f36397 gb-headline-text">Previous post title</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"5d70717c","isGrid":true,"gridId":"a4b97d6a","width":50,"widthMobile":100,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","alignment":"right","alignmentMobile":"left","isDynamic":true,"blockVersion":2,"gpRemoveContainerCondition":"no-next-post"} -->
<!-- wp:generateblocks/grid {"uniqueId":"ee647ff2","columns":2,"horizontalGap":15,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"78f3ead4","isGrid":true,"gridId":"ee647ff2","width":85,"widthTablet":75,"widthMobile":85,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"8ac35083","element":"p","fontSize":14,"marginBottom":"0","className":"","gpDynamicTextReplace":"Date","gpDynamicSource":"next-post","gpDynamicDateUpdated":true} -->
<p class="gb-headline gb-headline-8ac35083 gb-headline-text">Next Post</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"643cf12f","element":"p","linkColor":"var(\u002d\u002dcontrast)","marginBottom":"0","gpDynamicTextType":"title","gpDynamicLinkType":"single-post","gpDynamicTextReplace":"Next post title","gpDynamicSource":"next-post"} -->
<p class="gb-headline gb-headline-643cf12f gb-headline-text">Next post title</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"780c810b","isGrid":true,"gridId":"ee647ff2","width":15,"widthTablet":25,"widthMobile":15,"orderMobile":-1,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button-container {"uniqueId":"fe863527","fillHorizontalSpace":true,"fillHorizontalSpaceTablet":true,"fillHorizontalSpaceMobile":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"122d9fa4","hasUrl":true,"hasIcon":true,"removeText":true,"backgroundColor":"","backgroundColorHover":"","textColor":"var(\u002d\u002dcontrast)","textColorHover":"","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","iconSize":1.5,"blockVersion":2,"gpDynamicLinkType":"single-post","gpDynamicSource":"next-post"} -->
<a class="gb-button gb-button-122d9fa4" href="#"><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="1em" height="1em" aria-hidden="true"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" fill="currentColor"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

Then switch back to the Visual editor.

All of the blocks, can be styled for color and font size in the editor.

Thanks, just one more thing - I need to make the background color for those 2 boxes and separate them with white space. Like in the example:
https://copyblogger.com/email-subject-lines-for-sales/

Can't see where is the Font name in the code above.

Each block can be styled in the block editor.
If you use the Block List, you can select the 2 column Container Blocks easily and then add a Color background and some padding. See here:

https://www.screencast.com/t/6GI77azDIDbA

Hi David,

I've played around with it and while I managed to make it look nice on Desktop, it looks terrible on mobile. See below the example ( scroll down until the end of the page )

It is misaligned and Arrow for the Next is on the left, not on the right. And no white spacing between the two block ( above/below )

1. You can add a vertical gap to the Grid block for mobile.

2. You have a-10px left margin set for this container, leading to the misalignment.
https://www.screencast.com/t/eGVd8o2M

Thanks, so it's only the arrow now on mobile that shows on the wrong side.

You can set the title container's order to -1 on mobile.
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item

Thanks, all is good!