How to insert a full width banner

Insert a full width banner

Pages - All pages

Step 1

On the Hacking Health dashboard (http://hacking-health.org/wp-admin/), go to Pages > All Pages.
You can search your page using the search tool in the right corner.

Note: You can also click on Pages to access the list of all the pages.

Other option to edit your page

If you are logged in, you can go on the website to your page, and click Edit Page in the toolbar (at the top of the browser) to edit your page in the dashboard.

Backend editor

Step 2

Make sure you are in the editing mode of the “visual composer” tool:

  • If you see “Classic Mode” on the blue button, (in the top, below the title), you’re in the right place.
  • If you see “Backend Editor” on the blue button, click on it to go to the “visual composer” tool.

Step 3

To add the full width banner section, click on the Templates icon at the top of the page and click Section – Banner 100% image.
The section will appear at the end of the page.

Note: it could take a few seconds.

Templates icons

To move the section, take the “cross arrow” icon and drag and drop the section to the desired location.

There will be two images to edit: The first for widescreen and the second for mobile.

Step 4

To edit the image, click on the “pen” icon. Available when you mouse over the image element.

With this tool, you will be able to uoload an image.

To modify the image, click on the red “x” of the image, then click on the “+”. of the Image Source box.

Click on the Upload Files tab to download the photo.

Click on Set image when done.

Note on the first image for desktop

  • Width: 1950 px
  • Resolution: 72 ppi (pixels per inch)
  • File type: JPG

Note on the second image for mobile

  • Width: 480 px
  • Resolution: 72 ppi (pixels per inch)
  • File type: JPG

Height: The height of the image does not matter. Do not exceed 800px to not fill the entire screen.

A smaller size would create a blurred image on some screens or not covering all the background.
Too much resolution will slow down the display of the site.

Once downloaded, enter an alternative text in the Image Alt box, which will be the description of the image.
This text will be displayed on the site if the image does not appear, and will help SEO (search engine optimisation).

Click on Save changes.

It’s also in this box that you can add a link to the image.

Click on Save changes.

Edit image size

Media - Library

Step 1

On the Hacking Health dashboard (http://hacking-health.org/wp-admin/), go to Media > Library.
You can search your image using the search tool in the right corner.

Note: You can also click on Media to access the list of all the files.

Edit Image

Choose your image, and click Edit Image.

Crop Image

1. Drag and drop the cursor on the image, and choose the area to keep.

2. You can use the Selection tool, in the “Crop Image” section, to get the desired format.

3. Move the selection area to the zone you want to keep.

4. When finished, click on the “crop” tool.

Valérie DoréHow to insert a full width banner