A hiking-duration button needs to be added to Hero space of HP

[jcockroft64]

A 1, 3 or 7-Day icon/button needs to be added to the Hero (top) section of the HP.

[jcockroft64]

Sample, North Lake Hike ... https://www.sierrahiking.net/elementor-7248/

[russellelliott]

Was able to add the hike length icon. Since the hiking page is full width, I had to do some adjustments on the button's offset.

I opened the "North Lake Hike" page on the Elementor page, right clicked the button, copied it and pasted it.

The offset settings are in the "Advanced" section of the button editor.

Here are the settings i used for the Hiking Page Horizontal offset: 40px Vertical offset: 90px

[russellelliott]

I was able to save the 7-Day Hike icon as a global widget. Here's how: https://wpdeveloper.com/elementor-global-widget/ Go to the navigation menu on the right and right-click the hiking button. Click "Save as Global".

From there, you can access this new widget in any page. When adding this new widget to a page, you can modify this widget globally across all pages, or unlink it from the global widget.

I made a test page and added the 7-Day Hike icon to it: https://www.sierrahiking.net/hike-icon-test/

I also capitalized the "H" in "7-Day-Hike"; looks better in my opinion.

Now looking into how to save an Elementor page as a template.

[russellelliott]

Aligning Hiking Length Button to Header Title (Desktop View) The title div has a top padding of 292 pixels and 30 pixels of bottom padding. This div is 128 pixels tall.

There is 45 more pixels of top padding. This div is 83 pixels tall (excluding padding)

10 pixels of top padding above the <h1> tag. This div is 63 inches tall (excluding padding)

Some CSS:

.page .entry-cover-image .entry-header .entry-title, .single .entry-cover-image .entry-header .entry-title {
    color: #fff;
    font-size: 45px;
    font-size: 2.8125rem;
    text-transform: none;
    font-weight: 600;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    font-family: inherit;
}

Font size is 2.18125rem which is a tad less than 35px. More info: http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/

Let's assume the text is 35px tall. The header div is 63 pixels tall, so there is (63-35)/2 = 14px of gap between the text and the top and bottom of the div.

The entry-cover-image div is 450 px tall.

Central header div is 128 pixels tall, 292 from the top and 30 from the bottom 128+292+30 = 450px

The header text top is 292+45+10+14 = 361 pixels from the top of the page. Ideally, the top of the hike length button should align there.

The button had 3 pixels of padding on top. this should be excluded from the calculations. The button has a vertical offset. Setting it to -3 brings it to the very bottom of the header. We need it so the top of the button is exactly in line with the top of the header text.

450-361+3 = 92px

Setting the vertical offset to -92px should align the button to the top of the header text on a laptop. Considering it was set to -90 before, there isn't much of a noticeable difference.

Hiking Button Editor Window

Button Positioning on Mobile Devices I do notice that as the screen gets narrower, the hike icon appears to go higher than the header text. this is because the button is a consistent distance away from the bottom of the header, while the header text and hero image div changes size and shape in response to the screen size.

I searched up "css for mobile devices" to see if I could tailor the css of the button itself for mobile devices. Found some helpful resources; will look into this further. https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

The main issue is from the "breakpoint" between the laptop and tablet; once the window foes to the size of the tablet, the hike length button is higher in relation to the header text, as the header text is dynamic while the hike length button is not.

The breakpoint appears to be 767px in length; at this point the site layout changes from the laptop layout to the tablet layout.

I notice that the upper padding and text size of the entry-header decreases in size beyond this breakpoint, effectively lowering the top of the text, while the lower padding is still 30px from the bottom of the hero page. It appears to do so dynamically as to keep the header in the same relative position to the site. I would have to figure out how to do the same for the hiking button by setting up some sort of rule after the 767px breakpoint for smaller screens.

There is an option in the button editor to set the vertical offset to an amount of viewer heights/widths.

Hiking Icon CSS (found with inspect element; maybe this can help with the button position for mobile devices?

body:not(.rtl) .elementor-7648 .elementor-element.elementor-global-8375 {
    left: -40px;
}

.elementor-7648 .elementor-element.elementor-global-8375 {
    top: -92px;
}

[russellelliott]

Update: did a quick experiment with the hike length icon for mobile devices. I went into inspect element and changed the vertical offset of the button from -92px to -72px (since I used inspect element, the site itself is unaltered); making the button lower. I found it aligns with the header text quite nicely on mobile, but is too low for desktop (you said you wanted the button to align to the top of the header text for that). I'll make a custom CSS rule for this to change the button position for mobile devices so it aligns better with the header text.

Desktop View

Mobile View

[russellelliott]

Update; I added custom CSS to change the button position for mobile devices so it better aligns with the header title.

I made a new CSS class called hike-length-button which is intended to be used for the hike length icons. To add a custom CSS class name to an element on a Wordpress page: Go to the button editor screen and go into the “Advanced” tab. There are input fields to enter CSS ID and CSS classes to the element.

Recall how the breakpoint between laptop and mobile devices is 767 px. The CSS I made changes the vertical height of the button when the screen width is less than or equal to 767 px. Here is the CSS:

/*Hike Length Button CSS*/
@media only screen and (max-width: 767px) {
  .hike-length-button {
    top: -72px !important;
  }
}

Here is more info about media query CSS, which is used to customize CSS based on screen size: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The process of adding custom CSS to an Elementor page is specified in issue #11.

[jcockroft64]

Looks good now. Thanks!