hero title and hero button

[beronningen]

Hi Bill

Thank you for all your help!

1. How do I move the hero title vertically?
2. How do I move the hero button vertically and horizontal?
3. Is it possible to add several hero buttons?
4. Is it possible to make the down arrow to have a movement (up&down) to get more attention to it?
5. Is it possible to link the down arrow so when you click, it will send you down to the next widget?
5. How do I attach a link to one of the hero buttons so that if you click the textbox it will send you to one of my pages?
6. Is it possible to set up the hero button like a textbox? (no color inside the box)

Regards
Bjorn

[Bill Robbins]

Hello Bjorn,

Let’s see if we can look at some options for your customization questions here.

1 and 2: The content in the hero section is grouped together so generally speaking they would be positioned together. Elite has an option to choose the horizontal alignment of the group, but not the vertical and no option for changing the items individually.

That said you can absolutely position items so they are placed in a specific spot. Here’s how you could do that with the hero title, caption and button:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Advanced one.
3. Scroll down to the Custom CSS box and add this:

   
   #hero-section .hero-copy {
   	position: relative;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	height: 100%;
   	width: 100%;
   }
   
   .hero-title-holder {
   	position: absolute;
   	top: 20vh;
   	left: 20vw;
   }
   
   .hero-caption {
   	position: absolute;
   	left: 40vw;
   	top: 50vh;
   }
   
   .hero-button-holder {
   	position: absolute;
   	bottom: 20vh;
   	left: 45vw;
   }
   

   The top style there is there to reset the hero area allowing you to place the elements where you want them to go. The next is for the hero title. The 20vh there stands for 20 viewport height. That’s the same thing as 20% of the browser window’s height. It’s a better unit to use with full screen things than pixels for example. The 20vw is the 20 of viewport width (20% of the browser window’s width).

   The next style is for the caption and the last one is for the button. The button is positioned from the bottom since it is last. Feel free to adjust those values to place things where you want them to go. Do be aware that with them positioned this way they won’t be aware of one another so they can overlap if they are close.

4. Save your changes.

---

3. Elite does not have an option for multiple hero buttons unfortunately Sorry about that.

---

4. You can have the arrow move a bit to get noticed. Here’s how to do that:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Advanced one.
3. Scroll down to the Custom CSS box and add this:

   
   #hero-section .scroll-down {
   	animation: arrowMove 2s infinite;
   	-webkit-animation: arrowMove 2s infinite;
   }
   
   @keyframes arrowMove {
   	0% { bottom : 5%; }
   	50% { bottom : 7%; }
   	100% { bottom : 5%; }
   }
   
   @-webkit-keyframes arrowMove {
       0% { bottom : 5%; }
       50% { bottom : 7%; }
       100% { bottom : 5%; }
   }
   

4. Save your changes.

---

5. You can have the down arrow be a link. There is a post at https://support.organizedthemes.com/forums/topic/scroll-down-arrow-auto/ that can walk you through doing that.

---

6. You can do that. Add this to your Custom CSS too:

.hero-copy .button.hero,
.woocommerce .hero-copy .button-hero {
	background: transparent;
}

Hope that helps out 🙂

Bill

[beronningen]

Thank you!

5: I am sorry, but I can´t find the hero-options.php and where to insert the code. Is it possible to link me to the right page?

6: I have tried the code, but it does´t seem to work. The hero button still has color inside. Am I doing something wrong?

Regards
Bjorn

[Bill Robbins]

It’s a long list of files in the editor. I can’t link directly to it, as the individual files don’t have separate links within the editor. In the list on my site in the theme editor, it shows up between author-bio.php and home-product-item.php about 2/3 to 3/4 of the way down the list. So sorry the built-in editor is so unfriendly to users.

---

Try changing that code to be like this:

.hero-copy a.button.hero,
.woocommerce .hero-copy a.button-hero,
.hero-copy a.button.hero:hover,
.woocommerce .hero-copy a.button-hero:hover {
	background: transparent !important;
}

and that doesn’t force it to say transparent.

Have a great day,
Bill

[beronningen]

5. I still can´t find it:) I can’t find the editor in the appearance section. I have attached a picture of what I see in the dashboard under the appearance section. Where do I find it in that section?

6. I tried the new code. I can’t get it to work. At first the button disappeared totally and there was no box, and now the button is back but there is still color fill inside. I have attached a picture of what I am trying to achieve.

Some other questions:
7. I found a code in the forum that removed the HERO title, caption and button in mobile view. Is it possible to do the same for tablet/ipad view? I used this code:
@media only screen and (max-width: 520px) {

body #hero-section .hero-copy {
display: none;

8. In mobile view the menu is displayed as a single button. Is it possible to force that solution for tablet/ipad view also?

Thank you!

Attachments:

1. 

   Skjermbilde-2016-09-20-kl.-17.55.36.png
   

2. 

   Skjermbilde-2016-09-20-kl.-17.52.06.png
   

[Bill Robbins]

Not having the editor at all in the Appearance section is something different altogether. Some web hosts disable it because there is a possibility if a user incorrectly edits the functions.php file (or a file loaded by it) that they will disable their site. Front end and dashboard.

You can probably make the edit inside your web host’s control panel. They often have a file browser you can use to edit the files on your server. Go to wp-content/themes/elite/layouts/ to find the hero-options.php file.

---

It looks like a couple of the media queries are missing their closing brackets. That causes the code that comes after them from loading unless the conditions are met. You’ll also need a border for the button. Update the last three styles to be like this:

@media only screen and (max-width: 520px) {

body #hero-section .hero-copy {
display: none;
}

}

@media only screen and (max-width: 767px) {

body #hero-section .hero-copy {
display: none;
}

}

.hero-copy a.button.hero,
.woocommerce .hero-copy a.button-hero,
.hero-copy a.button.hero:hover,
.woocommerce .hero-copy a.button-hero:hover {
	background: transparent !important;
	border: 2px solid #fff;
	color: #fff !important;
}	

---

You can change the screen size where those items happen. At the start of a media query it will say something like (max-width: 767px) which means that the styles inside it will only happen when the screen is 767 pixels wide or smaller. If it is 768 pixels wide or wider, those styles will not apply. Feel free to adjust those to fit your site’s needs.

You can make the button style navigation appear at a different screen size by adding something like this:

@media only screen and (max-width: 1024px) {
	
	#primary-menu {
		display: none;
	}
	
	.slicknav_menu {
		display: block;
		right: 0;
		top: 10px;
	}

}

Just adjust the 1024px to the size where you’d like the cutoff to be.

Hope that helps out

[Author]

Posts