Business Branding Directions

Business Branding should be installed through Pagelines –> Store –> Sections

Go to Pagelines –> Store –> Sections –> Top Premium.  Business Branding will show in the list.  If you have bought it the button will say Install.  Or, you can buy it and then Install.

 

Once installed it will show under Your Added Sections.

Next you need to drag the section into the Header for it to appear on your site. Go to Pagelines –> Drag & Drop.

Click on Header and then drag the Business Branding Section into the Header.  Remove any other branding section.

Displaying Logo and/or Site Title and Description

Upload logo through Pagelines –> Site Options –> Website Settings

Uses the site title and tagline entered in WordPress Settings –> General

Upload your logo through Pagelines –> Site Options –> Website Setup

Check the boxes to display the site title and/or site description

If necessary adjust the top and left margins to align the site title/description with your logo. The defaults are 10.

Branding Area Extras

Upload an image or select one from the media library.

You can put some html code here. Useful for code provided for affiliate banners and more.

Additional Information and Social Icons

Upload an image or select one from the media library

Enter up to 3 lines of text

Change the size of text using h2 through paragraph size

Change the top margin if necessary. The default is 10.

Choose to justify text left, center or right. The default is right.

Go to Pagelines –> Site Options –> Header and Footer

Scroll down to Social Icons

Enter in the url for each social network. The social icon will not display when no url is entered.

Change the background color of the whole branding section. Default is white.

Change the color of the site title and description text. Default is black.

Change the color of the additional information. Default is black.

Notes

The size of your logo and/or site title will push the Additional Information and Social Icons down if the width is too wide for all three elements to be displayed inline.

The easiest fix is to adjust the size of the site title text.  This needs to be done with CSS and can easily be accomplished by inserting this code into the Custom Code section in Pagelines.

.section-business-branding a.site-title {
font-size: 24px;
}

Change to the font size needed to display elements inline.

Responsive Layout Adjustments

Resize section for small screens and tablets

If the Additional Information area is pushed below on a tablet screen the easiest way to handle it is to adjust the zoom for the whole section.

// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------
@media (min-width: 768px) and (max-width: 979px) {
.section-business-branding .branding_wrap {zoom: .7;}
}

Gradient Background for Business Branding

Pagelines uses LESS which extends CSS for creating/modifying your website styles.  LESS makes certain styling code easier to write with mixins – think of them like shortcodes where you type in a short code statement and it returns a larger block of code to do your function.

And, Pagelines has built in their theme panel a way to easily add custom code and it accepts the LESS formatted code.

Let’s get started.  First, go to Pagelines –> Site Options –> Custom Code

 

 

 

Now, let’s add some code to the CSS LESS Rules to add our gradient. We’ll start with a simple vertical gradient, you will need two colors, a start and end color, to create your gradient.  I have a dark green, #688227, and a light green, #b7d46e to make my gradient.

 

In the custom code I add the code:

.section-business-branding {
     #gradient > .vertical(#688227, #b7d46e);
}

 

Click on Save and view your website.  It should look like below.

 

If it looks like below it is because you have used a color in Pagelines –> Site Options –> Color Control.  Remove the color from Content Background, if you need a background color but the color in Page Background.

 

What if you want to have the whole header a gradient?  Just change .section-business-branding to #header.  That will get rid of the gap between the branding section and the nav bar.