maguisiffredi Posted August 31, 2022 Share Posted August 31, 2022 Site URL: https://www.maguisiffredi.com/ Hi! I want to add a second section to my portfolio, just like the "Illustration" one, but called "design" to include my graphic design projects. Is that possible? Thanks!! Link to comment
tuanphan Posted September 3, 2022 Share Posted September 3, 2022 Not possible to add 2 portfolio pages on single page You can consider adding a standard page, then use Gallery Section, Gallery Block, Summary Block, List Section to replace portfolio list page layouts, thus you can add any portfolio to that standard page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
maguisiffredi Posted September 3, 2022 Author Share Posted September 3, 2022 18 hours ago, tuanphan said: Not possible to add 2 portfolio pages on single page You can consider adding a standard page, then use Gallery Section, Gallery Block, Summary Block, List Section to replace portfolio list page layouts, thus you can add any portfolio to that standard page I don't follow, sorry :S Can you share a screenshot? Thanks! Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 On 9/4/2022 at 2:27 AM, maguisiffredi said: I don't follow, sorry :S Can you share a screenshot? Thanks! Screenshot for? What step are you having problems with? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
maguisiffredi Posted September 6, 2022 Author Share Posted September 6, 2022 7 hours ago, tuanphan said: Screenshot for? What step are you having problems with? all of it haha I mean, I can create a page and I choose the gallery layout and I get this: I don't know what you mean with Gallery Block, Summary Block, List Section... I don't get how this can be similar to the portfolio page... Thanks! Link to comment
tuanphan Posted September 11, 2022 Share Posted September 11, 2022 On 9/6/2022 at 10:41 PM, maguisiffredi said: all of it haha I mean, I can create a page and I choose the gallery layout and I get this: I don't know what you mean with Gallery Block, Summary Block, List Section... I don't get how this can be similar to the portfolio page... Thanks! You can change to Gallery Section - Layout: Grid Simple, add caption Then we will give code to achieve hover effect in current Portfolio Page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
maguisiffredi Posted September 16, 2022 Author Share Posted September 16, 2022 (edited) On 9/11/2022 at 11:22 AM, tuanphan said: You can change to Gallery Section - Layout: Grid Simple, add caption Then we will give code to achieve hover effect in current Portfolio Page You mean like this? https://www.maguisiffredi.com/ I created a page called "Design" and on the first project I linked it to another project where you would see it (for now it only says "coming soon"). Do you think this could work? If so, can you send me the code for the hover, so that it looks exactly like on the "illustration" page? Thanks! Edited September 16, 2022 by maguisiffredi Already solved one of my questions. Link to comment
tuanphan Posted September 19, 2022 Share Posted September 19, 2022 On 9/16/2022 at 4:59 PM, maguisiffredi said: You mean like this? https://www.maguisiffredi.com/ I created a page called "Design" and on the first project I linked it to another project where you would see it (for now it only says "coming soon"). Do you think this could work? If so, can you send me the code for the hover, so that it looks exactly like on the "illustration" page? Thanks! Add to Design > Custom CSS figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; color: white; } .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: hsla(234.1714285714286, 79.18552036199094%, 56.666666666666664%, 1); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
maguisiffredi Posted September 19, 2022 Author Share Posted September 19, 2022 12 hours ago, tuanphan said: Add to Design > Custom CSS figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; color: white; } .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: hsla(234.1714285714286, 79.18552036199094%, 56.666666666666664%, 1); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } Thanks a lot!!! It works! You can take a look: https://www.maguisiffredi.com/design Just three more small details: - When you watch it on mobile, the text justifies to the left and isn't responsive (it remains too big for mobile). Is it possible to fix it? - And also on desktop, I have three columns, when it adapts to mobile, it splits into two columns, but I would like it to have only one column, is that possible? - I don't know if it's too much of a mess, but it would be awesome if I could have a title and a small subtitle with the year (like I have it on the illustration section). But I guess I'm maybe asking for a lot. Thanks again!!!! It's starting to look great! Link to comment
tuanphan Posted September 21, 2022 Share Posted September 21, 2022 On 9/20/2022 at 5:15 AM, maguisiffredi said: Thanks a lot!!! It works! You can take a look: https://www.maguisiffredi.com/design Just three more small details: - When you watch it on mobile, the text justifies to the left and isn't responsive (it remains too big for mobile). Is it possible to fix it? - And also on desktop, I have three columns, when it adapts to mobile, it splits into two columns, but I would like it to have only one column, is that possible? - I don't know if it's too much of a mess, but it would be awesome if I could have a title and a small subtitle with the year (like I have it on the illustration section). But I guess I'm maybe asking for a lot. Thanks again!!!! It's starting to look great! The url doesn't exist now Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment