Add any Image as a Section Header Icon

Summary You can replace a section header's icon with any image you like. You upload the image into a note, copy the image's address from the note's code view, then paste it into the section header's code in place of the current icon's address. It takes a touch of basic HTML, and gives you a personalised, visually distinctive section header.

Steps

Introduction. Adding any image you like as a section header's icon is a simple way to personalise your content and make it stand out. Yes, there's a touch of basic HTML involved, but it's surprisingly straightforward. As you meet these little snippets of knowledge and see them in action, you'll find they are logical and even fun to play with. This isn't just about looks: it also sparks your curiosity and helps you feel more confident. Removing that initial anxiety or fear about "coding" makes the platform not only more approachable but genuinely exciting to explore.

Step 1

Find the image you want, for example online, and download it to your device. Images must be saved as JPG or PNG.

Step 2

Drop a note into the SD: in the row of purple buttons above the SD's section headers, click and hold the Note icon (a pencil), the second from the left, drag it into the SD and let go. A new row appears, and the New Note panel opens on the right of the screen.

Step 3

Upload the image: drag it onto the dashed box under the note's text box, or click Browse in that box to choose it from your device. The image appears in the note's text box.

Step 4

To see the note's code, click the code button <>, the last button in the second row of formatting buttons above the text box. The text box switches to code view.

Step 5

In the code, find the image's location: its web address. Highlight the whole address, from http at its start to the file type at its end (png or jpg), and copy it.

Swapping the section header's icon

Step 6

Go to the section header you want to change. On its row, click the small grey edit button, just to the left of its icon.

Step 7

The Edit Section Header panel slides out on the right of the screen, in the code editor view. Replace the location of the current icon with the location you copied: first, in the code, highlight the current icon's location, from https at its start to the file type at its end (for example svg), and delete it.

Step 8

It helps to know what the parts of the code do: - The code button <>, above the box, is the toggle that switches the HTML editor between the code view and the WYSIWYG view. WYSIWYG stands for What You See Is What You Get, the standard publishing view most users use. - After src= comes the URL where the current image or icon is filed. src stands for source: the file can be found at that URL address. You are simply swapping that URL for the one you copied. - The width and height in the code tell the browser how big to show the image. For icons in section headers, the default size is 38px by 38px. px stands for pixel, a common unit of measure that computers use. - The text at the end of the code is the section header's title. You can alter the size of the new image by changing the px values, as long as you keep them both the same.

Step 9

Paste the location you copied in place of the one you deleted, inside the quotation marks after src=.

Step 10

Click Save, at the bottom left of the panel.

Step 11

The new image is now the section header's icon.