Custom code is scary!

You’re using Elementor because it’s a no-coding solution for creating great websites so, why would you want to get involved with custom code, right?  It’s scary, confusing and can easily break your website.  Read on though and discover new horizons while making your Elementor website more efficient ….

Read more

What this article is and what it is not

This article is not a custom code tutorial but we’ll include some links to the best ones later on.  No, what this article is about is shining a light on the possibilities that discovering just a few snippets of custom CSS and PHP can open up for you.  

But I don't want to learn code

Of course, you don’t and we don’t expect you to be but, think about it this way – You don’t have to be a mechanic to own and drive a car but it’s helpful to know how to inflate the tyres and top-up the oil otherwise every time we needed to do these things you’d have to make a trip to the local mechanic which would be both inconvenient and costly so, we may not completely understand what we’re doing or even why we’re doing it but, doing it has benefits.

So it is with custom code, especially CSS.  The key message then is don’t think you need to become a coder to make changes to your website with a small smattering of custom code.

What code are we talking about?

We’re working with WordPress and Elementor so, the languages we need to be thinking about in order of importance are HTML, CSS and PHP and to a lesser extent, JavaScript. 

In brief, here’s what each of them brings to the party.  HTML provides the structure of a webpage, CSS provides the styling and PHP provides functionality.  Of course, it’s not quite that simple because, for example, HTML and CSS can be embedded in PHP but, for simplicity, the basic functionalities are all we need to know.

I’m deliberately leaving out JavaScript (JS) because that adds several degrees of complexity and the likelihood is that you won’t often want or need to write it and use it.

HTML, CSS and PHP

Let’s start with HTML.  As we said, HTML largely sets the structure of a webpage, any webpage.  In its simplest form, it looks like this …  The way the code is shown with indents and colourization is just for the purposes of human readability, in fact, HTML ignores all white spaces (spaces, tabs etc.) when processed by the browser.

The important things to understand in the example below are the words surrounded by <> characters and the case that each example has both an opening tag <> and a closing tag </> which tells the browser where certain things start and end.

				
					<html>
    <body>
        Hello world
    <script>var rocket_beacon_data = {"ajax_url":"https:\/\/grassmedia.co.uk\/wp-admin\/admin-ajax.php","nonce":"5681be447a","url":"https:\/\/grassmedia.co.uk\/expand-your-horizons-and-make-your-elementor-website-more-efficient-with-custom-code","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span"}</script><script data-name="wpr-wpr-beacon" src='https://grassmedia.co.uk/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

Above is the HTML code that would display the words “Hello World” in the top left corner of your browser window in a font (typestyle) that is your browser’s default.  That’s it and, I’m sure you’ll agree, not very interesting.

In this example, we’ve used two different HTML Elements – HTML and body.  Both of these are the highest level of elements and every webpage will have them.  Now let’s extend that code to add some structure.

				
					<html>
    <body>
        <div>Hello world</div>
        <div>I am a web page</div>
    <script>var rocket_beacon_data = {"ajax_url":"https:\/\/grassmedia.co.uk\/wp-admin\/admin-ajax.php","nonce":"5681be447a","url":"https:\/\/grassmedia.co.uk\/expand-your-horizons-and-make-your-elementor-website-more-efficient-with-custom-code","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span"}</script><script data-name="wpr-wpr-beacon" src='https://grassmedia.co.uk/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

In the above example, we’ve added div elements and in doing that, we’ve added some structure to the page – not much, I’ll admit!  If we run that HTML code, it’s going to look like this in the browser …

Hello world
I am a web page.

… but by adding div elements, we’ve opened things up to a bit more meaningful styling…

				
					<html>
    <body>
        <div style="text-align:center;">Hello world</div>
        <div style="text-align:right;">I am a web page</div>
    <script>var rocket_beacon_data = {"ajax_url":"https:\/\/grassmedia.co.uk\/wp-admin\/admin-ajax.php","nonce":"5681be447a","url":"https:\/\/grassmedia.co.uk\/expand-your-horizons-and-make-your-elementor-website-more-efficient-with-custom-code","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span"}</script><script data-name="wpr-wpr-beacon" src='https://grassmedia.co.uk/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

So, now it’s going to look like this in the browser.  See that we’ve added styling (CSS) to each of the div tags to produce different positioning of the text contained in them.

Hello world
I am a web page

In the real world and unless you’re coding a whole new page you’re not going to have to use <head> or <body> elements as these will be included already in the page you’re working on in Elementor.  We can leave these out safely and the div elements will still work as expected.

Now let’s do something useful.  Let’s say you have your business name in a heading widget in Elementor – Let’s use my example of “Grass Media Web Design”.  I can use Elementor’s styling options to easily change the font, colour, size etc. but what if I want to make the word “Grass” green and leave the rest black?  Fortunately, most Elementor widgets will let you use some HTML and CSS within the widget itself so, that’s what we’ve done.  In this case we’ve used the HTML span tag and included within it, the CSS to turn the word Grass green.

Grass Media Web Design

				
					<span style="color:green";>Grass</span> Media Web Design

Let’s just dissect this.  We’ve opened a span tag <span> but, inside of the <> characters, we’ve added the construct style=”color:green” , ended the construct with a semi-colon and closing >.  Now we add the word green before using a closing span tag </span>.   In plain English, this is telling the web browser “Make everything contained within <span></span> green but, after that, go back to normal black.  If we left out the closing </span> then everything would turn green.  This is a common error to look out for so, always make sure that for every opening tag, there is a closing one also.

Note: In colouring the word “Green” we’ve used the explicit colour name.  Browsers understand common colours but usually, we use the hexadecimal colour notation #ffffff to more accurately depict the colours we want so, for example <span style=”color: #43A561″;>

Note 2: When coding HTML, CSS and pretty much any other language, American English rules so, it’s “color” and not “colour” but anything wrapped in quote marks can be spelled however you like”.

So now you know HTML and CSS

Well, maybe not but, if you can understand the simple examples above then you will understand the principles enough to adapt them to any given situation.

We’ve used just three HTML elements in the examples but, there are hundreds that can be used.  Some are really important and used often such as <H1> to <H6> which define anything contained as a heading down to more obscure ones that rarely if ever, get used.  There is a full list of HTML elements and how to use them at https://www.w3schools.com/tags/ref_byfunc.asp

WhatsApp whatsapp