X Pro newbie needing assistance

[Tdrummer89]

Hi there,

I’m currently building a website for a client and I’ve been reading over the manual and guides, YouTube videos, and the forum to try and start building this site and I’m finding myself more and more confused and lost.

To be more specific, at this current point I’m mainly trying to building a full-width home page with large images with BOLD colored text on them as you scroll. I’ve tried adding sections and have had the photos used as backgrounds in those sections and they appear correct (sometimes) on the internal side of the website, but it isn’t registering, I have one page that comes up during the live check and seems to now be live on the actual site, but the photos are not full size and merely slim snippets top to bottom on each other.

My starting out question is:

When I’m trying to build my landing page, am I supposed to be building it in the layouts tab, content or some other place? A general workflow would be helpful.

I also plan to have testimonials and a slideshow running on the homepage, but I have a feeling that can be added with templates from the templates or design cloud. Additional pages would include a biography section, blog,

I have a written mockup already prepared of how I want the site to look, but I’m struggling to bring it to fruition. Any assistance of links to explanations for these problems within the forum would be helpful, as I’m trying my best to navigate the forum, but honestly don’t know where to start.

For background, I’ve used Oshine to build my own website, so this isn’t my first site, but it’s been a struggle figuring out the UI of Pro.

Any assistance would be greatly appreciated. Thanks!

[ruenel]

Hello Tyler,

Thanks for writing in!

You should be using the Pro > Content in creating the landing pages. The Pro > Layouts is good for creating a custom layout for your blog index, archive pages, and single posts. We highly recommend that you check out our video demonstrations to learn more about our builders.

Themeco 101: A Guided Tour of the Builder

Layout Builder: Archive Templates

Layout Builder: Single Templates

To make sure that your background images are fullwidth, you will have to use the Blank - No Container page template. For more details about the different page templates in the theme, please check this out:

• https://theme.co/docs/page-settings#page-attributes

Best Regards.

[Tdrummer89]

Thanks for the tips and links. I’ll reach out with more questions while I try and dive in further. Right now I’m trying to expand the images I currently have to show the entire image but it currently looks like this. Do I need to add columns to make these images larger? Not sure what I’m doing wrong.

I’m going to toy with some settings to see if I can figure out on my own, but would appreciate feedback. My goal is to have these photos running full-size and place text on top, and then have the photos have a gray or colored tint that goes away as the mouse hovers over the image. Almost like when you want an image to come into focus or fade in.

[Tdrummer89]

So I’ve tried a template and made a different page to test out something and this is getting a step closer to what I’m wanting to do for the homepage, and I’ve included some photos for reference.

Some points and feedback needed below:

-I like the gray transparency effect on the photos, but would like to be able to adjust the opacity and possibly color of that and cannot figure out how to do so.

-I’m also looking to remove the triangular patterns found in the gaps between each photo or toy with different shapes.

-While the photos in these are reaching closer to the size I’m looking to shoot for, I’d like them to be even larger. How should I proceed from here?

I appreciate your assistance and patience as I learn the website builder more. I’m getting the hang of it a bit more as I go along. I think using the templates is helping understand the structure a bit more. Thanks!

[Tdrummer89]

[friech]

Hi Tyler,

First, I would like to explain what is the issue here:

That is happening because your Sections are empty, meaning you did not put actual Contents/Elements on your section, and an empty section has no height and if it has no height then it’s not going to show the entirety of its background, you’re only able to see it on the Content Builder because the columns on the content builder have a min-height but that is only inside the builder. On the front end, you get the section’s top and bottom padding, which is the tiny portion of the background image you’re seeing. So to understand this concept properly try adding a Gap element inside your section and set the size of it to 350px, yes you need to add a Column to your section so you can put an element inside it.

@Tdrummer89

-I like the gray transparency effect on the photos, but would like to be able to adjust the opacity and possibly color of that and cannot figure out how to do so.

Find where is that dark overlay background is applied, it could be on the Section or Row, and adjust its transparency or change the color. (https://i.imgur.com/FefAddp.png)

@Tdrummer89

-I’m also looking to remove the triangular patterns found in the gaps between each photo or toy with different shapes.

That is a repeating background image set on the column, inspect the column, and set the background to none. I think this video explains how that works.

@Tdrummer89

-While the photos in these are reaching closer to the size I’m looking to shoot for, I’d like them to be even larger. How should I proceed from here?

Increase the top and bottom padding of the section where the background image is set. Increasing top/bottom padding will increase the section height and makes the background-image area more visible.

Hope that helps,
Cheers!

[Tdrummer89]

Thank you, @friech!!! Your tips helped out a lot and I was able to make some progress today.

I have a follow-up question: I’m trying to incorporate the “Prompt” Google Fonts into the Font Manager but I’m not getting it to work correctly. I’ve downloaded the font family from Google Fonts and I understand how to assign it and make a new font at the top of the Font Manager, but when I try and upload the fonts using the Custom Font uploader it isn’t doing what I’m wanting. Could it be the wrong file type? I have the Zip file of all of the fonts and I’ve tried adding individual subsets (italic or bold, etc.) into the custom fonts but the format doesn’t seem to work.

What am I doing wrong?

Thanks again!

[friech]

Hi Tyler,

Glad we are able to help you, if it is a Google font then there is no need to download/upload it. You can select all Google Fonts directly from the Font Manager

More details here: How to Setup the Font Manager

Hope it helps,
Cheers