Lily Snyder

I believe it was Sako on Twitter who said instead of recreating landing pages, no code makers should attempt to recreate web interfaces into webpages with no code. But I am but a lowly no code hobbyist who thought my homepage needed a refresh.

So I attempted to recreate this demo site in the Twenty Twenty WordPress theme.

On the surface, it didn’t seem too complicated. I would need to use a mix of Cover blocks, Group blocks, and Media and Image blocks. I thought the biggest challenge would be finding or making images that fit the theme. Graphic designer, I am not.

Let’s get started…

The first image you see on the page is the cover image set on the page in WordPress. I set the Post Attributes to “Cover Template” so that the image takes up the whole screen and scrolls down when the user scrolls. I could have made a custom image to look like the BRADNI site.

The first section is made up of a Media & Text block, paragraph block, and Three-Column block inside a Cover Block. On the cover I set the background to gradient. Everything lined up pretty easily.

There are eight sections to the homepage. I added buttons using anchor links to jump around on the page. Anchors can be set on any block under Advanced > HTML anchor.

Problems

I ran into my first problem after the initial Cover block. I noticed in the Twenty Twenty theme gaps between the blocks. I had to research what CSS to use to make the blocks sit right next to each other like on the BRANDI site. Thankfully, laly.blog had the answer.

If you have to add CSS is it “no code”?

I inserted a Group block after the cover block and added “thinner-group” to the additional CSS class on the page. It worked! The first cover block and group block sit together without any gaps. Unfortunately, I wasn’t able to recreate it with other Cover and Group blocks on the page. So it has some ungainly gaps.

The Solution?

The solution to the gaps would be to add a background image to the page. I found some nice images that similar to the BRANDI theme. Again, I ran into an issue. I couldn’t figure out how to add a background image to a single page. I think I would have to add some weird Group blocks to the page to next the other blocks in to make it look decent.

WordPress Weirdness

The block editor doesn’t reflect reality

One of the annoying things is that the block editor doesn’t entirely reflect reality. After adding the CSS class “thinner-group” I wasn’t sure if it would work because the spacing didn’t change at all in the editor. I had to keep switching the Preview mode in order to see how things would look on the web.

“Sorry, you are not allowed to edit this post.”

So many times I almost completely gave up on the webpage because I kept getting an error message. The autosave wouldn’t always catch my work. When I clicked “Save Draft” I would also sometimes get the error message.

I even got this error message writing this blog post so it’s something messed up with WordPress.

Consulsion

Overall, I think the homepage better represents my style but I wish I could get to to be more like the BRANDI site. I like WordPress because it gets the job done for what I need, mostly writing.

I’m glad they made improvements to the editor. It’s much more easy to integrate other services and make the posts look nice. Maybe with a different theme or more CSS knowledge I could completely recreate the BRANDI design.

---