Skip to content

Header And Footer

← Design
To set up your header and footer click on the Design drop down > Click on Header & Footer.



The header and footer edit screen will appear.

Headers


Modern Design
In Modern design, the Header is displayed as a large background image behind the ordering screens.  The size and portion of the image shown may vary based on screen sizes. The best use of this display element is for photos of food or other graphical elements.  Logos and words are difficult to use in this image, as they may get cut off on certain screen sizes, or be hidden by the ordering screens. 

Try to use an image that has important visuals such on the sides & top rather than centered.  The portions of the image that are seen will vary based on the customer's screen size, resolution and zoom level on their browser.  We recommend the dimensions 1920 x 1080 pixels, but saved for "screen quality" so the file size is small enough to load quickly.

Navigate to Images and upload the image to Thrive online, then right click on the image to "Copy Image Address".  
Navigate to Design, Header/Footer and in the Header area, replace your current Header with the new image by clicking on Insert > Image.  Paste the image URL here.

Classic Design

In Classic Design the header is shown at the top of the page.  This can include an image with your logo or some other graphics that help to match your overall branding.   If you don't design a custom header / footer, the system will generate a basic one using your logo and "promotional message".   


You can design a header using these tools or you can insert one of your own by pasting your HTML code into the box (click on the < > source code icon to paste). Use the edit tools to tweak your header to your liking.




There are three main ways to add a custom header or footer to your online site.

  1. You may add a HTML header. If you are fluent in HTML then you may add header by selecting the <> button and adding the HTML there.  Get your web designer to help!
  2. Use the options on the header/footer page to create a header that you want represented on your online site.
  3. You may also add a header from an image created on a photo shop program such as paint.  The disadvantage of this is that the header will not be mobile responsive.  You'll have to pick a width that you think most people will be able to view and center it.  Viewing this on a mobile device may not be optimal.
  • Navigate to Images > My Images
  • Add the image by dragging the header that was created for the top of your site into the DRAG FILE HERE TO  UPLOAD BOX. Once uploaded it will show in Your Images below. 
  • Right Click the image and copy the image URL.


  • Navigate back to the Header page and select Insert Image.



Click paste in the Source space to insert the header image URL that you copied earlier, Add a description (image title), & the Dimensions will automatically show based on the dimensions of the image that you uploaded.



Click OK when you are satisfied with your image.

Your header will appear at the top of the screen.



Footer:

The footer works the same way as the header, however the content will be placed at the bottom of the screen. Repeat the steps listed above in the header section to add an image or HTML.




Pop-Up:
At the bottom of the header and footer screen, there is also the option to create a pop-up message for first time visitors to the site. You can read more about this in the First Time Pop-Up article.
 


Feedback and Knowledge Base

(thinking…)