If you already have WordPress installed, it means that you meet the minimum server requirements and you can perfectly install this theme without any issues. To get the most out of your website though, you should get in touch with your web host and ask them if they meet the following criteria:
- PHP version 7.4 or greater.
- MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
- HTTPS support.
This theme requires our free Ignition framework plugin to be installed. Simply visit the Downloads area, download the Ignition Framework plugin, upload it through your Dashboard → Plugins → Add new and Activate it.
It really doesn’t matter if you install the theme or the plugin first. Just make sure to install both in order to get the whole functionality.
GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the block editor and vastly extending the potential of the new editor experience.
If you want to replicate our demo website you need to install it. Simply visit Plugins → Add new and search for “GutenBee”. Click on Install Now and then Activate it.
Contact Form 7 (Optional)
Contact Form 7 is a quite popular contact form plugin, installing it will ensure the contact form will appear when importing sample content. You can use any other third party plugin you wish though
Here is a video guide to help you install quickly your theme and Ignition plugin.
Installing the theme is a very simple process. Go to your WordPress dashboard → Appearance → Themes → Add new. Click Upload Theme, browse for the zip file and click Install Now to install it.
Once it has been installed click on the Activate link. That’s it! You can now start creating pages.
How to import the sample content
If you like what you see in our demo website you can simply import the sample content. This means that an almost exact replica of our demo website will be imported in your WordPress installation. Now all you have to do is simply replace the content of these pages with your content.
Check this video guide on how to import sample content:
- In your WordPress dashboard visit Appearance → Theme Options → Sample Content.
- Click Install and then Activate for each of the required plugins.
- Click the Get Started button and in the next screen the Import Demo Data button.
Web page loading times are greatly affected by the size of your images. For best results make sure to use images with the recommended dimensions as described below:
- Main post thumbnail: 870x580px
- Item: 615x 410px
- Large Item: 1170x780px
- Article Media 510x510px
- Mini-cart items 160x160px
Setting up the global sections of your website
It’s considered a good practice to set up the areas of your website that you won’t be editing a lot in the future, like the header and the footer.
As you can see in our demo website all pages have a Transparent page header featuring a background image and 3 main components:
- Top Bar
- Main Menu
In your WordPress dashboard click on Appearance → Customize → Top Bar. Here you have 3 content areas available for simple text or Shortcodes. Please refer to the Shortcodes section (# link) below for information regarding the shortcodes available.
The recommended maximum width of your logo is 160px. To upload your logo visit the Customizer through your WordPress dashboard Appearance → Customize → Site Identity. As you can see you can upload 2 logos. In this case we need to use the Alternative Logo upload field because we are currently using a Transparent header as set in the Customizer → Header → Layout → Header Type option.
For extensive information about creating navigation menus please check out our guide here.
You can create a special button-like menu item by setting a certain class to it. The class name is
nav-button and can be added as outlined in the Adding a custom class to a menu item section in our menu guide.
Header Background image
You can set a common background image for every page on your website through Appearance → Customize → Page title. Under the Colors section you can set a background color, a background image, an overlay color and also set the primary text color and the secondary text color.
In some cases, like in our demo website, you might want to have different background images on different posts, pages and custom post types (For this theme, the Accommodation post type).
Let’s see an example. Create or edit a page. On the right sidebar locate the Page Title Image field. Upload a new image and preview this page. As you can see we have successfully overridden the image set in the Customizer settings.
Please note: The purpose of the Transparent header option is to have your main header components (Top bar, Logo & Main Menu) on top of a background image or background color which means that you have to set on in the Customize → Page title → Color section.
The footer area is a standard 4-column widgetized area that can be populated with widgets through Appearance → Widgets. You can also remove the credits at the very bottom of this area by visiting Appearance → Customize → Footer → Content section. You can also adjust the colors by setting a background color & image and also modify the border, title and text colors.
Setting up the pages
Let’s start with the Accommodation section. In a new browser tab visit this page, we will use it as a point of reference. Now back to our WordPress dashboard → Accommodation → Add new.
If you want a layout similar to our demo select the Full width narrow page template from the Post Attributes section.
Let’s replicate the header. We need to add a new header image. On the right sidebar locate the Page Title Image option and upload your image. Also, in the Excerpt field add any important details for this room like the capacity, dimensions of the room etc. This will appear exactly below the room’s title.
If you offer various types of accommodation (in our demo website we have Rooms and Suites) you can categorize them using the Categories taxonomy. Create your taxonomy terms and assign your pages to them as needed.
Please note: You also need to set a Featured image. We will disable its visibility through the Disable featured image for this Accommodation option but we will need it for the Accommodation archive page and the home page.
Create the content
Click on the + icon and search for Slideshow. The Slideshow GutenBee Block will appear. Select it and upload your images. You can add as many images as you want but you may want to keep them up to 5 for better page loading times. This block has several options available where you can adjust the slideshow speed, toggle the visibility of the arrows and dots etc.
As you can see in the demo page the width of this block is wider than the rest of the content (The content width is set by the page template Full width narrow). To achieve this effect simply wrap this block with a Group block as shown in the image below:
From the Group block settings simply select the Wide width option.
Next you will need to add a new GutenBee Container with 4 columns of the same width.
Inside you can add a GutenBee Icon Box.
After this section we have a GutenBee Heading
and GutenBee Paragraph block.
Next is a GutenBee Container with two columns. The first column has no blocks in it and has a background image applied to it. The second column has a GutenBee Heading and a list block with your amenities.
Below we have a GutenBee Paragraph and a Pull-quote block with the Solid color selected. You can add your testimonial text and citation there.
Following that, we have a table block with our custom rates and the Stripes style selected. The table block has also Fixed width table cells and a Header section.
Next is another GutenBee Heading and a list block with some additional info.
Towards the end we have another GutenBee Heading and a GutenBee Accordion block with some Frequently asked questions inside. This block has Collapse others on click selected to close other tabs when one is selected.
Finally we have another GutenBee Heading, a GutenBee Paragraph and a GutenBee Button.
Accommodation Archive Page
This page will serve as your main Room/Suite listing page. Let’s create a new page first from Pages→Add New. In that page you will need to add a GutenBee Heading and a GutenBee Paragraph block, with some introduction text for your listing items. Then add a GutenBee Post Types block and select Accommodation under post type and if you wish an Accommodation category.
Next we have a Pullquote block with some content and the Default style selected under the Styles tab.
Finally, we have again a GutenBee Post Types block following a GutenBee title and paragraph.
This is a plain page with some basic GutenBee blocks like GutenBee slideshow and GutenBee gallery. Start by creating a page from Pages→Add New. First, create a GutenBee container with two columns inside and in both columns add a GutenBee paragraph. Next we have a small set of a GutenBee title and paragraph and a GutenBee slideshow with some slides and autoplay enabled. You can select the image sizes you want your images to have from block’s Image Settings section. After the slideshow we have a small paragraph and a GutenBee divider with a custom style selected. Next, there is a Guttenbee Gallery with the Theme border style selected and the Columns Layout. We have 3 columns as default, but you can set your own preference.
Finally we have a set of GutenBee containers with two columns. One is reserved by a GutenBee Image while the other is reserved by a paragraph text.
This is you main blog page. You can Create a new page and set it as your blog page under Settings→Reading. You can customize it from Customize→Blog under the Archive section.
Create a new page (Pages →Add new) and set the Full width Boxed template under Document’s Page Attributes. Start by adding a simple GutenBee image, and set the image size to Full size. Then add a GutenBee Container block and set two columns for it.
First column must have 33.333% in width, with a simple GutenBee Heading inside, while the second one has a plain GutenBee Paragraph with the core list block after it. Finally we have a GutenBee Paragraph block but with a background color set for it under Block Appearance.
In a new page with the Full width Boxed template selected under Document’s Page Attributes, add a GutenBee Container with two columns. Both columns have a GutenBee Paragraph, but the first one has the Drop Cap selected.
Next in order to create a menu listing, add a GutenBee Heading with center text align and then a GutenBee Food Menu block with two or more columns selected.
Start filling in the information required from each GutenBee Food Menu Item, such as the dish’s image, name, price and description, add as many items as you like and save.
Create a new page and select the Full width boxed template under the Document’s Page Attributes. Add a GutenBee Image block with the Full image width selected, then add a GutenBee Container block and set two columns for it. First column has a 33,333% width and a simple GutenBee Heading inside, while the second column has a GutenBee Paragraph, and sometimes a smaller single line GutenBee Paragraph underneath with a different background color under Block Appearance.
Create a new page with the Full width Boxed template selected under the Document’s Page Attributes. Add a GutenBee Gallery block and select the gallery type as Justified, with a height of 440px and a margin of 10px. Set the style of the gallery to Default.
This will serve as your contact page, with a contact form, map and some details for your business. We are using Contact Form 7 plugin to display a contact form, but you can use any plugin you wish.
Create a new page from Pages→Add New. Under Page attributes set the template to Full width boxed, and then under Layout Options check the Hide title when viewing this Page option.
Add a GutenBee Maps block and set your location into it.
After that add a GutenBee container block with two columns. The first can have a shortcode block with the shortcode from your Contact Form 7 (or any other plugin) while the second column one has a different background color from Color Settings and a width set to 33.333%. Also we have some padding set to 30px. Inside you can add GutenBee Icon blocks, Heading and Paragraph blocks. Use the GutenBee spacer to create spaces between items.
Create a new page from Pages → Add New, then select from the right side under Page Attributes the Full width boxed template. Then from Page Settings check the Remove top/bottom content padding and set all other options to hide.
Add a new GutenBee Container block with Vertical Content Alignment set to bottom and check Enable theme grid option. Select a background image under Block Appearance and an overlay background color with some transparency. Add a simple GutenBee Paragraph inside the container and set a custom colors under Block appearance. Add some padding to it, and set the margin to 0.
Next, create a GutenBee Heading and after it add a GutenBee Paragraph. After this section you will need to add a GutenBee Container with a background color set under Block Appearance.
Create two separate GutenBee Spacer blocks and in between add a GutenBee Post Type block with the Accommodation post type selected.
Then create a new GutenBee Container again and set a background image and a minimum height of 500px. Container must have Enable theme grid and the Parallax option selected. Also to make any content appear in the bottom of the container select the Vertical Content Alignment to bottom.
Inside add a GutenBee Paragraph block with custom colors, and some padding (15px).
Continue adding a Pull-quote block with the Default style selected and your content inside.
After, add a GutenBee Post Type block with Accommodation selected, and a base category.
Save – publish the page and set it as your FrontPage from Settings→Reading.
[ignition-custom-menu name=”your menu name”]
Create a Custom menu from Appearance→Menus, then use this shortcode to display it in any location you want. Primary used to display Social icons in the top bar.
- Create New Menu instead from Appearance→Customize→Menus.
- To add a social media link to the menu, click + Add Items.
- Next, select the Custom Links menu item type.
- Add the address for one of your social media profiles in the URL field. For example, if the link to your Facebook profile is https://www.facebook.com/cssigniter, you would copy that into the URL field.
- You can also enter a name for the social media profile in the Link Text field. Once you’re ready, click Add to Menu.
- Repeat the above steps until all the social media profiles you wish to use have been added to the menu.
- Finally, click Publish.
Simple site search field, you can use it under any content area in the Customizer.
Supported attributes are:
- format (optional): The date format, by default follows the one set under Settings → General.
Use this shortcode in any Customizer content area to display today’s date.
Supported attributes are:
- id (optional): The id of the location to display the weather from, default is the one set under the Customizer Weather options.
- units (optional): C or F units to display.
This will display the weather inside any content area in Customizer. You will need to setup the API first from Customize→Utilities→Weather. The location ID number can be found by visiting OpenWeatherMap.org and searching for your city. Leave this blank and the default ID from Customize→Utilities→Weather will appear.
This shortcode will display the minicart. Use it under Customize→Top Bar in any content field you wish.
Supported attributes are:
- display (optional): accepted values are flags, text or both
- type (optional): accepted values are dropdown or menu
- untranslated (optional): accepted values are hide or home
We support WPML and Polylang. You can either use their default language switcher or our shortcode one.
Theme provides several page templates you can select from Page Attributes. Depending on your scenario you can select:
- Default template: This is the main template, you can start building anything using this one
- Content / Sidebar: This page will always have the sidebar on the right (Same as default page template)
- Sidebar / Content: This page will have the content always on the left
- Full width: This will make your page Full width, covering from one side of the screen to another
- Full width boxed: This will have the page Full width but inside the container scope. You can control the scope from Customize→Site Options→Layout options
- Full width narrow: This is the same as Full width boxed, but it will add some padding making the content area a bit narrower
All pages have a generic set of options. These can be changed under the Page Settings section when editing each page.
- Remove top/bottom content padding: This will allow the content to have or not some extra padding from header and footer
- Disable featured image for this Page: You can select to hide the featured image in this single page. Featured image will appear in your listings though
- Header Type: Select transparent or opaque header type. You can control the color settings for the normal and transparent one from Customize→Header→Colors
- Show Page Title with Background: This will show or not the hero section with the page title and a background
- Show Normal Page Title: Hide or show the normal page title
- Show Normal Page Subtitle: Hide or show the normal page subtitle (if any)
- Show Breadcrumbs: Show or hide breadcrumbs for this page.
All settings are inherited from Customizer. So you can actually set some global settings and if you wish change certain pages to have different behavior.
This theme supports WooCommerce, so you can create an eCommerce experience for your visitors.
Assign a Shop page
Before any other step you will need to create a new page from Pages→Add new and then select it as your Shop page.
Customize the Shop page
You can control the Shop listing page and product categories from Customize→WooCommerce→Product Catalog. Here you can select whether you want to show categories as items in your shop and product category pages as well as the column and row number for each page.
You can also set a second image to appear when hovering over your product. The first – default one will be the featured image, while the second will be the first image item from your product gallery.
Here you can also modify the shop layout to have a sidebar, and the position of that sidebar in relation to the content.
You can hide or show the related product section under Customize→WooCommerce→Single Product. There you can also control the number or up-sells and related products you want to display.
The theme provides special widget areas for your Blog posts and archives, pages and shop. You can use a plugin/module like Jetpack’s widget visibility to hide or show widgets for certain pages or posts or products.
Page builder Support
Aegean Resort works seamlessly with popular page builders like Elementor, Divi, Beaver builder and more to cater to the needs of those who like to build things visually.
If you need help during the initial installation and setup of this theme, feel free to get in touch and we will be right there for you within 24 hours to help
Theme installation service
If time is of essence, we offer a theme installation fee for an one-off low fee of $69. Contact us here