Integration with Beaver Builder

This topic contains 6 replies, has 2 voices, and was last updated by  Sebastian 4 weeks ago.

Author Posts

jassheridan

Hi,
I’m a beginner here, so apologies if my questions are frustrating. But I just need a kick in the right direction pls so I don’t waste time learning anything I don’t need in the short term.
I’m using Beaver Builder
My URL is https://solidchildcare.shorttech.site/job_search/

I’d really appreciate some help / directions to tutorials so I can learn myself for.
1. I have the Job title targeted successfully and font changes all work in MT except for the colour change. I have it working for the Salary and Location fields as you can see. But the Job Title should be the green colour as I have that sent in MT but not the blue.
2. I want the heading Location to be centered and salary to be right aligned on large devices and
Job Title
Location | Salary
like above on mobile
Is flexbox the way to achieve this? Is that what I should invest time in figuring out or am I over complicating it?
Thanks millions


Sebastian

Hey,

Not at all, perfectly valid questions!

1. You have targeted the div with a class “job” for the job title. But there is a link element nested inside this div that has a color setting of it’s own. To override this you must target the link with Microthemer, rather than the parent div element. I would expect this to be possible by precisely clicking on the link text. But if not, click the down arrow to the left of the selector label in targeting mode to shift targeting down from the div element to the link element.

You can learn more about nested HTML elements (like your div and link) on our educational note here: https://themeover.com/a-fluid-header/#nested-elements
And watch the Targeting video which can be found in Microthemer’s help video at the top right of the inteface.

2. Yes, I think flexbox would be a good fit with your requirements. The following tutorial will help you get to grips with flexbox: https://themeover.com/microthemer-flexbox/ (the sample HTML code provided is really useful for experimentation).

I hope that helps. Please let me know if you have any further questions.

Thanks!
Sebastian


jassheridan

Really appreciate your help and I’ve absorbed the flexbox videos… But firstly targetting the link…

screenshot

There is no option to down arrow on the selector to the lower level. I’m sure I must be being a bit dim, but I just can’t figure it out. Thank you again


Sebastian

Hey,

Not at all, my description would have been better with a picture. These are the directional controls I was talking about, highlighted in red:

directional controls

If you could send me access details for the site you’re working on (via our secure contact form) I would be happy to check things are working, and provide a video demo of how to target the link element, for future reference.

Cheers,
Sebastian


Sebastian

(just updated my previous post to include the link to our secure contact form, which I forgot to add yesterday)


jassheridan

Yes, my screenshot was meat to show that I couldn’t target any deeper. Anyway – have messaged you privately on form. Excited to hear back with solutions 🙂

THANK YOU sooooooooo much


Sebastian

Great, thanks for sending details.

I’ve had look around and made a few changes. Unfortunately I can’t show you what I did via a video because Monika and I are staying in a really remote part of El Hierro with barely any internet. Uploading an image takes aeons so video is out for the next few days. I can however explain what I did (in response to the comments you sent via email):

  1. I saw that you managed to create a selector for the link yourself and make it pink. You were wondering how to target all job links on the page, not just the top one. For that, I did exactly what you did to target the top element, but then chose the alternative targeting suggestion that targets all seven job title links. See the screenshot below.
  2. You had arranged the title, location, and salary using float. So I decided the simplest way to align the text as you wished was to simply set the width of the job title to 50% and the location to 25% with left alignment. Is it looking how you would like now?
  3. I added a few styles to the .summary a selector to make it look more like a button. Perhaps you can customise it further now.

Targeting multiple elements on the page

I hope that helps. Please let me know if you have any further questions.

Thanks!
Sebastian

You must login or register to reply to this topic.