{"id":29,"date":"2026-05-09T16:30:02","date_gmt":"2026-05-09T15:30:02","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/?page_id=29"},"modified":"2026-05-10T19:48:14","modified_gmt":"2026-05-10T18:48:14","slug":"boxes","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/site-editor-examples\/boxes\/","title":{"rendered":"Boxes"},"content":{"rendered":"\n

The agama themes has some boxes on the from page. Here we have built something similar using a grid. Each grid contains a stack. The stacks are centred and aligned to space between.<\/p>\n\n\n\n

\n
\n

\ud83d\udce6<\/p>\n\n\n\n

This is the text from a box.<\/p>\n\n\n\n

\n
Read More<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

\ud83d\udca1<\/strong><\/p>\n\n\n\n

We have used an emoji to id the box.<\/p>\n\n\n\n

\n
Read More<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

\ud83d\udd01<\/p>\n\n\n\n

Once I’ve made the first box, I wrap it in a grid block and just duplicate it to make more.<\/p>\n\n\n\n

\n
Read More<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

\ud83c\udfc1<\/strong><\/p>\n\n\n\n

You can also create a patten of the first box and then insert that.<\/p>\n\n\n\n

\n
Read More<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

\ud83c\udfac<\/p>\n\n\n\n

There is a little css in the Site editor, this make the boxes bounce a bit.<\/p>\n\n\n\n

\n
Read More<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

\ud83c\udfa8<\/p>\n\n\n\n

There is a little css in the Site editor, this make the boxes bounce a bit.<\/p>\n\n\n\n

\n
Read More<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

In this example we have used CSS to animate the appearance of the boxes. Agama has a lot of animation options. It is probably to much work to replicate this. We do not believe that animation of sections of a webpage it worth the effort. <\/p>\n\n\n\n

The Read more buttons have been styled and could be links.<\/p>\n\n\n\n

If you are linking to post or pages it might be more efficient to use the query loop and style the appearance of the post templates in the query loop.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

The agama themes has some boxes on the from page. Here we have built something similar using a grid. Each grid contains a stack. The stacks are centred and aligned to space between. \ud83d\udce6 This is the text from a box. \ud83d\udca1 We have used an emoji to id the box. \ud83d\udd01 Once I’ve made […]<\/p>\n","protected":false},"author":22,"featured_media":0,"parent":18,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":17,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/pages\/29\/revisions\/525"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/pages\/18"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/siteeditorexamples\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}