Layout Builder Components User Guide

Installing LBM Components

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. Version CC and higher have dropped support for the MXP format. To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

 

Accessing the Components

There are four ways to access LBM Component interfaces. Choose the one most suitable to your workflow. When you open an interface, the system will detect the appropriate mode (Insert or Modify).

1. Insert Bar

2. Insert Panel

3. Insert Menu

4. Right-Click

LBM Responsive Video Wrapper

Instantly insert or modify a responsive video at any location on your page.

Click the Insert or Modify Video Wrapper icon in the LBM section of your Insert Bar, Insert Panel, Insert menu, or right-click menu to open the UI.

The Video Wrapper component works with major third-part video services such as YouTube and Vimeo, or others that use iframe-based embed code. Go to your video service's web page and copy the embed code for the video you wish to place in your page.

Paste the embed code inside the Embed Code box.

Set your Styling options.

Click OK.

LBM Responsive Google Map Wrapper

Instantly insert or modify a responsive Google map at any location on your page.

Click the Insert or Modify Google Map Wrapper icon in the LBM section of your Insert Bar, Insert Panel, Insert menu, or right-click menu to open the UI.

Go to the Google Map web page and copy the embed code for the map you wish to place in your page.

Paste the embed code inside the Embed Code box.

Set your Styling options.

Click OK.

LBM Button Maker

Instantly create or modify inlne CSS buttons at any location on your page. You need to make a simple decision before opening the UI. If you want to convert existing text on your page into an LBM Button, select that text before opeing the UI. If you want to place a button and set the text inside the Button UI, simply place our cursor where you want the button to appear. Now you can open the UI...

Click the Insert or Modify Button icon in the LBM section of your Insert Bar, Insert Panel, Insert menu, or right-click menu to open the UI.

If you selected existing text before before opening the UI, it will already be inside the Button Text box. If not, there will be an editable placeholder.

Set the Link Path to the URL of your choice. You can type it in directly or use the Browse... button..

Select your Styling options.

Click OK..

Button Maker CSS Edits

Buttons are extremely easy to edit. Please do so directly in the p7LBM-Cmpnt.css file, whic can be found inside your p7lbm folder. Do not use Dreamweaver's CSS editing panels or Designer, as they do not adequately support the advanced CSS we use and may corrupt your code. The editable rules you'll need to edit colors and effects will be found near the top of the file, clearly commented. The first 2 rules in the editable section apply to the Button Maker:

****************************
LBM Button Component
Editable Styles
****************************

a.lbm-btn {
background-color: rgb(180,180,160);
color: #000;
padding: 10px 15px;
}
a.lbm-btn:hover {
background-color: rgb(100,100,80);
color: #FFF;
border-color: inherit;
}

LBM Button List Maker

Instantly create or modify CSS button lists at any location on your page.

Click the Insert or Modify List icon in the LBM section of your Insert Bar, Insert Panel, Insert menu, or right-click menu to open the UI.

Use the Add, Delete Item, Move Up, and Move Down buttons to add, delete, and reorder buttons.

Use the Item Text box to enter or edit the text for each of your buttons.

Use the Item Link box or the Browse... button to set the URL path for each of your buttons.

Set your list's Orientation to either Horizontal or Vertical.

Set your Styling options.

Click OK.

Button Maker CSS Edits

Buttons are extremely easy to edit. Please do so directly in the p7LBM-Cmpnt.css file, whic can be found inside your p7lbm folder. Do not use Dreamweaver's CSS editing panels or Designer, as they do not adequately support the advanced CSS we use and may corrupt your code. The editable rules you'll need to edit colors and effects will be found near the top of the file, clearly commented. The last 4 rules in the editable section apply to the Button List Maker:

****************************
LBM Button Component
Editable Styles
****************************

.lbm-btn-list-vert a {
background-color: rgb(180,180,160);
color: #000;
padding: 10px 15px;
}
.lbm-btn-list-vert a:hover {
background-color: rgb(100,100,80);
color: #FFF;
border-color: inherit;
}
.lbm-btn-list-horiz a {
background-color: rgb(180,180,160);
color: #000;
padding: 10px 15px;
}
.lbm-btn-list-horiz a:hover {
background-color: rgb(100,100,80);
color: #FFF;
border-color: inherit;
}