HubSpot CMS

Header Call to Action 1 Module

Header Module "Call to Action" allows you to set a front elegant header hero, with options to add buttons with actions. With user choice settings for font, text, headliner and background image.

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

0 Recommendations

View on:

GitHub

HTML + HUBL
          
            

{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-header/css/ui-kit-styles.css") }}
<!-- header-4 -->
<header class="header-4 header-4-v2 v-center" style="background-color: {{ module.background_color }};">
    <div class="background" style="background-image: url('{{ module.background_image.src }}'); opacity: {{ module.background_opacity }};">&nbsp;</div>
    <div>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="hero-unit">
                       {{ module.text }}
                    </div>
                    <div class="btns">
                    {% for item in module.buttons %}
                      	{% if item.choose_cta_button %}
                      		<div class="btn-cta">{% cta guid="{{ item.cta_button }}" %}</div>
                      	{% else %}
                      		{% set styles = 'background-color: {{ item.button.button_color.color }}; color: #ffffff;' %}
                          {% set link = page_by_id(item.button.link).absolute_url %}

                          {% if item.button.use_custom_link %}
                              {% set link = item.button.custom_link %}
                          {% endif %}

                          {% if item.button.button_type == 'clear' %}
                              {% set styles = 'background-color: transparent; border: 2px solid {{ item.button.button_color.color }}; color: {{ item.button.button_color.color }};' %}
                          {% endif %}

                          <a class="btn btn-large js-btn-color" href="{{ link }}" style="{{ styles }}" data-btn-type="{{ item.button.button_type }}" data-btn-color="{{ item.button.button_color.color }}" data-btn-hover-color="{{ item.button.button_hover_color.color }}">{{ item.button.button_text }}</a>
                        {% endif %}
                    {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

          
        
CSS
          
            
          
        
JS
          
            jQuery(document).ready(function($) {
    $(".header-4-v2").each(function() {
        var o = $(this);
        if (o.hasClass("init")) {
            return;
        }
        o.addClass("init");
      
      	var style = "";

        o.find(".js-btn-color").each(function(){
            var btnType = $(this).data('btn-type');
            var btnColor = $(this).data('btn-color');
            var btnHoverColor = $(this).data('btn-hover-color');
            
            var btnId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", btnId);

            $(this).removeAttr('style');

             if(btnType === 'normal') {
                style += "#" + btnId + ".btn { background-color: " + btnColor + "; color: #ffffff; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnHoverColor + "; } \n";
            }

            if(btnType === 'clear') {
                style += "#" + btnId + ".btn { background-color: transparent; border: 2px solid " + btnColor + "; color: " + btnColor + " } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnColor + "; color: #ffffff } \n";
            }
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

SUF HEADER Call to Action 1

The Call of Action 1 header module can be easily added to your existing HubSpot website and allows you create a multi section Header with various options to enhace with buttons, graphics, and backgrounds.

SUF HEADER Call to Action 1 module demo can be visited here:

https://w.inboundlabs.co/header234demo

The SUF HEADER Call to Action 1 module is FREE and is part of the Startup Framework FREE and PAID packages:

https://marketplace.hubspot.com/products/inboundlabs/startup-framework-marketplace

Have Questions?

If you have questions, please email me at github (at) inboundlabs.co


HubSpot

Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

 
0 Recommendations

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co