Airbnb Website Clone - How To Create The BEST Landing Page Using WordPress Website - STEP BY STEP

Подписаться 61 тыс.

Просмотров 13 тыс.

50% 1

Let's recreate a high converting Landing Page from AirBnb with WordPress, Astra & Spectra 👉 wpspectra.com/
#wpastra #wpspectra #wordpress #brainstormforce
Products mentioned in the video:
🟣 Astra: wpastra.com
🟣 Spectra to power your WordPress block editor: wpspectra.com/
🟣 Starter Templates: wpastra.com/updates/starter-t...
🟣 CartFlows Funnel Builder: cartflows.com/
Tutorials
🟣 Build Websites Faster With Starter Templates 3.0 - • Build Websites Faster ...
🟣 Astra Theme Full Tutorial MASTERCLASS - • Astra Theme Full Tutor...
🟣 Astra FREE vs PRO - What's The Difference?: • Astra Free vs Pro - WH...
CSS Code
.wp-block-uagb-buttons .uagb-buttons-repeater .uagb-button__link {
margin-left:10px!important;
font-size: 16px;
line-height: 20px;
text-align: left;
}
body {
background-color: white!important;
}
.uagb-google-map__iframe {
height: 549px;
border-radius: 10px;
padding:0!important;
margin:0!important;
}
.custom-g-map {
padding:0!important;
margin:0!important;
}
-------------------------------------------------------------------
📽📌 Table of Content 📌📽
00:00 - Creating The Perfect Landing Page With Wordpress, Astra & Spectra
00:33 - Intro
01:05 - What We'll Build Today
02:15 - What Is A Landing Page
02:50 - What We Need For This Tutorial
03:37 - Landing Page Setup
04:35 - Custom Styles
05:56 - The Header
11:18 - The Hero Section
19:42 - The USP Banner Section
21:39 - The USP Text Section
25:01 - The Comparison Section
36:29 - The Showcase Section
44:14 - The Frequently Asked Questions Section
49:02 - The Upper Footer Section
52:08 - The Lower Footer Section
55:50 - Making The Header Sticky With Astra Pro
58:13 - What You've Built And Learned
-----------------------------------------------------------------
🤔 Just starting to create a website?
Refer to this ultimate guide: wpastra.com/guides-and-tutori...
🤔 How to use the Astra Theme (Step by Step)
Refer to this ultimate tutorial: • Astra Theme Full Tutor...
-------------------------------------------------------------------
📌 About Us 📌
At Brainstorm Force, we believe creating a website should not be complicated.
We build quality WordPress products and tools that are simple to use, affordable, and reliable to help entrepreneurs, professionals, and bloggers grow online.
Brainstorm Force is the team behind popular WordPress products like:
🟣 Most Popular WordPress Theme Astra: wpastra.com/
🟣 Starter Templates with 300+ pre-designed website templates: startertemplates.com/
🟣 Spectra to power your WordPress block editor: wpspectra.com/
🟣 Ultimate Addons for Elementor: ultimateelementor.com/
🟣 Ultimate Addons for Beaver Builder: www.ultimatebeaver.com/
🟣 Schema Pro to add schema markup to your website: wpschema.com/
🟣 Convert Pro to generate more leads: www.convertpro.net/
🟣 WP Portfolio to design your beautiful portfolio: wpportfolio.net/
🟣 ProjectHuddle to get sticky-note style feedback on your websites and designs: projecthuddle.com/
-------------------------------------------------------------------
📝 Are you a WordPress enthusiast who wants to contribute to our team? 📝
We are hiring across multiple positions: brainstormforce.com/join/
-------------------------------------------------------------------
🚨 Follow Us To Stay Updated 🚨
Facebook Community: / wpastra
Facebook Page: / brainstormforce
Twitter: / webrainstorm
LinkedIn: / brainstorm-force
RU-vid: / brainstormforce

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@BrainstormForce Год назад

For info: the reason why we didn't use the header builder for this tutorial was to show one way to add some header on a landing page. A landing page typically sits on the same install as your main website, and therefore you have 2 options: create a header / nav inside the page or if you have Astra Pro, you can use custom layouts. In this video we took the angle of the first option.

@timprobiz Год назад

Thank you! Couldn't make friends with Spectra. Now everything worked out. You are a wonderful teacher!

@BrainstormForce Год назад

Wow, thank you ! Happy to help!

@jhayypeei Год назад

Thank you sure for this 🙏🖤

@BrainstormForce Год назад

Our pleasure!

@gashumba888 8 месяцев назад

Considering the Spectra Theme was already out when this video was made, I wonder why it was not used! I like Astra but it still has a lot of the legacy code that I wish would disappear so we could completely move to new efficient block themes. But thanks for the video. I learned more about Spectra plugin.

@BrainstormForce 8 месяцев назад

You're welcome! While Block themes are the future (and that's why we built Spectra One), currently Classic themes are still the majority of WordPress themes, especially in live / production environments. But as it evolves (and as Spectra One evolves) we will create more content about it. Thank you so much for watching!

@AhmedNawaz117 9 месяцев назад

❤very nice way of teaching

@BrainstormForce 9 месяцев назад

Thank you so much for the kind words! 🙂

@parmasampa1 2 месяца назад

Please, could you create a step-by-step video using Thema Spetra One and Page Builder Spetra to recreate Sales Pages, presenting the features of Spetra Blocks Pro. Also show how to create an area of blocked and released content with Login. A function that I didn't find in Spetra Blocks Free is the option to resize the columns directly in the column grid we just created, we always have to use the side settings bar, the same thing happens for formatting Texts and defining the color of It is also necessary to use the side menu and it is not present in the floating menu within the content, but I noticed that when changing the color of an Icon, there is the option to customize Global colors. This customization of color formatting and text position should be present in the floating menu that opens when clicking on any element on the page. There is still a need to cut an element, which is not present next to the Copy, Copy Styles, Paste Styles tab. I can't say if these functions are present in the Pro Function as I only tested the Free one. If there is still the possibility of implementing the project import function directly from Figma, implementing the option to insert HTML/CSS/JAVASCRIPT and import libraries so that we can copy codes from sites like codepen.io Example of Button CSS Code needs to import Library from some locations codepen.io/yuhomyan/pen/OJMejWJ would be wonderful and would make LandPages and Sites much more Interactive. There is already a plugin that uses this type of import, I think it is via API that things happen unlimited-elements.com/elementor-widgets/ The Brainstom Force team could include a Page with the Functionality of each separate feature by category, because through that mega menu that can be clicked on each item, it is not possible to have such a clear view of all the Spectra Blocks PRO features. I would still like to Purchase (Spectra Blocks Pro + Spectra One + Spectra Starter Sites) for 3 websites without having to Purchase ASTRA Theme. And Brainstorm only has the option for 1 domain or 10, I believe there is a middle ground, maybe 3 or 5 domains. That's it for now...

@Terry-Adams Год назад

Thanks, very helpful video. Drives me a little crazy to set a bunch of different header styles and then over ride them... I have Astra pro, is it possible to create the functionality of a sticky header that is not a GLOBAL header?

@BrainstormForce Год назад

Glad it helped! Yes with Astra Pro you can create non-global headers with Custom Layouts. Maybe an idea for a future video :)

@termina-bot8225 11 месяцев назад

Hello, do you know how to create a website like discord ? I want to create a platerform with my online videos but I also want to have a chat group to answer all differents question. Is this possible with wordpress?

@alitosif992 7 месяцев назад

17:20

@itsveep 11 месяцев назад

paddle

@stephani969 Год назад

Being able to provide all my needs without the help of the Government is really a dream come through and I’m getting $20,000 returns from my $7,600 investment ☺️😊

@stephani969 Год назад

This is all thanks to Mr Jason Appel. I invest with him and have made a lot of money investing with him

@Wayneu252 Год назад

Wow!!! I thought I was the only beneficiary of Mr. Jason Appel trading services. His technique and strategies are the best.

@ammon127 Год назад

I'm glad to see Mr Jason Appel mentioned here, my spouse recommended him to me after investing $4000 and he has really helped us financially during the COVID-19 lockdown here in Australia🇦🇺