@christian Hi! This is a continuation from this post but I was unfortunately delayed for much of July due to a separate rush contract job. I’m really sorry for the delay 
So I had an opportunity to look at what you’ve done and I’m ready for some guidance on styling if I can get some help on that? 
Like maybe a white overlay and the title fading/transitioning in when the cursor rolls over the image? Is that possible?
Thanks again for all your help and I’m sorry for the delay!
Hi Natasha,
You can use the Effect Module for the Title and the Image element used within the Looper to get similar effects. In the Effect Module you can use the Interaction control group to get the effect on mouse interactions. I would suggest you go through the following article on how to use the Effect Module.
The following screenshot explaining how Interaction can be used to get the effects on the elements.
Hope it helps.
Thanks
Hi, thanks for your response.
I have a few questions.
So @christian was helping me before by providing this walkthrough with how to set up portfolios that lead to portfolios listing products for sale.
I’ve got a few questions about this walk-through as well.
I’m unable to where to set up the background image as the feature image set for a product category (per step 4 on linked walk-through).
And I can’t find where to access The Looper Provider per step 1.
To understand how the page is set up (link will be provided in a secure note), is it one grid containing only one cell that can be defined? There was a note on this walk-through that says:
Just note that because that because the Cell is the Looper Consumer, you can’t control the Cell settings individually so it’s not possible for you to re-order a main portfolio (product category). With that said, you might want to manually setup the Grid Element rather than using the Looper and Dynamic Content setup. Manual setup is also simpler for this case.
However, I’m not sure what that means – I think it means that because the one cell is serving as the looper consumer (what sets up the content per cell?), individual cells cannot be styled (so the categories must appear alphabetically?) So what happens to cell 1 happens to all other cells.
Styling questions:
The image featured in each cell is actually a background image. What I’d like to do is style the text with font/colouring/size and have a roll-over effect so when the cursor rolls over each image , the text fades in as well as a white overlay. However, when there is no cursor, we just see the image. Is that possible? Does that make sense?
I really appreciate the screencap but I think I need some more detailed instruction on how to do so. Please, don’t be afraid to explain this to me like I’m a dummy because when it comes to all of these features – I am.
Finally, I was also wondering if product category pages can be styled? I’ll include a link to the kind of page I’m looking to style.
I’m so sorry for all these questions. Thanks for your help,
Natasha
Hey Natasha,
To your concern:
It’s in WP Admin Menu > Products > Categories. The screenshot is in the other thread but I’ll post it here also.
The Looper Provider is under the Customize tab. My colleague Friech provided the link to Looper tutorial videos but for completeness, here’s the Documentation and Looper Tutorial Videos
Contents of the Cell would be powered or generated using the Dynamic Content. The Dynamic Content Documentation is here. There’s no specific tutorial video for the Dynamic Content yet but you can see it being used in the Looper tutorial videos as well as the usage of the Post element here.
Yes.
To change the Font, Color, and Size of any element involving a text, you need to inspect the element and tweak the font, color, and size options. If you’re not familiar with the usage of the builders yet, I’d recommend that you learn the usage of Cornerstone here https://theme.co/docs/cornerstone-overview.
You need to use the Base and Interaction Text and Background Color of the Text element. To start invisible, the Base color must be Transparent.
For the Text to appear on hover, the Interaction’s opacity must be increased.
Do the same for the Background Color option of the Text element. The screenshot below shows the Text opacity changing on hover.
Hope that helps.
Yes, I’ve watched the documentation and can rewatch but I don’t know how you accessed this window as shown in this screenshot that you provided in your previous post. Can you tell me how to get there?
I’ve read this overview of Cornerstone but I’m still unclear about how to use a builder to tweak the font, colour, and size of text elements. Are there any more in-depth tutorials about how to do this when doing so using loopers and grids?
I’ll take a look at the other stuff. Thank-you,
Natasha
Hello Natasha,
This screenshot can be accessed by clicking the dynamic content. To learn more about the dynamic content, kindly check this out first:
Have you checked our video tutorials on our Youtube channel? Kindly check it here:
Best Regards.
Yes, I’ve been trying to find the answer in the YouTube tutorials so I don’t bother you guys but I find that they don’t really answer my questions.
For example, I can’t figure out how to style the text elements. I’ve watched the Cornerstone YT video, I’ve read the documentation page. When I click on the rollover text element in the themeco test demo page I’ve linked to in a previous secured note, I’ve looked and looked but I can’t – for instance – find where to change the font face (I’m given the options of inherit, copy, headings). For that matter, I can’t even find where to pick the font faces for this site. I’ve been to Typography but it gives me no option to change the font. And I have a million more questions beyond that that the videos and pages don’t really address.
I admit, I am getting frustrated. I want to learn this but at the same time, the problems just keep building and it’s disheartening to be told to look at this video or that page when these pages and videos don’t really answer my questions. These pages and videos are my first resort but 50% of the time, they don’t address my issues. It’s like I’m learning an entirely new language just from scratch and it can be both overwhelming and frustrating.
Hi Natasha,
We understand your situation. I would request you to make a list of your question and post it here, so we can answer them one by one for your help.
Now coming to your current question on adding a new font and use the elements, you need to add that Font using the Font Manager. Please find the detailed article here: https://theme.co/docs/font-manager
If you find any difficulties in adding a new font and using that into the element, please let us know for further help.
Thanks
Okay, thanks. I’ll do that. I’m sorry for the delay in my response. I’m trying to figure things out on the backend using your guides.
I did have one question – would I be able to make a template of the demo page so I can put it on a new page where I’ve customized the header and footer?
Thanks
Hello Natasha,
“I did have one question – would I be able to make a template of the demo page so I can put it on a new page where I’ve customized the header and footer?”
Yes, you can. You can go to Cornerstone > Design Cloud and install the template of the demo page that you like. You can then save the page as a template. When you create a page, you can always load the saved template. Kindly check out this documentation:
Hope this helps.
Oh, I’m sorry. I should have been more clear. I wasn’t talking about a demo on the Design Cloud but the demo page @christian set up for me to do one of the things I wanted with Pro. See secure note.
I’m working on the styling now but I’d like to do this on a page with a customized header and footer. I’m asking if I can save this personal demo as a template to put on a new page or if I’d have to recreate what Christian did.
Hi Natasha,
You don’t need to recreate this, you have to save this specific section as Template by using the Save Template option on the page. And load the same Template using the Load Template option on the target pages.
Screenshot 1: Load and Save Template
Screenshot 2: Load the Saved Templates
You can also create the section as the Global Blocks, and add it to the target pages. Please go through the following article on how the Global Blocks can be used.
Hope it helps.
Thanks
Thanks. I think I need a few more days to look over all of this and figure it out. Thanks again~
Hi Natasha,
Great and you’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.
Thank you.
Thanks!! I will do that!
You’re welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
