Ulysse Creation

Table of Contents

The BM Box Elementor Widget – BeliefMedia Finance & Mortgage Broker Digital Marketing

WP ViVid Pro
We offer you to save 20% at WPvivid, on all their plans with the promo code DISCOUNT20
DISCOUNT20
Planethoster
We offer you to save 25% at Planethoster, on all their plans with the promo code PHA-WEB25
PHA-WEB25
Previous slide
Next slide

As part of a recent update to our mortgage broker website framework update, we introduced what we call the BM Box to support some basic content and navigation panels. Elementor provides a large number of box-style features, but none that were suitable for our purpose, so we created the BM Box as a multi-purpose widget with an expectation that we’ll create more soon.

The BM Box is simply a customisable box with a title, subtitle, and description. An optional border and border ‘curve’ may be applied. Every element applied to the box may be styles to your liking. In this article we’ll introduce the BM Box and Box Elementor Widget, and we’ll also describe how various rate placeholders are used to return the lowest rate of any type in the various text fields.

To illustrate how we use the Box on your broker website, the ‘Services’ page – accessible from the primary menu and above the dropdown options – is shown below. The box is designed to emulate the default style applied to the lender widgets; this permits you to maintain presentation consistency when rendering basic features.

Pictured: Mortgage Broker Website ‘Services’ page. The box is simply designed to emulate the stylistic presentation of the lender widgets. The style allows more consistency to be applied to content when it’s required. In the pictured example, each of the widgets includes a linked title as white text on a black background, a basic subtitle, and description text. Each widget includes a small black border.

  BM Box Shortcode

The BM Box can be returned with basic shortcode, and we’ll render a basic box below without Elementor support. The result:

Personal, Business, Margin & Transactional
This is an example BM Box. We’ve included the url attribute in the shortcode to create a title link to another page. If using Elementor, a section may be divided into three or four columns, and the boxes can easily be placed in each of them.

As you can see, the box is quite basic, but it’s also rather versatile. The title bar, subtitle bar, and description, will only render if text is assigned, so you could use it for a basic textbox with only description text. An icon may be applied to the title, and the title tooltip may also be personalised.

The shortcode used to return the BM Box above was as follows: [bm_box url="url" title="title" text="Subtitle" description="Description" height="0" width="400"]

The following example shows how the Box can take on the shape of a standard textbox.

This is an example BM Box designed to emulate a basic textbox. We’ve set the width to 100% (with the shortcode with attribute of ‘100’ (with any value higher than 100 evaluated in pixels), and we’ve applied a light grey background. We have also aligned description text to the left margin and increased padding to 20px. Adding the title or text’ (subtitle) attribute in the shortcode would have returned those elements. It should be noted that if the title and subtitle are empty, it’ll be assumed you’re creating a textbox, and the description alignment will always be set to ‘left’.

In our final example, we have applied a height of ‘0’ (this forces the height to scale to content, rather than a fixed height (which was the method used on the pictured ‘Services’ page), and we defined the width as 320px.

Consider Textbox Alternatives
We provide plenty of textbox alternatives, including various boxes styled for accredited lenders.

Shortcode is always a little messy and difficult to remember, so the Elementor option, as introduced next, is almost always preferred. The applicable shortcode attributes will be added to the pending shortcode panel in WP’s WYSIWYG content editor.

  BM Box Elementor Widget

The BM Box is usually created with Elementor support. Usage of Elementor negates the need to remember messy shortcodes via an easy-to-use graphical interface. The Elementor creation panel is shown below.

Pictured: The BM Box Elementor Widget. The widget is dragged into any position on a page, and the title, subtitle, and description attributes are all defined. As with the case of the shortcode option, you may apply an icon or URL, style every row, or align the text to the left or right.

  Lowest Rate of Type Placeholders

As discussed in a scheduled article, your website includes a single function that evaluates all text for interest placeholders and replaces them with the lowest rate of a specific type. This feature may be applied anywhere, such as blog posts or in page content, but in the case of the BM Box, the title, subtitle, and description text are all evaluated for these placeholders.

Fixed Personal Rates from 3.29%
Using a placeholder of %%rate%% and %%comparison_rate%% we return 5.39% (3.16%*). A large number of placeholders apply. For the purpose of the demo, we’ve align text to the left of this container (rather than default centering).

The BM Box result is cached for 24 hours to speed up page loads, and it ensures that unnecessary requests aren’t made to the Rates API. The placeholders are listed in an article that introduces the feature (and an Elementor option).

  Textbox Alternatives

While the BM Box is rather versatile, you have other options, such as the Bankbox (a number of examples are pictured below).

This is a Commonwealth Bank textbox. It’s handy when highlighting one product over another, or making a specific statement about a particular bank.
This is an ANZ Textbox
The title colour is applied based on the primary bank colour but you may overwrite this with various shortcode attributes, as introduced shortly.
Demo Owner Occupied Rate from from 4.69% (Comparison Rate of 4.7%*)
A home loan with a variable interest rate and low fees. Learn More
Sidebar Commbank Bankbox

This is a sidebar widget. Note that

See more Bankbox examples here. Not unlike the BM Box, the Bankbox will also show live bank product data.

Remember, Elementor itself also provides for a large number of default box-style navigation tools.

  Conclusion

The BM Box is simple. We know that… but it’s a functional navigation tool, and used anywhere it introduces yet another manner in which to manufacture pathways or return engaging information.

Featured Image: Union Bank of Australia, Kingaroy, c1907. The Union Bank of Australia was an Australian bank in operation from 1837 to 1951. It became the Union Bank of Australia Limited in 1880. The bank remained open throughout the economic crises of the 1890s. It acquired the Bank of South Australia in 1892. By its centenary in 1937, it had 267 branches and agencies through Australia and New Zealand. The bank merged with the Bank of Australasia to form the Australia and New Zealand Bank Limited in 1951. Settled in the 1870s by the Markwell brothers, Kingaroy expanded when the railway came through in the 1890s. It was traditionally known as a centre for growing peanuts and navy beans but since the 1990s it has become the centre for an important wine growing region in the South Burnett area. [ View Image ]

This content was originally published here.