[Resolved] Trying to have a specific Hero/heading (GP+Elementor)

Home Forums Support Trying to have a specific Hero/heading (GP+Elementor)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1213152
    Victor

    Hi,

    Hello everyone!

    I have a question regarding the realization of a blog, and I’m quite a fan of gaps and their blog
    I would like to be able to realize a similar “Hero”, that looks custom made, clean, with that kind of background and call-to-action: https://ibb.co/r6hvtBz

    If you could guide me on how to proceed, that’d be great.
    I can’t seem to get close to it with Elementor alone and their templates.

    I tried to look at their source code, but It’s too technical for me, I can’t seem to make sense out of it:

    <style>
    @media all and (-webkit-min-device-pixel-ratio : 1.5),
     all and (-o-min-device-pixel-ratio: 3/2),
     all and (min--moz-device-pixel-ratio: 1.5),
     all and (min-device-pixel-ratio: 1.5) {
    
      .hero-container {
        background-image: url(https://staging-gapscom.kinsta.cloud/wp-content/themes/spag/marie.jpg) !important;
    
    		background-size:cover;
    
      }
    	.hero-wrap {height:auto;}
    }
    .hero-container {background-image: url(https://gaps.com/gapsbg.jpg) !important;}
    body.page-template-page-home .top-hero .hero-wrap {
    	color: #FFFFFF;
    }
    body.page-template-page-home .top-hero a.underlinelink {
    	color: rgba(255,255,255,.8);
    }
    body.page-template-page-home .top-hero a.underlinelink:hover {
    	color: rgba(255,255,255,1);
    }
    body.page-template-page-home .top-hero h2:before {
    	border-top-color: rgba(255,255,255,.3);
    }
    .header-simple-wrap {display:none;}
    .hero-wrap {height:830px;}
    .formkit-submit > span {padding:0px 25px !important;letter-spacing:2px;font-family:LL Circular Bold Web !important;}
    @media screen and (max-width: 960px) {
    	#hero-style-photonooverlay:before {
    	display:none;}
    	.hero-wrap {height:830px !important;}
    	.hero-container .grid-container {padding-left:0px;padding-right:0px;}
    .blog-roll-content-block.content-block:first-child {padding-top:0px;}
    
    	.mobile-header-core {display:none;}
    	.hero-wrap-inside {padding-top:1px;}
    
    	.cta-form-wrap {padding-top:0px;padding-bottom:30px;}
    	h2.post-title a {font-size:29px;line-height: 32.5px;letter-spacing:-.02em;color:#333333;font-family:FFKievitWebProBold;text-height:30px;}
    	h2.post-title {padding-bottom:7px;}
    	h3.sub-title {color:#aba9a9;font-size:24px;letter-spacing:-.022em;}
    	.content-block {padding-left:15px;padding-right:15px;}
    }
    
    @media screen and (max-width: 767px) {
    #hero-style-photonooverlay:before {
    display:none;}
    .hero-container .grid-container {padding-left:0px;padding-right:0px;}
    
    .mobile-header-core {display:none;}
    .hero-wrap-inside {padding-top:1px;}
    .hero-wrap {height:560px !important;}
    .cta-form-wrap {padding-top:0px;padding-bottom:30px;}
    h2.post-title a {font-size:29px;line-height: 32.5px;letter-spacing:-.02em;color:#333333;font-family:LL Circular Bold Web;}
    h2.post-title {padding-bottom:7px;}
    h3.sub-title {color:#aba9a9;font-size:19px;letter-spacing:-.022em;}
    .content-block {padding-left:15px;padding-right:15px;}
    }
    
    </style>
    
    			
    
    		
    <div class="hero top-hero ">
    
    	<div class="hero-container nooverlay" id="hero-style-photonooverlay">
    
    		<div class="hero-wrap">
    
    			<div class="hero-wrap-inside">
    
    				<div class="grid-container">
    
    					
    						<div class="grid-80 prefix-10 suffix-10 mobile-grid-100 nopadding hero-style-normal-wrap">
    
    <p class="cursive cursive-intro-title">Hola! We spend our days...</p>
    					    	<h1>Tracking successful online startups to uncover gaps in the market</h1>
    </div>
    								<div class="core-cta" style="background-color:transparent;">
    
    									<div>
    
    										
    												<div class="grid-100 mobile-grid-100 nopadding core-cta-wrap">
    
    													<div class="cta-form-wrap mobile-grid-100">
    
    														<div class="cta-form-content hide-on-mobile nopadding">
    
    															<p style="padding-top:5px;"></p>
    															<h4 style="padding-bottom:10px;">"You don't know what you've done for me. You've changed my life." - Ted Forbes <img src="https://gaps.com/tedfb.png" style="padding-left:20px;vertical-align:middle;height:55px;"> </h4>
    
    														</div>
    
    														<div class="cta-form-content mobile-grid-100 nopadding">
    
    															<div class="mobile-grid-100 nopadding" style="padding-top:20px;">
    
    																<script async data-uid="7996e7684e" src="https://f.convertkit.com/7996e7684e/96569a445b.js"></script>
    
    															</div>
    
    															<div class="grid-25 hide-on-mobile nopadding cursive-copy-wrap">
    																
    															</div>
    
    														</div>
    
    														<div class="cta-form-content mobile-grid-100 nopadding">
    
    																															<div class="additional-copy">
    																	One email per week. Zero spam or ads.																</div>
    															
    														</div>
    
    													</div>
    
    												</div>
    
    											
    
    									</div>
    							 </div>
    
    					
    				</div>
    
    			</div>
    
    		</div>
    
    	</div>
    
    </div>
    
    <div class="main-content-container" id="learn">
    
    	
    	 	<div class="grid-container content-block blog-roll-content-block">
    
    			<div class="grid-100 mobile-grid-100 nopadding">
    
    				<div class="grid-65 mobile-grid-100 left-main-column">
    
    					
    <code><div class=&quot;articles-container&quot;></code>

    I might get close to it by purchasing and trying another theme but I’d like to stay with GeneratePress. If it’s not possible to have that kind of hero with both Elementor and GeneratePress, let me know.

    Thank you,

    Victor

    #1213266
    Leo
    Staff
    Customer Support

    Hi there,

    Something like that is pretty complicated using GP only – is the example site using GP?

    If so we can take a look at their code.

    You should be able to use Elementor for something like that though – their support should be able to point you in the right direction.

    Let me know 🙂

    #1213271
    Victor

    Hello Léo, thank you for your reply

    Yes. I understand that with GP only it won’t be possible.

    That’s why for several websites I have GP as a theme for its speed and light benefits, but build my Homepages, Blog pages etc with Elementor alone.

    My question was rather, do you think it’s possible to build it with Elementor or does this website use a specific theme to have this specific end result? (especially the bottom of the Hero where it looks pretty customized)

    I have no idea. whether they use GP or not..

    I sent a message to Elementor support and will be waiting for their reply
    thank you !

    #1213453
    Leo
    Staff
    Customer Support

    I would think Elementor is your best bet. It shouldn’t be related to the theme at all.

    #1213455
    Victor

    Apologies for the inconvenience

    #1213469
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.