Html Codes in WordPress

Html Codes in WordPress – © GerlindeOnline.com

As I am still a Wealthy Affiliate Student, I found some easy Html codes for websites that work very well for me.

In this post I am going to show you three codes:

Insert a Line break

Center a Video

Create a Downloadable Link for an Image

 

Insert a Line break

When I add an image to the WordPress editor with some text following, very often the text is attached too close to the image, right? It happened here in this post, too with the first lines of text after the image above.

Hitting Enter does not always help, neither hitting SHIFT + RETURN (sometimes it helps, but not always). Many of you might know that issue.

What really does work and what I do mostly (as I try to avoid having too many Plugins or even make changes in the style.css file) is using the following Html code in the Text editor of WordPress in order to force a line break:

<br class=”clear” />

If you need more space, just enter more of it! That would be a paragraph then.

(Note: the codes for paragraph <p> and </p> did not always work for me, so I’m using the line break, instead.)

It’s the easiest and fastest way for me and I only have to keep in mind this code, so I always have some written notes ready on a Notepad of my computer.

These following two Html codes are similar and are working as well for a line break:

<br class=”blank” />

<br />

Just go to the Text editor of WordPress, put the code in between the two words where you want the line break or simply make first a line break and then enter your code.

Here is a test I made for you to show that all of the three mentioned Html codes are working:

I entered the following text in the Visual Editor of WP:

Test1 Test2 Test3 Test4

Then I added the three different codes in the Text editor like this:

Test1 <br class=”clear” />Test2 <br class=”blank” />Test3 <br />Test4

The result in the Visual editor is this:

Test1
Test2
Test3
Test4

You see, every word after the code is on a new line.
Of course, you are only using one code, you don’t need to use different ones, but you can if you like.

For the very desperate ones, I found another nice solution on the internet:

Write a line of text where you want the line break and change the colour of the text into the same colour as the background! It works… 😀


Center a Video with Html

Video_centered
Center a Video with Html – © GerlindeOnline.com

You have embedded a nice video into your WordPress Editor but it would be nicer if centered?
Normally, I try to embed the larger version of the video that perfectly fits into my editor, but not all of the videos give you the option to choose the size of the video to embed.

In this case, it’s very simple: you need to add two codes to the iframe code of the video:

<center>

</center>

Go into the Text editor and add the first code at the beginning and the second code at the end of the code of the video:

centered video with html code

When you going back to the Visual editor of WP, you are going to see already that the video is centered and it looks really better that way.


Create a Downloadable Link for an Image

When I wrote my article about creating a 3D eBook Cover, I realised that it’s not so easy creating a link to make an image downloadable with one click.

Adding a pdf file for Download is easy, right? But how about an image?

As I wanted to add a blank eBook template for download, I was wondering how to do that.

I found this source:
http://www.wikihow.com/Make-a-File-Downloadable-from-Your-Website

I was very happy because it was the solution for my problem.

But I was still facing a few issues. As I was able to solve them, I’ll show you how I created my downloadable link for an image:

I only had the Url of the images, but I needed an Html code.

 

Here is the Url I had:
https://gerlindeonline.com/wp-content/uploads/2017/01/Ebook-3d-Vorlage.jpg

You obviously might have another one. In this example, I’m using this one.

Step 1: Copy the Url of the image into your Visual editor – after a few seconds, the image opens!

Step 2: Click on the image in order to edit it (pencil icon).

In DISPLAY SETTINGS the default settings are Link To None.

Note: When you leave the settings like this, you are getting the wrong code:

<img class=”alignnone” src=”https://gerlindeonline.com/wp-content/uploads/2017/01/Ebook-3d-Vorlage.jpg” alt=”” width=”867″ height=”1024″ />

But you need a code which begins with <a href=” (it took me awhile to figure that out).

So, you have to click on the image, click on Edit (pencil icon) and change the settings into Link To Image URL – Update!

Now you have the right Html code with <a href=”:

<a href=”https://gerlindeonline.com/wp-content/uploads/2017/01/Ebook-3d-Vorlage.jpg”><img class=”alignnone” src=”https://gerlindeonline.com/wp-content/uploads/2017/01/Ebook-3d-Vorlage.jpg” alt=”” width=”867″ height=”1024″ /></a>

Step 3: Go into the Text editor and copy the code into a Notepad or Word file.

Step 4: The Html code you need to add now is the following:

download=””

Just add download=”” after jpg” (with space) as shown below:

<a href=”https://gerlindeonline.com/wp-content/uploads/2017/01/Ebook-3d-Vorlage.jpg” download=””><img class=”alignnone” src=”https://gerlindeonline.com/wp-content/uploads/2017/01/Ebook-3d-Vorlage.jpg” alt=”” width=”867″ height=”1024″ /></a>

Step 5: Copy the entire Html code into the Text editor of WordPress just where you want it to be, and you are getting this (if the image turns out too big, just resize it by dragging the little edge box):

Click for download

If someone clicks now on the image, it’s immediately downloaded to the computer.

I’d like to mention this:

The recommended code to add was download> but I noticed that after updating it always turned into download=”” – so I tried to add download=”” in the first place and it worked!

As there are different images it may not always work. You have to try it and find out.

With another template, for instance, I had an issue with the code and I just compared the two codes and I discovered a part of the code that should not be there (target blank), so I simply cancelled this part and it was downloadable!

Note: This Html code may not work in Safari, Internet Explorer, or Opera Mini. Users with these browsers will open the file in a new page and have to save it manually.

As I am not an expert of Html codes, I was just happy to find out these codes which made my WordPress life much easier.

If you have some other easy Html codes that work fine, just leave a comment below.

Read here my other WordPress training about how to make a Dead Link in WordPress.

Some Easy Html Codes in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *