Accelerate User Manual

Introduction to Accelerate

In order to be AMP compliant you must follow a strict set of rules for a number of website features/functions, including the use of Javascript, AJAX forms, iFrames, and even some CSS rules. This makes building a modern website with the full functionality you expect and need a big challenge.

Fortunately the Accelerate theme used in conjunction with the AMP plugin from Automatic gives you the ability to create beautiful modern websites with all the functionality you need while maintaining full AMP compliance.

Installation of Accelerate

  1. Login into wp-admin and open Appearance ~ Themes.
  2. Select “Add New”
  3. Select “Upload Theme”
  4. Drag into or browse for the zip file you downloaded from the site.
  5. Click “Install Now”
  6. When the theme is finished installing, click the “Activate” link.

Customizer Settings

General Layout / Styles

  • Content Max Width : Set a maximum width for the header, nav and page contents. Banner/section colors still extend to the browser edges.
    • No Limit : The site content fills the width of the browser with a small margin on each side.
    • 900px to 1600px : The site content fills the browser up to this width then remains centered while the margins increase on both sides as the browser gets wider. This is useful if you wish to retain a certain look or just want to stretch the page
  • Standard Padding : Choose a standard padding size for a number of elements that use it. (IE: margins, body, image, post separation) This setting can be accessed, utilized and overridden by the stylesheet shortcode and other individual settings.
  • Sidebar Width : Choose a static width for the sidebar on pages that display it.
  • Sidebar Display : Choose which page types will include the sidebar (widget area) from Home, Blog, Page, Post and Category.
  • Font Styling
    • Font Sizes : You have settings for choosing the font size you wish to use for the site and all H1-H6 heading tags.
    • Body Line Height Multiplier : You can adjust the line-height (spacing between lines in a paragraph) using a multiplier of the font size for the font’s location
  • Colors
    • Font Colors : Choose color for your site’s text, links and link hover. These settings require refresh to view all potential changes accurately.
    • Accent Color : This color is used in a number of ways including shadows, accent lines, and title block patterns.
  • Site Background
    • Background Color : The site background color can be set in the “Colors” section of the Customizer.
    • Background Image : An image may be assigned and setup as your site background. This is managed in the “Background Image” section of the Customizer.

Header / Footer

  • Header
    • Site Logo, Title & Tagline : Controls for managing the logo, title & tagline are found within the “Site Identity” section of the Customizer.
    • Text Color : Choose the header text color in the “Colors” section of the Customizer.
    • Background Image : You may assign an image to use as the background for the header instead of a solid color. This is managed in the “Header Image” section of the Customizer.
    • Background Color : Choose the background color for the header, this is overrided if a Background Image is assigned.
    • Base Height : Specify a maximum height for the banner/logo. (plus padding)
    • Vertical Padding : Choose how much space to put above and below the logo/banner text.
    • Text Alignment : Set the text alignment for Site Title and Site Tagline.
  • Footer
    • Background Color : Choose a background color for the footer bar.
    • Text Colors : Choose the colors to use for the footer menu and copyright text.
    • Copyright Text : Enter text to be used as your site’s copyright statement. The Copyright symbol is included automatically. If left blank the theme uses the current Site Title and year.
  • Display Navigation Bar : The navigation bar below the header has it’s own set of styles. It includes the Main Menu (one level) and a Search Box. You can also add a secondary Navbar below it popluated with links for WordPress and WooCommerce categories. You may choose wehther or not to include the bar on the Home and Blog pages.
  • Display Search Box : You may choose which page types to include a standard sitewide search box in the site’s Navigation Bar. (home, blog, categories, pages, posts) The search box will not be diaplyed on custom post types or WooCommerce pages.
  • Text Size : Choose the font size you wish to use for the menu (Main Menu) in the Navigation Bar.
  • Text Case : Choose to capitalize words, force upper/lower case, or just leave it unmodified.
  • Nav Menu Hover Effect : Add a little motion to your menu by choosing one of these CSS animations.
  • Colors & Styles
    • Navigation Bar Colors : Choose background and font colors for the Navigation Bar. The mobile menu also uses these settings for color.
    • Category Bar Colors : The child category bar is styled separately from the Navigation Bar. It is only displayed on archive/category pages that have non-empty child categories.

Title Bar / Hero Banner

Pages and posts have a page title bar that falls below the header/nav bars. You choose the default colors/style for the bar, then add Hero Banner image support as desired.

  • Hero Banner Display : Choose which page types to display the Hero Banner from Home, Blog, Pages, Posts and Categories. The banner will only display if it has a valid image, and will display the page title within the banner. It will use the page’s Featured Image if one is available, then check for a Default Hero Image (below), then default to the standard Title Bar if activated.
  • Default Hero Image : If you wish to fill all Hero Banners with an image when one is not assigned to the particular page or post, you may do so by choosing one as the site’s default Hero Banner image.
  • Maximum Height : Set the height to use for Hero Banners.
  • Text and Background Colors : Choose the colors to use the the title bar when not in “Hero Shot” mode. When using a hero shot, the font color is always white with a text shadow to allow for better readability.
  • Text & Button Alignment : Choose to align the title and buttons in the banner.
  • Title Bar Display : Choose which page types to display the Hero Banner from Home, Blog, Pages, Posts and Categories.

Archives / Posts Lists

  • These options apply to anything that displays a list of posts. (IE: category landing pages, search results, post list shotcodes, recent posts when displayed on the home page)
  • Posts Page / Archives Display Mode
    • Display Modes :
      • Article : The article display mode morphs as the browser width decreases eventually removing the image and content as it gets smaller. Title, author info, date and content left aligned with the featured image on the right.
      • Image Grid : The image grid places image blocks in a row with consitent heights, then drops the row count as the browser size decreases. The image box has a drop shadow and the cat/tag buttons float above the top of the image also with a shadow. The text overlay has a white semi-transparent background.
      • Image & Article : A combination of styles, displaying posts in rows with images above the post text.
  • General Options
    • Image Grid Max-Height : Choose the height of the image box, the width is responsive.
    • Post Images as Links : Choose whether to add a link to the post image when it is clicked in a posts list. This only applies to wider screens, the links are disabled in mobile mode (width 900px or less).

WP Theme Feature Support

This theme supports the WordPress “custom-logo”, “custom-header” and “custom-background” features. They can be accessed in the Site Identity, Colors, Header Image and Background Image sections of the Customizer respectively. They offer advanced usage of the images in those areas.

X

This site uses cookies to offer you a better browsing experience. By continuing to navigate through this site or by clicking Accept, you consent to the use of cookies on your device as described in our privacy notice.