When I saw the new feature to add an image using NOTE widget, I started to imagine how this could be useful on the websites I work on. Around the same time I started participating in a health challenge at my gym. I knew the staff used WordPress to manage the gym’s website content. I thought it would be a relevant use of Note for a flexible message area for eye catching motivational reminders for health challenge participants.
Here is the summary of the solution I implemented:
Assemble the following ingredients for this WordPress project:
- Your website is a self-hosted WordPress powered website(not on WordPress.com)
- The free NOTE plugin is installed AND activated in your WordPress dashboard.
- An image has been added to your media library
In my active theme’s widget area in the header I added a NOTE widget.
This video contains a demonstration of the steps taken to create the combined text and image widget area.
If you prefer text, here is basic outline of the process
- In your WordPress dashboard, find the CUSTOMIZE area (available in the APPEARANCE area)
- Click on the word CUSTOMIZE to open the CUSTOMIZE area
- Find the WIDGETS area (at the bottom of the list)
- Click on the word WIDGETS to OPEN the WIDGETS area
- Find the SIDEBAR area label that corresponds to the display area of your website where you want to put the NOTE text and image
- CLICK on the selected SIDEBAR area to OPEN that are
- CLICK on ADD a WIDGET button
- A List of available WIDGETS will appear on the right in A-B-C order
- Find the NOTE widget in the list of available WIDGETS
- PUT YOUR MOUSE OVER and CLICK on the NOTE widget to insert it in the SIDEBAR
- OPEN the NOTE widget
- TYPE text as the title. You can choose to display the title text to your website visitors, or not. Use the “eye” to control the display of the title on/off.
- CLICK on the EDIT CONTENT button and you should see a yellow flash to show where the NOTE widget is active
- TYPE the desired content text in the area where the NOTE widget is active
- CLICK Save & Publish button located at top of the CUSTOMIZE area
- Put your cursor in the area where you put the content text and a small grey box will pop up.
- CLICK on the image icon in the pop-up area to access your WordPress MEDIA LIBRARY
- Select the desired image from your MEDIA LIBRARY
- (OPTIONAL) Make changes to the image alignment and add a custom link for the image in while you are in the open window of the MEDIA LIBRARY. CLICK on INSERT into WIDGET button.
- CLICK Save & Publish button located at top of the CUSTOMIZE area
- View your website as your visitors will see it. Check the image, text and link for proper positioning and operation.