Astra Custom Layouts – The Most Powerful Feature In The Astra Pro WordPress Theme

Astra Custom Layouts – The Most Powerful Feature In The Astra Pro WordPress Theme


In this video ministry how to use probably
my very most favorite feature in the Astra Pro theme and a ministry how to use it is
called custom late-summer show you how to use it in this video hi my name is Adam from
W crafter.com REMIC WordPress tutorial videos for non-techies if you’re new here consider
clicking on the subscribe button and to not miss a thing go ahead and click on that bell
this is going to be on the Astro Pro so Astra is a free WordPress theme that has a paid
extension if you want to check that out its WPCrafter.com/Astra so this is just good to
be for people that have Astra Pro but what I’m going to show you how to do is go to work
with all the page builder so if you’re using Elementor Beaver Builder Divi Thrive Architect
our breezy urban you know whatever page builder you’re using this is all going to work with
all of them so today I don’t want to make this video for a while because I’ve been using
it for a while but today I was on Elementor’s website and if you see anything different
it’s at the very top of Elementor’s website it’s it’s they added this before this is what
the website looked like and then they added this little section to the top of their website
and it says you know some text here and we got a button and then we have a countdown
timer on the right and so I thought wow I really like that I wonder if I could do the
same thing so here’s my website and this is what I designed today and I did this using
the custom layouts but you can do a lot of things with this and I’m to show you but I
just wanted to just first to show you what I was able to do today really easy basically
copied the design right here and do it for me on my website using Astra Pro but what’s
nice is you can create sections like this that you can slip into a numerous amount of
locations on your WordPress web design let me show you a another custom layout that I
have and that’s at the bottom of my website so right here’s my website footer and this
is generated by the theme and then I have a section just above it and you can see when
you hover over it it just has us little effect on probably change this soon but it’s what
I’ve been rolling with for a while and I made the same background color black that I have
with the footer in your area here and actually redo the whole thing but this is just a custom
layouts let me show you what this custom layout thing is all about and some of the things
that you can do with it so here I am on a fresh WordPress installation that happens
I have Astra Pro on it first you’re going to want to make sure that the custom layouts
is enabled and you do that by going to appearance and then you go to aster options right here
and you’ll scroll down and it’s right here custom layouts and I don’t have it activated
let me go ahead and click on activate now if you’re using if you already have Astra
agency some of the demos for Astra agency are actually built using custom layouts when
you see some of the tricked out stuff that they do so when you first activated it’s going
to add a menu item here we have to refresh this or let me just click on dashboard to
force a refresh and now when I go under appearance we have custom layouts so let’s go ahead and
well looks like are you have to there so I would go ahead and click on add new and before
I give it a name let me just tell you what were doing you can have is not as many of
these as you want you just give it a name you can build it with your page builder so
whatever page will you have it’ll have a button for that I just happen have Elementor on this
website right now and here’s where the power of this custom layout thing comes in so right
here it’s there’s this options is custom layout settings assist layout and we have this drop-down
so you can use custom layouts to design a header for your website or a footer for your
website or a 404 page or when I’m using online hooks so it’s simple you just choose header
and check this out this is where this feature my love for this feature comes in because
you have the greater header okay great what are all whatever hooks even that whatever
where it’s really special is the display on in the user roles so I can create this custom
layout and right here for display on I can choose exactly where this will be viewable
on this website so if I wanted a custom header for just blog posts are just certain pages
or just say I have an online course website and I want a custom header for those lesson
pages or whatever you can zero in very easily having a custom header for just the content
you want but you also can take it a step further by user role in this should be logged and
logged out every body or based upon the user role that someone is that might be logged
into your website so right off the bat with this you can create headers for your Astro
based website and have custom headers based upon where someone is on your website that’s
not actually how I’m using it I’m using right here where it says hooks and so when I go
there I have this other option that appeared called action I know were getting into the
techie zone right here so let me go and show you this so there’s all these locations in
the names of them are all little on the techie side but if you actually read what it says
some of them you can kind of figure it out so right here it says for header so header
before this is the area that I have that Elementor still notice on my website I have it on the
header before so whenever I create if I select this like here whenever I create will now
be in that header before let me just show you this let me give this a name and I’m going
to just do something real quick how do you like that I named it custom layouts are cool
and just the something really quick so you don’t even have to do it in your page builder
if you don’t want to you can it’s good to be a lot nicer but just for the point of this
video I need to just something really quick okay soon so now that I’ve chosen a header
before I went to choose to display on my entire website let’s keep this real simple and I’ll
go ahead and click on publish and so here is that website the front and if I do a refresh
organist see now I’ve got that what I just created which is only this one line of text
it’s right there in the header before area but you can use your page builder to make
something really beautiful which is what I did right here at the top I made this really
beautiful section right there so check this out say you like and that’s not exactly where
I wanted it well you can go here and easily change it so if you wanted it at the bottom
of your header here’s header after here’s content before content tops you can play around
with this and get your piece of content exactly where you wanted have you ever been to a blog
and you’re reading through the blog post is a great blog post you try to get down to the
comments and you see this maybe this is squaring it says hey opt-in then subscribe in this
that and the other and it looks real fancy and it has different colored background while
that’s what you use this for you would go here and you would create it in your page
builder and they can go right here and there’s an option for this content bottom there’s
there’s in you can just slip that right in and then you can use the display rules to
maybe have some specific to certain types of content that’s how you do it so in the
end down here you don’t see it because it’s cut off on the screen we have footer before
and footer after and on the bottom and all that kind of stuff so this is custom layouts
it is insane what you can do with it and this is probably one of the main reasons I use
the Astra Theme there are other themes that have this kind of feature called hooks but
none of them have an interface like this where you got this display targeting rules in the
user rules and all that because of this visibility stuff none of them have that let me give you
just a couple real-world examples of where I’ve seen this these hooks being used but
just keep in mind I’m going to show you where it’s being used on some websites you can get
some ideas to get the juices flowing of how you can leverage this feature in the theme
in most people write it even though this feature existed but it’s really easy to leverage on
your website but keep in mind I’m wearing to show you you have these targeting options
okay so here is the membership guides guys not guides but there also guiding you and
so what’s the first thing I see here is a hook area right here we have this call to
action we’ve got a button and it appears just underneath the header you can easily make
something like this but where you could take it a step further with the Astra Theme is
you could maybe have two or three different lead magnets that kinda coincide with the
different categories of content on your blog and so you can show one of these for one of
the categories and it would show on all the content in that category or with the specific
tag and then you can have a different one for a different category in a different tag
this is some of the power of using custom layouts so here’s how they’re using it right
there and I think they’re probably going to be doing that down here at the bottom okay
actually think I’m just on their blog right now let me go into a piece of their blog content
okay so now actually in some of their blog content you can see they have that same lead
magnets you can use it for lead magnet sets can be great and here’s that other example
were you would have a piece of content at the bottom of the content area and it would
be sort of similar in there you have it right there and obviously you can also use the feature
to create a custom footer if you like the way that this looked I know with Elementor
others a menu element and you can also use their social media element if you like that
and also this right here this little bit right here this a lead mentioning it you see our
care on the right or you can create those and hook those in the sidebar as well with
your page builder using custom layouts where you have the power of assigning these different
display rules that are right here so when you combine the ability to dynamically insert
that content with the display rules you can do some really really powerful things this
has to be my favorite feature with Astra and you can use any page builder with Eddie just
open it up in the page builder create a way and you can do some really amazing things
so anyways let me know what you think about custom layouts I’m curious if you are an Astro
Pro user did you even know this existed because I don’t think people know that this is there
in the power the true power of this let me know in the comments section down below and
if you don’t have Astra just visit WPCrafter.com/Astro I have a whole training course I get people
in a by Astra just you get all the details by going to that link also have in the video
description box if you found any value in this video please give it a thumbs up I will
see you in the next video thank you for watching

45 thoughts on “Astra Custom Layouts – The Most Powerful Feature In The Astra Pro WordPress Theme

  1. Why not use GeneratePress to do this? Most of what I see it easily done already in Elementor Pro, right? Thanks for the concise review, always nice to know what's out there.

  2. Nice video Adam. I use Beaver Themer instead. It looks like it can do the same. Am I right?

  3. Question – if your building your post template with a page builder do the content after hook in Astra work?
    Or would you do it in elementor somehow?

  4. There is a useful free plugin by Astra to show the hook locations https://wordpress.org/plugins/astra-theme-visual-hooks/#description

  5. Hello Adam, which would be the correct hook for designing a page header with elementor? I know that Astra has custom page headers but there is no possibility to put an elementor section, so I thought that maybe with custom layout it could be done… have you ever done something like that?

  6. Thanks for this video, Adam! Can i use this feature to create the black ribbon look at the top of your website where there is login button etc?

  7. Hey Adam, love your videos. Are you able to export the layouts. I’m looking at using them on other websites without having to redesign.

  8. Great INFO!! Having just purchased Astra Pro, didnt know this feature existed. This feature will definitely come in handy.

  9. I didn't realize you could control display by roles. Often with membership sites you have a specific role for members. Being able to display based on roles is a big plus in these circumstances.

  10. There's a third party plugin for Genesis called Genesis Hooks – but it's so essential it should be built into the theme! And Genesis Hooks isn't page builder friendly

  11. WOW! I've been ignoring this feature for months now. I tend to use a Global widget of Elementor to create sections that are globally available. This feature is a bad ass! Thanks for the further explanation of your video.

  12. Hi adam, I see on your website that you answered someones question about custom blog category pages saying that elementor would implement it in march 2018, Do you know if they have done that yet? Thanks for your vids 🙂

  13. Interviewing a potential client tomorrow, and I'm going to tell her about Astra. She's using Divi, which I respect, but I can see lots of marketing potential with this.

  14. I knew those customizations exist because I am watching your videos 🙂

  15. Hey Adam! Yet another great video. Thought this might help you and others decipher where the hooks actually are… I came across it a couple of weeks ago 🙂 https://developers.wpastra.com/theme-visual-hooks/?_ga=2.204337878.771028985.1528578046-512978441.1523446927

  16. I got Astra Pro a couple of days ago (via your link) and wanted to use it with Thrive Architect but the two don’t seem to play nicely. It simply won’t work with custom layouts. 🙁

  17. Hi Adam, can you please do a video on how to create a sticky menu in Elementor/Astra? Also to make a thinner menu, the one that shrinks as you scroll down the page.

  18. Without Astra Pro the blog "Page" looks horrible. What if I just created a blog page with elementor and made my menu "Blog" link to that page? But would I then have duplicate content?

  19. Here's what I don't get – how to change the default button, ext, images (etc) on the default home page in Astra? Seems like the most basic thing ever but there is NO article covering this. Other themes allow you to do this in the customizer, but Astra does not. It just says "this theme has widgets, but you can't edit them here".. Gee thanks..where CAN I edit them? Can you PLEASE pretty please cover this basic topic? Thank you!

  20. Maybe a noob question, but if I have Astra Pro custom layouts there will be no need for me to get Beaver Themer as well?

  21. Thank you for this video. If I don't use a page builder, I just have Astra Pro and use the Gutenberg editor – does that mean I can't take advantage of this custom layouts feature the way I could if I did have a page builder?

  22. Do the hooks work to creat archive pages to show various parts of the custom post type and the acf pro fields?

  23. Love that, thanks for another great video! Does that mean that having Astra Pro I can get away with Elementor Free, as much as custom page templates are concerned?

  24. Hello, Adam! Thanks for your awesome tutorial videos, especially this one. I wonder, if I can make custom header with Elementor within custom layouts but at the same time preserve the below and above header, which is offered by Astra's customiser. When I now swtih ch to custom header, both disappear. Thank you!

  25. I truly did not know this was there brother…thanks a bunch…I'm adding a couple now. I was trying to create something like this with images. Saves you so much time!

  26. Is Thrive Architect able to create or edit these Astra custom layouts? I’m tired of waiting for Thrive Theme Builder, so I’m considering to move to Astra Pro but keep using Thrive plugins.

  27. Thank you! NOW I understood how to use this feature. Just one question – editing a hook customized layout using elementor does not work for me. Elementor is loading forever. Do I need Elementor Pro for that?

  28. I just got started with wordpress and started by creating my website using the Astra theme and the outdoor adventure starter site. The header and menu text is white with transparent background to contrast with the background picture. When adding sub-menus, this causes a problem as the background of the sub-menus are white and the text is white…
    How do I change the sub-menu properties – both font and background (solid color or transparency)?

Leave a Reply

Your email address will not be published. Required fields are marked *