Landing Page Builder Tips

This should help you with with some of the more common issues you may come across or questions you may have. If you would like to see anything else added on this page, please let me know! gary.horrie@osfhealthcare.org

Want to see some of the newer blocks in its full glory? Here you go.

New blocks sample page

Editing text from within the “Content” mode.

The content mode only allows you to edit text. If editable, the text block will have a red dashed line around the border of the text block. Upon clicking on the block, you’ll get a pop up window that contains the text.

Formatting problems can occur if you are pasting from rich text (Word or email). Also, there is a bug if you select text with your mouse & release your click outside of this window.

To fix both issues, it’s recommended that you:

• Simply switch to the HTML view (<>) icon. This will strip any formatting in upon pasting a fix the issue with selecting text.

Update ALL CTA buttons in one fell swoop.

All of the CTA buttons have a class set to them within the HTML. So, by changing a couple attributes within the class, all of these change. The place to do this is within any of the header blocks. You will need to be on the “Elements” building mode, hover over the header block and then select “Source”. This will review the HTML and at the top, you will find the styles to update. Just update the  2 colors and viola. The first number is the normal button color. The second is the hover color.

Note #1: You will need the 6 character web hex code.

Note #2: When you save and go back to the canvas, not all of the blocks will display the new color on the buttons. It should however, be correct upon previewing the page using the “Preview” button.

Padding and Margins

There are classes that you can add to any element if you’d like to add space to any direction around the element, be it top, right, bottom, left or all sides. Remember “padding” is on the inside of the element and “margin” is on the outside of the element. The code format is standardized using hyphens to separate the configuration.

Padding/margin (p or m) – area (top, right, bottom, left, y axis, x axis or a for all sides) – size (md, lg or nothing for small and 0 for none)

Some common examples:

• p-y-md   Padding on top and bottom medium sized
• p-t-lg      Padding on the top only at a larger size
• m-a         Small margin on all sides
• m-l-md     Margin on the left only at a medium size.

Want to dive in deeper & see what exactly the sizes are? Here you go!

Adding a CTA Button.

Copy/Paste this code into your Source code:

<a href="#" class="btn btn-shadow cta-color text-uppercase btn-lg smooth-scroll" data-selector="a.btn, button.btn, .btn" style="">Request an Appointment</a>

Classes, Columns, and Grids… oh my

Since the builder produces layouts that are responsive to different size browsers and conform to mobile devices, there has to be built on a grid system (bootstrap)
Basically, there are a bunch of <div> </div>, which are basically container tags that have class=”” within that first opening tag and not in the closing tag with the /. The classes are pre-defined with styles that make the divs act in a specific way. These divs can live inside each other as long as they close in the order that they appear.

For these to function right, and break into columns, they have to be in a specific format as such:

<div class=”container”>
<div class=”row”>
<div class=”col-12-md”>     // Open
<p>This spans the whole width of the master container.</p>
</div>   // Close
</div>
</div>

Most of this is done for you, so don’t worry. But, you’ll notice the class of col-12-md. Again, there is a format here that is divided up by hyphens. First is stating that it is a column that is 12 long. For now, pay no attention to the “md”.

So, 12 what? Well, I’m glad you asked. The “Grid” system is based on 12 columns within a “row” div. In terms of percentage of the page widths, think of 100% as 12 columns. 50% would be 6, 25% would be 3 and etc. There can be no more than 12 in a row, otherwise it will bump down into a second row which we don’t want. So, 4 columns next to each other, you’d have 4 divs; each with col-3-md as a class. Easy, right?

That would look something like this…

<div class=”container”>
<div class=”row”>
<div class=”col-3-md”>     // Open
<p>Column 1</p>
</div>   // Close
<div class=”col-3-md”>     // Open
<p>Column 2</p>
</div>   // Close
<div class=”col-3-md”>     // Open
<p>Column 3</p>
</div>   // Close
<div class=”col-3-md”>     // Open
<p>Column 4</p>
</div>   // Close
</div>
</div>

Now, if your head is spinning, please take a small break. If you want to learn a little more, here you go!

Text Justification

By default, most of the text is probably justified left. If you would like to changes this, there are preset classes that you can add to the class of the container of the text (or even the text tag itself; p, h2, etc). The classes are:

• text-center
• text-left

 

Note: As you can see in the screenshot, you can have multiple classes separated by a space. In the example above, it is in the div which contains the text tags (h2 & p). The class cascades down to them.

Accordion style FAQ block editing

Button Colors…

Within both of these blocks, you have the ability to edit the button colors (default & hover). To do so, enter the “Source” mode and you will find the styles at the very top. Just add the color hex code directly after the # (leaving !important). By default, these button colors are blue.

 

Closing the “Open” tabs.

By default, you’ll now find that the tabs for these are now open by default. That should help you easily edit the text for each of them.

To close them, you’ll need to go into the source code. Within the “Question” for each of these, you’ll find in one of the divs a class of “in”. Just remove that one little word from each question that you want to close & save. If you want it open again, put it right back in there & save. Just make sure you get it in the right class. If you need a reference, you can always add the block in there again, take a peek at the code and then remove the one you don’t want.

Image Sizes

Generally full width (hero) images should be no less than 1200px wide at 72 dpi (1600px if spanning the full width of browser). Body area images, should be 600px wide at 72dpi.
Note: Before uploading into the builder, please save a web optimized image. Images should be no more than 1mb.

Optimizing images...

Images used for web should be optimized for web when saving. The best way to do this is through PhotoShop using File > Export > Save for web (legacy).

This option lets you choose from for JPG, PNG, or GIF as well as adjust the quality and see how the quality affects the image and file size.

Web Images...

JPG: Used for photos or images with a lot of gradients.
PNG-8: Use for solids, vector graphics. Does not work well with photos. Ability to weed out uneeded colors & hold transparency. Basically the same as a GIF, but a little better quality.
PNG-24: Works well with photos & vectors and when you need a smooth transparency such as a soft shadow. 
GIF: Use GIFs for more vectored images. Drop unneeded colors to make the file size go down. Not good for photos or gradients.