In This Article:

    Salsa Stock Web Templates

    In This Article:

      Overview

      When to use it

      If you need to create your own, simple web template for use on Salsa pages and our Web Template Extractor isn't an option, these stock web templates provide a quick, economical source of base code which you can customize (in a limited fashion) to match your organization's branding.

      Use these stock web templates to create the framework for pages like this one.

      sample_donation_page.png

      How to get there

      Choose any template from the selections below and copy the source code. Once you have the source code, you'll paste it into Salsa's web template builder in the Website package.

      Step 1:  Copy the Source Code

      Choose the style of web template you'd like to create from the three options below. Click on the image to open up the template image in a new tab of your browser. Then, right click on the image and click View Source Code (the exact text may vary slightly based on what browser you're using). Once you've viewed the source code, copy it onto your clipboard.

       view_page_source.png

      Header Image Web Template

      Header_Image.png

      Sidebar Menu Web Template

      sidebar_menu.png

      Header Menu Web Template

      Header_Menu.png

      Step 2:  Paste the Source Code

      Once you have the source code, you'll paste it into Salsa's web template builder following these instructions.

      1. Navigate to the Website Package.
      2. Expand the Your Website Template section.
      3. Click the text link labeled Create and view other templates and you'll be taken to the web templates listing.

      get_to_web_templates.png

      1. Click the button at the top of the page. A pop-up window with the title Create a new Template will open.
      2. Name the template
      3. Under Choose an editing style, select Create your own
      4. Click . The template creation workflow will open.

       

      go_on.png

      1. Paste the source code (coped in the previous section) into the large source field on the page, and then press the button at the bottom left.

       

      paste_code.png

      1. You can click , then Refresh & Preview to take a look at your web template at any time.

      preview_template.gif

      Step 3:  Customize the Source Code

      When you've copied and pasted the source code (following the previous instructions), you've created an exact copy of our stock web templates, but you'll probably want to customize them with your organization's logo, name, address, etc. Each template's source code has some guiding text in ALL CAPS which highlights areas of the code you can customize. 

      org_name.png

      Header Image Web Template

      Shortcut Icon

      The shortcut icon (sometimes called a favicon) is the little link which displays in your browser tab next to the page title.

      shortcut_icon.png

      The section of the template code you'll need to modify in order to customize this is under the header ADD YOUR OWN SHORTCUT ICON HERE.

      add_your_own_shortcut_icon_here.png

      First, you'll need a simple image that you'd like to convert into a shortcut icon. Resize the image so that it is a perfect square.

      Second, upload your square image to a favicon generator. There are a few available for free online.

      It's it's an option in the generator you select, tell the favicon generator that the output should be a 16 by 16 pixel file.

      16_by_16.png

      The output should be two things:  A .ico file and a few snippets of code.

      • Upload the .ico file in the Images & Files section of Salsa
      • Copy and paste the snippets of code over the placeholder code:  <link rel="shortcut icon" href= "" type="image/png" />

      Your final product should look something like this.

      final_product.png

      Title For Your Organization

      org_name.png

      Google Font Code

      • Navigate to Google Fonts
      • Select the font you'd like to add from the list

      pick_a_font_step_1.png

      • Choose the settings that you want and then copy the code as shown below.

      font_step_2.png

      • Paste this code into the Web Template

      replace_font_code.png

      Homepage Link and Logo

      There are three things to update in this section:

      • The logo which appears at the top of the page - Upload the file to Salsa in the images & files section and then paste the resulting URL here.image_source.png
      • The URL the logo should link to (usually your home page) - Paste your home page URL over the text inside the quotation marks

      URL.png

      • The alt text for the logo - Replace the text YOUR ORGANIZATION NAME with (obviously) the name of your organization.

      alt_text.png

      Note:  If the logo image is not centered, you may have to make a small adjustment under the header CSS FOR CLIENT-SPECIFIC TEMPLATE WRAPPER as shown here.

      center_image.png

      Contact Information

      Make the simple text changes indicated under the all caps text ADD YOUR OWN CONTACT INFORMATION BELOW.

      contact_info.png

      Sidebar Menu Web Template

      All of the same customization options are available which are documented in the Header Image Web Template above:

      • Shortcut Icon
      • Title for Your Organization
      • Google Font Code
      • Homepage Link and Logo
      • Contact Information

      In addition to those options, some additional items are available for customization in the Sidebar Menu Web Template.

      Menu Items

      This web template has a left sidebar with some pre-coded links. To update where users are taken when they click on those links in your web template, simply copy and paste the relevant URL inside the quotation marks. In this example, the homepage URL and the about page URL have already been pasted into the code. The Donate Page URL, the Take Action URL, and the Email Blast Archive URL have yet to be pasted in.  

      homepage_URL.png

      To find the Take Action and Email Blast Archive URL's, navigate to the Useful Links widget on your main Salsa dashboard (the Salsa page you're on as soon as you log in).

      useful_links.png

      For your Donate Page URL, create any donation page in Salsa and grab the published URL by clicking the button.

      Social Media Links

      This template also has placeholder images which can link to your organization's social media pages. Simply replace the placeholder URLs within the quotation marks with the URLs of your organization's social media pages (leave the quotation marks in place - only replace what's within then).

      twitter.png

       

      Header Menu Web Template

      All of the same customization options are available which are documented in the Header Image Web Template and the Sidebar Menu Web Template above. There are no additional customization options which were not previously explained.

      Customization options you'll find in the Header Image Web Template documentation (above):

      • Shortcut Icon
      • Title for Your Organization
      • Google Font Code
      • Homepage Link and Logo
      • Contact Information

      Customization options you'll find in the Sidebar Menu Web Template (above):

      • Menu Items
      • Social Media Links
      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Please sign in to leave a comment.