Help Wordpress page layout

[editor]

I could do this in HTML/CSS but I'll be here all day so is there an easy-peasy lemon-squeezy way to recreate a page like this using a Wordpress template (or whatever) - preferably without having to install anything else:

 

[Pickman's model]

don't know, but i hope you're going to have a section about daytime drinking to complement the late night drinking

 

[Drarok]

Depends on what browsers it has to work in… It's really easy* these days if you only need to target modern browsers using flexbox. I threw together a live demo if you wanted to take that route.

* by easy, I mean relative to doing the same thing with horrible CSS like float and position, and other assorted hacks.

 

[RoyReed]

If you're using Gutenberg blocks, then there's a block called Columns that I think will do what you want. Basically you just have a series of rows of these blocks with two columns to each row with and image on the left and text on the right.






They're even responsive and will stack the columns on small screens - or at least they do on the theme I used them with.



E2A - they work using CSS flexbox in case you were wondering.

 

[Drarok]

Ignore what I said, RoyReed actually knows what he's talking about with regards to WordPress!

 

[editor]

Depends on what browsers it has to work in… It's really easy* these days if you only need to target modern browsers using flexbox. I threw together a live demo if you wanted to take that route.

* by easy, I mean relative to doing the same thing with horrible CSS like float and position, and other assorted hacks.

I like the code but I can't remember how to get the page to reference to the CSS (if I just add it to the page via <style> nothing happens)

 

[editor]

If you're using Gutenberg blocks, then there's a block called Columns that I think will do what you want. Basically you just have a series of rows of these blocks with two columns to each row with and image on the left and text on the right.

Thanks but I have no idea what a Gutenberg block is! I'm using the old fashioned original editor.

(*to think I was once an 'expert' on web design. I'm a bleeding idiot now!)

 

[RoyReed]

Since v5.0 Gutenberg is the new WP layout engine. Each element on the page (paragraph, image, heading, whatever) is set as a block.

How to Use the New WordPress Block Editor - Your WordPress Gutenberg Guide

It's a bit of a learning curve if you're used to the old WP editor. I can give you a run through if you want. PM me if you're interested.

 

[editor]

Since v5.0 Gutenberg is the new WP layout engine. Each element on the page (paragraph, image, heading, whatever) is set as a block.

How to Use the New WordPress Block Editor - Your WordPress Gutenberg Guide

It's a bit of a learning curve if you're used to the old WP editor. I can give you a run through if you want. PM me if you're interested.

I had a go at it and REALLY couldn't stand it. 99% of the time my WP needs are straightforward and this seemed to complicate everything. Because all the Buzz/urban stuff I do is 'spare time' work, I haven;t had time to even attempt to learn it - but thank you for your offer!

 

[Drarok]

I like the code but I can't remember how to get the page to reference to the CSS (if I just add it to the page via <style> nothing happens)

I'd have thought pasting a <style type="text/css"> element into the "Text" view of editing a post would work, but I only really work with the nuts and bolts of WordPress, I don't ever actually use the user interface. Seems you can add CSS to the whole site via Appearance -> Customise?

 

[RoyReed]

I had a go at it and REALLY couldn't stand it. 99% of the time my WP needs are straightforward and this seemed to complicate everything. Because all the Buzz/urban stuff I do is 'spare time' work, I haven;t had time to even attempt to learn it - but thank you for your offer!

There's a free page builder plugin that will let you do pretty much what I did above using Gutenberg blocks. I've only used it on one site, but it works with the old TinyMCE editor: Page Builder Plugin

I'd have thought pasting a <style type="text/css"> element into the "Text" view of editing a post would work, but I only really work with the nuts and bolts of WordPress, I don't ever actually use the user interface. Seems you can add CSS to the whole site via Appearance -> Customise?

Either way should work, but another way is to use a child theme and put custom CSS into the style.css file in the child theme folder.