Recipes are an amazing lead generator and people are looking for recipes all the time. By having people regularly view your user profile page, you have a perfect way of promoting your goods and services.

  • Merchandising
  • Book sales
  • Courses and Events
  • A detailed 'About me' page

The HTML profile header

The HTML profile header is an alternative to a static header image that you may be using now. It does require basic HTML/CSS knowledge but for selected authors we can configure this for you.

If you'd like to discuss CooklyBookly creating the header for you, please email support@cooklybookly.com.

Do's and don'ts

There are a few things to bear in mind when creating your HTML header.

  • Don't make it too tall. You probably want people to be able to see the bio and your posts without having to scroll down. Try to make it no higher than 400 pixels.
  • Don't have too many calls to action.
  • Keep it simple. Often the best way to create it is to use a background image with some simple overlays positioned on top.
  • Develop locally. You will find it much more comfortable to edit and test your HTML on your local machine. You can just create HTML and CSS. Once you're done, you can copy and paste into CooklyBookly.

Configuration

Your HTML header is configured in user profile settings.

  • Click on your Avatar image.
  • Select Edit profile.
  • Click the Profile Page tab near the top of the page.
  • Scroll down to the PROFILE PAGE HEADER fields.
  • Where you see Image and HTML, select HTML. If you are already using a static image, leave it set to Image while you configure and test your HTML header.
  • Click on the EDIT HTML button to open up the code editor.
  • You can now paste in your HTML and CSS.

Technical Notes

  • In your CSS, avoid global selectors such as .h1 {} as these may change page content outside your header. You should wrap them in a unique element such as <pp-outer> and then style them using .pp-outer h1 {}.
  • You cannot use the <style> element in your HTML. Please put your CSS in the provided CSS code tab.
  • Test the responsiveness. The profile header will need to display nicely on both desktop and mobile devices. You use media queries or scaling techniques. An example is shown below that relies largely on scaling.
  • The profile header has a maximum width of 1000px, so please make sure your header container has the same maximum width set if you are using scaling techniques rather than media queries.

Example

Below is an example of a profile header as well as the code used to generate it. This example scales images and fonts based on the width of the container.

Get the code

Click here to get the example code.

Did this answer your question?