How to Make an Amazing Enfold Home Page

(Last Updated On: September 24, 2018)

Enfold tips & tricks

Use the numbers below to find a particular section telling how to use a particular Enfold feature.

5. Configure WordPress
6. Deleting a template
7. Changing  a picture in a template
8. Adding HTML code within a page
9. Adding CSS code also Removing Enfold logo from a page
10. Removing data from footers below page
11. Hyperlinking to middle of Enfold page

1. Start with an Enfold header

The purpose of my Enfold home page is to promote sales of the training manual, How to Serve Customers with Disabilities. So, I decided to have the manual displayed in the Enfold header. It would fade in every 3 seconds along with images of people with disabilities.

(Note that your initial Enfold setup could have made your page setup system a bit different from the steps below. In that case, read this tutorial. )

Expand the YouTube video below to full screen and watch it. Pause frequently. Take notes. Then create the header.

If that did not work for you, follow these steps:

a. Upload a demo

Go to Enfold Child > Demo Import. Click Online Demo beside an image such as Construction Demo.

This will upload a demo Enfold website. Your job is to delete elements or else change them to the corresponding element for the website you are trying to create. The Construction Demo header is illustrated in the video below.

b. Create header images

If you want to follow my example, use Photoshop or GIMP to create 3 header images. I made them 1310 x 580 pixels.

Later each image will fade into the header before being replaced by the next image. Each image will be displayed for 3 seconds.

c. Click “Edit Frontpage”

After you have logged into your account, click the Edit Frontpage link at the top of the page.

d. Layout Elements at 1/1

Click on the 1/1 layout element to indicate that each header image will be a single image the width of the page.

e. Special Heading content element

Click Content Elements tab & then drag the Special Heading icon into the Fullwidth Easy Slider.

f. Add header pictures

Click on the tiny triangle within the Fullwidth Easy Slider. Click Add Multiple Images to add your 3 header images. Click the X’s to delete the old construction business images.

Change the page using your intuition. I chose Fade for the Slideshow Transition and Hidden for Slideshow Control Styling. Then I clicked Save.

Check your header to make sure it works.

2. H1 heading above a header

Make this video full screen. Watch it. Pause frequently & take notes.

3. How to add columns of text

Expand video below to full screen. Watch it. Pause often and take notes.

4. How to add a horizontal menu to the top of the page

Watch the video below. Pause often and take notes.


5. Configure WordPress

  1. In the WordPress dashboard, go to Settings > General.
  2. Enter site name & tagline and then click Save.
  3. Go to Settings > Permalinks. Select Post Name & click Save.
  4. Go to Appearance > Customize
    1. Add a site title, a tagline and a 512 x 512 image that identifies your website among all of the open websites.

Changing page elements

Each of the various page elements is called a template.

6. Deleting a template

Hover over the template and click on the X in the upper-right-hand corner. In the example here, clicking the top X would delete both the picture and the text below it. Clicking the X beneath that would delete the picture only.

7. Changing a picture in a template

Click on the picture. This will give you a larger picture. Click Insert Image.

Drag & drop the new picture onto the screen, adjust the size and click Insert. Save & then update the page.

Hover over the text and click the X to delete it.

8. Adding HTML code within a page

  • Clone a column that has an image in it
  • Keep clicking the greater than sign in the cloned column until it becomes 1/1.
  • Delete the image
  • Change title if you want one.
  • Click on the box with the text
  • Remove the text
  • Click on the text tab
  • Add the HTML code to the box
  • Save your page.


9. Adding CSS code

Occasionally you will search how to make a change and some tech support person will tell you to add a certain CSS code to your source code. For instance, the CSS code below will remove the Enfold logo from above the header in your web pages.

.logo {
visibility: hidden !important;
}

To do that:

    • Go to Appearance > Themes
    • Among other things, Enfold Child Theme shows up.
    • Click Customize
    • Click on Additional CSS
    • Insert the CSS code
    • Click Publish
    • Go to an Enfold page that was already open on your desktop
    • Notice the Enfold logo at the top
    • Refresh to page and the logo will have disappeared.

The CSS code below will make the letters in a submenu white.
.sub-menu a {
color: white !important;
}

10. How to remove data below page

The data below your page is most likely the footers that came when you originally started the page. To delete them click on Theme Options in your horizontal menu. Click on Footer and then the dropdown arrow under Default Footer & Socket Settings. Select Don’t Display the Socket & Footer Widgets.

 

 

 

 

Leave a Reply

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