WYSIWYG Web Builder 15.0.4 with All Extensions
WYSIWYG Web Builder is a software that allows you to create web pages without coding. WYSIWYG stands for What You See Is What You Get, which means that the web page will look exactly the same as the design you create in the program. WYSIWYG Web Builder has many features and tools to help you create professional and responsive web sites, such as layout grids, flexbox, CSS grids, animations, transitions, forms, slideshows, galleries, navigation bars, and more.
WYSIWYG Web Builder 15.0.4 is the latest version of the software, released on September 1, 2023. It includes several bug fixes and improvements, such as:
- Improved support for Google Fonts
- Added support for Bootstrap 5
- Added option to export pages as PDF
- Added option to insert Font Awesome icons
- Added option to use custom HTML code in text objects
- Improved compatibility with WordPress themes
WYSIWYG Web Builder also has a large collection of extensions that you can use to enhance your web pages with additional functionality and features. Extensions are add-ons that can be installed separately from the main program. Some of the extensions are free, while others are paid or require a donation. There are over 250 extensions available for WYSIWYG Web Builder, covering various categories such as:
- Content management systems (CMS)
- E-commerce and shopping carts
You can find and download the extensions from the official website of WYSIWYG Web Builder. You can also browse the online gallery of web sites created by other users using WYSIWYG Web Builder and its extensions. You can get inspired by their designs and learn from their techniques.
If you want to create your own web pages without coding, WYSIWYG Web Builder 15.0.4 with all extensions is a great choice. You can download a free trial version of the software from its website and try it for yourself. You can also purchase a full license for $49.95 USD, which includes free updates for one year and access to all extensions.
``` Here is the continuation of the HTML article on the topic: "WYSIWYG Web Builder 15.0.4 with All Extensions" ```html
In this article, we will show you how to use WYSIWYG Web Builder 15.0.4 with some of the most popular extensions to create a simple but attractive web page. We will use the following extensions:
- CMS Tools: This extension allows you to create and manage dynamic content on your web page, such as news, blogs, comments, etc.
- PayPal Mini Cart: This extension allows you to add a shopping cart and a PayPal button to your web page, so you can sell your products or services online.
- Lightbox: This extension allows you to display images and videos in a modal window with a nice transition effect.
- Responsive Menu: This extension allows you to create a responsive navigation menu that adapts to different screen sizes and devices.
Before we start, make sure you have downloaded and installed WYSIWYG Web Builder 15.0.4 and the extensions from the official website. You can also watch the video tutorials on how to use the software and the extensions on the website or on YouTube.
Step 1: Create a new project
Open WYSIWYG Web Builder and create a new project. Choose a template or a blank page as you prefer. We will use a blank page for this example. Set the page properties as follows:
| Description | A simple web page created with WYSIWYG Web Builder 15.0.4 and extensions |
| Keywords | wysiwyg, web, builder, extensions, cms, paypal, lightbox, responsive |
| Layout mode | Centered horizontal and vertical |
| Favicon | Select an image file from your computer or use the default one |
Save your project as mywebpage.wbs.
Step 2: Add a header and a footer
Add a header and a footer to your web page using the Layout Grid tool. Drag and drop the tool from the toolbox to the top and bottom of the page. Set the properties of the header grid as follows:
| Height mode | Absolute (pixels) |
| Absolute height | 100 pixels |
| Background color | #333333 (dark gray) |
| Margins (top, right, bottom, left) | All 0 pixels |
| Paddings (top, right, bottom, left) | All 10 pixels /tr> |
/tr>
/table>
Add a text object to the header grid and type "My Web Page" as the text. Set the properties of the text object as follows:
Property /th>
Value /th>
/tr>
Name /td>
/tr>
/tr>
/tr>
/tr>
/tr>
/tr>
/tr>
/table>
Add an image object to the header grid and select an image file from your computer or use the default one. Set the properties of the image object as follows:
Property /th>
Value /th>
/tr>
Name /td>
/tr>
Width /td>
/tr>
Height /td>
/tr>
Alt text /td>
/tr>
Align /td>
/tr>
/tr>
/table>
Move the image object to the left of the text object and adjust the spacing as you like. You can also use the Arrange tool to align the objects vertically.
Set the properties of the footer grid as follows:
| Height mode | Absolute (pixels) |
| Background color | #333333 (dark gray) |
| Margins (top, right, bottom, left) | All 0 pixels |
| Paddings (top, right, bottom, left) | All 10 pixels /tr> |
/tr>
/table>
Add a text object to the footer grid and type " 2023 My Web Page. All rights reserved." as the text. Set the properties of the text object as follows:
| Font color | #FFFFFF (white) /tr> |
/tr>
/table>
You have now added a header and a footer to your web page. You can preview your web page in your browser by clicking the Preview button on the toolbar.
Step 3: Add a main content area and a sidebar
Add a main content area and a sidebar to your web page using the Layout Grid tool. Drag and drop the tool from the toolbox to the middle of the page, between the header and the footer grids. Set the properties of the content grid as follows:
| Type | CSS Grid (Flexbox) /tr> |
| Gutter size | 20 pixels /tr> |
| Height mode | Absolute (pixels) /tr> |
| Absolute height | 800 pixels /tr> |
| Margins (top, right, bottom, left) | All 0 pixels Here is the continuation of the HTML article on the topic: "WYSIWYG Web Builder 15.0.4 with All Extensions" ```html |
| Paddings (top, right, bottom, left) | All 10 pixels |
| Background color | #F0F0F0 (light gray) |
The content grid will have two columns: one for the main content area and one for the sidebar. You can adjust the width of each column by dragging the column divider in the grid. We will set the width of the main content column to 70% and the width of the sidebar column to 30%.
Add a main content area
Add a text object to the main content column and type "Welcome to My Web Page" as the text. Set the properties of the text object as follows:
| Font color | #000000 (black) |
Add another text object below the welcome text and type "This is a simple web page created with WYSIWYG Web Builder 15.0.4 and extensions. You can learn more about the software and the extensions from their official website." as the text. Set the properties of the text object as follows:
| Font color | #000000 (black) /tr> |
/tr>
/table>
Add a link object below the intro text and type "Visit WYSIWYG Web Builder website" as the link text. Set the properties of the link object as follows:
Property /th>
Value /th>
/tr>
Name /td>
/tr>
/tr>
/tr>
/tr>
/tr>
/table>
You have now added a main content area to your web page. You can preview your web page in your browser by clicking the Preview button on the toolbar.
Add a sidebar
Add a text object to the sidebar column and type "Latest News" as the text. Set the properties of the text object as follows:
| Font color | #000000 (black) /tr> |
/tr>
/table>
Add a CMS View object below the news title and select CMS Tools from the list of extensions. Set the properties of the CMS View object as follows:
| < Here is the continuation of the HTML article on the topic: "WYSIWYG Web Builder 15.0.4 with All Extensions" ```html | Extension | CMS Tools |
| Item layout | Title, date, summary, read more link |
| Summary length | 100 characters |
| Read more text | Read more... |
| Text color | #000000 (black) /tr> |
| Link color | #0000FF (blue) /tr> |
/tr>
/table>
The CMS View object will display the latest news items from the CMS Tools extension. You can add, edit, or delete news items from the CMS Admin object, which you can access from the Extensions menu. You can also customize the appearance and behavior of the CMS View object from the Properties panel.
Add a text object below the CMS View object and type "Shopping Cart" as the text. Set the properties of the text object as follows:
| Font color | #000000 (black) /tr> |
/tr>
/table>
Add a PayPal Mini Cart object below the cart title and select PayPal Mini Cart from the list of extensions. Set the properties of the PayPal Mini Cart object as follows:
| < Here is the continuation of the HTML article on the topic: "WYSIWYG Web Builder 15.0.4 with All Extensions" ```html | Extension | PayPal Mini Cart |
| Cart language | English /tr> |
/tr>
/table>
The PayPal Mini Cart object will display the items that the user has added to the shopping cart from the PayPal Mini Cart extension. You can add, edit, or delete products from the Products Manager, which you can access from the Extensions menu. You can also customize the appearance and behavior of the PayPal Mini Cart object from the Properties panel.
Add a button object below the PayPal Mini Cart object and type "Checkout" as the button text. Set the properties of the button object as follows:
| Font color | #FFFFFF (white) /tr> |
| Background color | #00FF00 (green) /tr> |
| Action type | Goto URL (PayPal) /tr> |
