Themeco
Themeco
  • 175
  • 388 791
Create Beautiful Mega Menus in WordPress with Cornerstone
Cornerstone allows you to build anything you can imagine, and this extends to the navigation of your website. And let's not forget, this is in addition to the many native Mega Menu Elements and standard Navigation Elements available in the builder.
Follow along as we show you how to recreate a very popular menu inspired by Apple while touching on Cornerstone's Aria Labels and other quality of life features as well.
See demos of Cornerstone's Mega Menu Elements.
1. Mega Menu Dropdown - demo.theme.co/elements/#mega-menu-dropdown
2. Mega Menu Modal - demo.theme.co/elements/#mega-menu-modal
3. Mega Menu Off Canvas - demo.theme.co/elements/#mega-menu-off-canvas
See demos of just a few of Cornerstone's Navigation Elements.
1. Navigation Collapsed - demo.theme.co/elements/#navigation-collapsed
2. Navigation Dropdown - demo.theme.co/elements/#navigation-dropdown
3. Navigation Inline - demo.theme.co/elements/#navigation-inline
4. Navigation Layered - demo.theme.co/elements/#navigation-layered
5. Navigation Modal - demo.theme.co/elements/#navigation-modal
6. Navigation Off Canvas - demo.theme.co/elements/#navigation-off-canvas
Cornerstone is changing the website builder game. In addition to beautiful menus, discover how to create better websites with the most advanced set of features and tools on the market today. theme.co/pro
#wordpress #menu #navigation
Переглядів: 477

Відео

The Better Way to Display PDFs in WordPress
Переглядів 67028 днів тому
If you've worked with a website for any length of time, chances are you've needed to display, embed, or access PDF documents for yourself or clients. There are multiple ways to do this, and in today's video, we're going to show you a great process to both visualize and design the way PDFs are presented on your WordPress website. Without further ado, let's dive in. The Cornerstone Builder is bri...
Build a Custom Portal & Account Dashboard in WordPress with Cornerstone and ACF
Переглядів 968Місяць тому
If we've said it once, we've said it a thousand times: you can build anything with the Cornerstone Builder. In addition to standard layouts and pages, this also includes the more custom implementations like that of a dashboard or portal that normally require extensive custom coding or numerous 3rd party plugins. This could be a login page for customers, account and download area, dashboard admi...
Full Width Right or Full Width Left Layouts in WordPress
Переглядів 760Місяць тому
Cornerstone gives your website limitless layout possibilities, and today we're going to show you how to create one of the most popular website layouts in the world. Full width layouts with content on the left or right are a pretty standard convention, but did you know Cornerstone gives you all the native controls you need to make it look exceptional? Follow along as we show you how to align con...
The Best Web Design Tool for WordPress
Переглядів 5002 місяці тому
Like web effects? Done right, they can be the perfect flourish to add to your website. And thanks to Cornerstone, you have dozens of native effects right at your disposal! In today's video, we're going to jump into the design end of things and show you how to create a frosted glass effect with text on a photo background. There are many other design options as well, and you can do it all nativel...
Creative Website Effects in WordPress (no custom code)
Переглядів 6752 місяці тому
Web effects can give your website that individual design personality you've been looking for, however there's just one little problem. Generally, this is not easy to do without custom code or 3rd party plugins. Thankfully you don't need either with the Cornerstone Builder! In today's video, follow along as we show you how to leverage Cornerstone's all native background effects and layering effe...
How to Use Slider Triggers in WordPress with Cornerstone
Переглядів 7733 місяці тому
If you're not using Sliders on your website, you should! We think Sliders are an incredible way to build highly engaging websites...so much so that we created an entire course on the topic (theme.co/modern-sliders/). In today's video, we're going to show you how to leverage Cornerstone's helpful slide triggers to create some truly magical implementations. Without a doubt, Sliders are one of the...
One Simple Trick for Better Web Typography (Fluid Scale)
Переглядів 6673 місяці тому
Web typography got you down? Managing type sizes across different screen sizes and devices can be a real challenge, even in the modern age. But did you know the powerful Cornerstone Builder allows you to make managing it all a breeze? Say hello to fluid scale typography and discover the better way to work with your copy. Learn about Cornerstone's native typography options: theme.co/docs/typogra...
Real Time Cart Count in WordPress with WooCommerce
Переглядів 5414 місяці тому
Looking for a way to add a real time counter for your cart? You know the type where a customer adds something to their cart and the number automatically increases? Thankfully this is very easy when you are using Cornerstone - the most advanced website builder in WordPress! Even better, this tutorial will show you just one example of how to leverage all native Cornerstone features to build your ...
How to Override the Number of Posts Per Page in WordPress
Переглядів 4874 місяці тому
Cornerstone gives you virtually limitless ways to customize your blog, post, and archive layouts in WordPress (not to mention custom post types as well). In today's video we're going to show you how a little PHP can override the default WordPress settings and allow you to have different outputs for different pages. Here is a text file that includes the PHP from the video: go.theme.co/overridese...
(Part 2) How to Use Templates & Filters with Twig and the Cornerstone Builder
Переглядів 4824 місяці тому
Twig allows you to tap into Dynamic Content in virtually limitless new ways. In today's tutorial, we're going to continue our hot sauce example and show you how to add a "Load More" button to the content we created in the previous video (ua-cam.com/video/bu4SBJPAvPY/v-deo.html). About Twig: theme.co/docs/twig About Cornerstone: theme.co/docs/twig Don't miss a thing! Follow us here for the lates...
How to Use Templates & Filters with Twig and the Cornerstone Builder
Переглядів 7565 місяців тому
Twig is a major addition to the power and reach of Dynamic Content in Cornerstone. After all, we take our title of being the most advanced builder in WordPress very seriously! In addition to being a "no code" way of working with Dynamic Content, Twig incorporates literally thousands of other ways of accessing, manipulating, and working with dynamic data. In today's video, we're going to show yo...
How to Create Gradient Text in WordPress
Переглядів 8605 місяців тому
A beautifully crafted website is all about the details, and in today's video, we're going to show you how to create an elegant gradient text effect in WordPress using the one and only Cornerstone Builder! Learn more about the all-important Text Element: theme.co/docs/text Ready to build better websites? Cornerstone is the most advanced website builder in WordPress! theme.co/pro #wordpress #webd...
How to Build Fantastic Footers in WordPress with Cornerstone
Переглядів 9655 місяців тому
Footers are the unsung hero of beautifully designed websites, and in today's video, we're going to show you some of the many ways you can use Cornerstone's native Footer Builder to create truly remarkable designs. Be sure to check out the Footer Builder Docs for more info: theme.co/docs/footer-builder. What is Cornerstone? Only the most advanced builder in WordPress! Learn more and join us toda...
How to Use Toggles in WordPress with the Cornerstone Builder
Переглядів 8636 місяців тому
Toggleables offer the ability to display content on your pages dynamically through interactions or through code. They encompass Modals, Tabs, Dropdowns, and Off-Canvas Elements. New to Toggleables or want to get the most out of these exciting features? Follow along as we show you how they work. Learn more: theme.co/docs/toggleable Cornerstone is changing the website building game. Discover all ...
Say Hello to Dynamic Content 2.0 (Twig)
Переглядів 1,2 тис.6 місяців тому
Say Hello to Dynamic Content 2.0 (Twig)
Get Flexbox Gap Support in WordPress with Cornerstone (plus Pre-Fabs)
Переглядів 6266 місяців тому
Get Flexbox Gap Support in WordPress with Cornerstone (plus Pre-Fabs)
How to Create Placeholder Images in WordPress with Cornerstone (No Plugin Required)
Переглядів 9896 місяців тому
How to Create Placeholder Images in WordPress with Cornerstone (No Plugin Required)
How to Create Stunning Sliders in WordPress (from Scratch)
Переглядів 1,5 тис.6 місяців тому
How to Create Stunning Sliders in WordPress (from Scratch)
What is the Difference Between Fluid Text and Responsive Text?
Переглядів 7437 місяців тому
What is the Difference Between Fluid Text and Responsive Text?
How to Create This VERY Popular Blog Layout in WordPress
Переглядів 1,4 тис.7 місяців тому
How to Create This VERY Popular Blog Layout in WordPress
How To Make Beautiful Animated Headlines in WordPress with the Cornerstone Builder
Переглядів 1 тис.7 місяців тому
How To Make Beautiful Animated Headlines in WordPress with the Cornerstone Builder
How to Create Custom Responsive Controls for Elements in WordPress with the Cornerstone Builder
Переглядів 6137 місяців тому
How to Create Custom Responsive Controls for Elements in WordPress with the Cornerstone Builder
How to Create Native Coming Soon Pages in WordPress with the Cornerstone Builder
Переглядів 5138 місяців тому
How to Create Native Coming Soon Pages in WordPress with the Cornerstone Builder
How to Create Global Parameters in WordPress with the Cornerstone Builder
Переглядів 6678 місяців тому
How to Create Global Parameters in WordPress with the Cornerstone Builder
The Power of Self-Looping Parameter Elements in WordPress
Переглядів 8518 місяців тому
The Power of Self-Looping Parameter Elements in WordPress
Cornerstone Design Systems
Переглядів 2,1 тис.8 місяців тому
Cornerstone Design Systems
How to Use Atomic Design When Building a Website
Переглядів 1,3 тис.9 місяців тому
How to Use Atomic Design When Building a Website
Build Better Brand Websites w/ Personify
Переглядів 1,9 тис.9 місяців тому
Build Better Brand Websites w/ Personify
How to Create Re-Usable Aspect Ratios in WordPress with Cornerstone
Переглядів 9869 місяців тому
How to Create Re-Usable Aspect Ratios in WordPress with Cornerstone

КОМЕНТАРІ

  • @donovansmith7310
    @donovansmith7310 2 дні тому

    Hey Josh, how would we keep the column one hover state constant until they hover another column?

    • @yourthemeco
      @yourthemeco День тому

      Hey Donovan! Check out "data-x-slide-goto-keep-active" in this docs article: theme.co/docs/sliders#custom-attributes

  • @LasstUnsSpielen
    @LasstUnsSpielen 2 дні тому

    For people who just want to copy and paste :) calc((100% - min(88%, 1200px))/2) This is also a perfect option to create a section that has a 50:50 background colour. You just apply the background colour to the columns and use the calc statement as a left and right padding.

    • @yourthemeco
      @yourthemeco День тому

      Hey Donovan! Check out "data-x-slide-goto-keep-active" in this docs article: theme.co/docs/sliders#custom-attributes

  • @moneybernd2003
    @moneybernd2003 8 днів тому

    Josh I always watch your videos since they are really well made even though I'm not currently planning on doing a mega menu. But it keeps me on my toes thinking in creative ways. Keep up the great work!

  • @aldoxo96
    @aldoxo96 10 днів тому

    Is it possible to use DC tags in the Component's JavaScript? Example: let contentBody = {{dc:p:contentBody}} Thanks!

    • @yourthemeco
      @yourthemeco 9 днів тому

      Yep, you can definitely use Dynamic Content in your custom JS. In your example, you probably want to put that into a string like so: let contentBody = "{{dc:p:contentBody}}"; You also might need to escape the string with Twig if you are using HTML (theme.co/docs/twig). Cheers!

  • @crowningroyalty5416
    @crowningroyalty5416 10 днів тому

    Is there any type of full course for this. This was dope.

    • @yourthemeco
      @yourthemeco 10 днів тому

      Glad you enjoyed it! We touch on this a bit in Super Loopers (theme.co/super-loopers/) with topics like this: facebook.com/yourthemeco/videos/263742406040552

  • @staceymarler7746
    @staceymarler7746 13 днів тому

    I appreciate you making this video based on my suggestion from the prior video! I had an issue showing the title and using the url link when using repeaters with an array output. I finally figured it out via the {{ looper.field({"key":"ACFFieldName.title"}) }}. The ".title" and ".url" after the field name to pull in the appropriate meta info was making me go crazy trying to get it figured out. I found the how-to from a prior looper video you guys created. Great videos recently, and keep them coming!

    • @yourthemeco
      @yourthemeco 13 днів тому

      Very glad you found the video helpful. You can sometimes change the ACF output to be just a URL or title, but if you want to display both those data points using dot notation to grab object data can be the way to get data you have referenced. Cheers!

  • @citysidewalkmarketing
    @citysidewalkmarketing 15 днів тому

    Another awesome video Josh, thanks as always for the hard work. I'd love to see a vid of how you tackle a variety of mobile menu layouts and challenges. I always find these to be more challenging to do well.

    • @yourthemeco
      @yourthemeco 15 днів тому

      Thanks for the suggestion - we'll keep that in mind for future episodes.

    • @moneybernd2003
      @moneybernd2003 8 днів тому

      i'd love to see that too!

  • @scotbaston1018
    @scotbaston1018 15 днів тому

    Very nice Josh! Thank you I'm wondering how this could work with an ACF menus and pulling in dynamic data

    • @yourthemeco
      @yourthemeco 15 днів тому

      Many thanks! You probably will want to see the guide on ACF Pro repeater fields. Have a great day. ua-cam.com/video/ncnXpRW4G_M/v-deo.html

  • @mkellyb754
    @mkellyb754 16 днів тому

    It's working now! The problem was with the variable name `--x-slide-total-`-it had an extra hyphen at the end, which caused the CSS to break. Once I removed the trailing hyphen and made it `--x-slide-total` to match the defined variable, everything worked perfectly.

    • @yourthemeco
      @yourthemeco 15 днів тому

      Fantastic, thanks for letting us know!

  • @mkellyb754
    @mkellyb754 16 днів тому

    I tried twice it doesn’t work for me 🤦‍♂️ specifically the calculation

  • @krimou32
    @krimou32 19 днів тому

    I have cornerstone from an X theme purchase but it only shows page and components when I click the "+" icon. None of the other options are available... Looks like I'm very limited when it comes to header/footer customisation while being held hostage by cornerstone. Not sure if I can customise those outside of the cornerstone builder without breaking stuff

    • @yourthemeco
      @yourthemeco 19 днів тому

      Howdy! X includes Cornerstone's Page Builder, and Pro includes everything (Header Builder, Footer Builder, Layout Builder, Grid Editor, etc). This is how it's always been since Pro came out in 2017. You can manage headers and footers in X by following these instructions: theme.co/docs/header and theme.co/docs/footer. If you'd like to take advantage of all the additional features, you can upgrade to Pro from the license page in your Themeco account or by purchasing a license here: theme.co/pro#pricing

  • @chrisk9667
    @chrisk9667 20 днів тому

    Thanks Josh. Is it possible that from the list of pdfs on the archive layout that rather then going to their individual document page that they just open the pdf in the browser? They can still download from there and my client prefers to open it straight away as opposed to seeing another page. :)

    • @yourthemeco
      @yourthemeco 19 днів тому

      Sure thing! You could always link out to the PDF directly if it's hosted on the site and take the link directly to that URL. If I'm understanding you correctly.

  • @christofferahlback
    @christofferahlback 27 днів тому

    Well, this can be very amazing!

  • @DickEassom
    @DickEassom 28 днів тому

    Excellent! Thank you so much!

  • @henrybagilhole5154
    @henrybagilhole5154 28 днів тому

    Great Tutorial Josh, I've just gone thorugh the same thing but didn't like the PDF Emebedder styling so I've had to revert my client having to use the Wordpress File Block for PDFs which has a much nicer interface (it also works with Interactive PDFs). Do we think there is a way of showing the built in wordpress block in similar way? Hope that makes sense.

    • @yourthemeco
      @yourthemeco 28 днів тому

      Internally, WordPress uses the <object/> tag to display a PDF. Using the same Dynamic Content in the video you would paste something like this in a Raw Content Element, where data is the file URL. Have a great day. <object data="{{dc:acf:post_field field='doc_file'}}" type="application/pdf" style="width:100%;height:600px"></object>

  • @EdgardMello
    @EdgardMello 29 днів тому

    Hi Josh! Thanks again for the great content. How can I show only PDFs related to the logged-in user? Is it possible?

    • @yourthemeco
      @yourthemeco 28 днів тому

      Currently you can't loop over attachments in our Query Builder. The problem being you can't select the attachment post type and we don't have controls over the post status. You could either use the query string (keeping in mind the post status issue alluded to earlier) and filter by the attachment author or setup a User Meta field in ACF that you could add multiple attachments to a user. Have a great day.

  • @tomuch4078
    @tomuch4078 29 днів тому

    So good! I’m so excited to utilize this on my site!!

    • @yourthemeco
      @yourthemeco 29 днів тому

      Awesome, it's a great quality of life improvement for PDFs.

  • @slypandadesign
    @slypandadesign 29 днів тому

    Thanks Josh! Another timely tutorial. I have a client who wants to display PDFs of each the magazine articles they've been featured in. Something like this offers the perfect solution. Thanks again!

    • @yourthemeco
      @yourthemeco 29 днів тому

      Fantastic, let us know how it goes!

  • @linnmarketing
    @linnmarketing 29 днів тому

    Great - as always. Thank you Josh! Would have saved me a lot of trial and error, if I had seen this a year ago ;-) The only thing missing here is how to show a pdf's thumbnail on the archive page.

    • @bill-hodgson
      @bill-hodgson 29 днів тому

      You'll need to make one - I haven't found something that would make that happen. Add it as the featured image, use a screenshot of the first page for instance.

    • @yourthemeco
      @yourthemeco 29 днів тому

      Hey Uli, I don't think any of the 3rd party PDF tools would support something like that, but it would be very easy to do in Cornerstone as Bill suggested.

    • @linnmarketing
      @linnmarketing 28 днів тому

      @@bill-hodgson As manually creating screenshots is no option, in one case I used the "PDF Thumbnail Generator" plugin. It creates a thumbnail for every uploaded pdf, the thumbnail's filename is the original pdf-filename + ".jpg", so it can be shown by something like <img src="{{dc:acf:post_field field="doc_file"}}.jpg"></img>. I hoped there would be some native WP / Cornerstone way to do it without needing another plugin.

  • @Schauk
    @Schauk 29 днів тому

    Wow, this is incredibly helpful! Thanks for teaching us, Josh!

  • @bill-hodgson
    @bill-hodgson 29 днів тому

    I've tried three PDF embed plugins. At least two of them required direct file access into the site, which is a no-no for security reasons (in CloudWays anyway). I chose to use "PDFjs Viewer - Embed PDFs" - similar to the above. Check each one for responsiveness too, nothing worse than a PDF preview not working on a phone.

    • @yourthemeco
      @yourthemeco 29 днів тому

      Thanks for the perspective.

  • @bill-hodgson
    @bill-hodgson Місяць тому

    I'm lost - why do you need to use a CPT for this, instead of regular pages?

    • @yourthemeco
      @yourthemeco Місяць тому

      Using a CPT can give you more control over things like visibility or mass manipulating. As we saw in the video, you could create your own post type template. You could always use a normal page.

  • @jonatosorio
    @jonatosorio Місяць тому

    Useful, thanks. But, I try to use to change the Position and Size of a Section background image and it's not variable. How does it work with Background Layers panel?

    • @yourthemeco
      @yourthemeco Місяць тому

      Getting those controls to work responsively is something we are working towards. This currently can only be done with Parameters and using Custom CSS.

  • @mrfish4572
    @mrfish4572 Місяць тому

    How do you create a background image for a section and then have different images display responsively. Its so essential to be able to do this and not very easy with cornerstone as the image cant be changed for different devices like the other attributes can.

    • @yourthemeco
      @yourthemeco Місяць тому

      This currently can only be done with Parameter images and using Custom CSS. We have a Dynamic Content formatting type called "image-css-url" theme.co/docs/dynamic-content#image-css-url . Making those responsive is something we are working towards.

  • @tomuch4078
    @tomuch4078 Місяць тому

    Amazing. Love this video! So useful!! For the portal login, is it possible to have a field for username and password, so that when logged in, one can have access to their specific individual information?

    • @yourthemeco
      @yourthemeco Місяць тому

      You can definitely display username and other user info. However passwords are encrypted and you cannot display that on a user portal.

    • @tomuch4078
      @tomuch4078 Місяць тому

      @@yourthemeco Thank you for responding. I might not be understanding the use case for this portal, but can I use this for individual users, each with their own personal login and portal information?

    • @yourthemeco
      @yourthemeco Місяць тому

      I think the confusion is that this is focused on the building of the actual portal, not the login aspect. There are multiple ways that could be managed from the basic WordPress login all the way to something more dedicated.

    • @tomuch4078
      @tomuch4078 Місяць тому

      @@yourthemeco Ah. Awesome that’s what I figured. Will you be doing a follow up video regarding that aspect? Thanks again! And again… Love the videos. So helpful and useful!!

    • @yourthemeco
      @yourthemeco Місяць тому

      Most welcome! There aren't any plans at this time as that is pretty easy to do natively with WordPress. The harder part is building what they see once they login.

  • @staceymarler7746
    @staceymarler7746 Місяць тому

    Great stuff! I would love to see a quick tip on showing uploaded files on a single layout by using the ACF File Array option. The user would be ableo to click on the files to view or download.

    • @yourthemeco
      @yourthemeco Місяць тому

      Thanks Stacey! Could you give a little more context or example of what you’re trying to achieve?

    • @staceymarler7746
      @staceymarler7746 Місяць тому

      @@yourthemeco I've been working on a custom post type and needing to include unique files for each post that the viewer can download. So, say you have a custom post type "Services" for posting all of your services of your company. I would enter all the details about the services and then would like to upload multiple files that can be download by the viewer to learn more. Examples of those files could be a pdf of a flyer for that service, how to guides, part specs, etc. Then on the service page would be a file download page that shows the title of each file uploaded and link to download. I've been trying to do the file array option to get the title and url of the file on the output but have struggled to make it happen. I was able to get the output to show the complete array but unable to pull out the information I needed such as "title" and "url". I went ahead and used the output type of the repeater to "URL" instead of "Array" so I can use the url to hyperlink text of "download file". A bonus tip would be, how to turn off the dowload section if there isn't any files uploaded. I hope that makes sense!

    • @yourthemeco
      @yourthemeco Місяць тому

      If you have the output as "File Array", you can use looper field dynamic content. It would be {{dc:looper:field key="url"}} and {{dc:looper:field key="title"}} respectively. You can use a condition if the ACF field is empty + Twig. This {{ acf.post_field({"field":"files"}) | length }} would be 0 if your ACF field is empty.

  • @jonathanwaddell4127
    @jonathanwaddell4127 Місяць тому

    Great explanation Josh, thank you

  • @rockin4840
    @rockin4840 Місяць тому

    If you had categories of products, how could a similar thing be done to display categories on this page and clicking on each category would take you to only the products in that category? I don't see any dc for categories at all

    • @yourthemeco
      @yourthemeco Місяць тому

      A member of the team would be happy to help in our support forum.

  • @LasstUnsSpielen
    @LasstUnsSpielen Місяць тому

    Its so cool to look back at older videos and realize: Most of the things are now possible without any custom css. Everything can be achieved by the builder now.

  • @hendrikhellmich124
    @hendrikhellmich124 Місяць тому

    Thx fr this Content. I almost work 9 Years in a lot of projects with your theme but with this type of Videos i learn always something I didn't know before. Please more of this content ;)

    • @yourthemeco
      @yourthemeco Місяць тому

      Love hearing that, Hendrik. More on the way!

  • @hendrikhellmich124
    @hendrikhellmich124 Місяць тому

    Thx you! Cool Video!

  • @prezzo19
    @prezzo19 Місяць тому

    How can you change the names of the navigation (home,work,shop,about,contact) to something else?

    • @yourthemeco
      @yourthemeco Місяць тому

      They are managed from menus in the WordPress backend. Check out this article: theme.co/docs/how-to-set-up-navigation

  • @mr_clean575
    @mr_clean575 Місяць тому

    How does ThemeCo handle caching with the API requests?

    • @yourthemeco
      @yourthemeco Місяць тому

      There are a variety of choices ranging from "Once,” "Never,” or a specific time frame. It is cached based on the parameters you are sending to the API. More information can be found here: theme.co/docs/external-api-integration#cache

    • @mr_clean575
      @mr_clean575 Місяць тому

      @yourthemeco Gotcha, that makes sense. What about images? If there was an api call returned with an image url, will it cache the url call to the image? Can you connect these calls through a CDN that stores all the images?

    • @yourthemeco
      @yourthemeco Місяць тому

      The image would be cached on a users page and not served from your site. If a CDN had an API where you could pass it a URL and it would give you back a URL to display on your page that would work. However the API you are using is probably already using a CDN and serving the images it sends you directly is probably fine.

  • @LasstUnsSpielen
    @LasstUnsSpielen Місяць тому

    I love you <3

  • @slypandadesign
    @slypandadesign Місяць тому

    Thanks Josh. Another great tip.

  • @lolypop185
    @lolypop185 Місяць тому

    Nice solution! I've used this in tons of layouts through different methods, but I'll be trying this on my next build. Usually I use a div in a column and the width set to calc((100vw - 1200px) / 2 + 600px) which is the same thing but just an extra DOM element I suppose. Keep up the great content Josh!

  • @natesheridan6584
    @natesheridan6584 Місяць тому

    🤔 but what if you want to put text over the full width image? My method: create a div element in the section (above the row), set position to absolute and height to 100%. Set the with match the column and then put 0 on ether left or right position. Add a background image to the div and it will sit behind the column. This vid is very useful though. Thanks!

    • @yourthemeco
      @yourthemeco Місяць тому

      Our pleasure! Love hearing other people's approach as well. One of the many super powers of Cornerstone is allowing multiple paths to get to a similar outcome.

  • @mattjenkins81
    @mattjenkins81 Місяць тому

    Great tip, thank you. Would love to see more of these type of tips, especially liked this leveraging just native pro elements; keeps it simple for the more 'hobbyist' users of Pro like myself.

    • @yourthemeco
      @yourthemeco Місяць тому

      Most welcome, more to come!

  • @davidsilvester7618
    @davidsilvester7618 Місяць тому

    Wow, we were just trying to figure out the best way to do this a few days ago. Our initial solution used nested grids but this way is so much cleaner. Nice one team!

    • @yourthemeco
      @yourthemeco Місяць тому

      Fantastic, happy to hear it!

  • @RalphVogel
    @RalphVogel Місяць тому

    Very Nice: now the filter functions with woocommerce

    • @yourthemeco
      @yourthemeco Місяць тому

      Thanks! Are you asking about a video on filtering in WooCommerce?

    • @RalphVogel
      @RalphVogel Місяць тому

      100%! And that with Some smart functions of cornerstone, (pro) and build it from scratch! Filtering some products based on tags and price or something. And yes! Im asking! Haha

    • @yourthemeco
      @yourthemeco Місяць тому

      Will definitely keep in mind. Just recently launched a WooCommerce Tips category for this series: theme.co/blog/woocommerce-tips

  • @carelvanderwyck
    @carelvanderwyck Місяць тому

    Josh shows with some header css how to change the backgound color when triggered but how to show, hide or change the logo image and change the menu font color when triggered? Can you help with this CSS? /*Sticky state*/ .x-bar.x-bar-top.x-bar-h.x-bar-is-sticky.x-bar-fixed { background-color: pink !important; )

    • @yourthemeco
      @yourthemeco Місяць тому

      Hi There, a member of the team would be happy to help with custom code via our One service: theme.co/one

  • @rockin4840
    @rockin4840 2 місяці тому

    Josh, when I created the product page using WooCommerce single, it immediately put THE SHOP at the top of the page on the left. It is not an element I can access at all, so wondering how to get rid of that section. Great video again mate

    • @yourthemeco
      @yourthemeco 2 місяці тому

      We're not sure how you are seeing that just from your comment. Feel free to jump into our forum, and we'll get you squared away.

    • @rockin4840
      @rockin4840 Місяць тому

      That happens stock standard as soon as you create a WooCommerce Archive. If you turn off header, this disappears

    • @yourthemeco
      @yourthemeco Місяць тому

      Check the Shop settings in Theme Options, then if you need anything further a member of the team would be happy to take a look in the forum.

  • @Sweetchilli.design
    @Sweetchilli.design 2 місяці тому

    Thanks for this very informative video. I had a question about the shrink amount - I want to shrink the size of my header to about 60% of it's current height, but I would also like the logo to shrink a bit in size when I start to scroll down, but when I scroll back to the top it should return to 100% size along with the header. How can I do that effectively?

    • @yourthemeco
      @yourthemeco 2 місяці тому

      "x-bar-fixed" is a class that is added to the Header when it is fixed and shrunk. Using that you can shrink your logo when the header is fixed via ".x-bar-fixed $el { ... }" via Custom CSS in the Customize tab. We'd be happy to help with this custom coding via our One program (theme.co/one).

  • @rockin4840
    @rockin4840 2 місяці тому

    What version do you need of Pro for this? I have 6.3.7 and don't see Gap as an option in Flexbox

  • @visualmodo
    @visualmodo 2 місяці тому

    Really good content!

  • @marchydecreative
    @marchydecreative 2 місяці тому

    How do we make the "hover color" stay on when that slide is selected? So that if you're looking at slide 3, slide 3's trigger has the background color shown

    • @yourthemeco
      @yourthemeco 2 місяці тому

      This is possible with our Slider API (theme.co/docs/slider-api) checking the current slide on the slider and adding the class "x-active" if it is the current slide is also the goto trigger. We're considering adding this as the default behavior to our sliders as well. If you use the Element "Slider Pagination" this could possibly achieve what you are trying to do. Thanks for the feedback.

  • @SeanHart-y7e
    @SeanHart-y7e 2 місяці тому

    Is there a way to change the default state of the element a user clicks on? for the sake of better accessibility.

    • @yourthemeco
      @yourthemeco 2 місяці тому

      We have color controls called "Interaction" that handle the hover look and feel. We place the class x-active on any toggleable Element that is currently active. Besides that I think you can target the styling through $el:active {} in custom css. Is that what you were referring to?

  • @Schauk
    @Schauk 2 місяці тому

    Thank you Josh!

  • @jonathanwaddell4127
    @jonathanwaddell4127 2 місяці тому

    Awesome work as always Josh - Thank you for your efforts

  • @PantheraPhotoSafaris
    @PantheraPhotoSafaris 2 місяці тому

    This question has been doing my head in.... Can you apply conditional Logic to a button on the page? Row of buttons on the top, only the info for the selected button showing on page?

    • @yourthemeco
      @yourthemeco 2 місяці тому

      Were not 100% sure what you are trying to do here. You can use String expressions and use the Dynamic Content {{dc:url:path}} to do conditions based on a website URL. So that a button is only showing on certain pages. Feel free to hop into our forum for additional help as well.

    • @PantheraPhotoSafaris
      @PantheraPhotoSafaris 2 місяці тому

      @@yourthemeco got it sorted, thanks so much tho!