Tetrakern
commented
1 year ago Hello!
I need you to be more specific. What "effect" are you referring to?
If you just want to know how the front page was made, just create a normal page, choose the "No Title Page" template, and add shortcodes as needed. You can set the page as front page under Settings > Reading > Your homepage displays. Please refer to the documentation too. For example, the shortcodes used in the demo are:
[fictioneer_latest_posts count="1"][fictioneer_article_cards per_page="2" ignore_sticky="1" post_ids="207, 461"][fictioneer_latest_stories count="10"][fictioneer_latest_updates count="6"][fictioneer_chapter_cards count="6"][fictioneer_latest_recommendations count="6"][fictioneer_bookmarks count="10"]
The Ko-fi button requires a bit custom HTML that the block editor does not like. The raw content code for the page is:
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><strong><a rel="noreferrer noopener" href="https://github.com/Tetrakern/fictioneer/tree/main#readme" data-type="URL" target="_blank">Fictioneer</a> is an open source WordPress theme and standalone solution for publishing an reading web fictions.</strong> It is completely free but if you want to support the development, you can do so on <a rel="noreferrer noopener" href="https://ko-fi.com/tetrakern" data-type="URL" data-id="https://ko-fi.com/tetrakern" target="_blank">Ko-fi</a>. I also take <a href="https://fictioneer-theme.com/commissions/" data-type="page" data-id="214">commissions</a> for setup and customizations, <em>within reason.</em></p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://github.com/Tetrakern/fictioneer#readme" target="_blank" rel="noreferrer noopener">Get it on GitHub</a></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button" style="height: clamp(26px,10.9090909091vw - 8.9090909091px,32px);"><a href='https://ko-fi.com/Y8Y8111H4' target='_blank' style="display: inline-flex; background: #ff5f5f; border-radius: 2px;" rel="noopener"><img class="no-auto-lightbox" height='32' style='border: 0px; height: clamp(26px,10.9090909091vw - 8.9090909091px,32px);' src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:shortcode -->
[fictioneer_latest_posts count="1"]
<!-- /wp:shortcode -->
<!-- wp:spacer {"height":"24px"} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:shortcode -->
[fictioneer_article_cards per_page="2" ignore_sticky="1" post_ids="207, 461"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Stories</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_latest_stories count="10"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Updates</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_latest_updates count="6"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Chapters</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_chapter_cards count="6"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Recommendations</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_latest_recommendations count="6"]
<!-- /wp:shortcode -->
<!-- wp:heading {"className":"show-if-bookmarks hidden"} -->
<h2 class="wp-block-heading show-if-bookmarks hidden">Bookmarks</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_bookmarks count="10"]
<!-- /wp:shortcode -->
avadasma
Thanks for sharing.
May I ask how to get the same effect as the demo(https://fictioneer-theme.com/) ?