Pearl Theme - CTA Design

Started by: Nina October 25, 2017 - 08:38

Hey guys, I purchased Pearl theme a couple of weeks ago and I'm having lots of fun with it :) Thanks for such a great theme !
I'm currently building my CTAs and would like to get the exact same design as "call to action style 2" shown on the CTA demo.

Would you mind sharing the html code for this particular design please? There are wayyyy too many customization options and I don't have time to test them all.
Thanks a lot in advance.

Nina



Replies:

  • Author Team
    #5511 Reply

    Felix
    Hi,
    Please try to get the code from the file stm_cta.php which located on \wp-content\themes\pearl\vc_templates

    regards

    #5518 Reply

    Nina
    Hi Felix,
    Thanks for your answer. I took a look at the stm_cta.php file like you said and here's the code I'm getting :

    <?php

    /**
    * @var $content
    * @var $link
    * @var $button_color
    * @var $button_custom_color
    * @var $button_custom_color_hover
    * @var $button_style
    * @var $button_icon_pos
    * @var $button_icon
    */

    $atts = vc_map_get_attributes($this->getShortcode(), $atts);
    extract($atts);

    $classes = array('stm_cta');
    $classes[] = apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_custom_css_class($css, ' '));
    $classes[] = $this->getCSSAnimation($css_animation);
    $classes[] = $style;

    $button_unique_class = uniqid('btn_');
    $button_global_style = !empty(pearl_get_option('buttons_global_style')) ? 'stm_buttons_' . pearl_get_option('buttons_global_style') : '';

    $style_array = array();
    $style_array_hover = array();
    $style_string = '';

    $link = vc_build_link($link);

    $button_classes = array(
    'btn',
    'btn_icon-' . $button_icon_pos,
    'btn_' . $button_style,
    $button_unique_class
    );

    if ($button_color !== 'custom') {
    $button_classes[] = 'btn_' . $button_color;
    } else {
    $style_array[$button_unique_class] = array();
    $style_array_hover[$button_unique_class] = array();

    if (!empty($button_custom_color)) {
    $style_array[$button_unique_class]['background-color'] = $button_custom_color;
    }
    if (!empty($button_custom_color_hover)) {
    $style_array_hover[$button_unique_class]['background-color'] = $button_custom_color_hover;
    }

    if (!empty($button_custom_text_color)) {
    $style_array[$button_unique_class]['color'] = $button_custom_text_color;
    }

    if (!empty($button_custom_text_color_hover)) {
    $style_array_hover[$button_unique_class]['color'] = $button_custom_text_color_hover;
    }
    }

    if (!empty($style_array)) {
    foreach ($style_array as $el => $css) {
    $style_string .= 'body.' . $button_global_style . ' .' . $el . '{';
    $style_string .= pearl_array_to_style_string($css, true);
    $style_string .= '}';
    }
    } if (!empty($style_array_hover)) {
    foreach ($style_array_hover as $el => $css) {
    $style_string .= 'body.' . $button_global_style . ' .btn.' . $el . ':hover{';
    $style_string .= pearl_array_to_style_string($css, true);
    $style_string .= '}';
    }
    }

    pearl_add_element_style('cta', $style, $style_string);

    ?>
    <div class="<?php echo esc_attr(implode(' ', $classes)); ?>">
    <?php if (!empty($content)): ?>
    <div class="stm_cta__content">
    <?php echo wpb_js_remove_wpautop($content, true); ?>
    </div>
    <?php endif; ?>

    <?php if (!empty($link)):
    $target = (empty($link['target'])) ? '_self' : $link['target']; ?>
    <div class="stm_cta__link">
    <a href="<?php echo esc_url($link['url']); ?>"
    class="<?php echo esc_attr(implode(' ', $button_classes)); ?>"
    title="<?php echo esc_attr($link['title']); ?>"
    target="<?php echo esc_attr($target); ?>">
    <i class="<?php echo esc_attr($button_icon); ?> btn__icon mtc icon_20px"></i>
    <?php echo sanitize_text_field($link['title']); ?>
    </a>
    </div>
    <?php endif; ?>
    </div>

    I'm sorry but it is not giving me the CTA style 2 :(
    Any ideas ?

    Author Team
    #5519 Reply

    Baxter
    Hi,

    There is a PHP structure of CTA module, and when you select any style on the Dashboard, it gives you the selected style view.
    If you want to have only generated HTML code of this module, you can get it through Browser > Element inspector like - https://developers.google.com/web/tools/chrome-devtools/inspect-styles/.

You must be logged in to reply to this topic.