How do I build a new page from scratch using the Overfuel Page Content Editor?

Overfuel's intuitive content editor makes it easy for users with no previous experience to build beautiful, professional-looking website content in minutes in a few simple steps…

Getting Started with Pages

1. To get started, login to dealers.overfuel.com.
2. From the left navigation menu, click Pages.
3. Click the Add Page button.

The Pages Content Editor

The editor within Pages is divided into six sections…

• Page Title - Provides the title of the page, as well as the page slug. (this is the portion of the address that would follow the slash “/” after the .com, .net, etc. in your website URL - for example, dealers.overfuel.com/example)
• Preview - Click the Preview button to view the page within your browser.
• Page Settings - Allows additional settings options for the page, including…
• Status - Add the pages to your website “Published” or hold the pages using “Draft.”
• Visibility - Make your page visible using “Public” or hide your page using “Private.”
• Author - Set the name of the person who built the page.
• Page Slug - This is the portion of the address that would follow the slash “/” after the .com, .net, etc. in your website URL. (for example, dealers.overfuel.com/example)
• Meta Description - Provide additional information about the content within the page.
• Save button - Click the Save button to apply changes to the page settings.
• Content Blocks - Using a series of Content Blocks, users with no experience building web pages can create and manage their sites in a flash using Layout, Content, and custom Overfuel Content blocks.
• Layout - Adds containers to hold content blocks and provides options for two and three column formatting, as well as cards to display visual content.
• Content - Blocks to add display, text, visual content and more, eliminating the need for advanced page building experience.
• Overfuel Blocks - Populate inventory, third-party plugins, forms, and reusable content blocks from the Content Blocks editor.
• Content Editor - Add content blocks and containers for build and format your website content.
• Save Button - Click the Save button to save your pages to Overfuel. (we recommend doing this as often as possible - we’d hate for you to risk losing your hard work!)

Content Blocks

Content Blocks within the Pages editor are broken into three categories.

• Layout
  • Container: Container blocks provide the core of the Overfuel content management system page builder and are used to hold other content blocks, layout blocks, and even other containers! Containers provide users with multiple settings options in the Edit Block tab…
  • Display on: Select options for Desktop + Mobile, just Desktop, or just Mobile.
  • Full-width: Choose whether you would like to have the container stretch the full width of the page (if the top-level container) or the container it is nested in.
  • Link entire element: Link the elements of the container to a webpage.
  • Left/right padding: Adjust the amount of space on the edges of the container to narrow the content within the container.
  • Text color: The value of the text color.
  • Border: Make the container border visible.
  • Rounded: Round the edges of the container.
  • Background style: Provides options for adding visual elements to the container.
  • None: Default. Does not add any additional visual element.
  • Solid Color: Select a solid color for the background of the container.
  • Gradient: Set a gradient color for the background of the container.
  • Image: Select an image from your Media Library to display in the background of the container.
  • 2-Col: Allows users to add two containers side-by-side within an existing container. Clicking into the container block provides access to the Edit Block tab including the Bordered option to include a visible border around the container, as well as the Remove Item button to remove the content block from the page. Clicking into the individual column containers provides access to the Edit Block tab including the Column Width option, allowing you to resize the columns within the container space.
  • 3-Col: Allows users to add three containers side-by-side within an existing container. Clicking into the container block provides access to the Edit Block tab including the Bordered option to include a visible border around the container, as well as the Remove Item button to remove the content block from the page. Clicking into the individual column containers provides access to the Edit Block tab including the Column Width option, allowing you to resize the columns within the container space.
  • Card: Provides a highly visual element including calls to action and text. Clicking into the content block provides access to the Edit Block tab including options for adding images from your Media Library, including Card Title and Card Body Copy text, Button Text, Link Button To functionality to direct traffic to different parts of your site, as well as the Remove Item button to remove the content block from the page.
• Content
  • Heading: Allows for headline and subheading-style formatting options. Clicking into the content block provides access to the Edit Block tab including options for changing the Header Tag (H1 is NOT RECOMMENDED), CSS Classes for additional styling options, Align to change the alignment of the headline, Text Color to adjust the heading display text, as well as the Remove Item button to remove the content block from the page.
  • Text: Allows for the inclusion of page copy, including a rich-text editor. Clicking into the content block provides access to the Edit Block tab including options for changing the body Text Color and CSS Classes for additional formatting options, as well as the Remove Item button to remove the content block from the page.
  • Button: Includes a linkable button and customizable text. Clicking into the content block provides access to the Edit Block tab including options for editing Button Text, Button Size, Button Theme, Full-width availability, Alignment, Styling options for additional button adjustment, Link and form Plugin availability, as well as the Remove Item button to remove the content block from the page.
  • Divider: Provides a visible horizontal line to help visually break up a page. Clicking into the content block provides access to the Remove Item button to remove the content block from the page.
  • Image: Allows for the inclusion of an image from the Overfuel Media Library. Clicking into the content block provides access to the Edit Block tab including options to Select Media, provide an Image Description, setting the image as a link with Link Image To with an option to Open In a New Tab, Alignment, Full-Width, setting the image Border Radius, image Opacity, image Width for additional adjustment, as well as the Remove Item button to remove the content block from the page.
  • Video: Allows for the inclusion of a video from the Overfuel Media Library or YouTube. Clicking into the content block provides access to the Edit Block tab including options for selecting videos via Select Media or by including a YouTube embed code, Auto-play and Loop Playback options, as well as the Remove Item button to remove the content block from the page.
  • Spacer: Includes an invisible space within your page. Clicking into the content block provides access to the Edit Block tab including options for Display On to adjust whether or not the space will or will not be visible on desktop, mobile, or both, and individual options for the spacer size on devices via Desktop Height (Pixels) and Mobile Height (Pixels), as well as the Remove Item button to remove the content block from the page.
  • Icon: Includes an image icon within your page. Clicking into the content block provides access to the Edit Block tab including options for Icon Class and Find Icons, Icon Theme for styling, Color, Rotate to adjust the degree of tilt, Alignment, CSS Classes for additional formatting options, as well as the Remove Item button to remove the content block from the page.
  • Map: Displays a map showing a specific location. Clicking into the content block provides access to the Edit Block tab including options for the location’s Search Term, Frame Title to provide a name for the map, as well as the Remove Item button to remove the content block from the page.
  • HTML: Allows users to display custom HTML within their pages. Clicking into the content block provides access to the Edit Block tab including options for including your own HTML code, as well as the Remove Item button to remove the content block from the page.
  • iFrame: Provides a window within your page displaying content from an external source. Clicking into the content block provides access to the Edit Block tab including options for adding an iFrame URL, Frame Title, Height to adjust how large the iFrame displays, as well as the Remove Item button to remove the content block from the page.
  • Check: Includes a “check” style icon, header, and copy field ideal for highlighting list-style items. Clicking into the check content block provides access to the Edit Block tab including all Icon options, clicking into the Heading provides access to the Edit Block tab including all Heading options, clicking into the Text provides access to the Edit Block tab including all text options, as well as the Remove Item button to remove the content block from the page.
• Overfuel Blocks
  • Inventory: Displays location vehicle inventory. Clicking into the content block provides access to the Edit Block tab including the Remove Item button to remove the content block from the page.
  • Plugin: Displays your custom Overfuel page plugins. Clicking into the content block provides access to the Edit Block tab including options for selecting your custom Overfuel plugins, as well as the Remove Item button to remove the content block from the page.
  • Form: Displays previously developed forms from your Overfuel system. Clicking into the content block provides access to the Edit Block tab including options for selecting your custom Overfuel forms as well as the Remove Item button to remove the content block from the page.
  • Block: Enables access to reusable content from Content Blocks (FAQs, Customer Reviews, Staff Members, Job Posts, Offers & Coupons). Clicking into the content block provides access to the Edit Block tab including options for the Block type, the Category in use for that block type, Display styles for the block content, as well as the Remove Item button to remove the content block from the page.

Adding Content to your New Page

• The Content Editor section will be pre-populated with a Container holding a Heading block, a Text block, and a Spacer block. Users can change the content and formatting in these blocks, or drag and drop new blocks into a new position in the existing container.
• Containers can contain other containers, allowing for multiple formatting options.
• Container blocks provide users with multiple settings options in the Edit Block tab…
  • Display on: Select options for Desktop + Mobile, just Desktop, or just Mobile.
  • Full-width: Choose whether you would like to have the container stretch the full width of the page (if the top-level container) or the container it is nested in.
  • Link entire element: Link the elements of the container to a webpage.
  • Left/right padding: Adjust the amount of space on the edges of the container to narrow the content within the container.
  • Text color: The value of the text color.
  • Border: Make the container border visible.
  • Rounded: Round the edges of the container.
  • Background style: Provides options for adding visual elements to the container.
  • None: Default. Does not add any additional visual element.
  • Solid Color: Select a solid color for the background of the container.
  • Gradient: Set a gradient color for the background of the container.
  • Image: Select an image from your Media Library to display in the background of the container.
• Browse through the available content blocks and select the ones you want to add to the Content Editor. To add a content block, simply click and hold on it, drag it onto the Content Editor, and drop it into the desired position. 
• Existing block positions will be highlighted with a red outline.
• The area you will drop your block will be indicated by a green outline.
• To change the position of a content block, click the block and drag it to it’s new position.
• Click Save to save changes to the page content.

Preview and Edit

1. To preview the page, click the Preview button.
2. After reviewing your page, return to the Content Editor and make adjustments as needed. The most common adjustments include…
3. Container Left/right padding - Ensure content on your page doesn’t feel crowded by adjusting the amount of space on both sides of the container.
4. Spacing - Use Spacer content blocks to ensure there is enough vertical space between containers or elements contained within containers.
5. Click Save to save changes to the page content, review using the Preview button.
6. To make any adjustments simply return to the Content Editor, make your adjustments, click the Save button, and click the Preview button to review as needed until you are happy with your page.

Publishing Your Page

1. Click the Page Settings button.
2. To add the page to your Overfuel site, change the Status to Published.
3. To make the page viewable by site visitors, change the Visibility to Published.
4. Set the page author using the Author dropdown menu.
5. Ensure you are using the desired slug by reviewing the Page Slug field and editing as needed.
6. Provide a summary of the page content in the Meta Description field.
7. Click the Save button to apply changes to your page settings.

Congratulations! You have successfully built a page in Overfuel.