This website was created by Jonathan Beacher at AtlantaWebDesignGA.com
email firstname.lastname@example.org mobile 404-939-0449
Divi Page Builder: Your WordPress website is using advanced software that allows sophisticated editing of web page layouts without needing to know HTML and CSS coding. The Divi Page Builder has many modules that can add functionality to your web page. You can watch instructional videos to learn how to use the Divi Builder and its modules here; Divi Builder Documentation
Danger: If you edit an existing page that has been published using the Divi Builder, do not click the green Use The Default Editor button because that will remove the Divi Builder layout from that page, destroying the original page layout once you Update the page. In the event you need to restore a page, in the right column of any page editor under Revisions you can click Browse and restore a page to any previous version that existed in the past.
Create A New Project
- In WordPress Dashboard, in left column, hover Projects then choose Add New.
- The editor opens with a new project page. In top box type the project title, city, state.
- Click the purple button: Use The Divi Builder
- Click Load From Library
- Click Add From Library
- Find New Project Layout and click Load
- The project layout is now loaded into your new project page, ready to fill in.
- You do not need to edit the Project Title, as it automatically becomes the WordPress page title you entered in step 2.
- In left column in Project Text click the three-bar symbol to edit. In this module, enter your article describing the project.
- At the bottom of the Project Text you can optionally add a sales slogan, like most other projects have. If so, highlight that text, and in the second line in the text editor toolbar, change paragraph to Heading 4 which is the format used in other projects.
- The layout includes both an automated photo Project Slide Show and a Gallery Grid. The same photos can be used in both, or different photos, or, you can delete one section or the other if desired.
- In Project Slideshow module, click the three-bar symbol to edit it.
- Click Update Gallery. Delete the IDC logo placeholder already in that gallery, then click Add To Gallery.
- Under Media Library tab, select the photos if they already exist in the WordPress Media Library — OR — click Upload Files tab to select photos on your local PC to upload into the Media Library.
- Click one or more photos to select them, then click the Add To Gallery button in lower right.
- Now you can drag and drop photos to reorder them, if needed. When ready click the Update Gallery button in lower right.
- Note: When you upload photos, for web use they should be sized to be no larger than 1200px wide for horizontal photos or 800px tall for vertical photos. After uploading a photo, you can edit it in the Media Library and use the Scale function to resize the photo, then save it. Photos smaller than those sizes may be used but much smaller will be fuzzy when viewed on large screen.
- Note: in the Project Slideshow, if you include vertical photos, when they display they will push the content below them down, and when the next horizontal photo appears, the content will move back up. It may be wise to avoid this behavior by not including verticals in the slideshow, and showing them only in the Gallery Grid. In the Grid, thumbnails are displayed so verticals and horizontals are fine — when the user clicks on a photo in the grid, the whole image will display full screen.
- In Gallery Grid module, click the three-bar symbol to edit it.
- Choose photos by repeating steps 12 to 15.
- You do not need to edit the Project List module, it is automated.
- In right column, under Project Categories, click either Hotel Renovation or Resort Renovation category.
- Scroll down right column and under Featured Image click to choose one image that will be displayed when this project appears on another page listing all projects.
- If desired, click atop right column under “Published On” the Edit button to change the date and time that this project was published on the website. Projects appear in the website with the most recent projects displayed first, so changing the date and time will change the order in which all projects display.
Edit Home Page Slides (Slider)
- In top section in the dark grey bar named Home Page Slides click the three-bar symbol to edit.
- The slider module will open and show a list of the slides that exist.
- Click the + box at bottom named Add New Slide to add a slide.
- The Heading is optional. If text is entered in this box it becomes the large headline over the slide.
- Button Text is optional. When clicked, it takes the user to the Button URL where you enter an address to a web page on the site.
- Background Image is the slide that fills that entire screen. Please use a slide that is 1300px x 800px. All the sides should be very similar in size width/height ratio; if not, then some may be cropped in an undesirable way.
- Background Image Position allows you to compensate which part of the slide shows. You can align the image to the top, left, right, bottom, etc. (Please note that the slide displays differently on different size device screens, so preview on several devices to see the overall results.)
- Background Color is only used if you choose not to use any background slide but rather a solid color background.
- Slide Image is an optional 2nd smaller slide that will animate in over the background image. With Slide Image Vertical Alignment you can choose to align this in the center of screen or the bottom.
- Text Color will change the default white Heading color to a darker grey, useful when the background image is very bright. Also, atop clicking Advanced Design Settings provides other options, like changing the Heading color to any color you choose for this particular slide.
- Scroll down to the Content box where you can enter a few words, or sentence or two that will display in small type under the Heading.
- Please fill in the very last item Admin Label with a name that describes this slide. This only appears to you in the slide editor so you can remember which slide is which within the list of slides. If you forget to fill this in, it will simply default to “Slide.”