unique elements with CSS – gauteheggen.com

WordPress has a lot of different block types. Blocks are what you see in the page/post editor and at their most basic level they are headings, paragraphs, images etc. More advanced blocks can be galleries or blocks that combine text and images. This article will focus on how to give blocks a unique look with some CSS.

Unique headings and paragraphs

For every block you can get a context menu on the right hand side to adjust properties for how that block is presented on the site. There are ususally some basic options such as changing background colour and font colour. With custom CSS classes we can do more. Click on a paragraph or a heading that you want to style in your editor and then click on the advanced option in the right hand menu. Here you can add a custom CSS class. Remember that classes can be used for multiple elements on the site so you can use it on as many elements as you want. I am going to add four classes to three different paragraphs that you can see further down. Here are the four different CSS classes I will add to four headings and paragraphs:

partytime
sad
breaking
bluest

Here is the CSS that will control the appearance of the same paragraphs:

.partytime{
	background-color: #30F2F2;
	color: #355B8C;
	padding: 15px;
	border-radius: 15px;
	border: 15px dotted pink;
	font-style: italic;
}

.sad{
	background-color: black;
	padding: 10px;
	color: white;
}


.breaking{
	background-color: red;
	color: white;
	padding: 10px;
}

.bluest{
	background-image: url("/wp-content/uploads/2020/03/images.jpeg");
	 background-repeat: no-repeat;
  background-size: 100%;
	color: black;
}

Here are the paragraphs with dummy text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

BREAKING NEWS: Trump is a lying sack of shit!

Adjusting image elements

We can try the ‘Cover’ block. To add a new block of any type you click the ‘+’ appearing bottom left of your previous block, or you can also add a new block between two existing blocks. Hover between the existing blocks and click ‘+’. After you click ‘+’ you get a choice of block type. There are several categories. We are looking for one called ‘cover’ and it is under the category ‘Common blocks’. After you add it you have to pick an image frome the media library and then you will see something like this.

The cover image block

This block lets you choose an image and then put a title on top of it, and it allows you to use a coloured semi transparent overlay. In the session last week I used CSS to give each cover element a unique look, but I dod not see that you can simply do this in the menu for the block on the right side of the screen. That means you can get the folowing results wothout using CSS. Simply click on the title or the colour overlay in to adjust their properties.

This old car again

The cover above has a blue overlay and red font. No CSS is used for this.

Same but different

This has a red overlay and blue text, again no CSS. The font can not be changed by default.

You can make your image element more unique with CSS so let’s add a custom font, text shadow and maybe we can even turn the colour overlay into a gradient. Here are the same block but this time with some custom CSS.

Note! In last weeks session I showed how to add custom classes through the html editor but that is not necessary. Each of these elements has a window in the menu on the right to add ‘Additional CSS Class(es)’. It is very easy to add classes, just remember that the classes you add here will only affects one block element. If you want to change the font for every entry title you still have to dig out the selector for that.

In order to try the following CSS add these CSS classe where you need them. In this case you should only add one kind of shadow and one kind of colour to each element.

hard-text-shadow
font-one
soft-text-shadow
font-two

The idea is to use class anmes that add a specific feature to the element. Now let’s play with CSS.

CSS makes a difference

Here is the CSS for the block above. Remember you have to link to the font and also add the class anmes to the html cover element for this CSS to work.

.font-one{
	font-family: 'Contrail One', sans-serif;
}

.hard-text-shadow{
	text-shadow: 5px 5px 0px rgba(255,255,255,1);
}

Different fonts and shadows

Here is the CSS for this variant, again link font and add classes.

.soft-text-shadow{
	text-shadow: 0px 0px 18px rgba(0,255,0,1);

}

.font-two{
	font-family: 'Eater', sans-serif;
	letter-spacing: -12px;
	line-height: 5em;
}

More image elements

Here are som other image elements you can modify with CSS. Forst the regular image block. It shows an image and the caption of that image. The Volvo is still the same. Again there are som options with this particular block you can check before using CSS. You can drag the image to adjust the size but do note that when I did this the caption dropped out of the frame once, so in this instance with an added box shadow around the containing element the captiopn might fall outside and this might be theme specific.

Image of an old Volvo Amazon — As good as new

Here is the CSS for the image element. Because this is CSS is added to a native class called wp-block-image it will affect all elemnts of with that class on your site. Add a custom class like above if oyu want unique features. This CSS sets the padding to 20 px to make a white frame around the image and also adds a soft box shadow to that frame. The last CSS rule called border-radius adds round corners. This ekement also has text-align center since the caption kept aligning left, in other cases I have seen it caption align to center by default.

.wp-block-image {
	  padding: 20px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
	text-align: center;
    border-radius: 20px
}

One more element, Media and text

This element lets you place some text next to an image. This element has one feature that stack the media and text on mobile. This is also as far as this article is updated so right nor this looks no good and has no CSS attached to it.

Amazooooon

Turning an image elment into a link

If you want to highlight a specific story or piece of content on your site you can try these steps to turn an entire image elment block into a link. That means a ‘cover block’, ‘image block’ or a ‘media and text’ block can be used as a link. Here is how you do it with the Code editor and some CSS.