Jump to content
lazlo

Two action buttons in hero unit

Recommended Posts

lazlo    1
lazlo

Hi,

 

 

I would like to have a hero unit with two action buttons (so I can have one button going to contact page, one button going to following page) can this be acheived by copying some of the code in hero/section.php, if so, which part?

 

many thanks

Share this post


Link to post
Share on other sites
catrina    103
catrina

I think the easiest way to include two action buttons would be to use the ContentBox section (http://support.pagelines.me/docs/sections/content-box) to replicate the look of the Hero unit and implement the two buttons using the button shortcode from this page: http://demo.pagelines.me/tools.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

hi, Thanks for your reply Catrina - before i go down the route you have outlined, I would like to see if i can tweak the hero unit itself - herefore i have tried to create the additional arrays, though i cant get teh extra options to show up with the page meta section - do i have to alter any other files  or just teh section.php file in teh her folder?

 

 

<?php
/*
Section: Hero
Author: PageLines
Description: A responsive full width image and text area with button.
Class Name: PLheroUnit
Workswith: templates, main, header, morefoot, content
Cloning: true
*/
 
/*
 * Main section class
 *
 * @package PageLines Framework
 * @author PageLines
 */
class PLheroUnit extends PageLinesSection {
 
    var $tabID = 'herounit_meta';
 
 
function section_optionator( $settings ){
 
$settings = wp_parse_args($settings, $this->optionator_default);
 
 
$option_array = array(
 
'pagelines_herounit_text' => array(
'type' => 'multi_option',
'inputlabel' => 'Enter text for your Hero section',
'title' => $this->name.' Text',
'selectvalues' => array(
'pagelines_herounit_title' => array(
'type'  => 'text',
'inputlabel'=>'Heading',
),
'pagelines_herounit_tagline' => array(
'type'   => 'textarea',
'inputlabel'=>'Subtext'
)
),
'shortexp' => 'The text for the Hero section Header and Subtext content.',
'exp' => 'The title is used for the heading, and the subtext is placed directly beneath it.'
 
),
'pagelines_herounit_image' => array(
'type' => 'image_upload',
'imagepreview' => '270',
'inputlabel' => 'Upload custom image',
'title' => $this->name.' Image',
'shortexp' => 'Input Full URL to your custom Hero image.',
'exp' => 'Places a custom image to the right of the call to action and text.'
),
'pagelines_herounit_cta' => array(
'type' => 'multi_option',
'title' => __('Hero Action Button', 'pagelines'),
'shortexp' => __('Enter the options for the Hero button', 'pagelines'),
'selectvalues' => array(
'herounit_button_link' => array(
'type' => 'text',
'inputlabel' => 'Button link destination (URL - Required)',
),
'herounit_button_text' => array(
'type' => 'text',
'inputlabel' => 'Hero Button Text',
),
'herounit_button_target' => array(
'type' => 'check',
'default' => false,
'inputlabel' => 'Open link in new window.',
),
'herounit_button_theme' => array(
'type' => 'select',
'default' => false,
'inputlabel' => 'Select Button Color',
'selectvalues' => array(
'primary' => array('name' => 'Blue'),
'warning' => array('name' => 'Orange'),
'important' => array('name' => 'Red'),
'success' => array('name' => 'Green'),
'info' => array('name' => 'Light Blue'),
'reverse' => array('name' => 'Grey'),
),
),
),
),
'pagelines_herounit_ctatwo' => array(
'type' => 'multi_option',
'title' => __('Hero Action Button Two', 'pagelines'),
'shortexp' => __('Enter the options for the Hero button two ', 'pagelines'),
'selectvalues' => array(
'herounit_button_linktwo' => array(
'type' => 'text',
'inputlabel' => 'Button link destination (URL - Required)',
),
'herounit_button_texttwo' => array(
'type' => 'text',
'inputlabel' => 'Hero Button Text',
),
'herounit_button_targettwo' => array(
'type' => 'check',
'default' => false,
'inputlabel' => 'Open link in new window.',
),
'herounit_button_themetwo' => array(
'type' => 'select',
'default' => false,
'inputlabel' => 'Select Button Color',
'selectvalues' => array(
'primary' => array('name' => 'Blue'),
'warning' => array('name' => 'Orange'),
'important' => array('name' => 'Red'),
'success' => array('name' => 'Green'),
'info' => array('name' => 'Light Blue'),
'reverse' => array('name' => 'Grey'),
),
),
),
),
'pagelines_herounit_widths' => array(
'type' => 'multi_option',
'title' => __('Content Widths', 'pagelines'),
'shortexp' => __('Select the width of the image and text areas', 'pagelines'),
'selectvalues' => array(
'herounit_left_width' => array(
'type' => 'select',
'default' => 'span6',
'inputlabel' => 'Text Area Width',
'selectvalues' => array(
'span3' => array('name' => '25%'),
'span4' => array('name' => '33%'),
'span6' => array('name' => '50%'),
'span8' => array('name' => '66%'),
'span9' => array('name' => '75%'),
'span7' => array('name' => '90%'),
),
),
'herounit_right_width' => array(
'type' => 'select',
'default' => 'span6',
'inputlabel' => 'Image Area Width',
'selectvalues' => array(
'span3' => array('name' => '25%'),
'span4' => array('name' => '33%'),
'span6' => array('name' => '50%'),
'span8' => array('name' => '66%'),
'span9' => array('name' => '75%'),
'span7' => array('name' => '90%'),
),
),
),
),
);
 
$metatab_settings = array(
'id' => $this->tabID,
'name' => 'Hero Unit',
'icon' => $this->icon,
'clone_id' => $settings['clone_id'],
'active' => $settings['active']
);
 
register_metatab($metatab_settings, $option_array);
 
 
}
 
/**
* Section template.
*/
   function section_template( $clone_id ) {
 
$hero_lt_width = ploption( 'herounit_left_width', $this->oset );
if ( ! $hero_lt_width )$hero_lt_width = 'span6';
$hero_rt_width = ploption( 'herounit_right_width', $this->oset );
if ( ! $hero_rt_width )$hero_rt_width = 'span6';
    $hero_title = ploption( 'pagelines_herounit_title', $this->tset );
$hero_tag = ploption( 'pagelines_herounit_tagline', $this->tset );
$hero_img = ploption( 'pagelines_herounit_image', $this->tset );
$hero_butt_link = ploption( 'herounit_button_link', $this->oset );
$hero_butt_text = ploption( 'herounit_button_text', $this->oset );
$hero_butt_target = ( ploption( 'herounit_button_target', $this->oset ) ) ? ' target="_blank"': '';
$hero_butt_theme = ploption( 'herounit_button_theme', $this->oset );
$hero_butt_linktwo = ploption( 'herounit_button_linktwo', $this->oset );
$hero_butt_texttwo = ploption( 'herounit_button_texttwo', $this->oset );
$hero_butt_targettwo = ( ploption( 'herounit_button_targettwo', $this->oset ) ) ? ' target="_blank"': '';
$hero_butt_themetwo = ploption( 'herounit_button_themetwo', $this->oset );
 
    if($hero_title) { ?>
 
  <div class="pl-hero-wrap row">
 
  <?php
  if($hero_lt_width)
printf('<div class="pl-hero %s">',$hero_lt_width);
?>
<?php
 
if($hero_title)
printf('<h1 class="m-bottom">%s</h1>',$hero_title);
 
if($hero_tag)
  printf('<p>%s</p>',$hero_tag);
 
     if($hero_butt_link)
printf('<a %s class="btn btn-%s btn-large" href="%s">%s</a> ', $hero_butt_target, $hero_butt_theme, $hero_butt_link, $hero_butt_text);
 
 if($hero_butt_linktwo)
printf('<a %s class="btn btn-%s btn-large" href="%s">%s</a> ', $hero_butt_targettwo, $hero_butt_themetwo, $hero_butt_linktwo, $hero_butt_texttwo);
  ?>
                
</div>
 
  <?php
  if($hero_rt_width)
printf('<div class="pl-hero-image %s">',$hero_rt_width);
?>
<?php
 
if($hero_img)
printf('<div class="hero_image"><img class="pl-imageframe" src="%s" /></div>', apply_filters( 'pl_hero_image', $hero_img ) );
 
?>
</div>
 
</div>
 
<?php
 
} else
echo setup_section_notify($this, __('Set Hero page options to activate.', 'pagelines') );
}
 
}

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

Have just tested and this actually works :o)

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, we can't support editing the core code unfortunately, any changes made to the section will be wiped on update. You could however copy the section code and include it as a new section with a child theme.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

Hi James, thanks for advice - have now copied, renamed, installed and activated through customised template folder. Could this section now be uploaded to the store section of PageLines?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, if you've installed and activated on the site already you won't need to install it via the store on your install.

 

Or do you mean to sell through the Pagelines store to other users?

 

You'd need to join the developer community to be able to sell products through the store, if you're interested in signing up and becoming part of the developer team you can sign up here - http://developer.pagelines.com/apply/ and they'll be able to go through the criteria for products and sales with you.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • wesleymusgrove
      By wesleymusgrove
      I'm having some issues getting 2 different templates to save their own unique and different sections, respectively.  I have one template for the "Home Page" and another template for an "About Us" page.  Both templates have the same fixed navbar, nothing in the "Header Global Scope Region", various sections and widgets in the "Template Local Scope Region", and share a footer menu in the "Footer Global Scope Region".
       
      I have added a full-width section between the "Header Global Scope Region" and the "Template Local Scope Region" to the home page template in order to hold a Hero Unit.  I needed to put this hero unit inside a full-width section so it could have a full-width background color.  If I put this hero unit inside the "Template Local Scope Region", a full-width background color is not possible on the hero unit's row alone, as it will also give a full-width background color to the entire body of the "Template Local Scope Region" thereby affecting the other widgets and columns on the home page.  
       
      I do not want this hero unit or the full-width section it is contained within to appear on the "About Us" template.  So back on the "Home Page" template, I only filled out the hero unit's local scope section options and left the global options blank.  This however does not prevent the hero unit full-width section from displaying on the "About Us" template.  It just displays the default hero unit's global settings.
       
      How can I make the full-width section containing a hero unit only display on the "Home Page" template and not on the "About Us" template?  
       
      Are all custom full-width sections forced to be globally applied to all templates?
       
      It seems to me that one template's (non-global) regions and sections shouldn't be concerned with another template's (non-global) regions and sections.  Isn't that the point of having different templates so I can give sub pages a different layout from the home page?
       
      Any help would be much appreciated.
       
      Thanks,
      Wesley
    • LukeB
      By LukeB
      Hi I was just wondering if it was possible to use the hero unit with a video instead of an image? I have searched the forums but cannot find anything.
    • joeltwalters
      By joeltwalters
      Is there any way to add multiple links within a Hero Unit? Could be more action buttons, a text link or an image link.
    • Leonardo da Vinci
      By Leonardo da Vinci+
      Hi Guys,
       
      May I ask you to how can but ( image or color ) background to Highlight, Masthead,Callout and Hero unit sections.
       
      Thanks a lot 
       
    • gmoggel
      By gmoggel
      Hey mateys,
       
      i tried the hero section today and with a little help from this forum i could style the standards like h1, p and such. when inserting a <ul> with a specific class and a <li> with another class, i can't seem to style the list item via the customize plugin.
       
      this ist the html: 
      <!-- Hero | Section Template --> <section id="hero" class="container no_clone section-hero fix"><div class="texture"><div class="content"><div class="content-pad"> <div class="pl-hero-wrap row"> <div class="pl-hero span8"> <h1 class="m-bottom"></h1><h2>Mit der VSV Baden-Württemberg ...</h2><p>... sind sie perfekt ausgestattet: <ul class:"vorteile"> <li class:"listitem1">vom Ausbildungsbeginn an das Standardwerk zur Hand</li> <li class:"listitem2">Ergänzungslieferungen bequem im Abonnement</li> <li>versandkostenfreie Lieferung von Grundwerk und Ergänzungen</li> <li>schneller Service z.B. für das Nachbestellen fehlender Seiten</li> </ul></p><a class="btn btn-important btn-large" href="...">jetzt bestellen</a> </div> <div class="pl-hero-image span4"> <div class="hero_image"><img class="pl-imageframe" src="..." /></div> </div> </div> </div></div></div></section>  
       
      and this ist the css from the customize plugin:
       
      /*CUSTOMIZING HERO UNIT*/ .pl-hero-wrap .pl-hero h2 { color: #cc0000; font-size: 37px; font-weight:bold; } .pl-hero-wrap .pl-hero p { color: #CC0000; font-size: 16px; font-weight:bold; } .pl-hero-wrap .pl-hero ul.vorteile li.listitem1 li { color: #CC0000; font-size: 16px !important; font-weight:bold !important; } I'm confused how to select the list item which is not in a div but under a lot of divs and another ul. Any tips guys? (i deleted the respecting real url) I'd like to style it manually.
       
      cheers,
      mo
       
×