Theme Codes

New WPUnite themes share the same code base and the same panels and buttons. See examples and then copy relevant code and paste into WordPress editor in text mode. Adjust accordingly.

Button Examples

Ghost Button
Red Button
Green Button
Medium Orange Button
Large Blue Button
Huge Gray Button

Button Codes to Copy

<a class="ghost-button">Ghost Button </a>
<a class="button red">Red Button</a>
<a class="button green">Green Button</a>
<a class="button orange medium">Medium Orange Button </a>
<a class="button blue large">Large Blue Button</a>
<a class="button gray huge">Huge Gray Button</a>

Panel Examples

Blue Panel
Gray Panel
Green Panel
Red Panel
Yellow Panel
Orange Panel
White Panel

Panel Code

<div class="panel blue">Blue Panel</div>
<div class="panel gray">Gray Panel</div>
<div class="panel green">Green Panel</div>
<div class="panel red">Red Panel</div>
<div class="panel yellow">Yellow Panel</div>
<div class="panel orange">Orange Panel</div>
<div class="panel white">White Panel</div>

Top and Bottom Banner Widgets

Our themes have a top and bottom banner widget area.  These are perfect for a call to action or masthead image with a page name.  Even if you don’t know basic HTML and CSS this should be easy for you to modify by replacing the example text and image url. More examples coming.

Here’s example code you can use to see how it looks.  Just drag a Text Widget into the Top or Bottom Banner Widget area.  Then paste this code into it and save.

Background Image with Call to Action and Button (Replace background image and # link to your info)

<div style="padding: 40px 0;background-image:url(https://s3.amazonaws.com/wpunite-images/cityblur-1920x200.jpg)">
<div style="padding-left:50px;font-size:1.8em;color:white;" class="grid-container">
<h2 class="centered">Here is my great offer! <a class="red button" href="#">Click Here</a></h2>
</div>
</div>

Background Color with Two Columns and White Text

<div style="padding: 40px 0;background-color:#0066bd;">
<div style="padding-left:50px;font-size:1.8em;color:white;" class="grid-container">
[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false"]This Is The Left Column[/lgc_column][lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="true"]This Is The Right Column[/lgc_column]
</div>
</div>

By using a Widget Logic or Widget Visibility plugin you can make different call to actions on any page/post/category and more.

Imagine a unique call to action on any page/post/category here.