W♥M (WordPress)

Are you a WordPress Block user and would like to use some of my methods for incorporating our format in your posts? You can obviously modify it for your usage.

I like to have a sidebar that floats to the right. This requires a little coding, as I don’t really know how to do this in visual block editor. I’m sure there is a way to create multiple blocks within blocks, but that actually sounds more complicated than my method.

The reason why I’m putting together this step-by-step guide is because I had to quickly learn and understand Block Editor in just a few days. I needed it to format and look a certain way, and so I came up with this solution and would like to pass along this knowledge.

	Step 1: In List View, create a “Classic” block. This should be the first item, so if you created the Classic block later in the list, move it to the top. The reason for this is that the Classic block will float right (or left should you choose to modify the source code).
	Step 2: Click on VIEW in the Classic editor and chose “<> Source Code”.
	Step 3: Copy and paste this code into the source code window: <div style=”border-left: 1px solid #949e32; float: right; padding-left: 20px; margin-left: 20px; width:320px;”> Insert Image Here <div style=”float: none; position: relative; margin-top:-35px; text-align: center; text-shadow: 1px 1px 2px black, 0 0 2em black, 0em 0em .2em black; padding: 2px 6px; color: white; font-size:10px; font-weight:normal;”>Caption Here</div> <p> </p> </div>
	Step 4: Next, click on Paragraph under List View and start writing your first paragraph. In Block Editor, they want you write in different paragraph blocks, so this way you can move paragraph blocks around or insert images or other elements between the various blocks.
	Step 5: Speaking of images, if you have more than one photo, I like to use TITLED GALLERY. Add another block and search for gallery. This will bring up some options – find “Titled Gallery” and then upload or choose your photos from your media folder. This will automatically put your images in a nice mosaic gallery. I think it looks fantastic. It’s very fast and efficient. This is something I used to do by hand (by eyeball), so seeing it instantly is pretty impressive.

P.S. Understanding the code: This is simply a division (<DIV>) that tells the browser what to do. The first item tells the browser to draw a left border of color #949e32 (light green). The next item tells the browser to float to the right, then pad it with 20 pixels and the whole width should only be 320 pixels.

The next Division is the caption, which I’ll summarize as white text with drop-shadows. Look for margin-top as negative 35. That means the caption, normally at 0 will now move 35 pixels above – so it will appear that the text is floating over the image.

vu ♥ weheartmusic.com ♥ twitter.com/weheartmusic