Portfolio WebSite - Full build Part 2 - Bricks, Oxyprops, Meta Box
This is part 2 (link to part 1 below) of the series of videos where we build together a modern portfolio site using Bricks as a Page Builder, OxyProps to style it, and Meta Box to manaage Custom Post Types and Custom Fields.
I this episode, we focus on the work experience section, where we will:
Create custom post types with Meta Box
Create relationships between post types with Meta Box
Create custom fields with Meta Box, including a conditional field and a clonable group.
Use Bricks query loop to create work experience cards from a custom post types, including relate skills from a second post type through the relationship.
Learn about grid-auto-flow to create an horizontal scrollable container for our cards.
Use a code element to query metabox data and output a conditional string of text in our card.
And of course build all this with OxyProps in Bricks.
This will be a lot of fun !
🎉 Get OxyProps while it is on LTD !
OxyProps: https://oxyprops.com
🔗 Links
Part 1: The hero section & the about section
• Portfolio WebSite - Full build Part 1...
The original build by Sonny Sangha:
• 🔴 Let's build a Modern Portfolio with...
⌚ Timestamps
00:00 - Introduction
00:28 - Create the basic structure for our section.
01:00 - Create custom post types with Meta Box.
02:18 - Create a relationship with Meta Box.
05:20 - Create custom fields with Meta Box.
07:10 - Create a conditional field with Meta Box.
08:00 - Create a clonable group field with Meta Box.
09:53 - Create a horizontal snapping scrollable container.
15:20 - Create a card with the query loop from a custom post type.
21:37 - Create a horizontal snapping scrollable container - part 2
24:53 - Get information from another post type in query loop with a Meta Box relationship
28:52 - Use the query loop with a Meta Box clonable group.
31:05 - Use a code element to get information from Meta Box custom fields and output a custom string of text
41:12 - Experience section wrap-up
42:53 - Create the skills section
43:40 - Create a grid of skills with the query loop
45:05 - Create an overlay revealing content from a custom field on hover.
#CSSFramework #OxygenBuilder #OxyProps
___
Come hang out with other OxyProps users ans Oxygen lovers in our Facebook Community
💬 / oxyprops
___
My editor:
VS Code - https://code.visualstudio.com/
My Terminal Enhancements:
OhMyZSH: https://ohmyz.sh/
Powerlevel10k: https://github.com/romkatv/powerlevel10k
___
Find OxyProps on the internet :
Facebook: / oxyprops
Twitter: / oxy_props
___
And don't forget that if you can design it with Oxygen, you can style it with OxyProps!
Смотрите видео Portfolio WebSite - Full build Part 2 - Bricks, Oxyprops, Meta Box онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь OxyProps 22 Октябрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 5,167 раз и оно понравилось 95 людям.