UI Kit

Table of Contents

 


Order of Operations

  1. Click the BeaverBuilder icon in the top administrator bar
  2. Click the Plus button in the top right to add elements to a page
  3. Start by adding a row.  Click the "Rows" label at the top of the tooltip which appears after clicking the button in step 2.
  4. To use any of the pre-built rows created for the website's specific layout, click the "Columns" label in the Group menu.  Find the "Saved Rows" option and click that. A variety of options to include appear
    1. Note: Default Rows can be used, but they aren't formatted to the specific needs of the site. If more row and column settings are needed please contact development for more assistance.
  5. Click, hold, and drag the row you would like onto the stage of the site.  You will see dotted outlines around previously established areas and a solid blue background with the row name where you are about to place your desired row. Let go of the mouse to confirm.
  6. To add modules or blocks to a page, click the "Modules" label at the top of the tooltip which appears after clicking the button in step 2.
  7. Drag and drop any of the modules onto the stage and inside a row of your choosing to edit. NOTEPrebuilt modules specific for your site have been created and can be found by clicking "Standard Modules" from the Group menu and clicking either "BankNewport Custom Modules" or "Header"
  8. Click, hold, and drag the module you would like onto the stage of the site.  You will see dotted outlines around previously established areas and a solid blue background with the module name where you are about to place your desired module. Let go of the mouse to confirm.
  9. The editor will appear, allowing you to enter any desired data or copy into the module. Once you are done, hit Save.
  10. To finish editing the page, click the "Done" button in the top right. It will then ask if you'd like to Discard, Save Draft, Publish, or Cancel.
    1. Discard: Discards any change you made during this editing session on this specific page and exits Builder mode.
    2. Save Draft: The edits made on this specific page will save for administrators to view but non-administrators will not be able to see the unpublished changes.
    3. Publish: Publish any edits made to this specific page publicly.
    4. Cancel: Cancels this process and returns you to editing mode.

Deleting a row or module

  1. In Edit mode, hover over the module or row you'd like to remove. It will be outlined in blue.
  2. You'll see an X on the top left of the row or module.  Click the X.  Confirm you'd like to remove it. Then you may save and publish to complete.

Moving a row or module

  1. In Edit mode, hover over the module or row you'd like to remove. It will be outlined in blue.
  2. You'll see a move icon (four pointed arrow) in the top left bar of the row or module. Click and hold it. You may then drag and drop the row or module wherever you'd like. Then you may save and publish to complete.

Rows

NOTE: You can drag rows within rows so if you'd like a two column structure within One Column Small Width Gray Background, drag a 2 Column structure inside it.

One Column Small Width White Background (Saved Rows)

One Column Small Width Gray Background (Saved Rows)

One Column Medium Width (1200px) White Background (Saved Rows)

One Column Medium Width (1200px) Gray Background (Saved Rows)

One Column Large Width White Background (Saved Rows)

One Column Large Width Gray Background (Saved Rows)

Blue Callout

Copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

Description and copy

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

  • Item A
  • Item B

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Title

Text

CTA

Extra Link

Two Column Split Path

Two column blue background

Two columns and optional background image

Modules


Text Module (Standard Modules)

Standard rich text editor


Image Module (Standard Modules)

talk_to_banker_bg

Video Module (Standard Modules)

Done via embed code


Details Accordion (BankNewport Custom Modules)

Typically used in a full width template

Accordion Title

Expand +

Accordion Content

Disclosures +

Disclaimer Content


Disclaimer Accordion (BankNewport Custom Modules)

Typically used inside container of item needing the description, so it appears the same width.  Note you don't need to create a disclaimer accordion inside a Details Accordion.  That happens automatically.

Disclaimer Title +

Disclaimer Copy


Image Carousel (BankNewport Custom Modules)

Typically used in branch pages but can be used elsewhere for large scrolling images.


Banner (BankNewport Custom Modules)

Full width banner with a line of text and a CTA leading you to another page


Icon and Link (BankNewport Custom Modules)

Can be used in column structures.  Place icon in a circle and formats text appropriately. Boxes will be center aligned in the container.

invitation_icon

Item Content

CTA Text

Icon with Text Ribbon (BankNewport Custom Modules)

Typically used under hero but can be used anywhere. Copy inside the thin background image should be an H2 but can be formatted to any text style.

talk_to_banker_bg

Copy


Promotional Block (BankNewport Custom Modules)

Displays a percentage promotion, along with CTA, above a background image.  Can hold up to two percentages with corresponding info.

9.99 % APR

12-Month


Learn More

Split Content (BankNewport Custom Modules)

Two column split block with room for copy or an image on either or both sides. Triangle will appear on side of content area. An optional logo can be placed over top of the image.

Content


Team Member (BankNewport Custom Modules)

Select a team member from the dropdown and their information will appear formatted appropriately. Create team members in the dashboard under the Team menu on the lefthand bar.

Gina M. Lauro

Vice President, Mortgage Producing Sales Manager

East Greenwich and West Greenwich

401.845.8792

NMLS# 680438

Get Started

Stack (BankNewport Custom Modules)

Display a stack, created on the dashboard under the Stack menu on the leftbar bar. A stack is a series of modules that can be placed on multiple pages, and a change to the stack will change that information on each page. Can give the stack a title.


Stack Carousel (BankNewport Custom Modules)

Acts similar to the stack, but each new row in the stack will be a new item in a carousel. This is helpful for displaying a series of full-width modules (particularly ones like the Split Content module) and not hugely increasing the page's white space.


Hero (Header)

Create the header of the page. Many options for text treatments, images, CTAs, and more are available inside.  Note: the hero will typically overlap under the navigation.  If you would not like to have this overlap, go into the page's editor on the dashboard, select the checkbox to not have the overlap, and publish. The text editor gives a wide range of freedom. You typically want to make the page's title an H1, copy under it a generic paragraph, and center align everything.

Hero Title

Hero copy