[Resolved] How to add this type of design

[Shivam]

How to add this type of design in every page of my site?

check this image : https://drive.google.com/file/d/1SRp1xOBliidCTZXxzqgEiJsVnoG_bUOH/view?usp=sharing

GP Premium 1.7.8

[David]

Hi there,

you could use the Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

use the before_footer hook. And set your display rules to where you want it displayed.

Use some HTML like this:

<div class="footer-cta">
    <div class="footer-cta-inner grid-container">
        <span>
            My call to action text
        </span>
        <a class="button" href="#">Get started</a>
    </div>
</div>

And add some CSS for styling:

.footer-cta {
	background-color: red;
	padding: 15px 0;
}
.footer-cta-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer-cta-inner span {
	margin-right: 20px;
	font-weight: 700;
	color: #fff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shivam]

wow it worked i also wanted to add that rocket image and change the button roundness.

[David]

You can add this to give the button rounded corners and similar style to the others:

.footer-cta a.button {
    border-radius: 200px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 38px -17px;
}

For the image you will need to add the HTML for that after the tag in the above HTML.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shivam]

How can i add that rocket image?

[Leo]

should just be HTML like this: <img src="http://LINK-TO-IMAGE">

More info here: https://www.w3schools.com/tags/tag_img.asp

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts