Congratulations on progressing to our practical training in the essential skill of creating your websites. As a Premium member of Wealthy Affiliate you will have access to the tools and hosting required for all websites.
In Wealthy Affiliate go to Websites and select Build a Website, select Free Domain and enter a name for your website, without any spaces between the words (e.g. colintrialsite).
Enter your site Title (e.g. Colin Trial Site)
Choose the GeneratePress theme and select Build my website. Your website will be live in about 30 seconds.
Log in to your website, select Login Now.
Select Plugins from the WordPress menu and click on Add New.
In the search plugins box type GenerateBlocks and select GenerateBlocks by Tom Osborne. Click Install Now and click Activate.
Go to Pages in the WordPress menu and click Add New. The instructions shown are for the WordPress Block editor, ignore these as we use GenerateBlocks. You are now at the start point shown in the video tutorials.
Add a title for your page.
NOTE: When you log in in future you will go to Pages, List all Pages. Select your working page and click Edit.
Content Exercise One
Our first short exercise introduces the Container Block, Grid Block and the Headline Block, plus some design facilities/features we have within these blocks. You will be shown how to create the following section:
This is the Headline for my trial tuition website
We can add a paragraph or two and the width of the heading and our paragraphs will be within the 55% width that we set with the Grid container width setting.
This second paragraph has been added. We have many options such as the font family, the font size (this is 21px), line height, letter spacing, text colour etc.
If Page is underlined at the top right column click on Block. It will then state no blocks found.
Select the + sign at the right side of your content area. This is a white + sign within a black background.
Type Container in the search box and select the blue Container block, NOTE we only use the blocks symbols coloured blue.
The options column on the right of your screen will show Container = Full Width, Inner Container = Contained Width, Container Width = 1200px, Tag Name = div.
Select Spacing in the options column and change the Padding to 100 Top, 0 Right, 100 Bottom and 0 Left.
Select Colors and choose Background Color. Choose a color and then choose the depth of color by moving the opacity slider.
Select Backgrounds and switch on Use Gradient. You can now choose the direction of the gradient using the direction slider (goes through full 360 degrees).
Click on the + sign within the container to add a block and type Grid. Select the single box (the first one).
Click on the + sign within the grid (the top one) and in the options column change the Container Width from 100 to 55.
Select the + sign that is within the grid container (the top one) and type Headline (be sure to choose “Headline” in blue and not “Heading”.
Change H2 to H1 (by clicking H2 and selecting from the drop down list) and type in your own headline text. We now have the options to change the look of our headline in many ways. Select Typography and change the Weight from Default to one of your choosing from the drop down list of weights.
Turn on Advanced Typography where you can change the Font Size to any size you choose. You can also change the Letter Spacing and the Color of the heading text (under Colors).
You can now choose to add a paragraph or two beneath the headline. Select the + sign and choose Headline. This time change the H2 to P Paragraph. Add a paragraph or two of text.
We are now going to change the position of the headline. Choose the Block Navigation which is three horizontal lines found at the top of your screen towards the left and is called List View. Click on the container that is above the grid in the drop down.
Select Spacing and change the padding settings to 20 Top and 20 Bottom, this will put our headline closer to the top of the container.
Finally for this exercise we are going to put a border around our work. Select Border Size and enter 4 in the first box, click the broken circle icon at the right and all of the boxes will change to 4. There will now be a border on all four sides of our shaded area.
Select Border Radius and enter 15 in T-Left box. You will see the top left corner is now rounded. By clicking the broken circle icon 15 will be entered in all four boxes and all of the border corners will be rounded.
Content Exercise Two
In this exercise we are going to create the Menu Layout from Grill as shown in the video GenerateBlocks – How to Replicate #3: Menu Layout from Grill. We will use a background colour in place of the image from the original. We will not be adding the effects included at the end of the video as these require the Pro version of GenerateBlocks. Your final creation will be as follows:
Our Starter Menu Items
Our Starter Menu Items
Our Starter Menu Items
You can check with the video if unclear. Commence this exercise with a new outer container by clicking the white + within a black background. If this does not show at the bottom right of the work area click anywhere in the area close to the bottom of the work area.
Having clicked the white + within a black background, select Container. Change the Container Width to 1000. You will have Container = Full Width, Inner Container = Contained Width and Container Width = 1000.
Click the + sign within the container and go to Spacing, Padding and change Top to 60 others to 0
Click + sign within the container (it sometimes needs two clicks to reach the option) and select the Grid Block, choose the block with two equal halves (50/50)
Select the first container and set Container Width to 75, select the smaller container and set Container Width to 25.
Select the first container and go to Colors, Background Color and select Grey.
Go to Spacing, Padding and enter 90 Top and 90 Bottom.
Go to 2nd container and add a Headline block, Change H2 to H3, Type Starters, Go to Spacing, Padding and add 10 Top, 10 Bottom and 50 Left, 50 Right.
Click on the word Starters and select Align text centre (next to H3 in the selection row).
Go to Colors, Background and select the Gold Colour, Go to Text and select the White Colour.
Click on List View (3 horizontal lines in line at top left of screen) and click on the Grid wrapper, set Horizontal Gap to Zero. Select Vertical Alignment and set to Centre.
We will be using the List View to select the areas we change, the area selected from the list view will have a blue box around it, so we can check we are in the right area. Within the List View select the container that holds the Headline Block (the block that has “Starters”, go to Spacing, Margin and enter -50 (negative 50) to Left. This will create the overlap of our coloured background.
Our website will be viewed on Desktop, Tablet and Mobile. We will have to make some of the mobile entries different to the Desktop. At the top of the options (right side of screen) you will see we can move from Desktop to Tablet or Mobile. At this stage we want to make a few adjustments to the Mobile view.
Change to the Mobile screen and select the container that has the background (grey) colour. Go to Spacing, Padding and put 70 Top and 70 Bottom.
Select the container with the Headline Block in it and go to Spacing, Margin and remove the change the negative figure in Left to 0 and put -25 (negative 25) as Top Margin.
Select the Headline Block and go to Spacing and turn on Inline Width.
Go back to the Headline Container Block and Align Centre the entire container, Go to Typography and turn on Show Advanced Typography and change the Font Size to 25.
Back to Desktop
Save your work, either Save Draft or Publish. Go to the Headline Block, Spacing, Margin and set Bottom to 0.
We now want to add a new Full Width Container Block by clicking the white + in black background at bottom right of our work space. If not showing click within the space at the bottom of your space and the white + sign should appear.
Having added a new Container Block go to Spacing, Padding and put 20 all round.
Add a Grid selecting the 75/25 option. Select the first container inside the grid and change to 80, select the second container and set to 20.
Inside the bigger container add a Headline Block and change H2 to P Paragraph. Add some content (menu description) and set the Spacing, Margin, Bottom to 0.
Inside the smaller container add a Headline Block and change H2 to P Paragraph. Add the price of the dish (£5 in my example). Go to Typography and turn on Show Advanced Typography and set the Font Size to 23.
Go to Spacing, Padding and add 12 all round. Set Margin, Bottom to 0 and Border Size to 2 all round.
Turn on Inline Width. Go to Colors, Background Color choose Black, Text Color choose White.
Select the block that holds the price and Text Align to the Right. Select the grid that holds these items, Vertical Align to Centre.
Back to Mobile Settings
In Mobile, select the container with the menu description and make Container Width 80. Select the container that holds the price and make Container Width 20.
Select the Grid wrapper and reduce the Horizontal Gap to 10.
Return to Desktop
Back on the Desktop, select the container holding the menu description and click the + sign in the line of options to duplicate the item. Select the container holding the price and duplicate this. Repeat the duplication of these two containers so you have 3 lines of items/prices.
Go to the container holding the price on the last line. Click on the price block background and change Background Color to White and Text to Black.
Select the Grid wrapper and set the Vertical Gap to 30.
Select the top container which holds the background grey block as well as the “Starter” word. Click on the three vertical dots at the right end of the line of options and select Duplicate. Use the arrows within the line of options to move this duplicate container to the bottom of your sheet.
Select the container that holds the grey background and use the arrow to move it down. This will change the order of the containers in this line i.e. “Starters” will now be to the left of the grey background.
Select the Container holding “Starters” headline and remove the negative left margin.
Go to the container with the grey background and set the left margin to -50 (negative 50)
To bring “Starters” onto the top of the grey, select the container holding “Starters” and go to Spacing, Outer z-index and set to 99.
Final Adjustments to the Mobile Settings
Change to Mobile and you will see the headline is above the grey background. Select the container holding “starters” and set the Order to 2
Back to Desktop and save your work (either Save draft or Publish as before).
Further Videos From GenerateBlocks
There are further videos available on YouTube. Check those that have been uploaded by Mike Oliver Design and also GenerateBlocks.
To become really expert in GenerateBlocks Pro, Mike Oliver has produced a course which not only provides everything about design and site building, it also gives you a personal link to Mike should you require any assistance. I consider this a must if you are going to offer to build websites for clients.